Austenem/CAT-1084 Add manifest success alert (#3658)

* add alert

* add changelog

CHANGELOG-add-manifest-success-alert.md

@@ -0,0 +1 @@
+- Added informative alert upon successful bulk download manifest download.

context/app/static/js/components/bulkDownload/BulkDownloadSuccessAlert.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useBulkDownloadStore } from 'js/stores/useBulkDownloadStore';
+import { Alert } from 'js/shared-styles/alerts/Alert';
+import OutboundLink from 'js/shared-styles/Links/OutboundLink';
+import { LINKS } from 'js/components/bulkDownload/constants';
+
+function BulkDownloadSuccessAlert() {
+  const { downloadSuccess, setDownloadSuccess } = useBulkDownloadStore();
+
+  if (!downloadSuccess) {
+    return null;
+  }
+
+  return (
+    <Alert onClose={() => setDownloadSuccess(false)} $marginBottom={10}>
+      Download successful. In order to download the files that are in the manifest file,{' '}
+      <OutboundLink href={LINKS.installation}>install</OutboundLink> the HuBMAP CLT and follow{' '}
+      <OutboundLink href={LINKS.documentation}>instructions</OutboundLink> for how to use it with the manifest file.
+      {/* TODO: uncomment once tutorial is up */}
+      {/* A tutorial is available to guide you through the entire process. */}
+    </Alert>
+  );
+}
+
+export default BulkDownloadSuccessAlert;

context/app/static/js/components/bulkDownload/hooks.ts

@@ -55,7 +55,7 @@ function useBulkDownloadForm() {
 }
 
 function useBulkDownloadDialog(deselectRows?: (uuids: string[]) => void) {
-  const { isOpen, uuids, open, close, setUuids } = useBulkDownloadStore();
+  const { isOpen, uuids, open, close, setUuids, setDownloadSuccess } = useBulkDownloadStore();
   const { control, handleSubmit, errors, reset, trigger } = useBulkDownloadForm();
   const { toastErrorDownloadFile, toastSuccessDownloadFile } = useBulkDownloadToasts();
 
@@ -135,14 +135,14 @@ function useBulkDownloadDialog(deselectRows?: (uuids: string[]) => void) {
 
       checkAndDownloadFile({ url, fileName: 'manifest.txt' })
         .then(() => {
-          toastSuccessDownloadFile('Manifest');
+          setDownloadSuccess(true);
         })
         .catch((e) => {
           toastErrorDownloadFile('Manifest', () => downloadManifest(datasetsToDownload));
           console.error(e);
         });
     },
-    [toastSuccessDownloadFile, toastErrorDownloadFile],
+    [toastErrorDownloadFile, setDownloadSuccess],
   );
 
   const handleClose = useCallback(() => {

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

@@ -12,6 +12,7 @@ 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 BulkDownloadSuccessAlert from 'js/components/bulkDownload/BulkDownloadSuccessAlert';
 import BulkDataTransferPanels from './BulkDataTransferPanels';
 import { useProcessedDatasetTabs } from '../ProcessedData/ProcessedDataset/hooks';
 
@@ -39,6 +40,7 @@ function BulkDataTransfer() {
       icon={sectionIconMap['bulk-data-transfer']}
     >
       <FilesContextProvider>
+        <BulkDownloadSuccessAlert />
         <SectionDescription>
           <Stack spacing={1}>
             {description}

context/app/static/js/components/detailPage/derivedEntities/DerivedEntitiesSection/DerivedEntitiesSection.tsx

@@ -6,6 +6,7 @@ import RelatedEntitiesTabs from 'js/components/detailPage/related-entities/Relat
 import RelatedEntitiesSectionActions from 'js/components/detailPage/related-entities/RelatedEntitiesSectionActions';
 import { AllEntityTypes } from 'js/shared-styles/icons/entityIconMap';
 import { buildSearchLink } from 'js/components/search/store';
+import BulkDownloadSuccessAlert from 'js/components/bulkDownload/BulkDownloadSuccessAlert';
 import { useDerivedEntitiesSection } from './hooks';
 
 const tooltipTexts = {
@@ -42,6 +43,7 @@ function DerivedEntitiesSection() {
         />
       }
     >
+      <BulkDownloadSuccessAlert />
       <RelatedEntitiesTabs
         entities={entities}
         openIndex={openIndex}

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

@@ -14,9 +14,10 @@ import merge from 'deepmerge';
 import history from 'history/browser';
 
 import { useAppContext } from 'js/components/Contexts';
-import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
+import BulkDownloadSuccessAlert from 'js/components/bulkDownload/BulkDownloadSuccessAlert';
 import WorkspacesDropdownMenu, { WorkspaceSearchDialogs } from 'js/components/workspaces/WorkspacesDropdownMenu';
 import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch';
+import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
 import { entityIconMap } from 'js/shared-styles/icons/entityIconMap';
 import {
   SearchStoreProvider,
@@ -200,6 +201,7 @@ function Body({ facetGroups }: { facetGroups: FacetGroups }) {
 const Search = React.memo(function Search({ type, facetGroups }: TypeProps & { facetGroups: FacetGroups }) {
   return (
     <Stack spacing={2} mb={4}>
+      <BulkDownloadSuccessAlert />
       <Header type={type} />
       <Stack direction="column" spacing={1} mb={2}>
         <Box>

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

@@ -4,16 +4,20 @@ import { Dataset } from 'js/components/types';
 export type BulkDownloadDataset = Pick<Dataset, 'hubmap_id' | 'processing' | 'files' | 'uuid' | 'processing_type'>;
 
 interface BulkDownloadStore {
+  downloadSuccess: boolean;
   isOpen: boolean;
   uuids: Set<string>;
+  setDownloadSuccess: (success: boolean) => void;
   open: () => void;
   close: () => void;
   setUuids: (uuids: Set<string>) => void;
 }
 
 const storeDefinition = (set: StoreApi<BulkDownloadStore>['setState']) => ({
+  downloadSuccess: false,
   isOpen: false,
   uuids: new Set<string>(),
+  setDownloadSuccess: (downloadSuccess: boolean) => set({ downloadSuccess }),
   open: () => set({ isOpen: true }),
   close: () => set({ isOpen: false }),
   setUuids: (uuids: Set<string>) => set({ uuids }),