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

feat: add hook use download

Author: arunjaindev

package-lock.json

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

package.json

@@ -477,6 +477,8 @@ export const ZERO_TIME_STRING = '0001-01-01T00:00:00Z'
 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,16 +153,10 @@ const Artifacts = ({
     }, [copied])
 
     async function handleArtifact() {
-        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) {
@@ -251,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

@@ -0,0 +1,84 @@
+import { showError } from '@Common/Helper'
+import { ToastBody } from '@Common/ToastBody'
+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'
+
+const useDownload = () => {
+    const [isDownloading, setIsDownloading] = useState<boolean>(false)
+
+    /**
+     * @param downloadUrl - API url for downloading file
+     * @param filterType - Show toast 'Preparing file for download'
+     * @param fileName - fileName of the downloaded file
+     * @param showSuccessfulToast - show toast on successful download
+     * @param downloadSuccessToastContent - Content to show in toast on successful download
+     */
+    const handleDownload = async ({
+        downloadUrl,
+        showFilePreparingToast = false,
+        fileName,
+        showSuccessfulToast = true,
+        downloadSuccessToastContent = 'Downloaded Successfully',
+    }: HandleDownloadProps): Promise<Error | ServerErrors> => {
+        setIsDownloading(true)
+        if (showFilePreparingToast) {
+            toast.info(
+                <ToastBody
+                    title="Preparing file for download"
+                    subtitle="File will be downloaded when it is available."
+                />,
+            )
+        }
+        try {
+            const response = await getDownloadResponse(downloadUrl)
+            if (response.status === API_STATUS_CODES.OK) {
+                const data = await (response as any).blob()
+
+                // Create a new URL object
+                const blobUrl = URL.createObjectURL(data)
+
+                // Create a link element
+                const a = document.createElement('a')
+                a.href = blobUrl
+
+                a.download = fileName || getFileNameFromHeaders(response.headers) || 'file.tgz'
+
+                // Append the link element to the DOM
+                document.body.appendChild(a)
+
+                // Programmatically click the link to start the download
+                a.click()
+
+                // Clean up the URL object after the download is complete
+                setTimeout(() => {
+                    URL.revokeObjectURL(blobUrl)
+                    document.body.removeChild(a)
+                }, 0)
+
+                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) {
+            setIsDownloading(false)
+            showError(error)
+            return error
+        }
+        setIsDownloading(false)
+        return null
+    }
+
+    return { handleDownload, isDownloading }
+}
+
+export default useDownload

src/Shared/Hooks/UseDownload/UseDownload.tsx

@@ -0,0 +1,2 @@
+export { default as useDownload } from './UseDownload'
+export * from './types'

src/Shared/Hooks/UseDownload/index.tsx

@@ -0,0 +1,3 @@
+import { Host } from '@Common/Constants'
+
+export const getDownloadResponse = (downloadUrl: string) => fetch(`${Host}/${downloadUrl}`)

src/Shared/Hooks/UseDownload/service.tsx

@@ -0,0 +1,7 @@
+export interface HandleDownloadProps {
+    downloadUrl: string
+    showFilePreparingToast?: boolean
+    fileName?: string
+    showSuccessfulToast?: boolean
+    downloadSuccessToastContent?: string
+}

src/Shared/Hooks/UseDownload/types.tsx

@@ -15,3 +15,4 @@
  */
 
 export * from './UsePrompt'
+export * from './UseDownload'