Merge branch 'master' into dependabot/npm_and_yarn/babel/runtime-7.27.0

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -1,3 +1,4 @@
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { Theme } from '@mui/material';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { Typography } from '../../base';
@@ -28,6 +29,7 @@ interface ColumnConfigProps {
   handleCopyUrl: (type: string, name: string, id: string) => void;
   handleClone: (name: string, id: string) => void;
   handleShowDetails: (designId: string, designName: string) => void;
+  handleOpenInDesigner?: (designId: string, designName: string) => void;
   handleDownload?: (design: Pattern) => void;
   getDownloadUrl?: (id: string) => string;
   isDownloadAllowed: boolean;
@@ -39,6 +41,7 @@ interface ColumnConfigProps {
   isFromWorkspaceTable?: boolean;
   isRemoveAllowed?: boolean;
   theme?: Theme;
+  showPlaygroundActions: boolean;
 }
 
 export const colViews: ColView[] = [
@@ -68,6 +71,8 @@ export const createDesignsColumnsConfig = ({
   isDownloadAllowed,
   isRemoveAllowed,
   theme,
+  handleOpenInDesigner,
+  showPlaygroundActions = true,
   isFromWorkspaceTable = false
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   return [
@@ -208,6 +213,7 @@ export const createDesignsColumnsConfig = ({
             },
             {
               title: 'Open in Playground',
+              hidden: showPlaygroundActions == false,
               onClick: () => {
                 window.open(
                   `https://playground.meshery.io/extension/meshmap?mode=${
@@ -220,13 +226,29 @@ export const createDesignsColumnsConfig = ({
                 <KanvasIcon width={24} height={24} primaryFill={theme?.palette.icon.secondary} />
               )
             },
+
+            {
+              hidden: !handleOpenInDesigner,
+              title: 'Open in Designer',
+              // disabled : !handleOpenInDesigner,
+              onClick: () =>
+                handleOpenInDesigner && handleOpenInDesigner(rowData?.id, rowData?.name),
+              icon: (
+                <KanvasIcon width={24} height={24} primaryFill={theme?.palette.icon.secondary} />
+              )
+            },
+
             {
-              title: isFromWorkspaceTable ? 'Move Design' : 'Delete',
+              title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
               disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
               onClick: () => handleDeleteModal(rowData)(),
-              icon: <L5DeleteIcon />
+              icon: isFromWorkspaceTable ? (
+                <RemoveCircleIcon style={{ color: theme?.palette.icon.default }} />
+              ) : (
+                <L5DeleteIcon />
+              )
             }
-          ];
+          ].filter((a) => a?.hidden != true);
 
           const publishAction = {
             title: 'Publish',
@@ -243,6 +265,7 @@ export const createDesignsColumnsConfig = ({
           };
 
           const cloneAction = {
+            hidden: false,
             title: 'Clone',
             onClick: () => handleClone(rowData?.name, rowData?.id),
             icon: <CopyIcon width={24} height={24} fill={theme?.palette.icon.secondary} />

src/custom/Workspaces/DesignTable.tsx

@@ -21,6 +21,7 @@ import useDesignAssignment from './hooks/useDesignAssignment';
 import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles';
 export interface DesignTableProps {
   workspaceId: string;
+  isKanvasEnabled: boolean;
   workspaceName: string;
   designsOfWorkspace: any;
   meshModelModelsData: any;
@@ -56,6 +57,8 @@ export interface DesignTableProps {
   isAssignAllowed: boolean;
   isRemoveAllowed: boolean;
   setDesignSearch: (value: string) => void;
+  handleOpenInDesigner?: (designId: string, designName: string) => void;
+  showPlaygroundActions?: boolean;
 }
 
 export interface PublishModalState {
@@ -96,7 +99,9 @@ const DesignTable: React.FC<DesignTableProps> = ({
   isAssignAllowed,
   isRemoveAllowed,
   useGetWorkspaceDesignsQuery,
-  setDesignSearch
+  setDesignSearch,
+  handleOpenInDesigner,
+  showPlaygroundActions = true
 }) => {
   const [publishModal, setPublishModal] = useState<PublishModalState>({
     open: false,
@@ -132,7 +137,9 @@ const DesignTable: React.FC<DesignTableProps> = ({
     isUnpublishAllowed,
     isFromWorkspaceTable: true,
     isRemoveAllowed,
-    theme
+    theme,
+    handleOpenInDesigner,
+    showPlaygroundActions
   });
 
   const [publishSchema, setPublishSchema] = useState<{

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import React, { useState } from 'react';
 import { Box, Typography } from '../../base';
-import { DeleteIcon, EnvironmentIcon, ViewIcon } from '../../icons';
+import { EnvironmentIcon, ViewIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { NameDiv } from '../CatalogDesignTable/style';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
@@ -38,6 +39,8 @@ interface ViewsTableProps {
   isRemoveAllowed: boolean;
   isAssignAllowed: boolean;
   handleShowDetails: (viewId: string, viewName: string, filterType: string) => void;
+  handleOpenInOperator?: (designId: string, viewName: string, filterType: string) => void;
+  showPlaygroundActions?: boolean;
 }
 
 const colViews: ColView[] = [
@@ -227,7 +230,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
         customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => (
           <IconWrapper disabled={!isRemoveAllowed}>
             <TooltipIcon
-              id={`delete_team-${tableMeta.rowIndex}`}
+              id={`delete_view-${tableMeta.rowIndex}`}
               title="Remove View"
               onClick={() => {
                 isRemoveAllowed &&
@@ -238,7 +241,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
               }}
               iconType="delete"
             >
-              <DeleteIcon height={28} width={28} fill={theme.palette.icon.default} />
+              <RemoveCircleIcon style={{ color: theme?.palette.icon.default }} />{' '}
             </TooltipIcon>
           </IconWrapper>
         )