display workspace-related roles on a screen with list of workspace users (#1405)

Author: jcchr

web_ui/src/pages/user-management/users/project-users/project-users.component.tsx

@@ -47,7 +47,7 @@ export const ProjectUsers = () => {
                 resourceType={RESOURCE_TYPE.PROJECT}
                 resourceId={projectId}
                 ignoredColumns={ignoredColumns}
-                isProjectUsersTable
+                usersTableType={RESOURCE_TYPE.PROJECT}
                 UserActions={ProjectUserActions}
             />
         </PageLayout>

web_ui/src/pages/user-management/users/users-header.component.tsx

@@ -3,7 +3,7 @@
 
 import { Dispatch, ReactNode, SetStateAction, useState } from 'react';
 
-import { USER_ROLE, UsersQueryParams } from '@geti/core/src/users/users.interface';
+import { RESOURCE_TYPE, USER_ROLE, UsersQueryParams } from '@geti/core/src/users/users.interface';
 import { Flex, SearchField } from '@geti/ui';
 import { isEmpty } from 'lodash-es';
 
@@ -16,7 +16,7 @@ interface WorkspaceUsersHeaderProps {
     totalMatchedCount: number;
     hasFilterOptions: boolean;
     setUsersQueryParams: Dispatch<SetStateAction<UsersQueryParams>>;
-    isProjectUsersTable?: boolean;
+    usersTableType?: RESOURCE_TYPE;
     actionsSlot?: ReactNode;
 }
 
@@ -25,15 +25,18 @@ export const UsersHeader = ({
     totalCount,
     hasFilterOptions,
     setUsersQueryParams,
-    isProjectUsersTable = false,
+    usersTableType = RESOURCE_TYPE.ORGANIZATION,
     actionsSlot,
 }: WorkspaceUsersHeaderProps) => {
     const [searchInput, setSearchInput] = useState<string>('');
     const [roleFilter, setRoleFilter] = useState<USER_ROLE | undefined>();
 
-    const roles = isProjectUsersTable
-        ? [USER_ROLE.PROJECT_MANAGER, USER_ROLE.PROJECT_CONTRIBUTOR]
-        : [USER_ROLE.WORKSPACE_ADMIN, USER_ROLE.WORKSPACE_CONTRIBUTOR];
+    const roles =
+        usersTableType === RESOURCE_TYPE.PROJECT
+            ? [USER_ROLE.PROJECT_MANAGER, USER_ROLE.PROJECT_CONTRIBUTOR]
+            : usersTableType === RESOURCE_TYPE.WORKSPACE
+              ? [USER_ROLE.WORKSPACE_ADMIN, USER_ROLE.WORKSPACE_CONTRIBUTOR]
+              : [USER_ROLE.ORGANIZATION_ADMIN, USER_ROLE.ORGANIZATION_CONTRIBUTOR];
 
     const debouncedCallback = useDebouncedCallback((value: string) => {
         setUsersQueryParams((prevQueryParams) => {

web_ui/src/pages/user-management/users/users-table/users-table.component.tsx

@@ -3,7 +3,7 @@
 
 import { Dispatch, ReactNode, SetStateAction, useMemo } from 'react';
 
-import { User, UsersQueryParams } from '@geti/core/src/users/users.interface';
+import { RESOURCE_TYPE, User, UsersQueryParams } from '@geti/core/src/users/users.interface';
 import { Cell, Column, Flex, Row, TableBody, TableHeader, TableView, View } from '@geti/ui';
 import { get, isEmpty } from 'lodash-es';
 
@@ -41,7 +41,7 @@ interface UsersTableProps {
     UserActions: (props: { activeUser: User; user: User; users: User[] }) => ReactNode;
     ignoredColumns?: USERS_TABLE_COLUMNS[];
     resourceId: string | undefined;
-    isProjectUsersTable?: boolean;
+    usersTableType?: RESOURCE_TYPE;
     tableId?: string;
 }
 
@@ -56,7 +56,7 @@ export const UsersTable = ({
     resourceId,
     isLoading,
     isFetchingNextPage,
-    isProjectUsersTable,
+    usersTableType,
     getNextPage,
     tableId,
 }: UsersTableProps) => {
@@ -100,14 +100,18 @@ export const UsersTable = ({
             {
                 label: isEmpty(resourceId)
                     ? 'Organization role'
-                    : isProjectUsersTable
+                    : usersTableType === RESOURCE_TYPE.PROJECT
                       ? 'Project role'
                       : 'Workspace role',
                 dataKey: USERS_TABLE_COLUMNS.ROLES,
                 width: 180,
                 isSortable: false,
                 component: (data: TableCellProps) => (
-                    <UserRoleCell {...data} resourceId={resourceId} isProjectUsersTable={isProjectUsersTable} />
+                    <UserRoleCell
+                        {...data}
+                        resourceId={resourceId}
+                        isProjectUsersTable={usersTableType === RESOURCE_TYPE.PROJECT}
+                    />
                 ),
             },
             {
@@ -144,7 +148,7 @@ export const UsersTable = ({
         ];
 
         return tableColumns.filter(({ dataKey }) => !ignoredColumns.includes(dataKey as USERS_TABLE_COLUMNS));
-    }, [ignoredColumns, resourceId, UserActions, activeUser, isProjectUsersTable, users]);
+    }, [ignoredColumns, resourceId, UserActions, activeUser, usersTableType, users]);
 
     const [sortingOptions, sort] = useSortTable<UsersQueryParams>({
         queryOptions: usersQueryParams,

web_ui/src/pages/user-management/users/users.component.tsx

@@ -28,7 +28,7 @@ interface UsersProps {
     resourceId: string | undefined;
     UserActions?: ComponentProps<typeof UsersTable>['UserActions'];
     ignoredColumns?: ComponentProps<typeof UsersTable>['ignoredColumns'];
-    isProjectUsersTable?: ComponentProps<typeof UsersTable>['isProjectUsersTable'];
+    usersTableType?: ComponentProps<typeof UsersTable>['usersTableType'];
 }
 
 const USERS_LIMIT = 20;
@@ -39,7 +39,7 @@ export const Users = ({
     activeUser,
     UserActions = () => <></>,
     ignoredColumns = [],
-    isProjectUsersTable = false,
+    usersTableType = RESOURCE_TYPE.ORGANIZATION,
 }: UsersProps) => {
     const { organizationId } = useOrganizationIdentifier();
     const { workspaceId: firstWorkspaceId } = useFirstWorkspaceIdentifier();
@@ -98,7 +98,7 @@ export const Users = ({
                     totalCount={totalCount}
                     hasFilterOptions={hasFilters}
                     setUsersQueryParams={setUsersQueryParams}
-                    isProjectUsersTable={isProjectUsersTable}
+                    usersTableType={usersTableType}
                     actionsSlot={actionsSlot}
                 />
                 <UsersTable
@@ -114,7 +114,7 @@ export const Users = ({
                     UserActions={UserActions}
                     ignoredColumns={ignoredColumns}
                     resourceId={resourceId}
-                    isProjectUsersTable={isProjectUsersTable}
+                    usersTableType={usersTableType}
                 />
                 {resourceType === RESOURCE_TYPE.WORKSPACE && resourceId !== undefined && (
                     <AvailableWorkspaceUsers workspaceId={resourceId} activeUser={activeUser} />

web_ui/src/pages/user-management/users/workspace-users/available-workspace-users.component.tsx

@@ -128,7 +128,7 @@ export const AvailableWorkspaceUsers = ({ workspaceId, activeUser }: AvailableWo
                             USERS_TABLE_COLUMNS.ROLES,
                         ]}
                         resourceId={workspaceId}
-                        isProjectUsersTable={false}
+                        usersTableType={RESOURCE_TYPE.WORKSPACE}
                     />
                 </View>
             </Flex>

web_ui/src/pages/user-management/users/workspace-users/workspace-users.component.tsx

@@ -27,6 +27,7 @@ export const WorkspaceUsers = ({ activeUser, workspaceId }: WorkspaceUsersProps)
             resourceId={workspaceId}
             UserActions={Actions}
             ignoredColumns={isSaasEnv ? undefined : [USERS_TABLE_COLUMNS.LAST_LOGIN]}
+            usersTableType={RESOURCE_TYPE.WORKSPACE}
         />
     );
 };