Use new component on dataset tabs

Author: jpggvilaca

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

@@ -1,19 +1,20 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Key, useMemo } from 'react';
-
-import { Flex, Item, TabPanels, Tabs } from '@geti/ui';
+import { Flex } from '@geti/ui';
 
 import { Dataset } from '../../../../core/projects/dataset.interface';
 import { isAnomalyDomain } from '../../../../core/projects/domains';
 import { TUTORIAL_CARD_KEYS } from '../../../../core/user-settings/dtos/user-settings.interface';
 import { useDataset } from '../../../../providers/dataset-provider/dataset-provider.component';
+import { ManagedTabs } from '../../../../shared/components/managed-tabs/managed-tabs.component';
 import { TutorialCardBuilder } from '../../../../shared/components/tutorial-card/tutorial-card-builder.component';
-import { hasEqualId } from '../../../../shared/utils';
 import { useProject } from '../../providers/project-provider/project-provider.component';
-import { DatasetTabList } from './dataset-tab-list.component';
 import { DatasetTabPanel } from './dataset-tab-panel.component';
+import { ExportDatasetDialog } from './export-dataset/export-dataset-dialog.component';
+import { useExportImportDatasetDialogStates } from './export-dataset/export-import-dataset-dialog-provider.component';
+import { ProjectDatasetTabActions } from './project-dataset-tab-actions.component';
+import { MAX_NUMBER_OF_DISPLAYED_DATASETS } from './utils';
 
 import classes from './project-dataset.module.scss';
 
@@ -25,22 +26,11 @@ import classes from './project-dataset.module.scss';
     datasets to the Picker. The new dataset is placed at the end of pinned datasets.
 */
 export const ProjectDataset = () => {
-    const { isSingleDomainProject } = useProject();
-    const { pinnedDatasets, handleSelectDataset, selectedDataset } = useDataset();
+    const { isSingleDomainProject, project } = useProject();
+    const { handleSelectDataset, selectedDataset, createDataset, handleCreateDataset } = useDataset();
+    const { exportDialogState } = useExportImportDatasetDialogStates();
 
     const isAnomalyProject = isSingleDomainProject(isAnomalyDomain);
-    const hasSelectedPinnedDataset = pinnedDatasets.find(hasEqualId(selectedDataset.id)) !== undefined;
-
-    const items = useMemo(() => {
-        return pinnedDatasets.map((dataset) => {
-            return {
-                id: `dataset-${dataset.id}-id`,
-                key: dataset.id,
-                name: dataset.name,
-                dataset,
-            };
-        });
-    }, [pinnedDatasets]);
 
     return (
         <Flex direction={'column'} UNSAFE_className={classes.componentWrapper} height={'100%'}>
@@ -50,26 +40,27 @@ export const ProjectDataset = () => {
                     styles={{ fontSize: 'var(--spectrum-global-dimension-font-size-350)' }}
                 />
             )}
-            <Tabs
-                items={items}
-                height='100%'
-                orientation={'vertical'}
-                minHeight={0}
-                UNSAFE_className={!hasSelectedPinnedDataset ? classes.noneSelected : ''}
-                aria-label='Dataset page tabs'
+            <ManagedTabs<Dataset>
+                items={project.datasets}
                 selectedKey={selectedDataset.id}
-                onSelectionChange={(key: Key) => handleSelectDataset(String(key))}
-            >
-                <DatasetTabList />
-
-                <TabPanels height={'100%'} minHeight={0}>
-                    {(item: { dataset: Dataset }) => (
-                        <Item textValue={item.dataset.name}>
-                            <DatasetTabPanel dataset={item.dataset} />
-                        </Item>
-                    )}
-                </TabPanels>
-            </Tabs>
+                onSelectionChange={(key) => handleSelectDataset(String(key))}
+                renderTabItem={(dataset) => <ProjectDatasetTabActions dataset={dataset} />}
+                renderTabPanel={(dataset) => <DatasetTabPanel dataset={dataset} />}
+                addButton={{
+                    id: 'create-dataset-button-id',
+                    ariaLabel: 'Create dataset',
+                    tooltipText: 'Create new testing set',
+                    onPress: handleCreateDataset,
+                    isLoading: createDataset.isPending,
+                }}
+                overflow={{
+                    maxVisibleTabs: MAX_NUMBER_OF_DISPLAYED_DATASETS,
+                    pickerAriaLabel: 'Collapsed datasets',
+                    onCollapsedItemSelect: handleSelectDataset,
+                }}
+                ariaLabel='Dataset page tabs'
+            />
+            <ExportDatasetDialog triggerState={exportDialogState} datasetName={selectedDataset.name} />
         </Flex>
     );
 };