feat: update visibility chip

Signed-off-by: amitamrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -2,14 +2,16 @@ import { Theme } from '@mui/material';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { Typography } from '../../base';
 import { PLAYGROUND_MODES } from '../../constants/constants';
-import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
+import { ChainIcon, CopyIcon, KanvasIcon, LockIcon, PublicIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { downloadPattern, slugify } from '../CatalogDetail/helper';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { DataTableEllipsisMenu } from '../ResponsiveDataTable';
+import { VisibilityChipMenu } from '../VisibilityChipMenu';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import AuthorCell from './AuthorCell';
 import { getColumnValue } from './helper';
 import { L5DeleteIcon, NameDiv } from './style';
@@ -146,7 +148,20 @@ export const createDesignsColumnsConfig = ({
       options: {
         filter: false,
         sort: false,
-        searchable: true
+        searchable: true,
+        customBodyRender: (value: VIEW_VISIBILITY) => {
+          return (
+            <VisibilityChipMenu
+              value={value}
+              onChange={(value) => handleVisibilityChange(value as VIEW_VISIBILITY)}
+              enabled={isVisibilityEnabled}
+              options={[
+                [VIEW_VISIBILITY.PUBLIC, PublicIcon],
+                [VIEW_VISIBILITY.PRIVATE, LockIcon]
+              ]}
+            />
+          );
+        }
       }
     },
     {
@@ -180,8 +195,7 @@ export const createDesignsColumnsConfig = ({
         filter: false,
         sort: false,
         searchable: false,
-        setCellHeaderProps: () => ({ align: 'center' as const }),
-        setCellProps: () => ({ align: 'center' as const }),
+
         customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
           const rowIndex = (tableMeta as TableMeta).rowIndex;
           const rowData = (tableMeta as TableMeta).tableData[rowIndex];
@@ -203,7 +217,7 @@ export const createDesignsColumnsConfig = ({
               icon: <ChainIcon width={'24'} height={'24'} fill={theme?.palette.icon.secondary} />
             },
             {
-              title: 'Open in playground',
+              title: 'Open in Playground',
               onClick: () => {
                 window.open(
                   `https://playground.meshery.io/extension/meshmap?mode=${

src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx

@@ -15,8 +15,8 @@ export type VIEW_VISIBILITY = (typeof VIEW_VISIBILITY)[keyof typeof VIEW_VISIBIL
 
 interface VisibilityChipMenuProps {
   value: VIEW_VISIBILITY;
-  onChange: (value: string) => void;
-  options: [string, React.ElementType][];
+  onChange?: (value: string) => void;
+  options?: [string, React.ElementType][];
   enabled: boolean;
 }
 
@@ -95,7 +95,9 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
   };
   const handleChange = (e: MouseEvent, value: string) => {
     e.stopPropagation();
-    onChange(value);
+    if (onChange) {
+      onChange(value);
+    }
     close(e);
   };
   const theme = useTheme();
@@ -122,7 +124,7 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
           left: (anchorEl?.getBoundingClientRect().left ?? 0) + 5
         }}
       >
-        {options.map(([visibility, Icon], index) => (
+        {options?.map(([visibility, Icon], index) => (
           <StyledMenuItem
             key={index}
             data-testid={`visibility-toggle-${visibility.toLowerCase()}`}

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -18,6 +18,7 @@ import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable';
 import SearchBar from '../SearchBar';
 import { TooltipIcon } from '../TooltipIconButton';
 import { UserTableAvatarInfo } from '../UsersTable';
+import VisibilityChipMenu, { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import AssignmentModal from './AssignmentModal';
 import useViewAssignment from './hooks/useViewsAssignment';
 import {
@@ -211,8 +212,8 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
         filter: false,
         sort: false,
         searchable: true,
-        setCellHeaderProps: () => {
-          return { align: 'center' };
+        customBodyRender: (value: VIEW_VISIBILITY) => {
+          return <VisibilityChipMenu value={value} enabled={false} />;
         }
       }
     },