Merge branch 'master' into leecalcote-patch-1

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Dialog } from '../../base';
+import { styled } from '../../theme';
 
 interface ImageComponentProps {
   src: string;
@@ -13,35 +14,61 @@ interface ImageComponentProps {
   srcSet?: string;
   className?: string;
   style?: React.CSSProperties;
+  caption?: string;
+  align?: 'left' | 'center' | 'right';
   onClick?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
 }
+interface AlignProps {
+  align: 'left' | 'center' | 'right';
+}
+const Figure = styled('figure')<AlignProps>(({ align }) => ({
+  margin: '1rem 0',
+  textAlign: align,
+  width: '100%',
+}));
+const FigCaption = styled('figcaption')<AlignProps>(({ align }) => ({
+  fontSize: '0.9rem',
+  color: '#666',
+  marginTop: '0.5rem',
+  textAlign: align
+}));
 
-const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
+const CustomImage: React.FC<ImageComponentProps> = ({
+  src,
+  alt,
+  caption,
+  align = 'left',
+  ...props
+}) => {
   const [isZoomed, setIsZoomed] = useState(false);
-
   const handleZoomClick = () => {
     setIsZoomed(true);
   };
-
   const handleZoomClose = () => {
     setIsZoomed(false);
   };
 
   return (
     <>
-      <img
-        src={src}
-        alt={alt}
-        loading="lazy"
-        onClick={handleZoomClick}
-        {...props}
-        style={{
-          cursor: 'pointer',
-          maxWidth: '100%',
-          height: 'auto',
-          ...props.style
-        }}
-      />
+      <Figure align={align}>
+        <img
+          src={src}
+          alt={alt || caption || ''}
+          loading="lazy"
+          onClick={handleZoomClick}
+          {...props}
+          style={{
+            cursor: 'pointer',
+            maxWidth: '100%',
+            height: 'auto',
+            boxShadow: 'rgba(149, 157, 165, 0.2) 0px 8px 24px',
+            borderRadius: '15px',
+            width: '50%'
+          }}
+        />
+        {caption && <FigCaption align={align}>{caption}</FigCaption>}
+      </Figure>
+
       <Dialog
         open={isZoomed}
         onClose={handleZoomClose}
@@ -59,7 +86,7 @@ const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
       >
         <img
           src={src}
-          alt={alt}
+          alt={alt || caption || ''}
           onClick={handleZoomClose}
           style={{
             objectFit: 'contain',

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -26,7 +26,10 @@ const stepperType = {
 } as const;
 
 export const ModalImage = styled('img')(() => ({
-  aspectRatio: '16/9',
+  display: 'block',
+  width: '100%',
+  height: 'auto',
+  objectFit: 'contain',
   paddingBlock: '1rem'
 }));
 

src/custom/CustomImage/CustomImage.tsx

@@ -51,6 +51,7 @@ const StyledDialog = styled(Dialog)`
   && {
     .MuiDialog-paper {
       border-radius: 0.5rem;
+      overflow: hidden;
     }
   }
 `;