feat: modularize folder download functionality with reusable utilities (#8084)

✨ (index.tsx): Add support for custom download folder functionality to improve file download process
📝 (use-get-download-folders.ts): Update useGetDownloadFolders function to use customGetDownloadTypeFolders for downloading folders
📝 (custom-get-download-folders.ts): Add customGetDownloadTypeFolders and customGetDownloadFolderBlob functions for handling custom download folder logic

src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -30,6 +30,7 @@ import {
 } from "@/customization/feature-flags";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { track } from "@/customization/utils/analytics";
+import { customGetDownloadFolderBlob } from "@/customization/utils/custom-get-download-folders";
 import { createFileUpload } from "@/helpers/create-file-upload";
 import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
@@ -169,35 +170,14 @@ const SideBarFoldersButtonsComponent = ({
     });
   };
 
-  const handleDownloadFolder = (id: string) => {
+  const handleDownloadFolder = (id: string, folderName: string) => {
     mutateDownloadFolder(
       {
         folderId: id,
       },
       {
         onSuccess: (response) => {
-          // Create a blob from the response data
+          customGetDownloadFolderBlob(response, id, folderName, setSuccessData);
-          const blob = new Blob([response.data], {
-            type: "application/x-zip-compressed",
-          });
-
-          const url = window.URL.createObjectURL(blob);
-          const link = document.createElement("a");
-          link.href = url;
-
-          // Get filename from header or use default
-          const filename =
-            response.headers?.["content-disposition"]
-              ?.split("filename=")[1]
-              ?.replace(/['"]/g, "") ?? "flows.zip";
-
-          link.setAttribute("download", filename);
-          document.body.appendChild(link);
-          link.click();
-          link.remove();
-          window.URL.revokeObjectURL(url);
-
-          track("Project Exported", { folderId: id });
         },
         onError: (e) => {
           setErrorData({
@@ -460,7 +440,9 @@ const SideBarFoldersButtonsComponent = ({
                             item={item}
                             index={index}
                             handleDeleteFolder={handleDeleteFolder}
-                            handleDownloadFolder={handleDownloadFolder}
+                            handleDownloadFolder={() =>
+                              handleDownloadFolder(item.id!, item.name)
+                            }
                             handleSelectFolderToRename={
                               handleSelectFolderToRename
                             }

src/frontend/src/controllers/API/queries/folders/use-get-download-folders.ts

@@ -1,9 +1,9 @@
+import { customGetDownloadTypeFolders } from "@/customization/utils/custom-get-download-folders";
 import { useMutationFunctionType } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
-
 interface IGetDownloadFolders {
   folderId: string;
 }
@@ -19,12 +19,7 @@ export const useGetDownloadFolders: useMutationFunctionType<
   ): Promise<any> => {
     const response = await api.get<any>(
       `${getURL("PROJECTS")}/download/${payload.folderId}`,
-      {
+      customGetDownloadTypeFolders(),
-        responseType: "blob",
-        headers: {
-          Accept: "application/x-zip-compressed",
-        },
-      },
     );
     return response;
   };

src/frontend/src/customization/utils/custom-get-download-folders.ts

@@ -0,0 +1,41 @@
+import { AxiosRequestConfig, ResponseType } from "axios";
+import { track } from "./analytics";
+
+export const customGetDownloadTypeFolders = (): AxiosRequestConfig => {
+  return {
+    responseType: "blob" as ResponseType,
+    headers: {
+      Accept: "application/x-zip-compressed",
+    },
+  };
+};
+
+export const customGetDownloadFolderBlob = (
+  response: any,
+  id: string,
+  folderName?: string,
+  setSuccessData?: (data: any) => void,
+) => {
+  // Create a blob from the response data
+  const blob = new Blob([response.data], {
+    type: "application/x-zip-compressed",
+  });
+
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+
+  // Get filename from header or use default
+  const filename =
+    response.headers?.["content-disposition"]
+      ?.split("filename=")[1]
+      ?.replace(/['"]/g, "") ?? "flows.zip";
+
+  link.setAttribute("download", filename);
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(url);
+
+  track("Project Exported", { folderId: id });
+};