From 11d7c2425d9b89c21c6fafcadd6ec9e62b057682 Mon Sep 17 00:00:00 2001
From: adewar <andrewgdewar@gmail.com>
Date: Fri, 10 Jan 2025 11:53:44 -0700
Subject: [PATCH] Fixes 5036: Update upload modal to allow cancellation

---
 jest.ci.config.js                             |  23 --
 package.json                                  |   4 +-
 .../SnapshotListModal/SnapshotListModal.tsx   |   1 -
 .../UploadContent/UploadContent.test.tsx      |   5 +-
 .../UploadContent/UploadContent.tsx           |  11 +-
 .../UploadContent/components/FileUploader.tsx | 218 ++++++++++++------
 .../components/UploadStatusItem.tsx           |  18 +-
 .../UploadContent/components/helpers.tsx      |   8 +-
 .../TemplateDetails/TemplateDetails.test.tsx  |   8 +-
 .../TemplateDetails/TemplateDetails.tsx       |   9 +-
 .../components/UseTemplate/AnsibleTab.tsx     | 216 +++++++++--------
 .../components/UseTemplate/CurlTab.tsx        | 159 +++++++------
 .../components/UseTemplate/InsightsTab.tsx    | 148 ++++++------
 .../UseTemplate/UseTemplateModal.tsx          | 142 ++++++------
 src/services/Content/ContentApi.ts            |  18 +-
 15 files changed, 549 insertions(+), 439 deletions(-)
 delete mode 100644 jest.ci.config.js

diff --git a/jest.ci.config.js b/jest.ci.config.js
deleted file mode 100644
index edbd57e4..00000000
--- a/jest.ci.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-module.exports = {
-  roots: ['<rootDir>/src/'],
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.(t)s$': 'ts-jest',
-  },
-  setupFiles: [],
-  setupFilesAfterEnv: ['<rootDir>/config/setupAfterEnv.ts'],
-  moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src'],
-
-  moduleNameMapper: {
-    // Below replaces imports for speed
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/config/empty.js',
-    '\\.(css|scss|svg)$': 'identity-obj-proxy',
-    '^uuid$': require.resolve('uuid'),
-  },
-  transformIgnorePatterns: [
-    // Ignores imports of icons and other unneeded modules
-    '<rootDir>/node_modules/(?!@redhat-cloud-services|@openshift|lodash-es|uuid|@patternfly/react-icons)',
-  ],
-};
diff --git a/package.json b/package.json
index 4dbfc6a1..51598e1f 100644
--- a/package.json
+++ b/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"
diff --git a/src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx b/src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx
index 9107b116..89e4e364 100644
--- a/src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx
+++ b/src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable quotes */
 import {
   Button,
   Flex,
diff --git a/src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.test.tsx b/src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.test.tsx
index 40da7fc5..f16abe8a 100644
--- a/src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.test.tsx
+++ b/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 />);
diff --git a/src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.tsx b/src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.tsx
index 3fe2c016..1823df70 100644
--- a/src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.tsx
+++ b/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}
diff --git a/src/Pages/Repositories/ContentListTable/components/UploadContent/components/FileUploader.tsx b/src/Pages/Repositories/ContentListTable/components/UploadContent/components/FileUploader.tsx
index 2322672a..90b105d5 100644
--- a/src/Pages/Repositories/ContentListTable/components/UploadContent/components/FileUploader.tsx
+++ b/src/Pages/Repositories/ContentListTable/components/UploadContent/components/FileUploader.tsx
@@ -3,6 +3,7 @@ import {
   MultipleFileUpload,
   MultipleFileUploadMain,
   MultipleFileUploadStatus,
+  Progress,
   Tooltip,
   type DropEvent,
 } from '@patternfly/react-core';
