Skip to content

Commit 51e5bff

Browse files
committed
Rename var; Make addButton ReactNode
1 parent ba323d9 commit 51e5bff

File tree

4 files changed

+53
-46
lines changed

4 files changed

+53
-46
lines changed

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

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ 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, Loading, Tooltip, TooltipTrigger } from '@geti/ui';
11+
import { Add } from '@geti/ui/icons';
1012
import { useOverlayTriggerState } from 'react-stately';
1113

1214
import { useOrganizationIdentifier } from '../../../hooks/use-organization-identifier/use-organization-identifier.hook';
@@ -20,7 +22,7 @@ import { NoPermissionPlaceholder } from './components/no-permission-placeholder.
2022
import { CustomTabItemWithMenu } from './custom-tab-item-with-menu.component';
2123
import { useWorkspacesTabs } from './hooks/use-pinned-collapsed-workspace.hook';
2224

23-
const WorkspaceItem = ({ workspace }: { workspace: WorkspaceEntity }) => {
25+
const WorkspaceTabItem = ({ workspace }: { workspace: WorkspaceEntity }) => {
2426
const { organizationId } = useOrganizationIdentifier();
2527
const { data: activeUser } = useActiveUser(organizationId);
2628
const { workspaces, selectWorkspace, selectedWorkspaceId } = useWorkspacesTabs();
@@ -66,7 +68,7 @@ export const WorkspacesTabs = () => {
6668
items={workspaces}
6769
selectedKey={selectedWorkspaceId}
6870
onSelectionChange={handleSelectWorkspace}
69-
renderTabItem={(workspace) => <WorkspaceItem workspace={workspace} />}
71+
renderTabItem={(workspace) => <WorkspaceTabItem workspace={workspace} />}
7072
renderTabPanel={() => (
7173
<HasPermission
7274
operations={[OPERATION.CAN_SEE_WORKSPACE]}
@@ -77,15 +79,20 @@ export const WorkspacesTabs = () => {
7779
</HasPermission>
7880
)}
7981
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
82+
FEATURE_FLAG_WORKSPACE_ACTIONS ? (
83+
<TooltipTrigger placement='bottom'>
84+
<ActionButton
85+
isQuiet
86+
id={'create-new-workspace-id'}
87+
onPress={createWorkspaceDialogState.open}
88+
isDisabled={createWorkspace.isPending}
89+
aria-label={'Create new workspace'}
90+
>
91+
{createWorkspace.isPending ? <Loading mode='inline' size='S' /> : <Add />}
92+
</ActionButton>
93+
<Tooltip>Create a new workspace</Tooltip>
94+
</TooltipTrigger>
95+
) : undefined
8996
}
9097
ariaLabel={'Workspaces tabs'}
9198
/>

web_ui/src/pages/project-details/components/project-dataset/project-dataset.component.tsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
// Copyright (C) 2022-2025 Intel Corporation
22
// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
33

4-
import { Flex } from '@geti/ui';
4+
import { ActionButton, Flex, Loading, Tooltip, TooltipTrigger } from '@geti/ui';
5+
import { Add } from '@geti/ui/icons';
56

67
import { Dataset } from '../../../../core/projects/dataset.interface';
78
import { isAnomalyDomain } from '../../../../core/projects/domains';
@@ -54,13 +55,20 @@ export const ProjectDataset = () => {
5455
onSelectionChange={(key) => handleSelectDataset(String(key))}
5556
renderTabItem={(dataset) => <ProjectDatasetTabActions dataset={dataset} />}
5657
renderTabPanel={(dataset) => <DatasetTabPanel dataset={dataset} />}
57-
addButton={{
58-
id: 'create-dataset-button-id',
59-
ariaLabel: 'Create dataset',
60-
tooltipText: 'Create new testing set',
61-
onPress: handleCreateDataset,
62-
isLoading: createDataset.isPending,
63-
}}
58+
addButton={
59+
<TooltipTrigger placement='bottom'>
60+
<ActionButton
61+
isQuiet
62+
id={'create-dataset-button-id'}
63+
onPress={handleCreateDataset}
64+
isDisabled={createDataset.isPending}
65+
aria-label={'Create dataset'}
66+
>
67+
{createDataset.isPending ? <Loading mode='inline' size='S' /> : <Add />}
68+
</ActionButton>
69+
<Tooltip>Create new testing set</Tooltip>
70+
</TooltipTrigger>
71+
}
6472
overflow={{
6573
maxVisibleTabs: MAX_NUMBER_OF_DISPLAYED_DATASETS,
6674
pickerAriaLabel: 'Collapsed datasets',

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ 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 { Flex } from '@geti/ui';
10+
import { ActionButton, Flex, Loading, Tooltip, TooltipTrigger } from '@geti/ui';
11+
import { Add } from '@geti/ui/icons';
1112
import { useOverlayTriggerState } from 'react-stately';
1213

1314
import { useOrganizationIdentifier } from '../../../hooks/use-organization-identifier/use-organization-identifier.hook';
@@ -79,15 +80,20 @@ export const WorkspaceUsersToolbar = ({
7980
}}
8081
renderTabPanel={() => <></>}
8182
addButton={
82-
FEATURE_FLAG_WORKSPACE_ACTIONS
83-
? {
84-
id: 'create-workspace-toolbar-btn',
85-
ariaLabel: 'Create workspace',
86-
tooltipText: 'Create workspace',
87-
onPress: createWorkspaceDialogState.open,
88-
isLoading: createWorkspace.isPending,
89-
}
90-
: undefined
83+
FEATURE_FLAG_WORKSPACE_ACTIONS ? (
84+
<TooltipTrigger placement='bottom'>
85+
<ActionButton
86+
isQuiet
87+
id={'create-workspace-toolbar-btn'}
88+
onPress={createWorkspaceDialogState.open}
89+
isDisabled={createWorkspace.isPending}
90+
aria-label={'Create workspace'}
91+
>
92+
{createWorkspace.isPending ? <Loading mode='inline' size='S' /> : <Add />}
93+
</ActionButton>
94+
<Tooltip>Create workspace</Tooltip>
95+
</TooltipTrigger>
96+
) : undefined
9197
}
9298
ariaLabel={'Workspace tabs'}
9399
/>

web_ui/src/shared/components/managed-tabs/managed-tabs.component.tsx

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33

44
import { Key, ReactNode } from 'react';
55

6-
import { ActionButton, Flex, Item, Loading, TabList, TabPanels, Tabs, Tooltip, TooltipTrigger } from '@geti/ui';
7-
import { Add } from '@geti/ui/icons';
6+
import { Flex, Item, TabList, TabPanels, Tabs } from '@geti/ui';
87

98
import { CollapsedItemsPicker } from '../collapsed-items-picker/collapsed-items-picker.component';
109
import { TabItem } from '../tabs/tabs.interface';
@@ -33,7 +32,7 @@ export interface ManagedTabsProps<T extends { id: string; name: string }> {
3332
onSelectionChange: (key: Key) => void;
3433
renderTabItem: (item: T) => ReactNode;
3534
renderTabPanel: (item: T) => ReactNode;
36-
addButton?: AddButtonConfig;
35+
addButton?: ReactNode;
3736
overflow?: OverflowConfig;
3837
orientation?: 'horizontal' | 'vertical';
3938
wrapperClassName?: string;
@@ -115,20 +114,7 @@ export const ManagedTabs = <T extends { id: string; name: string }>({
115114
/>
116115
)}
117116

118-
{addButton && (
119-
<TooltipTrigger placement='bottom'>
120-
<ActionButton
121-
isQuiet
122-
id={addButton.id}
123-
onPress={addButton.onPress}
124-
isDisabled={addButton.isDisabled || addButton.isLoading}
125-
aria-label={addButton.ariaLabel}
126-
>
127-
{addButton.isLoading ? <Loading mode='inline' size='S' /> : <Add />}
128-
</ActionButton>
129-
<Tooltip>{addButton.tooltipText}</Tooltip>
130-
</TooltipTrigger>
131-
)}
117+
{addButton && addButton}
132118
</Flex>
133119

134120
<TabPanels>{(item: TabItem) => <Item key={item.key}>{item.children}</Item>}</TabPanels>

0 commit comments

Comments
 (0)