feat(download): enhance download functionality with dynamic URL generation

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CatalogDetail/ActionButton.tsx

@@ -4,7 +4,7 @@ import { CopyIcon, DeleteIcon, EditIcon, KanvasIcon, PublishIcon } from '../../i
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
-import { downloadFilter, downloadYaml } from './helper';
+import { downloadPattern, downloadYaml, getValidSorceType } from './helper';
 import { ActionButton, StyledActionWrapper, UnpublishAction } from './style';
 import { RESOURCE_TYPES } from './types';
 
@@ -13,6 +13,7 @@ interface ActionButtonsProps {
   details: Pattern;
   type: string;
   isCloneLoading: boolean;
+  getDownloadUrl: (sorceType: string, id: string) => string;
   handleClone: (name: string, id: string) => void;
   handleUnpublish: () => void;
   isCloneDisabled: boolean;
@@ -34,6 +35,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   isCloneDisabled,
   showUnpublishAction,
   handleUnpublish,
+  getDownloadUrl,
   showOpenPlaygroundAction,
   onOpenPlaygroundClick,
   showInfoAction,
@@ -42,6 +44,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   handleDelete
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
+  const sorceType = getValidSorceType(type);
   const theme = useTheme();
   return (
     <StyledActionWrapper>
@@ -83,9 +86,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               color: theme.palette.text.default
             }}
             onClick={() =>
-              cleanedType === RESOURCE_TYPES.FILTERS
-                ? downloadFilter(details.id, details.name)
-                : downloadYaml(details.pattern_file, details.name)
+              cleanedType === RESOURCE_TYPES.VIEWS
+                ? downloadYaml(details.pattern_file, details.name)
+                : downloadPattern(details.id, details.name, sorceType, getDownloadUrl)
             }
           >
             <Download width={24} height={24} fill={theme.palette.icon.default} />

src/custom/CatalogDetail/helper.ts

@@ -34,14 +34,17 @@ export function slugify(str: string): string {
   return str;
 }
 
-export const downloadFilter = (id: string, name: string): void => {
-  const dataUri = `${process.env.API_ENDPOINT_PREFIX}/api/content/filters/download/${id}`;
-
-  // Add the .wasm extension to the filename
-  const fileNameWithExtension = name + '.wasm';
+export const downloadPattern = (
+  id: string,
+  name: string,
+  sorceType: string,
+  getDownloadUrl: (sorceType: string, id: string) => string
+): void => {
+  const downloadUrl = getDownloadUrl(sorceType, id);
 
+  const fileNameWithExtension = `${name}.yaml`;
   const linkElement = document.createElement('a');
-  linkElement.setAttribute('href', dataUri);
+  linkElement.setAttribute('href', downloadUrl);
   linkElement.setAttribute('download', fileNameWithExtension);
   linkElement.click();
   linkElement.remove();
@@ -59,3 +62,16 @@ export const formatDate = (date: Date) => {
   const formattedDate = new Date(date).toLocaleDateString('en-US', options);
   return formattedDate;
 };
+
+export const getValidSorceType = (type: string): string => {
+  if (type === 'my-designs' || type === 'catalog') {
+    return 'patterns';
+  }
+  if (type === 'my-filters') {
+    return 'filters';
+  }
+  if (type === 'my-views') {
+    return 'views';
+  }
+  return '';
+};

src/custom/CatalogDetail/types.ts

@@ -37,6 +37,8 @@ export const RESOURCE_TYPES = {
   VIEWS: 'view'
 };
 
+export const PATTERNS = 'patterns';
+
 export type ContentClassType = {
   community: {
     icon: React.ComponentType;