@@ -19,14 +20,18 @@ import {
 import { createUseStyles } from 'react-jss';
 import { createUpload, uploadChunk } from 'services/Content/ContentApi';
 import Loader from 'components/Loader';
-import { UploadIcon } from '@patternfly/react-icons';
-import { global_success_color_100 } from '@patternfly/react-tokens';
+import { DownloadIcon, FileIcon, UploadIcon } from '@patternfly/react-icons';
+import { global_primary_color_100 } from '@patternfly/react-tokens';
+import useDebounce from 'Hooks/useDebounce';
 
 const useStyles = createUseStyles({
   mainDropzone: {
     width: '625px',
     minHeight: '103px',
   },
+  pointer: {
+    '&:hover': { cursor: 'pointer' },
+  },
 });
 
 interface Props {
@@ -34,15 +39,16 @@ interface Props {
     React.SetStateAction<{ sha256: string; uuid: string; href: string }[]>
   >;
   isLoading: boolean;
+  setChildLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
+export default function FileUploader({ setFileUUIDs, isLoading, setChildLoading }: Props) {
   const classes = useStyles();
   const [currentFiles, setCurrentFiles] = useState<Record<string, FileInfo>>({});
   const [isBatching, setIsBatching] = useState(false);
-  const [isDropping, setIsDropping] = useState(false);
+  const [isHashing, setisHashing] = useState(false);
 
-  const [fileCountGreaterThanZero, fileCount, completedCount, failedCount] = useMemo(
+  const [fileCountGreaterThanZero, fileCount, completedCount, failedCount, hasRetrying] = useMemo(
     () => [
       // showStatus
       !!Object.values(currentFiles).length,
@@ -52,12 +58,15 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
       Object.values(currentFiles).filter(({ completed }) => completed).length,
       // failedCount
       Object.values(currentFiles).filter(({ failed }) => failed).length,
+      // hasAnyfilesBeingRetried
+      Object.values(currentFiles).some(({ isRetrying }) => isRetrying),
     ],
     [currentFiles],
   );
 
   useEffect(() => {
     if (completedCount === fileCount) {
+      // This means we are in a good state to allow the parent to continue
       const items = Object.values(currentFiles).map(({ uuid, checksum, artifact }) => ({
         sha256: checksum,
         uuid,
@@ -68,15 +77,21 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
     }
   }, [completedCount, fileCount]);
 
-  const statusIcon = useMemo(() => {
-    if (failedCount) {
-      return <StatusIcon status='failed' removeText />;
-    }
-    if (completedCount === fileCount) {
-      return <StatusIcon status='completed' removeText />;
-    }
-    return <StatusIcon status='running' removeText />;
-  }, [completedCount, fileCount, failedCount]);
+  const isLoadingForParent = useDebounce(isBatching || isHashing || hasRetrying, 200);
+
+  useEffect(() => {
+    setChildLoading(isLoadingForParent);
+  }, [isLoadingForParent]);
+
+  //   const statusIcon = useMemo(() => {
+  //     if (failedCount) {
+  //       return <StatusIcon status='failed' removeText />;
+  //     }
+  //     if (completedCount === fileCount) {
+  //       return <StatusIcon status='completed' removeText />;
+  //     }
+  //     return <StatusIcon status='running' removeText />;
+  //   }, [completedCount, fileCount, failedCount]);
 
   const updateItem = async (name: string) => {
     if (currentFiles[name]) {
@@ -98,7 +113,7 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
             setCurrentFiles((prev) => ({ ...prev, [name]: currentFiles[name] }));
 
             try {
-              await uploadChunk({
+              const [promise, abort] = uploadChunk({
                 chunkRange: chunkRange,
                 created: currentFiles[name].created,
                 sha256,
@@ -106,20 +121,32 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
                 upload_uuid: currentFiles[name].uuid,
               });
 
-              currentFiles[name].chunks[targetIndex].completed = true;
+              setCurrentFiles((prev) => {
+                prev[name].chunks[targetIndex].cancel = abort;
+                return { ...prev, [name]: prev[name] };
+              });
+
+              await promise;
 
               targetIndexes.delete(targetIndex);
-              if (targetIndexes.size === 0) {
-                currentFiles[name].completed = true;
-              }
-              setCurrentFiles((prev) => ({ ...prev, [name]: currentFiles[name] }));
+              setCurrentFiles((prev) => {
+                if (targetIndexes.size === 0) {
+                  prev[name].completed = true;
+                }
+                prev[name].chunks[targetIndex].completed = true;
+                return { ...prev, [name]: prev[name] };
+              });
             } catch (_error) {
-              currentFiles[name].chunks[targetIndex].retryCount += 1;
+              setCurrentFiles((prev) => {
+                prev[name].chunks[targetIndex].retryCount += 1;
+                prev[name].chunks[targetIndex].queued = false;
+                return { ...prev, [name]: prev[name] };
+              });
+
               if (currentFiles[name].chunks[targetIndex].retryCount > MAX_RETRY_COUNT) {
                 return `Failed to upload chunk: ${start} to ${end}`;
               }
-              currentFiles[name].chunks[targetIndex].queued = false;
-              setCurrentFiles((prev) => ({ ...prev, [name]: currentFiles[name] }));
+
               return (_error as Error).message;
             }
           }),
@@ -138,7 +165,7 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
   };
 
   useEffect(() => {
-    if (!isBatching && !isDropping) {
+    if (!isBatching && !isHashing) {
       setIsBatching(true);
       const allDownloads = Object.keys(currentFiles).filter(
         (name) =>
@@ -165,7 +192,7 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
         setIsBatching(false);
       })();
     }
-  }, [fileCount, completedCount, failedCount, isBatching, isDropping]);
+  }, [fileCount, completedCount, failedCount, isBatching, isHashing]);
 
   const storeFileInfoForUpdate = async (file: File) => {
     const totalCount =
@@ -247,7 +274,7 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
   };
 
   const handleFileDrop = async (_: DropEvent | undefined, droppedFiles: File[]) => {
-    setIsDropping(true);
+    setisHashing(true);
     if (currentFiles.length) {
       const droppedFileNames = droppedFiles.map(({ name }) => name);
 
@@ -257,39 +284,83 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
     }
 
     await Promise.all(droppedFiles.map((file) => storeFileInfoForUpdate(file)));
-    setIsDropping(false);
+    setisHashing(false);
   };
 
-  const retryItem = (name: string) => {
+  const retryItem = async (name: string) => {
     if (!currentFiles[name]) return;
-    currentFiles[name].error = '';
-    currentFiles[name].failed = false;
-
     // If there is no uuid, we know that the checksum or upload failed
     if (!currentFiles[name].uuid) {
-      setCurrentFiles((prev) => ({ ...prev, [name]: currentFiles[name] }));
-      handleFileDrop(undefined, [currentFiles[name].file]);
-    } else {
-      // It is a chunk failure
-      currentFiles[name].chunks = currentFiles[name].chunks.map((chunk) => ({
-        ...chunk,
-        retryCount: 0,
-        // If Chunk is not completed, we know that it failed, so we want to reset it to be requeued
-        queued: chunk.completed,
-      }));
-      setCurrentFiles((prev) => ({ ...prev, [name]: currentFiles[name] }));
+      return handleFileDrop(undefined, [currentFiles[name].file]);
+    }
+    setCurrentFiles((prev) => ({ ...prev, [name]: { ...prev[name], isRetrying: true } }));
+    try {
+      // First get the currently finished chunks/check if item is already done (artifact_href).
+      const res = await createUpload(currentFiles[name].file.size, currentFiles[name].checksum);
+      if (res.upload_uuid) currentFiles[name].uuid = res.upload_uuid;
+      if (res.created) currentFiles[name].created = res.created;
+      if (res.artifact_href) {
+        currentFiles[name].artifact = res.artifact_href;
+      }
+      if (res.completed_checksums) {
+        const completedChunkChecksums = new Set<string>(res.completed_checksums);
+        currentFiles[name].chunks = currentFiles[name].chunks.map((chunk) => ({
+          ...chunk,
+          completed: !!currentFiles[name].artifact || completedChunkChecksums.has(chunk.sha256),
+        }));
+      }
+    } catch (err) {
+      return setCurrentFiles((prev) => {
+        prev[name].error = 'Failed to create upload file: ' + (err as Error).message;
+        prev[name].isRetrying = false;
+        return { ...prev, [name]: prev[name] };
+      });
     }
+
+    currentFiles[name].error = ''; // Remove any previously existing error state
+    currentFiles[name].failed = false; // Mark failed as false so it can be requed below.
+    currentFiles[name].isRetrying = false;
+
+    // If there is chunk failures (IE we stopped a previous upload)
+    currentFiles[name].chunks = currentFiles[name].chunks.map((chunk) => ({
+      ...chunk,
+      retryCount: 0,
+      // If Chunk is not completed, we know that it failed or was stopped, so we want to reset it to be requeued
+      queued: chunk.completed,
+    }));
+
+    // If there is an artifact or if all chunks are completed, the file is completed
+    currentFiles[name].completed =
+      !!currentFiles[name].artifact || currentFiles[name].chunks.every((chunk) => chunk.completed);
+
+    setCurrentFiles((prev) => ({ ...prev, [name]: currentFiles[name] }));
   };
 
-  const removeItem = (name: string) =>
-    setCurrentFiles((prev) => {
-      delete prev[name];
-      return { ...prev };
-    });
+  const removeItem = (name: string) => {
+    if (!currentFiles[name]) return;
+    if (currentFiles[name].error || currentFiles[name].completed) {
+      setCurrentFiles((prev) => {
+        delete prev[name];
+        return { ...prev };
+      });
+    } else {
+      setCurrentFiles((prev) => {
+        prev[name].chunks = prev[name].chunks.map((chunk) => {
+          if (!chunk.completed && chunk?.cancel) {
+            chunk?.cancel();
+            return { ...chunk, cancel: undefined, completed: false };
+          }
+          return chunk;
+        });
+
+        return { ...prev };
+      });
+    }
+  };
 
   const uploadMainProps = useMemo(() => {
     switch (true) {
-      case isDropping:
+      case isHashing:
         return {
           titleIcon: <StatusIcon status='running' removeText />,
           titleText: 'Calculating hash for each file',
@@ -299,6 +370,7 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
         return {
           titleIcon: <StatusIcon status='running' removeText />,
           titleText: `Uploading files (${Math.round((completedCount / fileCount) * 100)}% completed)`,
+          infoText: <Progress value={Math.round((completedCount / fileCount) * 100)} />,
           isUploadButtonHidden: true,
         };
       case fileCountGreaterThanZero && fileCount === completedCount:
@@ -320,7 +392,7 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
           infoText: 'Accepted file types: .rpm',
         };
     }
-  }, [isDropping, fileCountGreaterThanZero, fileCount, completedCount, failedCount]);
+  }, [isHashing, fileCountGreaterThanZero, fileCount, completedCount, failedCount]);
 
   const actionOngoing = uploadMainProps.isUploadButtonHidden;
   if (isLoading) return <Loader minHeight='20vh' />;
@@ -345,10 +417,11 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
       {fileCountGreaterThanZero && (
         <MultipleFileUploadStatus
           statusToggleText={`${completedCount} of ${fileCount} files are ready to be added to the repository${failedCount ? `, ${failedCount} failed` : ''}`}
-          statusToggleIcon={statusIcon}
+          //   statusToggleIcon={statusIcon}
         >
-          {Object.values(currentFiles).map(
-            ({ checksum, chunks, error, file, failed, artifact, isResumed }) => {
+          {Object.values(currentFiles)
+            .reverse()
+            .map(({ checksum, isRetrying, chunks, error, file, failed, artifact, isResumed }) => {
               const completedChunks = chunks.filter(({ completed }) => completed).length;
               const progressValue = Math.round((completedChunks / chunks.length) * 100);
 
@@ -357,6 +430,31 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
                   fileSize={file.size}
                   key={file.name}
                   fileName={file.name}
+                  fileIcon={
+                    !!artifact || isResumed ? (
+                      <Tooltip
+                        key={file.name}
+                        content='An identical file was previously uploaded, data has been reused.'
+                      >
+                        <DownloadIcon
+                          tabIndex={-1}
+                          className={classes.pointer}
+                          color={global_primary_color_100.value}
+                        />
+                      </Tooltip>
+                    ) : (
+                      <Tooltip
+                        key={file.name}
+                        content="This file will be uploaded in chunks and added to your repository when you click 'Confirm changes' below."
+                      >
+                        <FileIcon
+                          tabIndex={-1}
+                          className={classes.pointer}
+                          color={global_primary_color_100.value}
+                        />
+                      </Tooltip>
+                    )
+                  }
                   progressVariant={(() => {
                     switch (true) {
                       case failed:
@@ -367,24 +465,14 @@ export default function FileUploader({ setFileUUIDs, isLoading }: Props) {
                         break;
                     }
                   })()}
-                  retry={checksum ? () => retryItem(file.name) : undefined}
+                  retry={checksum && !isRetrying ? () => retryItem(file.name) : undefined}
                   progressHelperText={error}
                   progressValue={progressValue}
-                  progressLabel={
-                    !!artifact || isResumed ? (
-                      <Tooltip content='An identical file was previously uploaded, data has been reused.'>
-                        <UploadIcon color={global_success_color_100.value} />
-                      </Tooltip>
-                    ) : (
-                      ''
-                    )
-                  }
-                  deleteButtonDisabled={!failed && progressValue < 100 && progressValue > 0}
+                  hideClearButton={isHashing}
                   onClearClick={() => removeItem(file.name)}
                 />
               );
-            },
-          )}
+            })}
         </MultipleFileUploadStatus>
       )}
     </MultipleFileUpload>
diff --git a/src/Pages/Repositories/ContentListTable/components/UploadContent/components/UploadStatusItem.tsx b/src/Pages/Repositories/ContentListTable/components/UploadContent/components/UploadStatusItem.tsx
index e749702c..d05140f1 100644
--- a/src/Pages/Repositories/ContentListTable/components/UploadContent/components/UploadStatusItem.tsx
+++ b/src/Pages/Repositories/ContentListTable/components/UploadContent/components/UploadStatusItem.tsx
@@ -31,7 +31,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   className?: string;
   buttonAriaLabel?: string;
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
-  deleteButtonDisabled?: boolean;
+  hideClearButton?: boolean;
   fileIcon?: React.ReactNode;
   fileName: string;
   maxFileNameLength?: number;
@@ -52,7 +52,7 @@ export default function UploadStatusItem({
   className,
   fileIcon,
   onClearClick = () => {},
-  deleteButtonDisabled,
+  hideClearButton,
   fileName,
   maxFileNameLength = 50,
   fileSize,
@@ -120,15 +120,11 @@ export default function UploadStatusItem({
       </div>
 
       <Flex direction={{ default: 'column' }} className={styles.multipleFileUploadStatusItemClose}>
-        <Button
-          isDisabled={deleteButtonDisabled}
-          variant='plain'
-          isDanger
-          aria-label={buttonAriaLabel}
-          onClick={onClearClick}
-        >
-          <TimesIcon />
-        </Button>
+        <Hide hide={!!hideClearButton}>
+          <Button variant='plain' isDanger aria-label={buttonAriaLabel} onClick={onClearClick}>
+            <TimesIcon />
+          </Button>
+        </Hide>
         <Hide hide={!retry || progressVariant !== 'danger'}>
           <Button className={classes.noPadding} variant='link' onClick={retry}>
             Retry
diff --git a/src/Pages/Repositories/ContentListTable/components/UploadContent/components/helpers.tsx b/src/Pages/Repositories/ContentListTable/components/UploadContent/components/helpers.tsx
index d3c11cde..07d9afdd 100644
--- a/src/Pages/Repositories/ContentListTable/components/UploadContent/components/helpers.tsx
+++ b/src/Pages/Repositories/ContentListTable/components/UploadContent/components/helpers.tsx
@@ -1,5 +1,6 @@
 import CryptoJS from 'crypto-js';
 
+// Change this number to change chunk/slice size
 export const MAX_CHUNK_SIZE = 1048576 * 3; // MB
 
 export const BATCH_SIZE = 5;
@@ -18,14 +19,13 @@ const readSlice = (file: File, start: number, size: number): Promise<Uint8Array>
 
 export const getFileChecksumSHA256 = async (file: File): Promise<string> => {
   let sha256 = CryptoJS.algo.SHA256.create();
-  const sliceSize = 3_145_728; // 3 MiB
   let start = 0;
 
   while (start < file.size) {
-    const slice: Uint8Array = await readSlice(file, start, sliceSize);
+    const slice: Uint8Array = await readSlice(file, start, MAX_CHUNK_SIZE);
     const wordArray = CryptoJS.lib.WordArray.create(slice);
     sha256 = sha256.update(wordArray);
-    start += sliceSize;
+    start += MAX_CHUNK_SIZE;
   }
 
   sha256.finalize();
@@ -42,6 +42,7 @@ export type Chunk = {
   queued: boolean;
   completed: boolean;
   retryCount: number;
+  cancel?: () => void;
 };
 
 export type FileInfo = {
@@ -55,4 +56,5 @@ export type FileInfo = {
   completed?: boolean;
   failed?: boolean;
   isResumed?: boolean;
+  isRetrying?: boolean;
 };
diff --git a/src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx b/src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx
index f0237644..302c52d7 100644
--- a/src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx
+++ b/src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx
@@ -1,4 +1,4 @@
-import {fireEvent, render} from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import TemplateDetails from './TemplateDetails';
 import { defaultTemplateItem } from 'testingHelpers';
 
@@ -41,15 +41,15 @@ it('expect UseTemplateModal to render correctly', () => {
   const useTemplate = getByLabelText('use-template-button') as Element;
   expect(useTemplate).toBeInTheDocument();
   fireEvent.click(useTemplate);
-  expect(queryByText('Assign the template to a system')).toBeInTheDocument()
+  expect(queryByText('Assign the template to a system')).toBeInTheDocument();
 
   const curlTab = getByLabelText('curl-tab') as Element;
   expect(curlTab).toBeInTheDocument();
   fireEvent.click(curlTab);
-  expect(queryByText('Download the repo file')).toBeInTheDocument()
+  expect(queryByText('Download the repo file')).toBeInTheDocument();
 
   const ansibleTab = getByLabelText('ansible-tab') as Element;
   expect(ansibleTab).toBeInTheDocument();
   fireEvent.click(ansibleTab);
-  expect(queryByText('Use this ansible playbook to download the repo file')).toBeInTheDocument()
+  expect(queryByText('Use this ansible playbook to download the repo file')).toBeInTheDocument();
 });
diff --git a/src/Pages/Templates/TemplateDetails/TemplateDetails.tsx b/src/Pages/Templates/TemplateDetails/TemplateDetails.tsx
index e830b322..1aca9cd5 100644
--- a/src/Pages/Templates/TemplateDetails/TemplateDetails.tsx
+++ b/src/Pages/Templates/TemplateDetails/TemplateDetails.tsx
@@ -8,7 +8,10 @@ import {
   LabelGroup,
   Stack,
   StackItem,
-  Title, Toolbar, ToolbarContent, ToolbarItem,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
 } from '@patternfly/react-core';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import { createUseStyles } from 'react-jss';
@@ -117,10 +120,10 @@ export default function TemplateDetails() {
             <Toolbar>
               <ToolbarContent>
                 <ToolbarItem>
-                  <UseTemplateModal/>
+                  <UseTemplateModal />
                 </ToolbarItem>
                 <ToolbarItem>
-                 <TemplateActionDropdown />
+                  <TemplateActionDropdown />
                 </ToolbarItem>
               </ToolbarContent>
             </Toolbar>
diff --git a/src/Pages/Templates/TemplateDetails/components/UseTemplate/AnsibleTab.tsx b/src/Pages/Templates/TemplateDetails/components/UseTemplate/AnsibleTab.tsx
index d37da51f..2ad8e100 100644
--- a/src/Pages/Templates/TemplateDetails/components/UseTemplate/AnsibleTab.tsx
+++ b/src/Pages/Templates/TemplateDetails/components/UseTemplate/AnsibleTab.tsx
@@ -1,130 +1,142 @@
 import {
-    Alert,
-    ClipboardCopy,
-    ClipboardCopyButton,
-    ClipboardCopyVariant, CodeBlock, CodeBlockAction, CodeBlockCode,
-    TabContent,
-    Text, TextContent,
-    TextList,
-    TextListItem,
-    TextVariants
+  Alert,
+  ClipboardCopy,
+  ClipboardCopyButton,
+  ClipboardCopyVariant,
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  TabContent,
+  Text,
+  TextContent,
+  TextList,
+  TextListItem,
+  TextVariants,
 } from '@patternfly/react-core';
 import React from 'react';
-import {createUseStyles} from 'react-jss';
-import {useParams} from 'react-router-dom';
-import {ExternalLinkAltIcon} from "@patternfly/react-icons";
+import { createUseStyles } from 'react-jss';
+import { useParams } from 'react-router-dom';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
-export const ANSIBLE_TAB = 'ansible'
+export const ANSIBLE_TAB = 'ansible';
 
 const useStyles = createUseStyles({
-    textGroup: {
-        paddingTop: '8px',
-    },
-})
+  textGroup: {
+    paddingTop: '8px',
+  },
+});
 
 type Props = {
-    tabContentRef:  React.RefObject<HTMLElement>
-}
+  tabContentRef: React.RefObject<HTMLElement>;
+};
 
 const playbook1 = `---
 - hosts: all
   tasks:
     - name: Download template.repo
       ansible.builtin.get_url:
-        url: https://console.redhat.com/api/content-sources/v1/templates/`
+        url: https://console.redhat.com/api/content-sources/v1/templates/`;
 const playbook2 = `/config.repo
         dest: /etc/yum.repos.d/template.repo
         mode: '0444'
         client_cert: /etc/pki/consumer/cert.pem
         client_key:  /etc/pki/consumer/cert.key
-`
+`;
 
 const AnsibleTab = ({ tabContentRef }: Props) => {
-    const classes = useStyles();
-    const { templateUUID } = useParams();
-    const [copied, setCopied] = React.useState(false);
+  const classes = useStyles();
+  const { templateUUID } = useParams();
+  const [copied, setCopied] = React.useState(false);
 
-    const clipboardCopyFunc = (event, text) => {
-        navigator.clipboard.writeText(text.toString());
-    };
+  const clipboardCopyFunc = (event, text) => {
+    navigator.clipboard.writeText(text.toString());
+  };
 
-    const onClick = (event, text) => {
-        clipboardCopyFunc(event, text);
-        setCopied(true);
-    };
+  const onClick = (event, text) => {
+    clipboardCopyFunc(event, text);
+    setCopied(true);
+  };
 
-    const actions = (
-        <React.Fragment>
-            <CodeBlockAction>
-                <ClipboardCopyButton
-                    id="basic-copy-button"
-                    textId="code-content"
-                    aria-label="Copy to clipboard"
-                    onClick={(e) => onClick(e, playbook1+`${templateUUID}`+playbook2)}
-                    exitDelay={copied ? 1500 : 600}
-                    maxWidth="110px"
-                    variant="plain"
-                    onTooltipHidden={() => setCopied(false)}
-                >
-                    {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
-                </ClipboardCopyButton>
-            </CodeBlockAction>
-        </React.Fragment>
-    );
+  const actions = (
+    <React.Fragment>
+      <CodeBlockAction>
+        <ClipboardCopyButton
+          id='basic-copy-button'
+          textId='code-content'
+          aria-label='Copy to clipboard'
+          onClick={(e) => onClick(e, playbook1 + `${templateUUID}` + playbook2)}
+          exitDelay={copied ? 1500 : 600}
+          maxWidth='110px'
+          variant='plain'
+          onTooltipHidden={() => setCopied(false)}
+        >
+          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
+        </ClipboardCopyButton>
+      </CodeBlockAction>
+    </React.Fragment>
+  );
 
-    return (
-        <TabContent eventKey={ANSIBLE_TAB} id={ANSIBLE_TAB} ref={tabContentRef} hidden>
-            <div className={classes.textGroup}>
-                <Alert
-                    variant='warning'
-                    title='Consuming a template in this way will result in the system not reporting applicable errata properly within Insights.'
-                    isInline
-                >
-                    System advisory information will not be available via {' '}
-                    <a href="insights/patch/systems/" rel='noreferrer' target='_blank'>
-                        Systems <ExternalLinkAltIcon/>
-                    </a>
-                </Alert>
-            </div>
-            <TextContent className={classes.textGroup}>
-                <Text component={TextVariants.h2}>Register for subscriptions</Text>
-                <TextList isPlain>
-                    <TextListItem>
-                        <Text component="h6">Register with rhc</Text>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied"
-                                       variant={ClipboardCopyVariant.expansion}>
-                            rhc connect
-                        </ClipboardCopy>
-                    </TextListItem>
-                    <TextListItem>
-                        <Text component="h6">Or register with subscription manager</Text>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied"
-                                       variant={ClipboardCopyVariant.expansion}>
-                            subscription-manager register
-                        </ClipboardCopy>
-                    </TextListItem>
-                </TextList>
-                <TextList isPlain>
-                    <TextListItem>
-                        <Text component={TextVariants.h2}>Use this ansible playbook to download the repo file</Text>
-                        <CodeBlock actions={actions}>
-                            <CodeBlockCode>
-                                {playbook1 + `${templateUUID}` + playbook2}
-                            </CodeBlockCode>
-                        </CodeBlock>
-                    </TextListItem>
-                </TextList>
-            </TextContent>
-            <div className={classes.textGroup}>
-                <Alert
-                    variant='info'
-                    title='Adding or removing a repository from the template will not be reflected on the
+  return (
+    <TabContent eventKey={ANSIBLE_TAB} id={ANSIBLE_TAB} ref={tabContentRef} hidden>
+      <div className={classes.textGroup}>
+        <Alert
+          variant='warning'
+          title='Consuming a template in this way will result in the system not reporting applicable errata properly within Insights.'
+          isInline
+        >
+          System advisory information will not be available via{' '}
+          <a href='insights/patch/systems/' rel='noreferrer' target='_blank'>
+            Systems <ExternalLinkAltIcon />
+          </a>
+        </Alert>
+      </div>
+      <TextContent className={classes.textGroup}>
+        <Text component={TextVariants.h2}>Register for subscriptions</Text>
+        <TextList isPlain>
+          <TextListItem>
+            <Text component='h6'>Register with rhc</Text>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              rhc connect
+            </ClipboardCopy>
+          </TextListItem>
+          <TextListItem>
+            <Text component='h6'>Or register with subscription manager</Text>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              subscription-manager register
+            </ClipboardCopy>
+          </TextListItem>
+        </TextList>
+        <TextList isPlain>
+          <TextListItem>
+            <Text component={TextVariants.h2}>
+              Use this ansible playbook to download the repo file
+            </Text>
+            <CodeBlock actions={actions}>
+              <CodeBlockCode>{playbook1 + `${templateUUID}` + playbook2}</CodeBlockCode>
+            </CodeBlock>
+          </TextListItem>
+        </TextList>
+      </TextContent>
+      <div className={classes.textGroup}>
+        <Alert
+          variant='info'
+          title='Adding or removing a repository from the template will not be reflected on the
                             client until the repo file is re-downloaded.'
-                    isInline
-                />
-            </div>
-        </TabContent>
-    )
-}
+          isInline
+        />
+      </div>
+    </TabContent>
+  );
+};
 
 export default AnsibleTab;
diff --git a/src/Pages/Templates/TemplateDetails/components/UseTemplate/CurlTab.tsx b/src/Pages/Templates/TemplateDetails/components/UseTemplate/CurlTab.tsx
index 967881ea..957f2bbc 100644
--- a/src/Pages/Templates/TemplateDetails/components/UseTemplate/CurlTab.tsx
+++ b/src/Pages/Templates/TemplateDetails/components/UseTemplate/CurlTab.tsx
@@ -1,86 +1,101 @@
 import {
-    Alert,
-    ClipboardCopy,
-    ClipboardCopyVariant,
-    TabContent,
-    Text, TextContent,
-    TextList,
-    TextListItem,
-    TextVariants
+  Alert,
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  TabContent,
+  Text,
+  TextContent,
+  TextList,
+  TextListItem,
+  TextVariants,
 } from '@patternfly/react-core';
 import React from 'react';
-import {createUseStyles} from 'react-jss';
-import {useParams} from 'react-router-dom';
-import {ExternalLinkAltIcon} from "@patternfly/react-icons";
+import { createUseStyles } from 'react-jss';
+import { useParams } from 'react-router-dom';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
-export const CURL_TAB = 'curl'
+export const CURL_TAB = 'curl';
 
 const useStyles = createUseStyles({
-    textGroup: {
-        paddingTop: '8px',
-    },
-})
+  textGroup: {
+    paddingTop: '8px',
+  },
+});
 
 type Props = {
-    tabContentRef:  React.RefObject<HTMLElement>
-}
+  tabContentRef: React.RefObject<HTMLElement>;
+};
 
 const CurlTab = ({ tabContentRef }: Props) => {
-    const classes = useStyles();
-    const { templateUUID } = useParams();
+  const classes = useStyles();
+  const { templateUUID } = useParams();
 
-    return (
-        <TabContent eventKey={CURL_TAB} id={CURL_TAB} ref={tabContentRef} hidden>
-            <div className={classes.textGroup}>
-                <Alert
-                    variant='warning'
-                    title='Consuming a template in this way will result in the system not reporting applicable errata properly within Insights.'
-                    isInline
-                >
-                    System advisory information will not be available via {' '}
-                    <a href="insights/patch/systems/" rel='noreferrer' target='_blank'>
-                        Systems <ExternalLinkAltIcon/>
-                    </a>
-                </Alert>
-            </div>
-            <TextContent className={classes.textGroup}>
-                <Text component={TextVariants.h2}>Register for subscriptions</Text>
-                <TextList isPlain>
-                    <TextListItem>
-                        <Text component="h6">Register with rhc</Text>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied"
-                                       variant={ClipboardCopyVariant.expansion}>
-                            rhc connect
-                        </ClipboardCopy>
-                    </TextListItem>
-                    <TextListItem>
-                        <Text component="h6">Or register with subscription manager</Text>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied"
-                                       variant={ClipboardCopyVariant.expansion}>
-                            subscription-manager register
-                        </ClipboardCopy>
-                    </TextListItem>
-                </TextList>
-                <TextList isPlain>
-                    <TextListItem>
-                        <Text component={TextVariants.h2}>Download the repo file</Text>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied"
-                                       variant={ClipboardCopyVariant.expansion}>
-                            {'curl -o /etc/yum.repos.d/template.repo  https://console.redhat.com/api/content-sources/v1/templates/' + templateUUID + '/config.repo'}
-                        </ClipboardCopy>
-                    </TextListItem>
-                </TextList>
-            </TextContent>
-            <div className={classes.textGroup}>
-                <Alert
-                    variant='info'
-                    title='Adding or removing a repository from the template will not be reflected on the
+  return (
+    <TabContent eventKey={CURL_TAB} id={CURL_TAB} ref={tabContentRef} hidden>
+      <div className={classes.textGroup}>
+        <Alert
+          variant='warning'
+          title='Consuming a template in this way will result in the system not reporting applicable errata properly within Insights.'
+          isInline
+        >
+          System advisory information will not be available via{' '}
+          <a href='insights/patch/systems/' rel='noreferrer' target='_blank'>
+            Systems <ExternalLinkAltIcon />
+          </a>
+        </Alert>
+      </div>
+      <TextContent className={classes.textGroup}>
+        <Text component={TextVariants.h2}>Register for subscriptions</Text>
+        <TextList isPlain>
+          <TextListItem>
+            <Text component='h6'>Register with rhc</Text>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              rhc connect
+            </ClipboardCopy>
+          </TextListItem>
+          <TextListItem>
+            <Text component='h6'>Or register with subscription manager</Text>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              subscription-manager register
+            </ClipboardCopy>
+          </TextListItem>
+        </TextList>
+        <TextList isPlain>
+          <TextListItem>
+            <Text component={TextVariants.h2}>Download the repo file</Text>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              {'curl -o /etc/yum.repos.d/template.repo  https://console.redhat.com/api/content-sources/v1/templates/' +
+                templateUUID +
+                '/config.repo'}
+            </ClipboardCopy>
+          </TextListItem>
+        </TextList>
+      </TextContent>
+      <div className={classes.textGroup}>
+        <Alert
+          variant='info'
+          title='Adding or removing a repository from the template will not be reflected on the
                             client until the repo file is re-downloaded.'
-                    isInline
-                />
-            </div>
-        </TabContent>
-    )
-}
+          isInline
+        />
+      </div>
+    </TabContent>
+  );
+};
 
 export default CurlTab;
diff --git a/src/Pages/Templates/TemplateDetails/components/UseTemplate/InsightsTab.tsx b/src/Pages/Templates/TemplateDetails/components/UseTemplate/InsightsTab.tsx
index fa778908..526164b3 100644
--- a/src/Pages/Templates/TemplateDetails/components/UseTemplate/InsightsTab.tsx
+++ b/src/Pages/Templates/TemplateDetails/components/UseTemplate/InsightsTab.tsx
@@ -1,79 +1,97 @@
 import {
-    ClipboardCopy,
-    ClipboardCopyVariant,
-    TabContent,
-    Text, TextContent,
-    TextList,
-    TextListItem,
-    TextVariants
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  TabContent,
+  Text,
+  TextContent,
+  TextList,
+  TextListItem,
+  TextVariants,
 } from '@patternfly/react-core';
 import React from 'react';
-import {ADD_ROUTE, DETAILS_ROUTE, SYSTEMS_ROUTE} from '../../../../../Routes/constants';
-import {ExternalLinkAltIcon} from '@patternfly/react-icons';
-import {createUseStyles} from 'react-jss';
-import {useLocation, useParams} from 'react-router-dom';
+import { ADD_ROUTE, DETAILS_ROUTE, SYSTEMS_ROUTE } from '../../../../../Routes/constants';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { createUseStyles } from 'react-jss';
+import { useLocation, useParams } from 'react-router-dom';
 
-export const INSIGHTS_TAB = 'insights'
+export const INSIGHTS_TAB = 'insights';
 
 const useStyles = createUseStyles({
-    textGroup: {
-        paddingTop: '8px',
-    },
-})
+  textGroup: {
+    paddingTop: '8px',
+  },
+});
 
 type Props = {
-    tabContentRef:  React.RefObject<HTMLElement>
-}
+  tabContentRef: React.RefObject<HTMLElement>;
+};
 
 const InsightsTab = ({ tabContentRef }: Props) => {
-    const classes = useStyles();
+  const classes = useStyles();
 
-    const { pathname } = useLocation();
-    const [mainRoute] = pathname?.split(`${DETAILS_ROUTE}/`) || [];
-    const addSystemsRoute = mainRoute + `${DETAILS_ROUTE}/`+ `${SYSTEMS_ROUTE}/` + `${ADD_ROUTE}/`;
-    const { templateUUID } = useParams();
+  const { pathname } = useLocation();
+  const [mainRoute] = pathname?.split(`${DETAILS_ROUTE}/`) || [];
+  const addSystemsRoute = mainRoute + `${DETAILS_ROUTE}/` + `${SYSTEMS_ROUTE}/` + `${ADD_ROUTE}/`;
+  const { templateUUID } = useParams();
 
-    return (
-        <TabContent eventKey={INSIGHTS_TAB} id={INSIGHTS_TAB} ref={tabContentRef}>
-            <TextContent className={classes.textGroup}>
-                <Text component={TextVariants.h2}>Register for subscriptions</Text>
-                <TextList isPlain>
-                    <TextListItem>
-                        <Text component="h6">Register with rhc</Text>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-                            rhc connect
-                        </ClipboardCopy>
-                    </TextListItem>
-                </TextList>
-                <Text component={TextVariants.h2}>Assign the template to a system</Text>
-                <TextList isPlain>
-                    <TextListItem>
-                        <Text component="h6"> Add the template via the UI </Text>
-                        <Text>
-                            Add the template in {' '}
-                            <a href={addSystemsRoute} rel='noreferrer' target='_blank'>
-                                Systems <ExternalLinkAltIcon/>
-                            </a>
-                        </Text>
-                    </TextListItem>
-                    <TextListItem>
-                        <Text component="h6"> Or add the template via the API </Text>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-                            {'curl --cert /etc/pki/consumer/cert.pem  --key /etc/pki/consumer/key.pem -X PATCH https://console.redhat.com/api/patch/v3/templates/'+templateUUID+'/subscribed-systems'}
-                        </ClipboardCopy>
-                    </TextListItem>
-                </TextList>
-                <Text component={TextVariants.h2}>Refresh Subscription Manager</Text>
-                <TextList isPlain>
-                    <TextListItem>
-                        <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-                            subscription-manager refresh
-                        </ClipboardCopy>
-                    </TextListItem>
-                </TextList>
-            </TextContent>
-        </TabContent>
-    )
-}
+  return (
+    <TabContent eventKey={INSIGHTS_TAB} id={INSIGHTS_TAB} ref={tabContentRef}>
+      <TextContent className={classes.textGroup}>
+        <Text component={TextVariants.h2}>Register for subscriptions</Text>
+        <TextList isPlain>
+          <TextListItem>
+            <Text component='h6'>Register with rhc</Text>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              rhc connect
+            </ClipboardCopy>
+          </TextListItem>
+        </TextList>
+        <Text component={TextVariants.h2}>Assign the template to a system</Text>
+        <TextList isPlain>
+          <TextListItem>
+            <Text component='h6'> Add the template via the UI </Text>
+            <Text>
+              Add the template in{' '}
+              <a href={addSystemsRoute} rel='noreferrer' target='_blank'>
+                Systems <ExternalLinkAltIcon />
+              </a>
+            </Text>
+          </TextListItem>
+          <TextListItem>
+            <Text component='h6'> Or add the template via the API </Text>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              {'curl --cert /etc/pki/consumer/cert.pem  --key /etc/pki/consumer/key.pem -X PATCH https://console.redhat.com/api/patch/v3/templates/' +
+                templateUUID +
+                '/subscribed-systems'}
+            </ClipboardCopy>
+          </TextListItem>
+        </TextList>
+        <Text component={TextVariants.h2}>Refresh Subscription Manager</Text>
+        <TextList isPlain>
+          <TextListItem>
+            <ClipboardCopy
+              isReadOnly
+              hoverTip='Copy'
+              clickTip='Copied'
+              variant={ClipboardCopyVariant.expansion}
+            >
+              subscription-manager refresh
+            </ClipboardCopy>
+          </TextListItem>
+        </TextList>
+      </TextContent>
+    </TabContent>
+  );
+};
 
 export default InsightsTab;
diff --git a/src/Pages/Templates/TemplateDetails/components/UseTemplate/UseTemplateModal.tsx b/src/Pages/Templates/TemplateDetails/components/UseTemplate/UseTemplateModal.tsx
index b0724eb9..fa8a7e0d 100644
--- a/src/Pages/Templates/TemplateDetails/components/UseTemplate/UseTemplateModal.tsx
+++ b/src/Pages/Templates/TemplateDetails/components/UseTemplate/UseTemplateModal.tsx
@@ -1,85 +1,77 @@
-import {
-    Button,
-    Modal,
-    ModalVariant,
-    Tab,
-    Tabs,
-    TabTitleText,
-} from '@patternfly/react-core'
+import { Button, Modal, ModalVariant, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import React from 'react';
-import InsightsTab, {INSIGHTS_TAB} from './InsightsTab';
-import CurlTab, {CURL_TAB} from './CurlTab';
-import AnsibleTab, {ANSIBLE_TAB} from './AnsibleTab';
+import InsightsTab, { INSIGHTS_TAB } from './InsightsTab';
+import CurlTab, { CURL_TAB } from './CurlTab';
+import AnsibleTab, { ANSIBLE_TAB } from './AnsibleTab';
 
 const UseTemplateModal = () => {
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
-    const [activeTabKey, setActiveTabKey] = React.useState<string | number>(INSIGHTS_TAB);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(INSIGHTS_TAB);
 
-    const handleModalToggle = () => {
-        setIsModalOpen(!isModalOpen);
-    };
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
 
-    const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
-        setActiveTabKey(tabIndex);
-    };
+  const handleTabClick = (
+    _event: React.MouseEvent<HTMLElement, MouseEvent>,
+    tabIndex: string | number,
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
 
-    const contentRefInsights = React.createRef<HTMLElement>();
-    const contentRefCurl = React.createRef<HTMLElement>();
-    const contentRefAnsible = React.createRef<HTMLElement>();
+  const contentRefInsights = React.createRef<HTMLElement>();
+  const contentRefCurl = React.createRef<HTMLElement>();
+  const contentRefAnsible = React.createRef<HTMLElement>();
 
-    return (
-        <div>
-        <Button aria-label="use-template-button" variant="primary" onClick={handleModalToggle}>
-            Use template
-        </Button>
+  return (
+    <div>
+      <Button aria-label='use-template-button' variant='primary' onClick={handleModalToggle}>
+        Use template
+      </Button>
 
-        <Modal
-            tabIndex={0}
-            variant={ModalVariant.large}
-            title="Use template"
-            isOpen={isModalOpen}
-            onClose={handleModalToggle}
-            footer={
-                <Button key='close' variant='secondary' onClick={handleModalToggle}>
-                    Close
-                </Button>
-            }
-        >
-            <Tabs
-                activeKey={activeTabKey}
-                onSelect={handleTabClick}
-                aria-label='Use template tabs'
-            >
-                <Tab
-                    eventKey={INSIGHTS_TAB}
-                    title={<TabTitleText>Insights (Preferred)</TabTitleText>}
-                    tabContentId={INSIGHTS_TAB}
-                    tabContentRef={contentRefInsights}
-                    aria-label='insights-tab'
-                />
-                <Tab
-                    eventKey={CURL_TAB}
-                    title={<TabTitleText>Curl</TabTitleText>}
-                    tabContentId={CURL_TAB}
-                    tabContentRef={contentRefCurl}
-                    aria-label='curl-tab'
-                />
-                <Tab
-                    eventKey={ANSIBLE_TAB}
-                    title={<TabTitleText>Ansible</TabTitleText>}
-                    tabContentId={ANSIBLE_TAB}
-                    tabContentRef={contentRefAnsible}
-                    aria-label='ansible-tab'
-                />
-            </Tabs>
-            <div>
-                <InsightsTab tabContentRef={contentRefInsights}/>
-                <CurlTab tabContentRef={contentRefCurl}/>
-                <AnsibleTab tabContentRef={contentRefAnsible}/>
-            </div>
-        </Modal>
+      <Modal
+        tabIndex={0}
+        variant={ModalVariant.large}
+        title='Use template'
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        footer={
+          <Button key='close' variant='secondary' onClick={handleModalToggle}>
+            Close
+          </Button>
+        }
+      >
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label='Use template tabs'>
+          <Tab
+            eventKey={INSIGHTS_TAB}
+            title={<TabTitleText>Insights (Preferred)</TabTitleText>}
+            tabContentId={INSIGHTS_TAB}
+            tabContentRef={contentRefInsights}
+            aria-label='insights-tab'
+          />
+          <Tab
+            eventKey={CURL_TAB}
+            title={<TabTitleText>Curl</TabTitleText>}
+            tabContentId={CURL_TAB}
+            tabContentRef={contentRefCurl}
+            aria-label='curl-tab'
+          />
+          <Tab
+            eventKey={ANSIBLE_TAB}
+            title={<TabTitleText>Ansible</TabTitleText>}
+            tabContentId={ANSIBLE_TAB}
+            tabContentRef={contentRefAnsible}
+            aria-label='ansible-tab'
+          />
+        </Tabs>
+        <div>
+          <InsightsTab tabContentRef={contentRefInsights} />
+          <CurlTab tabContentRef={contentRefCurl} />
+          <AnsibleTab tabContentRef={contentRefAnsible} />
         </div>
-    )
-}
+      </Modal>
+    </div>
+  );
+};
 
-export default UseTemplateModal
+export default UseTemplateModal;
diff --git a/src/services/Content/ContentApi.ts b/src/services/Content/ContentApi.ts
index 5f312f54..1c3b3f32 100644
--- a/src/services/Content/ContentApi.ts
+++ b/src/services/Content/ContentApi.ts
@@ -560,21 +560,21 @@ export const createUpload: (size: number, sha256: string) => Promise<UploadRespo
   return data;
 };
 
-export const uploadChunk: (chunkRequest: UploadChunkRequest) => Promise<UploadResponse> = async ({
-  chunkRange,
-  upload_uuid,
-  file,
-  sha256,
-}) => {
+export const uploadChunk: (
+  chunkRequest: UploadChunkRequest,
+) => [Promise<UploadResponse>, () => void] = ({ chunkRange, upload_uuid, file, sha256 }) => {
   const formData = new FormData();
+  const controller = new AbortController();
+
   formData.set('file', file);
   formData.set('sha256', sha256);
-  const { data } = await axios.post(
+  const request = axios.post(
     `/api/content-sources/v1.0/repositories/uploads/${upload_uuid}/upload_chunk/`,
     formData,
-    { headers: { 'Content-Range': chunkRange } },
+    { headers: { 'Content-Range': chunkRange }, signal: controller.signal },
   );
-  return data;
+  const abort = () => controller.abort();
+  return [request as unknown as Promise<UploadResponse>, abort];
 };
 
 export const addUploads: (chunkRequest: AddUploadRequest) => Promise<AddUploadResponse> = async ({