Merge branch 'master' into M-DEV-1/add-sistent-instructions

Author: amitamrutiya

package-lock.json

@@ -18,6 +18,7 @@
     "commitlint": "commitlint --edit",
     "coverage": "jest --coverage",
     "dev": "NODE_ENV=development tsup",
+    "dev:watch": "NODE_ENV=development tsup",
     "format:check": "prettier --check \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
     "format:write": "prettier --write \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -99,6 +100,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@layer5/meshery-design-embed": "^0.4.0",
+    "@layer5/schemas": "^0.0.6-14",
     "@mui/material": "^5.15.11",
     "@types/mui-datatables": "*",
     "billboard.js": "^3.14.3",
@@ -108,6 +110,7 @@
     "mui-datatables": "*",
     "re-resizable": "^6.10.3",
     "react-draggable": "^4.4.6",
-    "react-share": "^5.1.0"
+    "react-share": "^5.1.0",
+    "use-debounce": "^10.0.4"
   }
 }

package.json

@@ -21,7 +21,7 @@
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^7.5.2",
     "tailwindcss": "^3.3.5"
   },
   "overrides": {

site/package-lock.json

@@ -7,7 +7,24 @@ export const CARIBBEAN_GREEN_FILL = '#00D3A9';
 export const DEFAULT_STROKE = '#000';
 export const DEFAULT_STROKE_WIDTH = '2';
 export const CLOUD_URL = 'https://cloud.layer5.io';
-export const PLAYGROUND_MODES = {
+
+export const KANVAS_MODE = {
   DESIGNER: 'design',
   OPERATOR: 'operator'
 } as const;
+
+export const PLAYGROUND_MODES = KANVAS_MODE;
+
+export const VISIBILITY = {
+  PUBLIC: 'public',
+  PRIVATE: 'private'
+};
+
+export const RESOURCE_TYPE = {
+  FILTER: 'filter',
+  DESIGN: 'design',
+  CATALOG: 'catalog',
+  VIEW: 'view'
+} as const;
+
+export type ResourceType = (typeof RESOURCE_TYPE)[keyof typeof RESOURCE_TYPE];

site/package.json

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import _ from 'lodash';
 import { MUIDataTableColumn } from 'mui-datatables';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { PublishIcon } from '../../icons';
 import { CHARCOAL } from '../../theme';
-import { FormattedTime } from '../../utils';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -56,37 +55,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   handleBulkpatternsDataUnpublishModal
 }) => {
   const modalRef = useRef<PromptRef>(null);
-
-  const processedColumns: MUIDataTableColumn[] = useMemo(() => {
-    return columns.map((col) => {
-      const newCol = { ...col };
-      if (!newCol.options) newCol.options = {};
-      newCol.options.display = columnVisibility[col.name];
-      if (
-        [
-          'updated_at',
-          'created_at',
-          'deleted_at',
-          'last_login_time',
-          'joined_at',
-          'last_run',
-          'next_run'
-        ].includes(col.name)
-      ) {
-        newCol.options.customBodyRender = (value: any) => {
-          if (!value || value === 'NA') return <>NA</>;
-          if (typeof value === 'object' && 'Valid' in value) {
-            if (value.Valid && value.Time) {
-              return <FormattedTime date={value.Time} />;
-            }
-            return <>NA</>;
-          }
-          return <FormattedTime date={value.Time} />;
-        };
-      }
-      return newCol;
-    });
-  }, [columns, columnVisibility]);
+  const [tableCols, updateCols] = useState(columns);
 
   const handleTableChange = useCallback(
     (action: string, tableState: any) => {
@@ -176,22 +145,19 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
     ]
   );
 
-  if (!processedColumns.length) {
-    return null;
-  }
-
   return (
     <ErrorBoundary>
       <PromptComponent ref={modalRef} />
       <ResponsiveDataTable
-        columns={processedColumns}
+        columns={columns}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         data={patterns || []}
         rowsPerPageOptions={rowsPerPageOptions}
         options={options}
         colViews={colViews}
-        tableCols={processedColumns}
+        tableCols={tableCols}
+        updateCols={updateCols}
         columnVisibility={columnVisibility}
       />
     </ErrorBoundary>