Merge pull request #1019 from layer5io/visibility-chip

add visibility change functionlity in workspae tables

Author: amitamrutiya

package-lock.json

@@ -99,7 +99,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@layer5/meshery-design-embed": "^0.4.0",
-    "@layer5/schemas": "^0.0.6-13",
+    "@layer5/schemas": "^0.0.6-14",
     "@mui/material": "^5.15.11",
     "@types/mui-datatables": "*",
     "billboard.js": "^3.14.3",

package.json

@@ -1,3 +1,4 @@
+import { Lock, Public } from '@mui/icons-material';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { Theme } from '@mui/material';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
@@ -42,6 +43,8 @@ interface ColumnConfigProps {
   isRemoveAllowed?: boolean;
   theme?: Theme;
   showPlaygroundActions: boolean;
+  handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
+  currentUserId?: string;
 }
 
 export const colViews: ColView[] = [
@@ -73,7 +76,9 @@ export const createDesignsColumnsConfig = ({
   theme,
   handleOpenInDesigner,
   showPlaygroundActions = true,
-  isFromWorkspaceTable = false
+  isFromWorkspaceTable = false,
+  currentUserId,
+  handleVisibilityChange
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   return [
     {
@@ -154,8 +159,26 @@ export const createDesignsColumnsConfig = ({
         filter: false,
         sort: false,
         searchable: true,
-        customBodyRender: (value: VIEW_VISIBILITY) => {
-          return <VisibilityChipMenu value={value} enabled={false} />;
+        customBodyRender: (value: VIEW_VISIBILITY, tableMeta) => {
+          const rowIndex = (tableMeta as TableMeta).rowIndex;
+          const designId = (tableMeta as TableMeta).tableData[rowIndex]?.id;
+          const designVisibility = (tableMeta as TableMeta).tableData[rowIndex]?.visibility;
+          const ownerId = (tableMeta as TableMeta).tableData[rowIndex]?.user_id;
+          const isOwner = ownerId === currentUserId;
+          const isEnabled = designVisibility !== VIEW_VISIBILITY.PUBLISHED && isOwner;
+          return (
+            <VisibilityChipMenu
+              value={value as VIEW_VISIBILITY}
+              onChange={(value) =>
+                handleVisibilityChange && handleVisibilityChange(designId, value as VIEW_VISIBILITY)
+              }
+              enabled={isEnabled}
+              options={[
+                [VIEW_VISIBILITY.PUBLIC, Public],
+                [VIEW_VISIBILITY.PRIVATE, Lock]
+              ]}
+            />
+          );
         }
       }
     },

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -16,6 +16,7 @@ import { useWindowDimensions } from '../Helpers/Dimension';
 import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
 import PromptComponent from '../Prompt';
 import SearchBar from '../SearchBar';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import AssignmentModal from './AssignmentModal';
 import useDesignAssignment from './hooks/useDesignAssignment';
 import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles';
@@ -59,6 +60,8 @@ export interface DesignTableProps {
   setDesignSearch: (value: string) => void;
   handleOpenInDesigner?: (designId: string, designName: string) => void;
   showPlaygroundActions?: boolean;
+  handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
+  currentUserId?: string;
 }
 
 export interface PublishModalState {
@@ -101,7 +104,9 @@ const DesignTable: React.FC<DesignTableProps> = ({
   useGetWorkspaceDesignsQuery,
   setDesignSearch,
   handleOpenInDesigner,
-  showPlaygroundActions = true
+  showPlaygroundActions = true,
+  handleVisibilityChange,
+  currentUserId
 }) => {
   const [publishModal, setPublishModal] = useState<PublishModalState>({
     open: false,
@@ -139,7 +144,9 @@ const DesignTable: React.FC<DesignTableProps> = ({
     isRemoveAllowed,
     theme,
     handleOpenInDesigner,
-    showPlaygroundActions
+    showPlaygroundActions,
+    handleVisibilityChange,
+    currentUserId
   });
 
   const [publishSchema, setPublishSchema] = useState<{

src/custom/Workspaces/DesignTable.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { Lock, Public } from '@mui/icons-material';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import React, { useState } from 'react';
@@ -41,6 +42,8 @@ interface ViewsTableProps {
   handleShowDetails: (viewId: string, viewName: string, filterType: string) => void;
   handleOpenInOperator?: (designId: string, viewName: string, filterType: string) => void;
   showPlaygroundActions?: boolean;
+  handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
+  currentUserId?: string;
 }
 
 const colViews: ColView[] = [
@@ -77,7 +80,9 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
   useUnassignViewFromWorkspaceMutation,
   useAssignViewToWorkspaceMutation,
   isAssignAllowed,
-  handleShowDetails
+  handleShowDetails,
+  handleVisibilityChange,
+  currentUserId
 }) => {
   const theme = useTheme();
 
@@ -86,7 +91,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
   const [page, setPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(10);
   const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
-  const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery(
+  const { data: viewsOfWorkspace, refetch } = useGetViewsOfWorkspaceQuery(
     {
       workspaceId,
       page: page,
@@ -215,8 +220,29 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
         filter: false,
         sort: false,
         searchable: true,
-        customBodyRender: (value: VIEW_VISIBILITY) => {
-          return <VisibilityChipMenu value={value} enabled={false} />;
+        customBodyRender: (value: VIEW_VISIBILITY, tableMeta) => {
+          const rowIndex = tableMeta.rowIndex;
+          const viewId = tableMeta.tableData[rowIndex]?.id;
+          const viewVisibility = tableMeta.tableData[rowIndex]?.visibility;
+          const ownerId = tableMeta.tableData[rowIndex]?.user_id;
+          const isOwner = ownerId === currentUserId;
+          const isEnabled = viewVisibility !== VIEW_VISIBILITY.PUBLISHED && isOwner;
+          return (
+            <VisibilityChipMenu
+              value={value as VIEW_VISIBILITY}
+              onChange={(value) => {
+                if (handleVisibilityChange) {
+                  handleVisibilityChange(viewId, value as VIEW_VISIBILITY);
+                  refetch();
+                }
+              }}
+              enabled={isEnabled}
+              options={[
+                [VIEW_VISIBILITY.PUBLIC, Public],
+                [VIEW_VISIBILITY.PRIVATE, Lock]
+              ]}
+            />
+          );
         }
       }
     },

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -29,7 +29,7 @@ const createAndEditWorkspace = {
     }
   },
   type: 'object',
-  required: workspaceSchema.workspacePayload.required
+  required: ['name', 'organization']
 };
 
 export default createAndEditWorkspace;