Merge pull request #1715 from ral-facilities/bugfix/hide-progressbars

Handle isDeleted and no prepared id cases in progress bars

Author: louise-davies

packages/datagateway-common/src/app.types.tsx

@@ -266,7 +266,7 @@ export interface Download {
   isDeleted: boolean;
   isEmailSent: boolean;
   isTwoLevel: boolean;
-  preparedId: string;
+  preparedId?: string;
   sessionId: string;
   size: number;
   status: DownloadStatus;

packages/datagateway-download/public/res/default.json

@@ -38,7 +38,8 @@
     "progress": "Progress",
     "calculating_progress": "Calculating...",
     "progress_unavailable": "Unknown",
-    "progress_complete": ""
+    "progress_complete": "",
+    "progress_queued": "Queued"
   },
   "downloadConfirmDialog": {
     "close_arialabel": "Close download confirmation dialog",

packages/datagateway-download/src/downloadApi.ts

@@ -324,7 +324,7 @@ export const getPercentageComplete = async ({
   preparedId,
   settings: { idsUrl },
 }: {
-  preparedId: string;
+  preparedId: string | undefined;
   settings: { idsUrl: string };
 }): Promise<DownloadProgress> => {
   const { data } = await axios.get(`${idsUrl}/getPercentageComplete`, {

packages/datagateway-download/src/downloadApiHooks.ts

@@ -735,7 +735,7 @@ export const useDownloadPercentageComplete = <T = DownloadProgress>({
   const idsUrl = accessMethods[download.transport]?.idsUrl;
 
   return useQuery(
-    [QueryKey.DOWNLOAD_PROGRESS, preparedId],
+    [QueryKey.DOWNLOAD_PROGRESS, preparedId ?? ''], // undefined preparedId is handled in downloadProgressIndicator & disables the query anyway
     () =>
       getPercentageComplete({
         preparedId: preparedId,

packages/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.tsx

@@ -218,6 +218,7 @@ const DownloadConfirmDialog: React.FC<DownloadConfirmDialogProps> = (
     if (
       isDownloadInfoAvailable &&
       downloadInfo &&
+      downloadInfo.preparedId &&
       downloadInfo.status === 'COMPLETE'
     ) {
       // Download the file as long as it is available for instant download.

packages/datagateway-download/src/downloadStatus/downloadProgressIndicator.component.test.tsx

@@ -41,6 +41,10 @@ function renderComponent({ download = mockDownload } = {}): RenderResult {
 }
 
 describe('DownloadProgressIndicator', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe('should show calculating text', () => {
     it('when querying the download progress', async () => {
       (
@@ -106,6 +110,21 @@ describe('DownloadProgressIndicator', () => {
       // should not show progress bar
       expect(screen.queryByRole('progressbar')).toBeNull();
     });
+
+    it('when download is deleted', async () => {
+      renderComponent({
+        download: {
+          ...mockDownload,
+          isDeleted: true,
+        },
+      });
+
+      expect(
+        await screen.findByText('downloadStatus.progress_complete')
+      ).toBeInTheDocument();
+      // should not show progress bar
+      expect(screen.queryByRole('progressbar')).toBeNull();
+    });
   });
 
   describe('should show unavailable', () => {
@@ -124,6 +143,20 @@ describe('DownloadProgressIndicator', () => {
         await screen.findByText('downloadStatus.progress_unavailable')
       ).toBeInTheDocument();
     });
+
+    it('when download has no preparedId', async () => {
+      renderComponent({
+        download: {
+          ...mockDownload,
+          preparedId: undefined,
+        },
+      });
+
+      expect(
+        await screen.findByText('downloadStatus.progress_unavailable')
+      ).toBeInTheDocument();
+      expect(getPercentageComplete).not.toHaveBeenCalled();
+    });
   });
 
   it('should show progress at 0% when the download is being prepared', async () => {
@@ -140,6 +173,21 @@ describe('DownloadProgressIndicator', () => {
     expect(screen.getByText('0%')).toBeInTheDocument();
   });
 
+  it('should show queued when download is paused and has no preparedId', async () => {
+    renderComponent({
+      download: {
+        ...mockDownload,
+        status: 'PAUSED',
+        preparedId: undefined,
+      },
+    });
+
+    expect(
+      await screen.findByText('downloadStatus.progress_queued')
+    ).toBeInTheDocument();
+    expect(getPercentageComplete).not.toHaveBeenCalled();
+  });
+
   it('should show progress of the given download item', async () => {
     (
       getPercentageComplete as jest.MockedFunction<typeof getPercentageComplete>

packages/datagateway-download/src/downloadStatus/downloadProgressIndicator.component.tsx

@@ -21,22 +21,36 @@ function DownloadProgressIndicator({
   const { data: progress, isLoading: isLoadingProgress } =
     useDownloadPercentageComplete({
       download,
-      enabled: download.status === 'RESTORING' || download.status === 'PAUSED',
+      enabled:
+        !download.isDeleted &&
+        typeof download.preparedId !== 'undefined' && // do not send download status request for downloads with no preparedId as it will just fail
+        (download.status === 'RESTORING' || download.status === 'PAUSED'),
     });
 
   if (isLoadingProgress) {
     return <>{t('downloadStatus.calculating_progress')}</>;
   }
 
-  // if the download is already completed/restored
-  // should show text such as N/A, completed, or empty string.
+  // if the download is completed, expired or deleted
+  // should show text such as N/A or empty string.
   // depending on the translation configuration.
-  if (download.status === 'COMPLETE' || download.status === 'EXPIRED')
+  if (
+    download.status === 'COMPLETE' ||
+    download.status === 'EXPIRED' ||
+    download.isDeleted
+  )
     return <>{t('downloadStatus.progress_complete')}</>;
 
   // if the download is being prepared, show 0%
   if (download.status === 'PREPARING') return <ProgressBar progress={0} />;
 
+  // if the download is paused with no preparedId, show that it is queued
+  if (
+    download.status === 'PAUSED' &&
+    typeof download.preparedId === 'undefined'
+  )
+    return <>{t('downloadStatus.progress_queued')}</>;
+
   // display a label indicating progress unavailable when
   // progress is not returned or the download status doesn't match.
   if (typeof progress === 'undefined')

packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.tsx

@@ -357,10 +357,12 @@ const DownloadStatusTable: React.FC<DownloadStatusTableProps> = (
             actionsWidth={100}
             actions={[
               function DownloadButton({ rowData }: TableActionProps) {
-                const downloadItem = rowData as FormattedDownload;
-                const isHTTP = !!downloadItem.transport.match(/https|http/);
+                const { transport, status, preparedId, fileName, id } =
+                  rowData as FormattedDownload;
+                const isHTTP = !!transport.match(/https|http/);
 
-                const isComplete = downloadItem.status === 'COMPLETE';
+                const isComplete =
+                  status === 'COMPLETE' && typeof preparedId !== 'undefined';
 
                 const isDownloadable = isHTTP && isComplete;
 
@@ -370,7 +372,7 @@ const DownloadStatusTable: React.FC<DownloadStatusTableProps> = (
                       !isHTTP
                         ? t<string, string>(
                             'downloadStatus.non_https_download_disabled_tooltip',
-                            { transport: downloadItem.transport }
+                            { transport }
                           )
                         : t<string, string>(
                             'downloadStatus.https_download_disabled_tooltip'
@@ -386,17 +388,17 @@ const DownloadStatusTable: React.FC<DownloadStatusTableProps> = (
                         ? {
                             component: 'a',
                             href: getDataUrl(
-                              downloadItem.preparedId,
-                              downloadItem.fileName,
+                              preparedId,
+                              fileName,
                               settings.idsUrl
                             ),
                             target: '_blank',
                           }
                         : { component: 'button' })}
                       aria-label={t('downloadStatus.download', {
-                        filename: downloadItem.fileName,
+                        filename: fileName,
                       })}
-                      key={`download-${downloadItem.id}`}
+                      key={`download-${id}`}
                       size="small"
                       disabled={!isDownloadable}
                     >