Merge pull request #611 from devtron-labs/feat/new-tab-download

feat: add support for opening the download link in new tab

Author: eshankvaish

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -149,7 +149,9 @@ const Artifacts = ({
     targetPlatforms,
 }: ArtifactType) => {
     const { isSuperAdmin } = useSuperAdmin()
-    const { handleDownload } = useDownload()
+    const { handleDownload } = useDownload({
+        shouldOpenInNewTab: true,
+    })
 
     const { triggerId, buildId } = useParams<{
         triggerId: string

src/Shared/Hooks/UseDownload/UseDownload.tsx

@@ -16,14 +16,14 @@
 
 import { showError } from '@Common/Helper'
 import { useState } from 'react'
-import { API_STATUS_CODES } from '@Common/Constants'
+import { API_STATUS_CODES, Host } from '@Common/Constants'
 import { ServerErrors } from '@Common/ServerError'
 import { getFileNameFromHeaders } from '@Shared/Helpers'
 import { ToastManager, ToastVariantType } from '@Shared/Services'
 import { getDownloadResponse } from './service'
-import { UseDownloadReturnType } from './types'
+import { UseDownloadProps, UseDownloadReturnType } from './types'
 
-const useDownload = (): UseDownloadReturnType => {
+const useDownload = ({ shouldOpenInNewTab }: UseDownloadProps = {}): UseDownloadReturnType => {
     const [isDownloading, setIsDownloading] = useState<boolean>(false)
 
     /**
@@ -40,9 +40,17 @@ const useDownload = (): UseDownloadReturnType => {
         showSuccessfulToast = true,
         downloadSuccessToastContent = 'Downloaded Successfully',
     }) => {
+        const downloadUrlWithHost = `${Host}/${downloadUrl}`
+
+        if (shouldOpenInNewTab) {
+            window.open(downloadUrlWithHost, '_blank')
+            return null
+        }
+
         setIsDownloading(true)
+
         try {
-            const response = await getDownloadResponse(downloadUrl)
+            const response = await getDownloadResponse(downloadUrlWithHost)
             if (response.status === API_STATUS_CODES.OK) {
                 if (showFilePreparingToast) {
                     ToastManager.showToast({

src/Shared/Hooks/UseDownload/service.tsx

@@ -14,6 +14,4 @@
  * limitations under the License.
  */
 
-import { Host } from '@Common/Constants'
-
-export const getDownloadResponse = (downloadUrl: string) => fetch(`${Host}/${downloadUrl}`)
+export const getDownloadResponse = (downloadUrl: string) => fetch(downloadUrl)

src/Shared/Hooks/UseDownload/types.tsx

@@ -24,6 +24,15 @@ export interface HandleDownloadProps {
     downloadSuccessToastContent?: string
 }
 
+export interface UseDownloadProps {
+    /**
+     * If true, the download will open in a new tab
+     *
+     * @default false
+     */
+    shouldOpenInNewTab?: boolean
+}
+
 export interface UseDownloadReturnType {
     handleDownload: (props: HandleDownloadProps) => Promise<Error | ServerErrors>
     isDownloading: boolean