Preventing download of empty files #1195

packages/datagateway-common/src/views/downloadButton.component.test.tsx

@@ -60,28 +60,30 @@ describe('Generic download button', () => {
   });
 
   it('renders correctly', () => {
-    const textButtonWrapper = createWrapper({
+    const props: DownloadButtonProps = {
       entityType: 'datafile',
       entityName: 'test',
       entityId: 1,
-    });
+      entitySize: 1,
+    };
+    const textButtonWrapper = createWrapper(props);
     expect(textButtonWrapper.find('button').text()).toBe('buttons.download');
 
     const iconButtonWrapper = createWrapper({
-      entityType: 'datafile',
-      entityName: 'test',
-      entityId: 1,
+      ...props,
       variant: 'icon',
     });
     expect(iconButtonWrapper.find('button').text()).toBe('');
   });
 
   it('calls download investigation on button press for both text and icon buttons', () => {
-    let wrapper = createWrapper({
+    const props: DownloadButtonProps = {
       entityType: 'investigation',
       entityName: 'test',
       entityId: 1,
-    });
+      entitySize: 1,
+    };
+    let wrapper = createWrapper(props);
 
     wrapper.find('#download-btn-1').first().simulate('click');
     expect(downloadInvestigation).toHaveBeenCalledWith(
@@ -93,9 +95,7 @@ describe('Generic download button', () => {
     jest.clearAllMocks();
 
     wrapper = createWrapper({
-      entityType: 'investigation',
-      entityName: 'test',
-      entityId: 1,
+      ...props,
       variant: 'icon',
     });
 
@@ -108,11 +108,13 @@ describe('Generic download button', () => {
   });
 
   it('calls download dataset on button press for both text and icon buttons', () => {
-    let wrapper = createWrapper({
+    const props: DownloadButtonProps = {
       entityType: 'dataset',
       entityName: 'test',
       entityId: 1,
-    });
+      entitySize: 1,
+    };
+    let wrapper = createWrapper(props);
 
     wrapper.find('#download-btn-1').first().simulate('click');
     expect(downloadDataset).toHaveBeenCalledWith(
@@ -124,9 +126,7 @@ describe('Generic download button', () => {
     jest.clearAllMocks();
 
     wrapper = createWrapper({
-      entityType: 'dataset',
-      entityName: 'test',
-      entityId: 1,
+      ...props,
       variant: 'icon',
     });
 
@@ -139,11 +139,13 @@ describe('Generic download button', () => {
   });
 
   it('calls download datafile on button press for both text and icon buttons', () => {
-    let wrapper = createWrapper({
+    const props: DownloadButtonProps = {
       entityType: 'datafile',
       entityName: 'test',
       entityId: 1,
-    });
+      entitySize: 1,
+    };
+    let wrapper = createWrapper(props);
 
     wrapper.find('#download-btn-1').first().simulate('click');
     expect(downloadDatafile).toHaveBeenCalledWith(
@@ -155,14 +157,12 @@ describe('Generic download button', () => {
     jest.clearAllMocks();
 
     wrapper = createWrapper({
-      entityType: 'dataset',
-      entityName: 'test',
-      entityId: 1,
+      ...props,
       variant: 'icon',
     });
 
     wrapper.find('#download-btn-1').first().simulate('click');
-    expect(downloadDataset).toHaveBeenCalledWith(
+    expect(downloadDatafile).toHaveBeenCalledWith(
       'https://www.example.com/ids',
       1,
       'test'
@@ -174,8 +174,34 @@ describe('Generic download button', () => {
       entityType: 'datafile',
       entityName: undefined,
       entityId: 1,
+      entitySize: 1,
     });
 
     expect(wrapper.find(DownloadButton).children().length).toBe(0);
   });
+
+  it('renders a tooltip and disabled button if entity size is zero', () => {
+    const props: DownloadButtonProps = {
+      entityType: 'datafile',
+      entityName: 'test',
+      entityId: 1,
+      entitySize: 0,
+    };
+    let wrapper = createWrapper(props);
+
+    expect(wrapper.exists('#tooltip-1'));
+    wrapper.find('#download-btn-1').first().simulate('click');
+    expect(downloadDatafile).not.toHaveBeenCalled();
+
+    jest.clearAllMocks();
+
+    wrapper = createWrapper({
+      ...props,
+      variant: 'icon',
+    });
+
+    expect(wrapper.exists('#tooltip-1'));
+    wrapper.find('#download-btn-1').first().simulate('click');
+    expect(downloadDatafile).not.toHaveBeenCalled();
+  });
 });

packages/datagateway-common/src/views/downloadButton.component.tsx

@@ -1,4 +1,5 @@
-import { Button, IconButton } from '@material-ui/core';
+import { Button, IconButton, Tooltip, Typography } from '@material-ui/core';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import { GetApp } from '@material-ui/icons';
 import { downloadDatafile } from '../api/datafiles';
 import { downloadDataset } from '../api/datasets';
@@ -8,17 +9,32 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+const useStylesTooltip = makeStyles((theme: Theme) =>
+  createStyles({
+    tooltip: {
+      backgroundColor: theme.palette.common.black,
+      fontSize: '0.875rem',
+    },
+    arrow: {
+      color: theme.palette.common.black,
+    },
+  })
+);
+
 export interface DownloadButtonProps {
   entityType: 'investigation' | 'dataset' | 'datafile';
   entityId: number;
   entityName: string | undefined;
+  entitySize: number;
   variant?: 'text' | 'outlined' | 'contained' | 'icon';
 }
 
 const DownloadButton: React.FC<DownloadButtonProps> = (
   props: DownloadButtonProps
 ) => {
-  const { entityType, entityId, entityName, variant } = props;
+  const { entityType, entityId, entityName, variant, entitySize } = props;
+  const { ...classes } = useStylesTooltip();
+
   const [t] = useTranslation();
   const idsUrl = useSelector((state: StateType) => state.dgcommon.urls.idsUrl);
 
@@ -31,40 +47,95 @@ const DownloadButton: React.FC<DownloadButtonProps> = (
       downloadInvestigation(idsUrl, entityId, entityName);
     } else if (entityType === 'dataset') {
       downloadDataset(idsUrl, entityId, entityName);
-    } else if (entityType === 'datafile') {
+    } else {
       downloadDatafile(idsUrl, entityId, entityName);
     }
   };
 
   if (!entityName) return null;
   if (variant === 'icon') {
     return (
-      <IconButton
-        id={`download-btn-${entityId}`}
-        aria-label={t('buttons.download')}
-        size={'small'}
-        onClick={() => {
-          downloadData(entityType, entityId, entityName);
-        }}
-        className="tour-dataview-download"
-      >
-        <GetApp />
-      </IconButton>
+      <div>
+        {entitySize <= 0 ? (
+          <Tooltip
+            title={
+              <Typography>{t('buttons.unable_to_download_tooltip')}</Typography>
+            }
+            id={`tooltip-${entityId}`}
+            placement="left"
+            arrow
+            classes={classes}
+          >
+            <span>
+              <IconButton
+                id={`download-btn-${entityId}`}
+                aria-label={t('buttons.download')}
+                size={'small'}
+                className="tour-dataview-download"
+                disabled
+              >
+                <GetApp />
+              </IconButton>
+            </span>
+          </Tooltip>
+        ) : (
+          <IconButton
+            id={`download-btn-${entityId}`}
+            aria-label={t('buttons.download')}
+            size={'small'}
+            onClick={() => {
+              downloadData(entityType, entityId, entityName);
+            }}
+            className="tour-dataview-download"
+          >
+            <GetApp />
+          </IconButton>
+        )}
+      </div>
     );
   } else {
     return (
-      <Button
-        id={`download-btn-${entityId}`}
-        aria-label="Download"
-        variant={variant ?? 'contained'}
-        color="primary"
-        startIcon={<GetApp />}
-        disableElevation
-        onClick={() => downloadData(entityType, entityId, entityName)}
-        className="tour-dataview-download"
-      >
-        {t('buttons.download')}
-      </Button>
+      <div>
+        {entitySize <= 0 ? (
+          <Tooltip
+            title={
+              <Typography>{t('buttons.unable_to_download_tooltip')}</Typography>
+            }
+            id={`tooltip-${entityId}`}
+            placement="bottom"
+            arrow
+            classes={classes}
+          >
+            <span>
+              <Button
+                id={`download-btn-${entityId}`}
+                aria-label="Download"
+                variant={variant ?? 'contained'}
+                color="primary"
+                startIcon={<GetApp />}
+                disableElevation
+                className="tour-dataview-download"
+                disabled
+              >
+                {t('buttons.download')}
+              </Button>
+            </span>
+          </Tooltip>
+        ) : (
+          <Button
+            id={`download-btn-${entityId}`}
+            aria-label="Download"
+            variant={variant ?? 'contained'}
+            color="primary"
+            startIcon={<GetApp />}
+            disableElevation
+            onClick={() => downloadData(entityType, entityId, entityName)}
+            className="tour-dataview-download"
+          >
+            {t('buttons.download')}
+          </Button>
+        )}
+      </div>
     );
   }
 };

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

@@ -211,7 +211,8 @@
   "buttons": {
     "add_to_cart": "Add to selection",
     "remove_from_cart": "Remove from selection",
-    "download": "Download"
+    "download": "Download",
+    "unable_to_download_tooltip": "Unable to download - this item is empty"
   },
   "advanced_filters": {
     "show": "Show Advanced Filters",

packages/datagateway-dataview/src/views/card/isis/isisDatasetsCardView.component.tsx

@@ -159,11 +159,14 @@ const ISISDatasetsCardView = (
             entityType="dataset"
             entityId={dataset.id}
             entityName={dataset.name}
+            entitySize={
+              data ? sizeQueries[data.indexOf(dataset)]?.data ?? -1 : -1
+            }
           />
         </div>
       ),
     ],
-    [classes.actionButtons, data]
+    [classes.actionButtons, data, sizeQueries]
   );
 
   const moreInformation = React.useCallback(

packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.tsx

@@ -205,11 +205,14 @@ const ISISInvestigationsCardView = (
             entityType="investigation"
             entityId={investigation.id}
             entityName={investigation.name}
+            entitySize={
+              data ? sizeQueries[data.indexOf(investigation)]?.data ?? -1 : -1
+            }
           />
         </div>
       ),
     ],
-    [classes.actionButtons, data]
+    [classes.actionButtons, data, sizeQueries]
   );
 
   const moreInformation = React.useCallback(

packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.tsx

@@ -247,11 +247,14 @@ const LandingPage = (props: LandingPageProps): React.ReactElement => {
                 allIds={[parseInt(datasetId)]}
                 entityId={parseInt(datasetId)}
               />
-              <DownloadButton
-                entityType="dataset"
-                entityId={parseInt(datasetId)}
-                entityName={data?.name ?? ''}
-              />
+              <div style={{ margin: 'auto' }}>
+                <DownloadButton
+                  entityType="dataset"
+                  entityId={parseInt(datasetId)}
+                  entityName={data?.name ?? ''}
+                  entitySize={sizeQueries[0]?.data ?? -1}
+                />
+              </div>
             </div>
           </Grid>
         </Grid>

packages/datagateway-dataview/src/views/landing/isis/isisInvestigationLanding.component.tsx

@@ -520,11 +520,14 @@ const LandingPage = (props: LandingPageProps): React.ReactElement => {
                     allIds={[dataset.id]}
                     entityId={dataset.id}
                   />
-                  <DownloadButton
-                    entityType="dataset"
-                    entityId={dataset.id}
-                    entityName={dataset.name}
-                  />
+                  <div style={{ margin: 'auto' }}>
+                    <DownloadButton
+                      entityType="dataset"
+                      entityId={dataset.id}
+                      entityName={dataset.name}
+                      entitySize={sizeQueries[0]?.data ?? -1}
+                    />
+                  </div>
                 </div>
               </div>
             ))}

packages/datagateway-dataview/src/views/table/datafileTable.component.tsx

@@ -180,6 +180,7 @@ const DatafileTable = (props: DatafileTableProps): React.ReactElement => {
             entityId={rowData.id}
             entityName={(rowData as Datafile).location}
             variant="icon"
+            entitySize={(rowData as Datafile).fileSize ?? -1}
           />
         ),
       ]}