Skip to content

Commit 066eb67

Browse files
jpggvilacajpggvilaca
committed
Use new component on workspaces-tabs
1 parent 144d708 commit 066eb67

File tree

1 file changed

+58
-94
lines changed

1 file changed

+58
-94
lines changed

‎web_ui/src/pages/landing-page/workspaces-tabs/workspaces-tabs.component.tsx‎

Lines changed: 58 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -7,129 +7,93 @@ import { isOrganizationAdmin } from '@geti/core/src/users/user-role-utils';
77
import { RESOURCE_TYPE } from '@geti/core/src/users/users.interface';
88
import { useWorkspacesApi } from '@geti/core/src/workspaces/hooks/use-workspaces.hook';
99
import { WorkspaceEntity } from '@geti/core/src/workspaces/services/workspaces.interface';
10-
import { ActionButton, Flex, Item, Loading, TabList, TabPanels, Tabs, Tooltip, TooltipTrigger } from '@geti/ui';
11-
import { Add } from '@geti/ui/icons';
1210
import { useOverlayTriggerState } from 'react-stately';
1311

1412
import { useOrganizationIdentifier } from '../../../hooks/use-organization-identifier/use-organization-identifier.hook';
1513
import { CustomTabItem } from '../../../shared/components/custom-tab-item/custom-tab-item.component';
1614
import { HasPermission } from '../../../shared/components/has-permission/has-permission.component';
1715
import { OPERATION } from '../../../shared/components/has-permission/has-permission.interface';
18-
import { TabItem } from '../../../shared/components/tabs/tabs.interface';
19-
import { hasEqualId } from '../../../shared/utils';
16+
import { ManagedTabs } from '../../../shared/components/managed-tabs/managed-tabs.component';
2017
import { CreateWorkspaceDialog } from '../../user-management/workspaces/create-workspace-dialog/create-workspace-dialog.component';
2118
import { LandingPageWorkspace as Workspace } from '../landing-page-workspace/landing-page-workspace.component';
2219
import { NoPermissionPlaceholder } from './components/no-permission-placeholder.component';
2320
import { CustomTabItemWithMenu } from './custom-tab-item-with-menu.component';
2421
import { useWorkspacesTabs } from './hooks/use-pinned-collapsed-workspace.hook';
2522

26-
import classes from '../../../shared/components/custom-tab-item/custom-tab-item.module.scss';
23+
const WorkspaceItem = ({ workspace }: { workspace: WorkspaceEntity }) => {
24+
const { organizationId } = useOrganizationIdentifier();
25+
const { data: activeUser } = useActiveUser(organizationId);
26+
const { workspaces, selectWorkspace, selectedWorkspaceId } = useWorkspacesTabs();
27+
const { FEATURE_FLAG_WORKSPACE_ACTIONS } = useFeatureFlags();
28+
29+
const isSelected = workspace.id === selectedWorkspaceId;
30+
31+
if (isSelected && FEATURE_FLAG_WORKSPACE_ACTIONS) {
32+
return (
33+
<HasPermission
34+
operations={[OPERATION.WORKSPACE_MANAGEMENT]}
35+
resources={[{ type: RESOURCE_TYPE.WORKSPACE, id: workspace.id }]}
36+
specialCondition={activeUser !== undefined && isOrganizationAdmin(activeUser, organizationId)}
37+
Fallback={<CustomTabItem name={workspace.name} isMoreIconVisible={false} />}
38+
>
39+
<CustomTabItemWithMenu
40+
workspace={workspace}
41+
isMoreIconVisible={true}
42+
workspaces={workspaces}
43+
selectWorkspace={selectWorkspace}
44+
/>
45+
</HasPermission>
46+
);
47+
}
48+
49+
return <CustomTabItem name={workspace.name} isMoreIconVisible={false} />;
50+
};
2751

