Merge pull request #213 from devtron-labs/feat/use-download-global

feat: use useDownload globally

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.9-beta-1",
+    "version": "0.1.9-beta-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -477,6 +477,7 @@ export const EXCLUDED_FALSY_VALUES = [undefined, null, '', NaN] as const
 
 export const API_STATUS_CODES = {
     OK: 200,
+    NO_CONTENT: 204,
     BAD_REQUEST: 400,
     UNAUTHORIZED: 401,
     PERMISSION_DENIED: 403,

src/Common/Constants.ts

@@ -16,8 +16,8 @@
 
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router'
+import { useDownload } from '@Shared/Hooks'
 import {
-    showError,
     GenericEmptyState,
     ImageTagsContainer,
     ClipboardButton,
@@ -122,7 +122,7 @@ const Artifacts = ({
     artifact,
     blobStorageEnabled,
     isArtifactUploaded,
-    getArtifactPromise,
+    downloadArtifactUrl,
     ciPipelineId,
     artifactId,
     isJobView,
@@ -137,6 +137,7 @@ const Artifacts = ({
     renderCIListHeader,
 }: ArtifactType) => {
     const { isSuperAdmin } = useSuperAdmin()
+    const { handleDownload } = useDownload()
 
     const { triggerId, buildId } = useParams<{
         triggerId: string
@@ -152,17 +153,10 @@ const Artifacts = ({
     }, [copied])
 
     async function handleArtifact() {
-        // TODO: Use useDownload() Hook instead to download file/folder
-        try {
-            const response = await getArtifactPromise()
-            const b = await (response as any).blob()
-            const a = document.createElement('a')
-            a.href = URL.createObjectURL(b)
-            a.download = `${buildId || triggerId}.zip`
-            a.click()
-        } catch (err) {
-            showError(err)
-        }
+        await handleDownload({
+            downloadUrl: downloadArtifactUrl,
+            fileName: `${buildId || triggerId}.zip`,
+        })
     }
 
     if (status.toLowerCase() === TERMINAL_STATUS_MAP.RUNNING || status.toLowerCase() === TERMINAL_STATUS_MAP.STARTING) {
@@ -252,7 +246,7 @@ const Artifacts = ({
                 </CIListItem>
             )}
             {blobStorageEnabled &&
-                getArtifactPromise &&
+                downloadArtifactUrl &&
                 (type === HistoryComponentType.CD || isArtifactUploaded || isJobView) && (
                     <CIListItem
                         type="report"

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -63,7 +63,7 @@ import {
     VirtualHistoryArtifactProps,
     RunSourceType,
 } from './types'
-import { getTagDetails, getTriggerDetails, cancelCiTrigger, cancelPrePostCdTrigger, getCDBuildReport } from './service'
+import { getTagDetails, getTriggerDetails, cancelCiTrigger, cancelPrePostCdTrigger } from './service'
 import { DEFAULT_ENV, TIMEOUT_VALUE, WORKER_POD_BASE_URL } from './constants'
 import { GitTriggers } from '../../types'
 import warn from '../../../Assets/Icon/ic-warning.svg'
@@ -561,6 +561,8 @@ const HistoryLogs: React.FC<{
         workflowId: triggerDetails.id,
     }
 
+    const CDBuildReportUrl = `app/cd-pipeline/workflow/download/${appId}/${envId}/${pipelineId}/${triggerId}`
+
     const [ref, scrollToTop, scrollToBottom] = useScrollable({
         autoBottomScroll: triggerDetails.status.toLowerCase() !== 'succeeded',
     })
@@ -665,7 +667,7 @@ const HistoryLogs: React.FC<{
                                         tagsEditable={tagsEditable}
                                         appReleaseTagNames={appReleaseTags}
                                         hideImageTaggingHardDelete={hideImageTaggingHardDelete}
-                                        getArtifactPromise={() => getCDBuildReport(appId, envId, pipelineId, triggerId)}
+                                        downloadArtifactUrl={CDBuildReportUrl}
                                         type={HistoryComponentType.CD}
                                         renderCIListHeader={renderCIListHeader}
                                     />

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -268,10 +268,6 @@ export const getDeploymentDiffSelector = (
     return get(url)
 }
 
-export function getCDBuildReport(appId, envId, pipelineId, workflowId) {
-    return get(`app/cd-pipeline/workflow/download/${appId}/${envId}/${pipelineId}/${workflowId}`)
-}
-
 export const getTriggerHistory = async ({
     appId,
     envId,

src/Shared/Components/CICDHistory/service.tsx

@@ -551,7 +551,7 @@ export interface ArtifactType {
     artifact: string
     blobStorageEnabled: boolean
     isArtifactUploaded?: boolean
-    getArtifactPromise?: () => Promise<any>
+    downloadArtifactUrl?: string
     isJobView?: boolean
     isJobCI?: boolean
     type: HistoryComponentType

src/Shared/Components/CICDHistory/types.tsx

@@ -707,3 +707,11 @@ export const decode = (data, isEncoded: boolean = false) =>
             agg[curr.key] = curr.value
             return agg
         }, {})
+
+export const getFileNameFromHeaders = (headers: Headers) =>
+    headers
+        ?.get('content-disposition')
+        ?.split(';')
+        ?.find((n) => n.includes('filename='))
+        ?.replace('filename=', '')
+        .trim()

src/Shared/Helpers.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { toast } from 'react-toastify'
 import { API_STATUS_CODES } from '@Common/Constants'
 import { ServerErrors } from '@Common/ServerError'
+import { getFileNameFromHeaders } from '@Shared/Helpers'
 import { getDownloadResponse } from './service'
 import { HandleDownloadProps } from './types'
 
@@ -23,7 +24,7 @@ const useDownload = () => {
         fileName,
         showSuccessfulToast = true,
         downloadSuccessToastContent = 'Downloaded Successfully',
-    }: HandleDownloadProps) => {
+    }: HandleDownloadProps): Promise<Error | ServerErrors> => {
         setIsDownloading(true)
         if (showFilePreparingToast) {
             toast.info(
@@ -45,14 +46,7 @@ const useDownload = () => {
                 const a = document.createElement('a')
                 a.href = blobUrl
 
-                // Get filename from response headers
-                const defaultFileName = response.headers
-                    .get('content-disposition')
-                    .split(';')
-                    .find((n) => n.includes('filename='))
-                    .replace('filename=', '')
-                    .trim()
-                a.download = fileName || defaultFileName || 'file.tgz'
+                a.download = fileName || getFileNameFromHeaders(response.headers) || 'file.tgz'
 
                 // Append the link element to the DOM
                 document.body.appendChild(a)
@@ -69,15 +63,19 @@ const useDownload = () => {
                 if (showSuccessfulToast) {
                     toast.success(downloadSuccessToastContent)
                 }
+            } else if (response.status === API_STATUS_CODES.NO_CONTENT) {
+                throw new Error('No content to download')
             } else {
                 const jsonResponseError: ServerErrors = await response?.json()
                 throw new ServerErrors(jsonResponseError)
             }
         } catch (error) {
-            showError(error)
-        } finally {
             setIsDownloading(false)
+            showError(error)
+            return error
         }
+        setIsDownloading(false)
+        return null
     }
 
     return { handleDownload, isDownloading }