fix: Export dialog is interactive (#1167)

Author: dwesolow

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

@@ -10,6 +10,8 @@ import { CollapsedItemsPicker } from '../../../../shared/components/collapsed-it
 import { TabItem } from '../../../../shared/components/tabs/tabs.interface';
 import { hasEqualId } from '../../../../shared/utils';
 import { useProject } from '../../providers/project-provider/project-provider.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 { useSelectedDataset } from './use-selected-dataset/use-selected-dataset.hook';
 import { MAX_NUMBER_OF_DISPLAYED_DATASETS } from './utils';
@@ -24,6 +26,8 @@ export const DatasetTabList = () => {
 
     const { createDataset, pinnedDatasets, collapsedDatasets, handleCreateDataset, handleSelectDataset } = useDataset();
 
+    const { exportDialogState } = useExportImportDatasetDialogStates();
+
     const hasSelectedPinnedDataset = pinnedDatasets.find(hasEqualId(selectedDataset.id)) !== undefined;
     const collapsedPickerItems = collapsedDatasets.map(({ id, name }) => ({ id, name }));
 
@@ -43,6 +47,8 @@ export const DatasetTabList = () => {
                 )}
             </TabList>
 
+            <ExportDatasetDialog triggerState={exportDialogState} datasetName={selectedDataset.name} />
+
             {numberOfDatasets > MAX_NUMBER_OF_DISPLAYED_DATASETS ? (
                 <CollapsedItemsPicker
                     items={collapsedPickerItems}

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

@@ -19,7 +19,6 @@ import { DeleteDialog } from '../../../../shared/components/delete-dialog/delete
 import { EditNameDialog } from '../../../../shared/components/edit-name-dialog/edit-name-dialog.component';
 import { useMedia } from '../../../media/providers/media-provider.component';
 import { useProject } from '../../providers/project-provider/project-provider.component';
-import { ExportDatasetDialog } from './export-dataset/export-dataset-dialog.component';
 import { useExportImportDatasetDialogStates } from './export-dataset/export-import-dataset-dialog-provider.component';
 import { useSelectedDataset } from './use-selected-dataset/use-selected-dataset.hook';
 import { DatasetTabActions, getDatasetTabActions } from './utils';
@@ -39,7 +38,7 @@ export const ProjectDatasetTabActions = ({ dataset }: ProjectDatasetTabActionsPr
     const updateDatasetDialogState = useOverlayTriggerState({});
     const { datasetImportDialogState: datasetImportDialogTrigger, exportDialogState } =
         useExportImportDatasetDialogStates();
-    const { id: selectedDatasetId, name: selectedDatasetName } = useSelectedDataset();
+    const { id: selectedDatasetId } = useSelectedDataset();
 
     const hasMedia = !isEmpty(media);
     const datasetNames = project.datasets.map(({ name }) => name);
@@ -109,7 +108,6 @@ export const ProjectDatasetTabActions = ({ dataset }: ProjectDatasetTabActionsPr
                 names={datasetNames}
                 title={'dataset name'}
             />
-            <ExportDatasetDialog triggerState={exportDialogState} datasetName={selectedDatasetName} />
         </Flex>
     );
 };

web_ui/src/pages/project-details/components/project-dataset/project-dataset-tab-actions.test.tsx

@@ -161,17 +161,21 @@ describe('ProjectDatasetTabActions', () => {
     });
 
     it('should show export dataset dialog', async () => {
+        const mockOpen = jest.fn();
         await renderApp({
             exportDialogState: {
                 isOpen: true,
                 setOpen: jest.fn(),
-                open: jest.fn(),
+                open: mockOpen,
                 close: jest.fn(),
                 toggle: jest.fn(),
             },
         });
 
-        expect(screen.getByText('Select dataset export format')).toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: 'open dataset menu' }));
+        fireEvent.click(screen.getByRole('menuitem', { name: DatasetTabActions.ExportDataset }));
+
+        expect(mockOpen).toHaveBeenCalled();
     });
 
     describe('Menu actions', () => {

web_ui/tests/features/project-dataset/export-dataset.spec.ts

@@ -6,7 +6,7 @@ import { expect, Page } from '@playwright/test';
 import { JobState, JobStepState, JobType } from '../../../src/core/jobs/jobs.const';
 import { test } from '../../fixtures/base-test';
 import { switchCallsAfter } from '../../utils/api';
-import { getMockedJob, projects } from './mocks';
+import { getMockedJob, projects, projectWithTwoDatasets } from './mocks';
 
 const [project] = projects.projects;
 
@@ -79,6 +79,7 @@ test.describe('export dataset', () => {
         registerApiResponse('TriggerDatasetExport', async (_, res, ctx) =>
             res(ctx.json({ export_dataset_id: exportId, status_url: `url/test`, job_id: exportId }))
         );
+        registerApiResponse('GetProjectInfo', (_, res, ctx) => res(ctx.json(projectWithTwoDatasets)));
 
         registerApiResponse(
             'GetJob',