2852
export const WorkspacesTabs = () => {
2953
const { organizationId } = useOrganizationIdentifier();
30-
const { workspaces, selectWorkspace, selectedWorkspaceId, handleSelectWorkspace } = useWorkspacesTabs();
54+
const { workspaces, selectedWorkspaceId, handleSelectWorkspace } = useWorkspacesTabs();
3155
const { FEATURE_FLAG_WORKSPACE_ACTIONS } = useFeatureFlags();
32-
const { data: activeUser } = useActiveUser(organizationId);
3356
const createWorkspaceDialogState = useOverlayTriggerState({});
3457

3558
const { useCreateWorkspaceMutation } = useWorkspacesApi(organizationId);
3659
const createWorkspace = useCreateWorkspaceMutation();
37-
const selectedWorkspace = workspaces.find(hasEqualId(selectedWorkspaceId));
38-
39-
const items = workspaces.map(({ id, name }) => ({
40-
name,
41-
id: `${id === selectedWorkspaceId ? 'selected-' : ''}workspace-${id}`,
42-
key: id,
43-
children: <Workspace />,
44-
}));
4560
const workspacesNames = workspaces.map((workspace) => workspace.name);
4661

4762
return (
48-
<Flex id={`page-layout-id`} direction='column' height='100%' UNSAFE_className={classes.componentWrapper}>
49-
<Tabs
63+
<>
64+
<ManagedTabs<WorkspaceEntity>
65+
id='page-layout-id'
66+
items={workspaces}
5067
selectedKey={selectedWorkspaceId}
51-
items={items}
52-
aria-label={'Workspaces tabs'}
53-
height={'100%'}
54-
width={'100%'}
55-
orientation={'vertical'}
5668
onSelectionChange={handleSelectWorkspace}
57-
>
58-
<Flex width={'100%'} alignItems={'center'} UNSAFE_className={classes.tabWrapper} gap={'size-200'}>
59-
<div className={classes.tabListScrollContainer}>
60-
<TabList UNSAFE_className={classes.tabList}>
61-
{(item: TabItem) => (
62-
<Item textValue={item.name as string} key={item.key}>
63-
<>
64-
<Flex alignItems={'center'}>
65-
{selectedWorkspaceId === item.key && FEATURE_FLAG_WORKSPACE_ACTIONS ? (
66-
<HasPermission
67-
operations={[OPERATION.WORKSPACE_MANAGEMENT]}
68-
resources={[{ type: RESOURCE_TYPE.WORKSPACE, id: item.id }]}
69-
specialCondition={
70-
activeUser !== undefined &&
71-
isOrganizationAdmin(activeUser, organizationId)
72-
}
73-
Fallback={
74-
<CustomTabItem
75-
name={item.name as string}
76-
isMoreIconVisible={false}
77-
/>
78-
}
79-
>
80-
<CustomTabItemWithMenu
81-
workspace={selectedWorkspace as WorkspaceEntity}
82-
isMoreIconVisible={item.key === selectedWorkspaceId}
83-
workspaces={workspaces}
84-
selectWorkspace={selectWorkspace}
85-
/>
86-
</HasPermission>
87-
) : (
88-
<CustomTabItem name={item.name as string} isMoreIconVisible={false} />
89-
)}
90-
</Flex>
91-
</>
92-
</Item>
93-
)}
94-
</TabList>
95-
</div>
96-
97-
{FEATURE_FLAG_WORKSPACE_ACTIONS && (
98-
<HasPermission operations={[OPERATION.WORKSPACE_CREATION]}>
99-
<TooltipTrigger placement={'bottom'}>
100-
<ActionButton
101-
isQuiet
102-
id={'create-new-workspace-id'}
103-
aria-label={'Create new workspace'}
104-
onPress={createWorkspaceDialogState.open}
105-
isDisabled={createWorkspace.isPending}
106-
>
107-
{createWorkspace.isPending ? <Loading mode='inline' size={'S'} /> : <Add />}
108-
</ActionButton>
109-
<Tooltip>Create a new workspace</Tooltip>
110-
</TooltipTrigger>
111-
</HasPermission>
112-
)}
113-
</Flex>
114-
<TabPanels>
115-
{(item: TabItem) => (
116-
<Item key={item.key}>
117-
<HasPermission
118-
operations={[OPERATION.CAN_SEE_WORKSPACE]}
119-
specialCondition={!FEATURE_FLAG_WORKSPACE_ACTIONS || undefined}
120-
Fallback={<NoPermissionPlaceholder />}
121-
>
122-
{item.children}
123-
</HasPermission>
124-
</Item>
125-
)}
126-
</TabPanels>
127-
</Tabs>
69+
renderTabItem={(workspace) => <WorkspaceItem workspace={workspace} />}
70+
renderTabPanel={() => (
71+
<HasPermission
72+
operations={[OPERATION.CAN_SEE_WORKSPACE]}
73+
specialCondition={!FEATURE_FLAG_WORKSPACE_ACTIONS || undefined}
74+
Fallback={<NoPermissionPlaceholder />}
75+
>
76+
<Workspace />
77+
</HasPermission>
78+
)}
79+
addButton={
80+
FEATURE_FLAG_WORKSPACE_ACTIONS
81+
? {
82+
id: 'create-new-workspace-id',
83+
ariaLabel: 'Create new workspace',
84+
tooltipText: 'Create a new workspace',
85+
onPress: createWorkspaceDialogState.open,
86+
isLoading: createWorkspace.isPending,
87+
}
88+
: undefined
89+
}
90+
ariaLabel='Workspaces tabs'
91+
/>
12892
<CreateWorkspaceDialog
12993
triggerState={createWorkspaceDialogState}
13094
names={workspacesNames}
13195
nameLimitations={{ maxLength: 64, minLength: 1 }}
13296
/>
133-
</Flex>
97+
</>
13498
);
13599
};

0 commit comments

Comments
 (0)