Merge pull request #865 from amitamrutiya/fix-download

make download patters, filters from the server side

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -3,7 +3,7 @@ import { PLAYGROUND_MODES } from '../../constants/constants';
 import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { CHARCOAL } from '../../theme';
-import { downloadYaml, slugify } from '../CatalogDetail/helper';
+import { downloadPattern, slugify } from '../CatalogDetail/helper';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
@@ -25,6 +25,7 @@ interface ColumnConfigProps {
   handleCopyUrl: (type: string, name: string, id: string) => void;
   handleClone: (name: string, id: string) => void;
   handleShowDetails: (designId: string, designName: string) => void;
+  getDownloadUrl: (id: string) => string;
   isDownloadAllowed: boolean;
   isCopyLinkAllowed: boolean;
   isDeleteAllowed: boolean;
@@ -53,6 +54,7 @@ export const createDesignsColumnsConfig = ({
   handleCopyUrl,
   handleClone,
   handleShowDetails,
+  getDownloadUrl,
   isUnpublishAllowed,
   isCopyLinkAllowed,
   isDeleteAllowed,
@@ -167,15 +169,15 @@ export const createDesignsColumnsConfig = ({
           const actionsList = [
             {
               title: 'Download',
-              onClick: () => downloadYaml(rowData?.pattern_file, rowData?.name),
+              onClick: () => downloadPattern(rowData.id, rowData.name, getDownloadUrl),
               disabled: !isDownloadAllowed,
               icon: <Download width={24} height={24} fill={CHARCOAL} />
             },
             {
               title: 'Copy Link',
               disabled: rowData.visibility === 'private' || !isCopyLinkAllowed,
               onClick: () => {
-                handleCopyUrl(RESOURCE_TYPES.DESIGNS, rowData?.name, rowData?.id);
+                handleCopyUrl(RESOURCE_TYPES.DESIGN, rowData?.name, rowData?.id);
               },
               icon: <ChainIcon width={'24'} height={'24'} fill={CHARCOAL} />
             },
@@ -185,9 +187,7 @@ export const createDesignsColumnsConfig = ({
                 window.open(
                   `https://playground.meshery.io/extension/meshmap?mode=${
                     PLAYGROUND_MODES.DESIGNER
-                  }&type=${RESOURCE_TYPES.DESIGNS}&id=${rowData?.id}&name=${slugify(
-                    rowData?.name
-                  )}`,
+                  }&type=${RESOURCE_TYPES.DESIGN}&id=${rowData?.id}&name=${slugify(rowData?.name)}`,
                   '_blank'
                 );
               },

src/custom/CatalogDesignTable/columnConfig.tsx

@@ -13,8 +13,7 @@ import {
   PublishIcon,
   TwitterIcon
 } from '../../icons';
-import { downloadFilter, downloadYaml } from '../CatalogDetail/helper';
-import { RESOURCE_TYPES } from '../CatalogDetail/types';
+import { downloadPattern } from '../CatalogDetail/helper';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -48,13 +47,13 @@ interface ColumnConfigProps {
   handleUnpublish?: (design: Pattern) => void;
   maxWidth?: boolean;
   getCatalogUrl: (type: string, name: string) => string;
-  type?: string;
   theme?: any;
   showUnpublish?: boolean;
   showOpenPlayground?: boolean;
   currentUserId?: string;
   isCloneDisabled?: boolean;
   isUnpublishDisabled?: boolean;
+  getDownloadUrl: (id: string) => string;
 }
 
 interface ActionItem {
@@ -74,15 +73,14 @@ export const createDesignColumns = ({
   handleUnpublish = () => {},
   maxWidth = true,
   getCatalogUrl,
-  type,
+  getDownloadUrl,
   theme,
   showUnpublish,
   currentUserId,
   isCloneDisabled,
   isUnpublishDisabled,
   showOpenPlayground
 }: ColumnConfigProps): MUIDataTableColumn[] => {
-  const cleanedType = type?.replace('my-', '').replace(/s$/, '');
   return [
     {
       name: 'id',
@@ -260,11 +258,7 @@ export const createDesignColumns = ({
             },
             {
               title: 'Download',
-              onClick: () => {
-                cleanedType === RESOURCE_TYPES.FILTERS
-                  ? downloadFilter(rowData.id, rowData.name)
-                  : downloadYaml(rowData.pattern_file, rowData.name);
-              },
+              onClick: () => downloadPattern(rowData.id, rowData.name, getDownloadUrl),
               icon: <DownloadIcon width={24} height={24} fill={theme.palette.text.primary} />
             },
             {

src/custom/CatalogDetail/ActionButton.tsx

@@ -4,15 +4,16 @@ 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 } from './helper';
 import { ActionButton, StyledActionWrapper, UnpublishAction } from './style';
-import { RESOURCE_TYPES } from './types';
+import { FILTERS, VIEWS } from './types';
 
 interface ActionButtonsProps {
   actionItems: boolean;
   details: Pattern;
   type: string;
   isCloneLoading: boolean;
+  getDownloadUrl: (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,
@@ -83,16 +85,16 @@ 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 === VIEWS
+                ? downloadYaml(details.pattern_file, details.name)
+                : downloadPattern(details.id, details.name, getDownloadUrl)
             }
           >
             <Download width={24} height={24} fill={theme.palette.icon.default} />
             Download
           </ActionButton>
 
-          {cleanedType !== RESOURCE_TYPES.FILTERS && (
+          {cleanedType !== FILTERS && (
             <ActionButton
               sx={{
                 borderRadius: '0.2rem',

src/custom/CatalogDetail/LeftPanel.tsx

@@ -27,6 +27,7 @@ interface LeftPanelProps {
   handleInfoClick?: () => void;
   showDeleteAction?: boolean;
   handleDelete: () => void;
+  getDownloadUrl: (id: string) => string;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -48,7 +49,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   showInfoAction = false,
   handleInfoClick,
   showDeleteAction = false,
-  handleDelete
+  handleDelete,
+  getDownloadUrl
 }) => {
   const theme = useTheme();
 
@@ -95,6 +97,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         handleInfoClick={handleInfoClick}
         showDeleteAction={showDeleteAction}
         handleDelete={handleDelete}
+        getDownloadUrl={getDownloadUrl}
       />
       {showTechnologies && (
         <TechnologySection

src/custom/CatalogDetail/helper.ts

@@ -34,14 +34,16 @@ 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,
+  getDownloadUrl: (id: string) => string
+): void => {
+  const downloadUrl = getDownloadUrl(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();

src/custom/CatalogDetail/types.ts

@@ -32,11 +32,15 @@ export interface Theme {
 }
 
 export const RESOURCE_TYPES = {
-  DESIGNS: 'design',
-  FILTERS: 'filter',
-  VIEWS: 'view'
+  DESIGN: 'design',
+  FILTER: 'filter',
+  VIEW: 'view'
 };
 
+export const PATTERNS = 'patterns';
+export const FILTERS = 'filters';
+export const VIEWS = 'views';
+
 export type ContentClassType = {
   community: {
     icon: React.ComponentType;

src/custom/Workspaces/DesignTable.tsx

@@ -39,6 +39,7 @@ export interface DesignTableProps {
     workspaceName: string,
     workspaceId: string
   ) => void;
+  getDownloadUrl: (id: string) => string;
   handlePublish: (publishModal: PublishModalState, data: any) => void;
   publishModalHandler: any;
   handleUnpublishModal: (design: Pattern, modalRef: React.RefObject<any>) => void;
@@ -83,6 +84,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
   handleShowDetails,
   handleUnpublishModal,
   handleWorkspaceDesignDeleteModal,
+  getDownloadUrl,
   publishModalHandler,
   isCopyLinkAllowed,
   isDeleteAllowed,
@@ -122,6 +124,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
     handleCopyUrl,
     handleClone,
     handleShowDetails,
+    getDownloadUrl,
     isCopyLinkAllowed,
     isDeleteAllowed,
     isDownloadAllowed,