fix: improve downloading artifacts (#885)

* fix: improve downloading artifacts
   - stream the download when it's possible
   - handle errors
   - pass the `routeToRequest` to handle it better in Cloud
* fix: download artifacts archive the old way
* fix: show option to download artifacts archive when more than artifacts is there

src/components/molecules/ArtifactsList/ArtifactsList.tsx

@@ -76,7 +76,7 @@ const ArtifactsList: React.FC<ArtifactsListProps> = props => {
 
   return (
     <ArtifactsListContainer>
-      {artifacts.length > 2 ? (
+      {artifacts.length > 1 ? (
         <StyledDownloadAllContainer>
           <Button onClick={handleDownloadAll}>{!isDownloading ? 'Download all' : 'Downloading...'}</Button>
         </StyledDownloadAllContainer>

src/services/artifacts.ts

@@ -2,6 +2,31 @@ import {getApiEndpoint} from '@services/apiEndpoint';
 
 import {getRtkBaseUrl, getRtkIdToken} from '@utils/rtk';
 
+const downloadFromUrl = (url: string, fileName: string): void => {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};
+
+const downloadPotentialFile = async (response: Response, fileName: string): Promise<void> => {
+  if (!response.status || response.status >= 300) {
+    throw new Error('Something went wrong');
+  }
+
+  if (response.headers.get('content-type') === 'application/json') {
+    const data = await response.json();
+    const fileUrl = data.data?.url || data.url;
+    downloadFromUrl(fileUrl, fileName);
+  } else {
+    const fileUrl = window.URL.createObjectURL(await response.blob());
+    downloadFromUrl(fileUrl, fileName);
+    window.URL.revokeObjectURL(fileUrl);
+  }
+};
+
 export const downloadArtifact = async (
   fileName: string,
   executionId: string,
@@ -16,28 +41,16 @@ export const downloadArtifact = async (
     ...(testSuiteName && {testSuiteName}),
   };
   const url = `/executions/${executionId}/artifacts/${doubleEncodedFileName}`;
-  const finalUrl = `${getApiEndpoint()}${getRtkBaseUrl(undefined)}${url}`;
+  const finalUrl = `${getApiEndpoint()}${getRtkBaseUrl('environment')}${url}`;
   const idToken = await getRtkIdToken();
 
   // Call the API to retrieve file or signed URL
-  let response = await fetch(`${finalUrl}?${new URLSearchParams(queryParams)}`, {
+  const response = await fetch(`${finalUrl}?${new URLSearchParams(queryParams)}`, {
     headers: idToken ? {authorization: `Bearer ${idToken}`} : {},
   });
 
-  // When the signed URL is returned, follow it
-  if (response.headers.get('content-type') === 'application/json') {
-    response = await fetch((await response.json()).data.url);
-  }
-
   // Download the file
-  const blobUrl = window.URL.createObjectURL(await response.blob());
-  const a = document.createElement('a');
-  a.href = blobUrl;
-  a.download = fileName;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  window.URL.revokeObjectURL(blobUrl);
+  await downloadPotentialFile(response, fileName);
 };
 
 export const downloadArtifactArchive = async (fileName: string, executionId: string) => {
@@ -46,23 +59,10 @@ export const downloadArtifactArchive = async (fileName: string, executionId: str
   const idToken = await getRtkIdToken();
 
   // Call the API to retrieve file or signed URL
-  let response = await fetch(finalUrl, {
+  const response = await fetch(finalUrl, {
     headers: idToken ? {authorization: `Bearer ${idToken}`} : {},
   });
 
-  // When the signed URL is returned, follow it
-  if (response.headers.get('content-type') === 'application/json') {
-    response = await fetch((await response.json()).data.url);
-  }
-
   // Download the file
-  const blobUrl = window.URL.createObjectURL(await response.blob());
-  const a = document.createElement('a');
-  a.href = blobUrl;
-  // tar.gz format for archive
-  a.download = fileName;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  window.URL.revokeObjectURL(blobUrl);
+  await downloadPotentialFile(response, fileName);
 };