Merge branch 'master' into leecalcote/sharingmodel/docs-link

amitamrutiya · web-flow · commit 4d30c96a9ff3 · 2025-04-25T13:08:38.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",
diff --git a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx b/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx
@@ -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]
+              ]}
+            />
+          );
         }
       }
     },
diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
-import { Box, Typography } from '../../base';
+import { Box } from '../../base';
 import { DesignIcon } from '../../icons';
 import { publishCatalogItemSchema } from '../../schemas';
 import { useTheme } from '../../theme';
@@ -16,9 +16,10 @@ 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';
+import { L5EditIcon, TableHeader } from './styles';
 export interface DesignTableProps {
   workspaceId: string;
   isKanvasEnabled: boolean;
@@ -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<{
@@ -188,13 +195,15 @@ const DesignTable: React.FC<DesignTableProps> = ({
 
   const tableHeaderContent = (
     <TableHeader style={{ padding: '1rem' }}>
-      <Box display={'flex'} alignItems="center" gap={1} width="100%">
-        <DesignIcon height="1.5rem" width="1.5rem" />
-        <Typography variant="body1" fontWeight={'bold'}>
-          Assigned Designs
-        </Typography>
-      </Box>
-      <TableRightActionHeader style={{ marginRight: '0rem' }}>
+      <Box
+        style={{
+          marginRight: '0rem',
+          width: '100%',
+          justifyContent: 'end',
+          display: 'flex',
+          alignItems: 'center'
+        }}
+      >
         <SearchBar
           onSearch={(value) => {
             setDesignSearch(value);
@@ -219,7 +228,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
           disabled={!isAssignAllowed}
           title="Assign Designs"
         />
-      </TableRightActionHeader>
+      </Box>
     </TableHeader>
   );
 
diff --git a/src/custom/Workspaces/WorkspaceViewsTable.tsx b/src/custom/Workspaces/WorkspaceViewsTable.tsx
@@ -1,9 +1,10 @@
 /* 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';
-import { Box, Typography } from '../../base';
-import { EnvironmentIcon, ViewIcon } from '../../icons';
+import { Box } from '../../base';
+import { EnvironmentIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { NameDiv } from '../CatalogDesignTable/style';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
@@ -22,13 +23,7 @@ import { UserTableAvatarInfo } from '../UsersTable';
 import VisibilityChipMenu, { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import AssignmentModal from './AssignmentModal';
 import useViewAssignment from './hooks/useViewsAssignment';
-import {
-  CellStyle,
-  CustomBodyRenderStyle,
-  L5EditIcon,
-  TableHeader,
-  TableRightActionHeader
-} from './styles';
+import { CellStyle, CustomBodyRenderStyle, L5EditIcon, TableHeader } from './styles';
 
 interface ViewsTableProps {
   workspaceId: string;
@@ -41,6 +36,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 +74,9 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
   useUnassignViewFromWorkspaceMutation,
   useAssignViewToWorkspaceMutation,
   isAssignAllowed,
-  handleShowDetails
+  handleShowDetails,
+  handleVisibilityChange,
+  currentUserId
 }) => {
   const theme = useTheme();
 
@@ -86,7 +85,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 +214,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]
+              ]}
+            />
+          );
         }
       }
     },
@@ -311,13 +331,15 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
   return (
     <>
       <TableHeader style={{ padding: '1rem' }}>
-        <Box display={'flex'} alignItems="center" gap={1} width="100%">
-          <ViewIcon height="1.5rem" width="1.5rem" fill={theme.palette.icon.brand} />
-          <Typography variant="body1" fontWeight={'bold'}>
-            Assigned Views
-          </Typography>
-        </Box>
-        <TableRightActionHeader style={{ marginRight: '0rem' }}>
+        <Box
+          style={{
+            marginRight: '0rem',
+            width: '100%',
+            justifyContent: 'end',
+            display: 'flex',
+            alignItems: 'center'
+          }}
+        >
           <SearchBar
             onSearch={(value) => {
               setSearch(value);
@@ -342,7 +364,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
             disabled={!isAssignAllowed}
             title="Assign Views"
           />
-        </TableRightActionHeader>
+        </Box>
       </TableHeader>
 
       <ResponsiveDataTable
diff --git a/src/schemas/createAndEditWorkspace/schema.tsx b/src/schemas/createAndEditWorkspace/schema.tsx
@@ -29,7 +29,7 @@ const createAndEditWorkspace = {
     }
   },
   type: 'object',
-  required: workspaceSchema.workspacePayload.required
+  required: ['name', 'organization']
 };
 
 export default createAndEditWorkspace;

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ const createAndEditWorkspace = {`
`29`	`29`	`}`
`30`	`30`	`},`
`31`	`31`	`type: 'object',`
`32`		`- required: workspaceSchema.workspacePayload.required`
	`32`	`+ required: ['name', 'organization']`
`33`	`33`	`};`
`34`	`34`
`35`	`35`	`export default createAndEditWorkspace;`