Austenem/CAT-929 double dialog bug

CHANGELOG-double-dialog-bug.md

@@ -0,0 +1 @@
+- Fix "Add to workspace" bug on dataset detail pages.

context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx

@@ -110,6 +110,7 @@ function HelperPanelActions() {
           </SecondaryBackgroundTooltip>
         }
         datasetDetails={{ hubmap_id, uuid, status }}
+        dialogType="ADD_DATASETS_FROM_HELPER_PANEL"
       />
       <SecondaryBackgroundTooltip title="Scroll down to the Bulk Data Transfer Section.">
         <HelperPanelButton

context/app/static/js/components/detailPage/ProcessedData/ProcessedDataWorkspaceMenu.tsx

@@ -5,23 +5,25 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import AddRounded from '@mui/icons-material/AddRounded';
 
-import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
 import { WorkspacesIcon } from 'js/shared-styles/icons';
 import { useOpenDialog } from 'js/components/workspaces/WorkspacesDropdownMenu/WorkspacesDropdownMenu';
 import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
 import { useAppContext, useFlaskDataContext } from 'js/components/Contexts';
 import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
 import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog';
-import AddDatasetsFromSearchDialog from 'js/components/workspaces/AddDatasetsFromSearchDialog/AddDatasetsFromSearchDialog';
+import { DialogType } from 'js/stores/useWorkspaceModalStore';
+import AddDatasetsFromDetailDialog from 'js/components/workspaces/AddDatasetsFromDetailDialog';
 
 interface ProcessedDataWorkspaceMenuProps {
   button: React.ReactNode;
   datasetDetails: { hubmap_id: string; uuid: string; status: string };
+  dialogType: DialogType;
 }
 
 function ProcessedDataWorkspaceMenu({
   button,
   datasetDetails: { hubmap_id, uuid, status },
+  dialogType,
 }: ProcessedDataWorkspaceMenuProps) {
   const {
     entity: { mapped_data_access_level },
@@ -56,7 +58,7 @@ function ProcessedDataWorkspaceMenu({
     initialSelectedDatasets: [uuid].filter(Boolean),
   });
 
-  const openEditWorkspaceDialog = useOpenDialog('ADD_DATASETS_FROM_SEARCH');
+  const openEditWorkspaceDialog = useOpenDialog(dialogType);
 
   const createWorkspace = useEventCallback(() => {
     track({
@@ -105,29 +107,27 @@ function ProcessedDataWorkspaceMenu({
 
   // The selectable table provider is used here since a lot of the workspace logic relies on the selected rows
   return (
-    <SelectableTableProvider tableLabel="Current Dataset" selectedRows={new Set([uuid])}>
+    <>
       {buttonWithClickHandler}
-      <>
-        <Menu
-          open={open}
-          onClose={handleClose}
-          anchorEl={anchorEl}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-        >
-          {options.map(({ children, onClick, icon }) => (
-            <MenuItem key={children} onClick={onClick}>
-              <ListItemIcon>{icon}</ListItemIcon>
-              {children}
-            </MenuItem>
-          ))}
-        </Menu>
-        <NewWorkspaceDialog dialogIsOpen={createWorkspaceIsOpen} control={control} errors={errors} {...rest} />
-        <AddDatasetsFromSearchDialog />
-      </>
-    </SelectableTableProvider>
+      <Menu
+        open={open}
+        onClose={handleClose}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+      >
+        {options.map(({ children, onClick, icon }) => (
+          <MenuItem key={children} onClick={onClick}>
+            <ListItemIcon>{icon}</ListItemIcon>
+            {children}
+          </MenuItem>
+        ))}
+      </Menu>
+      <AddDatasetsFromDetailDialog uuid={uuid} dialogType={dialogType} />
+      <NewWorkspaceDialog dialogIsOpen={createWorkspaceIsOpen} control={control} errors={errors} {...rest} />
+    </>
   );
 }
 

context/app/static/js/components/detailPage/entityHeader/EntityHeaderActionButtons/EntityHeaderActionButtons.tsx

@@ -211,6 +211,7 @@ function EntityHeaderActionButtons({
           />
         }
         datasetDetails={{ hubmap_id, uuid, status }}
+        dialogType="ADD_DATASETS_FROM_HEADER"
       />
     </Stack>
   );

context/app/static/js/components/workspaces/AddDatasetsFromDetailDialog/AddDatasetsFromDetailDialog.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
+import AddDatasetsFromSearchDialog from 'js/components/workspaces/AddDatasetsFromSearchDialog';
+import { DialogType, useEditWorkspaceStore } from 'js/stores/useWorkspaceModalStore';
+
+interface AddDatasetsFromDetailDialogProps {
+  uuid: string;
+  dialogType: DialogType;
+}
+
+function AddDatasetsFromDetailDialog({ uuid, dialogType }: AddDatasetsFromDetailDialogProps) {
+  const { dialogType: currentDialogType } = useEditWorkspaceStore();
+
+  if (currentDialogType !== dialogType) {
+    return null;
+  }
+
+  return (
+    // We're populating the table provider with the dataset from the detail page so as not to duplicate logic from the search dialog
+    <SelectableTableProvider tableLabel="Add Datasets From Detail Dialog" selectedRows={new Set([uuid])}>
+      <AddDatasetsFromSearchDialog />
+    </SelectableTableProvider>
+  );
+}
+
+export default AddDatasetsFromDetailDialog;

context/app/static/js/components/workspaces/AddDatasetsFromDetailDialog/index.ts

@@ -0,0 +1,3 @@
+import AddDatasetsFromDetailDialog from './AddDatasetsFromDetailDialog';
+
+export default AddDatasetsFromDetailDialog;

context/app/static/js/components/workspaces/WorkspacesDropdownMenu/WorkspacesDropdownMenu.tsx

@@ -8,9 +8,9 @@ import { useAppContext } from 'js/components/Contexts';
 import { NewWorkspaceDialogFromSelections } from 'js/components/workspaces/NewWorkspaceDialog';
 import { StyledDropdownMenuButton } from 'js/components/searchPage/MetadataMenu/style';
 import { DialogType, useEditWorkspaceStore } from 'js/stores/useWorkspaceModalStore';
-import WorkspacesIcon from 'assets/svg/workspaces.svg';
 import { AddIcon } from 'js/shared-styles/icons';
-import AddDatasetsFromSearchDialog from '../AddDatasetsFromSearchDialog';
+import AddDatasetsFromSearchDialog from 'js/components/workspaces/AddDatasetsFromSearchDialog';
+import WorkspacesIcon from 'assets/svg/workspaces.svg';
 
 const menuID = 'workspace-menu';
 
@@ -28,15 +28,14 @@ function WorkspaceSearchDialogs() {
   }
 }
 
-type DialogTypes = Extract<DialogType, typeof addDatasetsDialogType>;
-
 interface WorkspaceDropdownMenuItemProps extends PropsWithChildren {
-  dialogType: DialogTypes;
+  dialogType: DialogType;
   icon: typeof SvgIcon;
 }
 
-export function useOpenDialog(dialogType: DialogTypes) {
+export function useOpenDialog(dialogType: DialogType) {
   const { open, setDialogType } = useEditWorkspaceStore();
+
   const onClick = useCallback(() => {
     setDialogType(dialogType);
     open();
@@ -56,7 +55,7 @@ function WorkspaceDropdownMenuItem({ dialogType, children, icon: Icon }: Workspa
 
 const menuItems: {
   label: string;
-  dialogType: DialogTypes;
+  dialogType: DialogType;
   icon: typeof SvgIcon;
 }[] = [{ label: 'Add to Existing Workspace', dialogType: addDatasetsDialogType, icon: AddIcon }];
 

context/app/static/js/pages/Dataset/Dataset.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import { InternalLink } from 'js/shared-styles/Links';
+import Stack from '@mui/material/Stack';
+
 import ProvSection from 'js/components/detailPage/provenance/ProvSection';
 import Summary from 'js/components/detailPage/summary/Summary';
 import Attribution from 'js/components/detailPage/Attribution';
@@ -13,11 +14,6 @@ import { DetailPageAlert } from 'js/components/detailPage/style';
 import BulkDataTransfer from 'js/components/detailPage/BulkDataTransfer';
 import { DetailContextProvider } from 'js/components/detailPage/DetailContext';
 import { getCombinedDatasetStatus } from 'js/components/detailPage/utils';
-
-import { useDatasetsCollections } from 'js/hooks/useDatasetsCollections';
-import useTrackID from 'js/hooks/useTrackID';
-import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
-
 import ComponentAlert from 'js/components/detailPage/multi-assay/ComponentAlert';
 import MultiAssayRelationship from 'js/components/detailPage/multi-assay/MultiAssayRelationship';
 import MetadataSection from 'js/components/detailPage/MetadataSection';
@@ -26,9 +22,13 @@ import DatasetRelationships from 'js/components/detailPage/DatasetRelationships'
 import ProcessedDataSection from 'js/components/detailPage/ProcessedData';
 import { SelectedVersionStoreProvider } from 'js/components/detailPage/VersionSelect/SelectedVersionStore';
 import SupportAlert from 'js/components/detailPage/SupportAlert';
-import OrganIcon from 'js/shared-styles/icons/OrganIcon';
-import Stack from '@mui/material/Stack';
+import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
 import { useDatasetRelationships } from 'js/components/detailPage/DatasetRelationships/hooks';
+import { useDatasetsCollections } from 'js/hooks/useDatasetsCollections';
+import useTrackID from 'js/hooks/useTrackID';
+import { InternalLink } from 'js/shared-styles/Links';
+import OrganIcon from 'js/shared-styles/icons/OrganIcon';
+
 import { useProcessedDatasets, useProcessedDatasetsSections, useRedirectAlert } from './hooks';
 
 interface SummaryDataChildrenProps {

context/app/static/js/stores/useWorkspaceModalStore.ts

@@ -6,6 +6,8 @@ export type DialogType =
   | 'UPDATE_NAME'
   | 'ADD_DATASETS'
   | 'ADD_DATASETS_FROM_SEARCH'
+  | 'ADD_DATASETS_FROM_HEADER'
+  | 'ADD_DATASETS_FROM_HELPER_PANEL'
   | 'LAUNCH_NEW_WORKSPACE'
   | null;