Add UI components and polling for zip downloads

src/Discovery/Discovery.tsx

@@ -195,6 +195,10 @@ const Discovery: React.FunctionComponent<Props> = (props: Props) => {
   const [permalinkCopied, setPermalinkCopied] = useState(false);
   const [exportingToWorkspace, setExportingToWorkspace] = useState(false);
   const [advSearchFilterHeight, setAdvSearchFilterHeight] = useState('100vh');
+  const [downloadInProgress, setDownloadInProgress] = useState(false);
+  const [downloadStatusMessage, setDownloadStatusMessage] = useState({
+    url: '', message: '', title: '', active: false,
+  });
 
   const handleSearchChange = (ev) => {
     const { value } = ev.currentTarget;
@@ -513,6 +517,10 @@ const Discovery: React.FunctionComponent<Props> = (props: Props) => {
           setExportingToWorkspace={setExportingToWorkspace}
           filtersVisible={filtersVisible}
           setFiltersVisible={setFiltersVisible}
+          downloadInProgress={downloadInProgress}
+          setDownloadInProgress={setDownloadInProgress}
+          downloadStatusMessage={downloadStatusMessage}
+          setDownloadStatusMessage={setDownloadStatusMessage}
         />
 
         {/* Advanced search panel */}

src/Discovery/DiscoveryActionBar.tsx

@@ -3,18 +3,20 @@ import {
   Space,
   Popover,
   Button,
+  Modal,
 } from 'antd';
 import { useHistory, useLocation } from 'react-router-dom';
 import {
   LeftOutlined,
   RightOutlined,
   ExportOutlined,
   DownloadOutlined,
+  FileTextOutlined,
 } from '@ant-design/icons';
 import FileSaver from 'file-saver';
 import { DiscoveryConfig } from './DiscoveryConfig';
 import { fetchWithCreds } from '../actions';
-import { manifestServiceApiPath, hostname } from '../localconf';
+import { manifestServiceApiPath, hostname, jobAPIPath } from '../localconf';
 
 interface User {
   username: string
@@ -27,8 +29,97 @@ interface Props {
   filtersVisible: boolean;
   setFiltersVisible: (boolean) => void;
   user: User,
+  downloadInProgress: boolean,
+  setDownloadInProgress: (boolean) => void,
+  downloadStatusMessage: {
+    title: string,
+    message: string,
+    active: boolean,
+    url: string
+  },
+  setDownloadStatusMessage: (Object) => void;
 }
 
+const handleDownloadZipClick = async (
+  selectedResources: any[],
+  setDownloadInProgress: (boolean) => void,
+  setDownloadStatusMessage: (object) => void,
+) => {
+  const studyIDs = selectedResources.map((study) => study.project_number);
+  setDownloadInProgress(true);
+  setDownloadStatusMessage({
+    title: 'Your download is being prepared',
+    message: 'Please remain on this page while your download is being prepared.\n\n'
+               + 'When your download is ready, it will begin automatically. You can close this window.',
+    active: true,
+    url: '',
+  });
+
+  const handleJobError = (err) => {
+    console.error(err);
+    setDownloadInProgress(false);
+    setDownloadStatusMessage({
+      title: 'Download failed',
+      message: 'There was a problem preparing your download.'
+                + 'Please consider using the gen3 client to download these files via a manifest.',
+      active: true,
+      url: '',
+    });
+  };
+
+  fetchWithCreds({
+    path: `${jobAPIPath}dispatch`,
+    method: 'POST',
+    body: JSON.stringify({
+      action: 'batch-export',
+      input: {
+        study_ids: studyIDs,
+      },
+    }),
+  }).then(
+    (dispatchResponse) => {
+      const { uid } = dispatchResponse.data;
+      const pollForJobStatusUpdate = () => {
+        fetchWithCreds({ path: `${jobAPIPath}status?UID=${uid}` }).then(
+          (statusResponse) => {
+            const { status } = statusResponse.data;
+            if (status === 'Failed') {
+              fetchWithCreds({ path: `${jobAPIPath}output?UID=${uid}` }).then(
+                (outputResponse) => {
+                  setDownloadStatusMessage({
+                    title: 'Download failed',
+                    message: outputResponse.data.output,
+                    active: true,
+                    url: '',
+                  });
+                  setDownloadInProgress(false);
+                },
+              ).catch(handleJobError);
+            } else if (status === 'Completed') {
+              fetchWithCreds({ path: `${jobAPIPath}output?UID=${uid}` }).then(
+                (outputResponse) => {
+                  const { output } = outputResponse.data;
+                  setDownloadStatusMessage({
+                    title: 'Your download is ready',
+                    message: 'Your download has been prepared. If your download doesn\'t start automatically, please follow this direct link:',
+                    active: true,
+                    url: output,
+                  });
+                  setDownloadInProgress(false);
+                  setTimeout(() => window.open(output), 2000);
+                },
+              ).catch(handleJobError);
+            } else {
+              setTimeout(pollForJobStatusUpdate, 5000);
+            }
+          },
+        );
+      };
+      setTimeout(pollForJobStatusUpdate, 5000);
+    },
+  ).catch(handleJobError);
+};
+
 const handleDownloadManifestClick = (config: DiscoveryConfig, selectedResources: any[]) => {
   const { manifestFieldName } = config.features.exportToWorkspace;
   if (!manifestFieldName) {
@@ -130,6 +221,41 @@ const DiscoveryActionBar = (props: Props) => {
         && (
           <Space>
             <span className='discovery-export__selected-ct'>{props.selectedResources.length} selected</span>
+            {
+              props.config.features.exportToWorkspace.enableDownloadZip
+              && (
+                <Button
+                  onClick={() => {
+                    if (props.user.username) {
+                      handleDownloadZipClick(
+                        props.selectedResources,
+                        props.setDownloadInProgress,
+                        props.setDownloadStatusMessage,
+                      );
+                    } else {
+                      handleRedirectToLoginClick();
+                    }
+                  }}
+                  type='text'
+                  disabled={props.selectedResources.length === 0 || props.downloadInProgress === true}
+                  icon={<DownloadOutlined />}
+                  loading={props.downloadInProgress}
+                >
+                  {(
+                    () => {
+                      if (props.user.username) {
+                        if (props.downloadInProgress === true) {
+                          return 'Preparing download...';
+                        }
+
+                        return `${props.config.features.exportToWorkspace.downloadZipButtonText || 'Download Zip'}`;
+                      }
+                      return `Login to ${props.config.features.exportToWorkspace.downloadZipButtonText || 'Download Zip'}`;
+                    }
+                  )()}
+                </Button>
+              )
+            }
             { props.config.features.exportToWorkspace.enableDownloadManifest
             && (
               <Popover
@@ -156,11 +282,12 @@ const DiscoveryActionBar = (props: Props) => {
                     : () => { handleRedirectToLoginClick(); }}
                   type='text'
                   disabled={props.selectedResources.length === 0}
-                  icon={<DownloadOutlined />}
+                  icon={<FileTextOutlined />}
                 >
                   {(props.user.username) ? `${props.config.features.exportToWorkspace.downloadManifestButtonText || 'Download Manifest'}`
                     : `Login to ${props.config.features.exportToWorkspace.downloadManifestButtonText || 'Download Manifest'}`}
                 </Button>
+
               </Popover>
             )}
             <Popover
@@ -189,6 +316,28 @@ const DiscoveryActionBar = (props: Props) => {
                 {(props.user.username) ? 'Open In Workspace' : 'Login to Open In Workspace'}
               </Button>
             </Popover>
+            <Modal
+              closable={false}
+              visible={props.downloadStatusMessage.active}
+              title={props.downloadStatusMessage.title}
+              footer={(
+                <Button
+                  onClick={
+                    () => props.setDownloadStatusMessage({
+                      title: '', message: '', active: false, url: '',
+                    })
+                  }
+                >
+                  Close
+                </Button>
+              )}
+            >
+              { props.downloadStatusMessage.message }
+              {
+                props.downloadStatusMessage.url
+                  && <a href={props.downloadStatusMessage.url}>{props.downloadStatusMessage.url}</a>
+              }
+            </Modal>
           </Space>
         )}
     </div>

src/Discovery/DiscoveryConfig.d.ts

@@ -6,6 +6,8 @@ export interface DiscoveryConfig {
             enableDownloadManifest: boolean
             downloadManifestButtonText?: string
             manifestFieldName: string
+            enableDownloadZip: boolean
+            downloadZipButtonText?: string
         }
         // explorationIntegration: {
         //     enabled: boolean // not supported