Merge branch 'master' into fix/faheemonhub/aspectRatio

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",
@@ -109,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>

src/constants/constants.ts

@@ -45,12 +45,13 @@ interface ColumnConfigProps {
   showPlaygroundActions: boolean;
   handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
   currentUserId?: string;
+  refetchWorkspaceDesigns: () => void;
 }
 
 export const colViews: ColView[] = [
   ['id', 'na'],
   ['name', 'xs'],
-  ['first_name', 'xs'],
+  ['user', 'xs'],
   ['created_at', 'na'],
   ['updated_at', 'l'],
   ['visibility', 'l'],
@@ -78,7 +79,8 @@ export const createDesignsColumnsConfig = ({
   showPlaygroundActions = true,
   isFromWorkspaceTable = false,
   currentUserId,
-  handleVisibilityChange
+  handleVisibilityChange,
+  refetchWorkspaceDesigns
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   return [
     {
@@ -105,7 +107,7 @@ export const createDesignsColumnsConfig = ({
       }
     },
     {
-      name: 'first_name',
+      name: 'user',
       label: 'Author',
       options: {
         filter: false,
@@ -169,9 +171,12 @@ export const createDesignsColumnsConfig = ({
           return (
             <VisibilityChipMenu
               value={value as VIEW_VISIBILITY}
-              onChange={(value) =>
-                handleVisibilityChange && handleVisibilityChange(designId, value as VIEW_VISIBILITY)
-              }
+              onChange={(value) => {
+                if (handleVisibilityChange) {
+                  handleVisibilityChange(designId, value as VIEW_VISIBILITY);
+                  refetchWorkspaceDesigns();
+                }
+              }}
               enabled={isEnabled}
               options={[
                 [VIEW_VISIBILITY.PUBLIC, Public],
@@ -262,7 +267,7 @@ export const createDesignsColumnsConfig = ({
             },
 
             {
-              title: isFromWorkspaceTable ? 'Remove Design' : 'Delete',
+              title: isFromWorkspaceTable ? 'Move Design' : 'Delete',
               disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
               onClick: () => handleDeleteModal(rowData)(),
               icon: isFromWorkspaceTable ? (