feat: remove the soruce content logic with the id only

Signed-off-by: Amit Amrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -4,7 +4,7 @@ import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { CHARCOAL } from '../../theme';
 import { downloadPattern, slugify } from '../CatalogDetail/helper';
-import { PATTERNS, RESOURCE_TYPES } from '../CatalogDetail/types';
+import { RESOURCE_TYPES } from '../CatalogDetail/types';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
@@ -25,7 +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: (sorceType: string, id: string) => string;
+  getDownloadUrl: (id: string) => string;
   isDownloadAllowed: boolean;
   isCopyLinkAllowed: boolean;
   isDeleteAllowed: boolean;
@@ -169,15 +169,15 @@ export const createDesignsColumnsConfig = ({
           const actionsList = [
             {
               title: 'Download',
-              onClick: () => downloadPattern(rowData.id, rowData.name, PATTERNS, getDownloadUrl),
+              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} />
             },
@@ -187,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

@@ -14,7 +14,6 @@ import {
   TwitterIcon
 } from '../../icons';
 import { downloadPattern } from '../CatalogDetail/helper';
-import { PATTERNS } from '../CatalogDetail/types';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -54,7 +53,7 @@ interface ColumnConfigProps {
   currentUserId?: string;
   isCloneDisabled?: boolean;
   isUnpublishDisabled?: boolean;
-  getDownloadUrl: (sorceType: string, id: string) => string;
+  getDownloadUrl: (id: string) => string;
 }
 
 interface ActionItem {
@@ -259,7 +258,7 @@ export const createDesignColumns = ({
             },
             {
               title: 'Download',
-              onClick: () => downloadPattern(rowData.id, rowData.name, PATTERNS, getDownloadUrl),
+              onClick: () => downloadPattern(rowData.id, rowData.name, getDownloadUrl),
               icon: <DownloadIcon width={24} height={24} fill={theme.palette.text.primary} />
             },
             {

src/custom/CatalogDetail/ActionButton.tsx

@@ -4,16 +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 { downloadPattern, downloadYaml, getValidSorceType } 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: (sorceType: string, id: string) => string;
+  getDownloadUrl: (id: string) => string;
   handleClone: (name: string, id: string) => void;
   handleUnpublish: () => void;
   isCloneDisabled: boolean;
@@ -44,7 +44,6 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   handleDelete
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
-  const sorceType = getValidSorceType(type);
   const theme = useTheme();
   return (
     <StyledActionWrapper>
@@ -86,16 +85,16 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               color: theme.palette.text.default
             }}
             onClick={() =>
-              cleanedType === RESOURCE_TYPES.VIEWS
+              cleanedType === VIEWS
                 ? downloadYaml(details.pattern_file, details.name)
-                : downloadPattern(details.id, details.name, sorceType, getDownloadUrl)
+                : 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,7 +27,7 @@ interface LeftPanelProps {
   handleInfoClick?: () => void;
   showDeleteAction?: boolean;
   handleDelete: () => void;
-  getDownloadUrl: (sorceType: string, id: string) => string;
+  getDownloadUrl: (id: string) => string;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({

src/custom/CatalogDetail/helper.ts

@@ -37,10 +37,9 @@ export function slugify(str: string): string {
 export const downloadPattern = (
   id: string,
   name: string,
-  sorceType: string,
-  getDownloadUrl: (sorceType: string, id: string) => string
+  getDownloadUrl: (id: string) => string
 ): void => {
-  const downloadUrl = getDownloadUrl(sorceType, id);
+  const downloadUrl = getDownloadUrl(id);
 
   const fileNameWithExtension = `${name}.yaml`;
   const linkElement = document.createElement('a');
@@ -62,16 +61,3 @@ 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

@@ -32,12 +32,14 @@ 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: {

src/custom/Workspaces/DesignTable.tsx

@@ -39,7 +39,7 @@ export interface DesignTableProps {
     workspaceName: string,
     workspaceId: string
   ) => void;
-  getDownloadUrl: (sorceType: string, id: string) => string;
+  getDownloadUrl: (id: string) => string;
   handlePublish: (publishModal: PublishModalState, data: any) => void;
   publishModalHandler: any;
   handleUnpublishModal: (design: Pattern, modalRef: React.RefObject<any>) => void;