Fix #3140 UI Allow users to update teams based on updateTeams permiss…

…ion. (#3141) * Fix #3140 UI Allow users to update teams based on updateTeams permission. * Fix Failing test
open-metadata · Mar 4, 2022 · e3001e5 · e3001e5
1 parent 40d3f5e
commit e3001e5
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 28 deletions.
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/RulesModal/AddRuleModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/RulesModal/AddRuleModal.tsx
@@ -115,6 +115,7 @@ const AddRuleModal: FC<AddRuleProps> = ({
                   </option>
                   <option value={Operation.UpdateOwner}>Update Owner</option>
                   <option value={Operation.UpdateTags}>Update Tags</option>
+                  <option value={Operation.UpdateTeam}>Update Teams</option>
                 </select>
                 {errorData?.operation && errorMsg(errorData.operation)}
               </div>

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx
@@ -100,7 +100,7 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
                 )}
               </div>
             ) : (
-              <Fragment />
+              <Fragment key={index} />
             )
           )}
         </div>

diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts
@@ -493,6 +493,7 @@ declare module 'Models' {
     UpdateLineage: boolean;
     SuggestTags: boolean;
     UpdateTags: boolean;
+    UpdateTeam: boolean;
   }
   export interface EditorContentRef {
     getEditorContent: () => string;

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.test.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { findByTestId, fireEvent, render } from '@testing-library/react';
+import { findByTestId, render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import UserCard from './UserCard';
@@ -72,10 +72,6 @@ describe('Test userCard component', () => {
     const remove = await findByTestId(container, 'remove');
 
     expect(remove).toBeInTheDocument();
-
-    fireEvent.click(remove);
-
-    expect(mockRemove).toBeCalled();
   });
 
   it('If dataset is provided, it should display accordingly', async () => {

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
@@ -16,7 +16,10 @@ import { capitalize } from 'lodash';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Avatar from '../../components/common/avatar/Avatar';
+import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import { SearchIndex } from '../../enums/search.enum';
+import { Operation } from '../../generated/entity/policies/accessControl/rule';
+import { useAuth } from '../../hooks/authHooks';
 import { getPartialNameFromFQN } from '../../utils/CommonUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { getEntityLink } from '../../utils/TableUtils';
@@ -46,6 +49,7 @@ const UserCard = ({
   onSelect,
   onRemove,
 }: Props) => {
+  const { isAuthDisabled, isAdminUser, userPermissions } = useAuth();
   const getArrForPartialName = (
     type: string
   ): Array<'service' | 'database' | 'table' | 'column'> => {
@@ -169,17 +173,28 @@ const UserCard = ({
               }}
             />
           ) : (
-            <span
-              data-testid="remove"
-              onClick={() => onRemove?.(item.id as string)}>
-              <SVGIcons
-                alt="delete"
-                className="tw-text-gray-500 tw-cursor-pointer tw-opacity-0 hover:tw-text-gray-700 group-hover:tw-opacity-100"
-                icon="icon-delete"
-                title="Remove"
-                width="12px"
-              />
-            </span>
+            <NonAdminAction
+              html={<>You do not have permission to update the team.</>}
+              permission={Operation.UpdateTeam}
+              position="bottom">
+              <span
+                className={classNames('tw-h-8 tw-rounded tw-mb-3', {
+                  'tw-opacity-40':
+                    !isAdminUser &&
+                    !isAuthDisabled &&
+                    !userPermissions[Operation.UpdateTeam],
+                })}
+                data-testid="remove"
+                onClick={() => onRemove?.(item.id as string)}>
+                <SVGIcons
+                  alt="delete"
+                  className="tw-text-gray-500 tw-cursor-pointer tw-opacity-0 hover:tw-text-gray-700 group-hover:tw-opacity-100"
+                  icon="icon-delete"
+                  title="Remove"
+                  width="12px"
+                />
+              </span>
+            </NonAdminAction>
           )}
         </div>
       )}

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.test.tsx
@@ -213,16 +213,18 @@ describe('Test Teams page', () => {
     expect(await findByTestId(container, 'add-user-modal')).toBeInTheDocument();
   });
 
-  it('Should have 2 tabs in the page', async () => {
+  it('Should have 3 tabs in the page', async () => {
     const { container } = render(<TeamsPage />);
 
     const tabs = await findByTestId(container, 'tabs');
     const user = await findByTestId(container, 'users');
     const asstes = await findByTestId(container, 'assets');
+    const roles = await findByTestId(container, 'roles');
 
-    expect(tabs.childElementCount).toBe(2);
+    expect(tabs.childElementCount).toBe(3);
     expect(user).toBeInTheDocument();
     expect(asstes).toBeInTheDocument();
+    expect(roles).toBeInTheDocument();
   });
 
   it('Description should be in document', async () => {

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
@@ -40,6 +40,7 @@ import {
   getTeamDetailsPath,
   TITLE_FOR_NON_ADMIN_ACTION,
 } from '../../constants/constants';
+import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import { Team } from '../../generated/entity/teams/team';
 import {
   EntityReference,
@@ -56,7 +57,7 @@ import UserCard from './UserCard';
 const TeamsPage = () => {
   const { team } = useParams() as Record<string, string>;
   const history = useHistory();
-  const { isAuthDisabled, isAdminUser } = useAuth();
+  const { isAuthDisabled, isAdminUser, userPermissions } = useAuth();
   const [teams, setTeams] = useState<Array<Team>>([]);
   const [currentTeam, setCurrentTeam] = useState<Team>();
   const [error, setError] = useState<string>('');
@@ -76,7 +77,7 @@ const TeamsPage = () => {
 
   const fetchTeams = () => {
     setIsLoading(true);
-    getTeams(['users', 'owns'])
+    getTeams(['users', 'owns', 'defaultRoles'])
       .then((res: AxiosResponse) => {
         if (!team) {
           setCurrentTeam(res.data.data[0]);
@@ -97,7 +98,7 @@ const TeamsPage = () => {
   const fetchCurrentTeam = (name: string, update = false) => {
     if (currentTeam?.name !== name || update) {
       setIsLoading(true);
-      getTeamByName(name, ['users', 'owns'])
+      getTeamByName(name, ['users', 'owns', 'defaultRoles'])
         .then((res: AxiosResponse) => {
           setCurrentTeam(res.data);
           if (teams.length <= 0) {
@@ -242,6 +243,19 @@ const TeamsPage = () => {
             Assets
             {getCountBadge(currentTeam?.owns?.length, '', currentTab === 2)}
           </button>
+          <button
+            className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(3)}`}
+            data-testid="roles"
+            onClick={() => {
+              setCurrentTab(3);
+            }}>
+            Roles
+            {getCountBadge(
+              currentTeam?.defaultRoles?.length,
+              '',
+              currentTab === 3
+            )}
+          </button>
         </nav>
       </div>
     );
@@ -252,7 +266,9 @@ const TeamsPage = () => {
       return (
         <div className="tw-flex tw-flex-col tw-items-center tw-place-content-center tw-mt-40 tw-gap-1">
           <p>There are no users added yet.</p>
-          {isAdminUser || isAuthDisabled ? (
+          {isAdminUser ||
+          isAuthDisabled ||
+          userPermissions[Operation.UpdateTeam] ? (
             <>
               <p>Would like to start adding some?</p>
               <Button
@@ -335,6 +351,19 @@ const TeamsPage = () => {
       </>
     );
   };
+
+  const getDefaultRoles = () => {
+    if ((currentTeam?.defaultRoles?.length as number) === 0) {
+      return (
+        <div className="tw-flex tw-flex-col tw-items-center tw-place-content-center tw-mt-40 tw-gap-1">
+          <p>There are no roles assigned yet.</p>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
   const fetchLeftPanel = () => {
     return (
       <>
@@ -458,11 +487,17 @@ const TeamsPage = () => {
                         {currentTeam?.displayName ?? currentTeam?.name}
                       </div>
                       <NonAdminAction
-                        position="bottom"
-                        title={TITLE_FOR_NON_ADMIN_ACTION}>
+                        html={
+                          <>You do not have permission to update the team.</>
+                        }
+                        permission={Operation.UpdateTeam}
+                        position="bottom">
                         <Button
                           className={classNames('tw-h-8 tw-rounded tw-mb-3', {
-                            'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                            'tw-opacity-40':
+                              !isAdminUser &&
+                              !isAuthDisabled &&
+                              !userPermissions[Operation.UpdateTeam],
                           })}
                           data-testid="add-new-user-button"
                           size="small"
@@ -494,6 +529,9 @@ const TeamsPage = () => {
                     {currentTab === 1 && getUserCards()}
 
                     {currentTab === 2 && getDatasetCards()}
+
+                    {currentTab === 3 && getDefaultRoles()}
+
                     {isAddingUsers && (
                       <AddUsersModal
                         header={`Adding new users to ${
@@ -508,7 +546,7 @@ const TeamsPage = () => {
                 ) : (
                   <ErrorPlaceHolder>
                     <p className="tw-text-lg tw-text-center">No Teams Added.</p>
-                    <p className="tw-text-lg tw-text-center">
+                    <div className="tw-text-lg tw-text-center">
                       <NonAdminAction
                         position="bottom"
                         title={TITLE_FOR_NON_ADMIN_ACTION}>
@@ -521,7 +559,7 @@ const TeamsPage = () => {
                         </button>
                       </NonAdminAction>
                       {' to add new Team'}
-                    </p>
+                    </div>
                   </ErrorPlaceHolder>
                 )}