Fixes 5036: Update upload modal to allow cancellation

package.json

@@ -20,8 +20,8 @@
     "local": "BACKEND_PORT=8000 npm start",
     "verify": "npm-run-all build lint test-ci",
     "postinstall": "ts-patch install",
-    "test": "TZ=UTC jest --config jest.config.js --verbose",
-    "test-ci": "TZ=UTC jest --config jest.ci.config.js --verbose --no-cache",
+    "test": "TZ=UTC jest --verbose",
+    "test-ci": "TZ=UTC jest --verbose --no-cache",
     "testAllPreviewFailures": "npm-run-all -p test jestPreview",
     "jestPreview": "jest-preview",
     "jestClear": "jest --clearCache"

src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable quotes */
 import {
   Button,
   Flex,

src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.test.tsx

@@ -20,7 +20,10 @@ it('Render base upload modal', async () => {
 
   jest
     .spyOn(React, 'useState')
-    .mockImplementationOnce(() => realUseState([{ sha256: 'string', uuid: 'string' }] as unknown))
+    .mockImplementationOnce(() =>
+      realUseState([{ sha256: 'string', uuid: 'string', href: 'string' }] as unknown),
+    )
+    .mockImplementationOnce(() => realUseState(false as unknown))
     .mockImplementationOnce(() => realUseState(true as unknown));
 
   const { queryByText } = render(<UploadContent />);

src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.tsx

@@ -26,6 +26,7 @@ const UploadContent = () => {
   const classes = useStyles();
   const { repoUUID: uuid } = useParams();
   const [fileUUIDs, setFileUUIDs] = useState<{ sha256: string; uuid: string; href: string }[]>([]);
+  const [childLoading, setChildLoading] = useState(false);
   const [confirmModal, setConfirmModal] = useState(false);
 
   const rootPath = useRootPath();
@@ -75,10 +76,14 @@ const UploadContent = () => {
                 ouiaId='modal_save'
                 variant='primary'
                 isLoading={isLoading}
-                isDisabled={!fileUUIDs.length}
+                isDisabled={!fileUUIDs.length || childLoading}
                 onClick={() => uploadItems().then(onClose)}
               >
-                {fileUUIDs.length ? 'Confirm changes' : 'No content uploaded'}
+                {fileUUIDs.length && !childLoading
+                  ? 'Confirm changes'
+                  : childLoading
+                    ? 'Uploading'
+                    : 'No content uploaded'}
               </Button>
               <Button key='cancel' variant='link' onClick={onCloseClick} ouiaId='modal_cancel'>
                 Cancel
@@ -87,7 +92,7 @@ const UploadContent = () => {
           </Stack>
         }
       >
-        <FileUploader isLoading={isLoading} setFileUUIDs={setFileUUIDs} />
+        <FileUploader {...{ isLoading, setFileUUIDs, setChildLoading }} />
       </Modal>
       <Modal
         isOpen={confirmModal}