Merge pull request #1184 from ral-facilities/bugfix/remove-all-button…

…-disables-#1177 DG download "remove all" button disables once pressed #1177
ral-facilities · Mar 29, 2022 · a689cc4 · a689cc4
2 parents ac9ec6a + 9fd64e9
commit a689cc4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx
@@ -245,6 +245,37 @@ describe('Download cart table component', () => {
     expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe(true);
   });
 
+  it('disables remove all button while request is processing', async () => {
+    (removeAllDownloadCartItems as jest.Mock).mockImplementation(() => {
+      return new Promise((resolve) => setTimeout(resolve, 2000));
+    });
+
+    const wrapper = createWrapper();
+
+    await act(async () => {
+      await flushPromises();
+      wrapper.update();
+      await flushPromises();
+      wrapper.update();
+    });
+
+    await act(async () => {
+      wrapper.find('button#removeAllButton').simulate('click');
+      await flushPromises();
+      wrapper.update();
+    });
+    expect(
+      wrapper.find('button#removeAllButton').prop('disabled')
+    ).toBeTruthy();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 2001));
+      wrapper.update();
+    });
+
+    expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe(true);
+  });
+
   it("removes an item when said item's remove button is clicked", async () => {
     const wrapper = createWrapper();
 

diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx
@@ -20,6 +20,7 @@ import {
   makeStyles,
   Theme,
   Link,
+  CircularProgress,
 } from '@material-ui/core';
 import { RemoveCircle } from '@material-ui/icons';
 import {
@@ -66,6 +67,7 @@ const DownloadCartTable: React.FC<DownloadCartTableProps> = (
   const [dataLoaded, setDataLoaded] = React.useState(false);
   const [sizesLoaded, setSizesLoaded] = React.useState(true);
   const [sizesFinished, setSizesFinished] = React.useState(true);
+  const [removingAll, setRemovingAll] = React.useState(false);
 
   const fileCountMax = settings.fileCountMax;
   const totalSizeMax = settings.totalSizeMax;
@@ -416,17 +418,24 @@ const DownloadCartTable: React.FC<DownloadCartTableProps> = (
             style={{ marginRight: '1em' }}
           >
             <Grid item>
+              {/* Request to remove all selections is in progress. To prevent excessive requests, disable button during request */}
               <Button
                 className="tour-download-remove-button"
                 id="removeAllButton"
                 variant="contained"
                 color="primary"
-                onClick={() =>
+                disabled={removingAll}
+                startIcon={removingAll && <CircularProgress size={20} />}
+                onClick={() => {
+                  setRemovingAll(true);
                   removeAllDownloadCartItems({
                     facilityName: settings.facilityName,
                     downloadApiUrl: settings.downloadApiUrl,
-                  }).then(() => setData([]))
-                }
+                  }).then(() => {
+                    setData([]);
+                    setRemovingAll(false);
+                  });
+                }}
               >
                 {t('downloadCart.remove_all')}
               </Button>