Austenem/CAT-1052 Add bulk download dialog to detail pages (#3622)

* add bulk file download to dataset detail page

* pass in uuids

* update description link

* add changelog

* clean up

* adjust outlined button component

CHANGELOG-add-bulk-download-to-detail-pages.md

@@ -0,0 +1 @@
+- Add bulk file download option to the Bulk Download section of dataset detail pages.

context/app/static/js/components/bulkDownload/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx → context/app/static/js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import BulkDownloadButton from 'js/components/bulkDownload/BulkDownloadButton/BulkDownloadButton';
+import BulkDownloadButton from 'js/components/bulkDownload/buttons/BulkDownloadButton/BulkDownloadButton';
 import { useSelectableTableStore } from 'js/shared-styles/tables/SelectableTableProvider';
 
 const tooltip = 'Bulk download files for selected datasets.';

context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/BulkDownloadTextButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { ButtonProps } from '@mui/material/Button';
+import { useBulkDownloadDialog } from 'js/components/bulkDownload/hooks';
+import BulkDownloadDialog from 'js/components/bulkDownload/BulkDownloadDialog';
+import OutlinedButton from 'js/shared-styles/buttons/OutlinedButton';
+
+interface BulkDownloadTextButtonProps extends ButtonProps {
+  uuids: Set<string>;
+}
+function BulkDownloadTextButton({ uuids, ...rest }: BulkDownloadTextButtonProps) {
+  const { openDialog, isOpen } = useBulkDownloadDialog();
+
+  return (
+    <Box>
+      <OutlinedButton color="primary" onClick={() => openDialog(uuids)} {...rest}>
+        Download Files with HuBMAP CLT
+      </OutlinedButton>
+      {isOpen && <BulkDownloadDialog />}
+    </Box>
+  );
+}
+
+export default BulkDownloadTextButton;

context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/index.ts

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

context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx

@@ -1,18 +1,33 @@
 import React, { useState } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 import { CollapsibleDetailPageSection } from 'js/components/detailPage/DetailPageSection';
 import { FilesContextProvider } from 'js/components/detailPage/files/FilesContext';
 import { Tabs, Tab, TabPanel } from 'js/shared-styles/tables/TableTabs';
 import { DetailSectionPaper } from 'js/shared-styles/surfaces';
+import { OutboundLink } from 'js/shared-styles/Links';
 import withShouldDisplay from 'js/helpers/withShouldDisplay';
 import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap';
 import { SectionDescription } from 'js/shared-styles/sections/SectionDescription';
+import BulkDownloadTextButton from 'js/components/bulkDownload/buttons/BulkDownloadTextButton';
+import { LINKS } from 'js/components/bulkDownload/constants';
 import BulkDataTransferPanels from './BulkDataTransferPanels';
 import { useProcessedDatasetTabs } from '../ProcessedData/ProcessedDataset/hooks';
-import { BULK_DATA_DESCRIPTION_TEXT } from './const';
+
+const description = (
+  <Typography>
+    This section explains how to bulk download the raw and processed data for this dataset. Files for individual raw or
+    processed data can be downloaded via Globus or dbGaP from the respective tabs. To download files from multiple
+    Globus directories simultaneously, use the
+    <OutboundLink href={LINKS.documentation}> HuBMAP Command Line Transfer (CLT) Tool</OutboundLink>. Note that
+    processed data has separate download directories in Globus or dbGaP, distinct from the raw data directory.
+  </Typography>
+);
 
 function BulkDataTransfer() {
   const tabs = useProcessedDatasetTabs();
+  const uuids = new Set(tabs.map((tab) => tab.uuid));
 
   const [openTabIndex, setOpenTabIndex] = useState(0);
 
@@ -24,7 +39,12 @@ function BulkDataTransfer() {
       icon={sectionIconMap['bulk-data-transfer']}
     >
       <FilesContextProvider>
-        <SectionDescription>{BULK_DATA_DESCRIPTION_TEXT}</SectionDescription>
+        <SectionDescription>
+          <Stack spacing={1}>
+            {description}
+            <BulkDownloadTextButton uuids={uuids} />
+          </Stack>
+        </SectionDescription>
         <Tabs
           value={openTabIndex}
           onChange={(_, newValue) => {

context/app/static/js/components/detailPage/BulkDataTransfer/const.ts

@@ -17,6 +17,3 @@ export const SRA_EXPERIMENT_TEXT = {
   description: 'Select the "Run" link on the page to download the dataset information.',
   outboundLink: 'https://www.ncbi.nlm.nih.gov/sra/docs/',
 };
-
-export const BULK_DATA_DESCRIPTION_TEXT =
-  'This section explains how to download data in bulk from raw and processed datasets. Processed datasets have separate download directories in Globus or dbGaP, distinct from the raw dataset.';

context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.tsx

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import type { Entity } from 'js/components/types';
 import { CollapsibleDetailPageSection } from 'js/components/detailPage/DetailPageSection';
 import RelatedEntitiesTable from 'js/components/detailPage/related-entities/RelatedEntitiesTable';
-import BulkDownloadButton from 'js/components/bulkDownload/BulkDownloadButton';
+import BulkDownloadButton from 'js/components/bulkDownload/buttons/BulkDownloadButton';
 import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow';
 import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap';
 

context/app/static/js/components/detailPage/related-entities/RelatedEntitiesSectionActions/RelatedEntitiesSectionActions.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 
 import { useFlaskDataContext } from 'js/components/Contexts';
 import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
-import BulkDownloadButton from 'js/components/bulkDownload/BulkDownloadButton';
+import BulkDownloadButton from 'js/components/bulkDownload/buttons/BulkDownloadButton';
 
 interface RelatedEntitiesSectionHeaderProps {
   searchPageHref: string;

context/app/static/js/components/search/Search.tsx

@@ -16,7 +16,7 @@ import history from 'history/browser';
 import { useAppContext } from 'js/components/Contexts';
 import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
 import WorkspacesDropdownMenu, { WorkspaceSearchDialogs } from 'js/components/workspaces/WorkspacesDropdownMenu';
-import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/BulkDownloadButtonFromSearch';
+import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch';
 import { entityIconMap } from 'js/shared-styles/icons/entityIconMap';
 import {
   SearchStoreProvider,

context/app/static/js/components/searchPage/SearchBarLayout/SearchBarLayout.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { SearchBox, SelectedFilters, SortingSelector, ViewSwitcherToggle, SimpleQueryString } from 'searchkit';
 import Stack from '@mui/material/Stack';
 
-import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/BulkDownloadButtonFromSearch';
+import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch';
 import { withAnalyticsCategory } from 'js/components/searchPage/hooks';
 import WorkspacesDropdownMenu from 'js/components/workspaces/WorkspacesDropdownMenu';
 import SearchViewSwitch, { DevSearchViewSwitch } from './SearchViewSwitch';

context/app/static/js/shared-styles/buttons/OutlinedButton/index.ts

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

context/app/static/js/shared-styles/buttons/OutlinedButton/style.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import Button, { ButtonProps } from '@mui/material/Button';
+
+const OutlinedButton = styled((props: ButtonProps) => <Button {...props} variant="outlined" />)(({ theme }) => ({
+  borderColor: theme.palette.grey[300],
+  borderRadius: theme.spacing(0.5),
+})) as typeof Button;
+
+export default OutlinedButton;

context/app/static/js/shared-styles/buttons/OutlinedLinkButton/OutlinedLinkButton.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import LinkIcon from '@mui/icons-material/Link';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
-import { StyledButton } from 'js/shared-styles/buttons/OutlinedLinkButton/style';
+import OutlinedButton from 'js/shared-styles/buttons/OutlinedButton';
 
 interface OutlinedLinkButtonProps extends PropsWithChildren {
   link: string;
@@ -13,15 +13,14 @@ function OutlinedLinkButton({ link, onClick, external, children }: OutlinedLinkB
   const EndIcon = external ? LaunchRounded : LinkIcon;
 
   return (
-    <StyledButton
-      variant="outlined"
+    <OutlinedButton
       color="info"
       href={link}
       onClick={onClick}
       endIcon={<EndIcon color="info" sx={{ width: '1rem' }} />}
     >
       {children}
-    </StyledButton>
+    </OutlinedButton>
   );
 }