Merge branch 'master' into dependabot/npm_and_yarn/examples/next-12/next-14.2.26

Author: amitamrutiya

README.md

@@ -71,7 +71,9 @@ To run tests:
 make tests
 ```
 
-#### Using your local Sistent Fork in a Project
+### Using your local Sistent Fork in a Project
+
+#### Method 1: Manual Installation
 
 1. Install your local Sistent package in the project
 
@@ -110,16 +112,80 @@ make build
 make ui-build
 ```
 
-Now your project should reflect changes from your local Sistent fork.
+Now, your project should reflect changes from your local Sistent fork.
 
 If you want to remove the local Sistent fork from your project, run:
 
 ```
 npm uninstall @layer5/sistent
 ```
 
-This will remove the local Sistent package from your project. You will have to install the standard package again after running this command.
+This will remove the local Sistent package from your project. You will have to reinstall the official package using this command:
+```
+npm install @layer5/sistent
+```
+
+#### Method 2: Using `npm link`
+
+1. Create a link of your local Sistent fork
+
+```
+cd <path-to-sistent-on-local-machine>
+
+npm link
+```
+
+This creates a global symlink which points to the local Sistent fork.
+
+2. Link the local Sistent fork to your project
+
+```
+npm link @layer5/sistent
+```
+
+3.Build your local Sistent fork
+
+After making changes to your fork, run this command in your local Sistent package.
+
+```
+make build
+```
+
+4. Run the build command in the project where your local Sistent fork is installed.
+
+```
+# example, Meshery UI
+make ui-build
+```
+
+Now, your project should reflect changes from your local Sistent fork.
+
+5. Verify that your local Sistent fork has been correctly linked.
+
+To verify that the correct link has been created, run this command:
+
+```
+npm ls -g
 
+# Expected output:
+# ├── @layer5/sistent@0.14.11 -> ./../../../../<path-to-local-sistent-fork>
+```
+
+To verify that the created link is correctly used in your project, run this command in the directory where you linked the Sistent fork:
+
+```
+ls -l node_modules/@layer5/sistent
+
+# Expected output:
+# node_modules/@layer5/sistent -> ../../../../../sistent
+```
+
+To revert back to the official package, first unlink the package, then install the official package using the following commands:
+
+```
+npm unlink @layer5/sistent
+npm install @layer5/sistent
+```
 > [!NOTE]
 > Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability.
 

src/constants/constants.ts

@@ -67,3 +67,21 @@ export const MESHERY_CLOUD_PROD = 'https://cloud.layer5.io';
 export const MESHERY_CLOUD_STAGING = 'staging-cloud.layer5.io';
 export const MESHERY_CLOUD_WS_PROD = 'cloud-ws.layer5.io';
 export const MESHERY_CLOUD_WS_STAGING = 'staging-cloud-ws.layer5.io:6543';
+
+export const EVENT_TYPES = {
+  SUCCESS: {
+    type: 'success'
+  },
+  DEFAULT: {
+    type: 'default'
+  },
+  INFO: {
+    type: 'info'
+  },
+  WARNING: {
+    type: 'warning'
+  },
+  ERROR: {
+    type: 'error'
+  }
+};

src/custom/Carousel/style.tsx

@@ -17,28 +17,31 @@ export const CarouselButton = styled('button')(({ theme }) => ({
     color: '#fff'
   },
   '&:first-of-type': {
-    left: '-1.2rem'
+    left: '-0.5rem'
   },
   '&:last-of-type': {
-    right: '-1.2rem'
+    right: '-0.5rem'
   }
 }));
 
 export const CarouselWrapper = styled('div')({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
-  position: 'relative'
+  position: 'relative',
+  padding: '0 3rem'
 });
 
 export const CarouselContainer = styled('div')({
   display: 'flex',
   overflowX: 'auto',
   scrollBehavior: 'smooth',
   scrollSnapType: 'x mandatory',
-  gap: '1rem',
-  padding: '1rem 0',
+  gap: '0.5rem',
+  paddingBottom: '1rem',
   width: '100%',
+  msOverflowStyle: 'none',
+  scrollbarWidth: 'none',
   '&::-webkit-scrollbar': {
     display: 'none'
   },

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -1,10 +1,9 @@
 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';
 import { Typography } from '../../base';
 import { PLAYGROUND_MODES } from '../../constants/constants';
-import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
+import { ChainIcon, CopyIcon, KanvasIcon, MoveFileIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { downloadPattern, slugify } from '../CatalogDetail/helper';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
@@ -267,14 +266,10 @@ export const createDesignsColumnsConfig = ({
             },
 
             {
-              title: isFromWorkspaceTable ? 'Move Design' : 'Delete',
-              disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
+              title: 'Delete',
+              disabled: !isDeleteAllowed,
               onClick: () => handleDeleteModal(rowData)(),
-              icon: isFromWorkspaceTable ? (
-                <RemoveCircleIcon style={{ color: theme?.palette.icon.default }} />
-              ) : (
-                <L5DeleteIcon />
-              )
+              icon: <L5DeleteIcon />
             }
           ].filter((a) => a?.hidden != true);
 
@@ -299,6 +294,17 @@ export const createDesignsColumnsConfig = ({
             icon: <CopyIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
           };
 
+          const moveAction = {
+            title: 'Move Design',
+            disabled: !isRemoveAllowed,
+            onClick: () => handleDeleteModal(rowData)(),
+            icon: <MoveFileIcon />
+          };
+
+          if (isFromWorkspaceTable) {
+            actionsList.splice(0, 0, moveAction);
+          }
+
           if (rowData.visibility === 'published') {
             actionsList.splice(0, 0, cloneAction);
             actionsList.splice(2, 0, unpublishAction);

src/custom/Modal/index.tsx

@@ -3,7 +3,8 @@ import React, { useRef, useState } from 'react';
 import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
 import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
 import { iconLarge, iconMedium } from '../../constants/iconsSizes';
-import { CloseIcon, InfoCircleIcon } from '../../icons';
+import { CloseIcon, FullScreenIcon, InfoCircleIcon } from '../../icons';
+import FullScreenExitIcon from '../../icons/Fullscreen/FullScreenExitIcon';
 import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
 
@@ -12,6 +13,7 @@ interface ModalProps extends DialogProps {
   title: string;
   headerIcon?: React.ReactNode;
   reactNode?: React.ReactNode;
+  isFullScreenModeAllowed?: boolean;
 }
 
 interface ModalFooterProps {
@@ -56,6 +58,20 @@ const StyledDialog = styled(Dialog)`
   }
 `;
 
+const FullscreenButton = styled(FullScreenIcon)(({ theme }) => ({
+  height: '2.25rem',
+  width: '2.25rem',
+  fill: theme.palette.common.white,
+  cursor: 'pointer'
+}));
+
+const FullscreenExitButton = styled(FullScreenExitIcon)(({ theme }) => ({
+  height: '2.25rem',
+  width: '2.25rem',
+  fill: theme.palette.common.white,
+  cursor: 'pointer'
+}));
+
 export const ModalStyledHeader = styled('div')(({ theme }) => ({
   background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
   color: '#eee',
@@ -103,7 +119,8 @@ export const useModal = ({ headerIcon }: { headerIcon: React.ReactNode }): UseMo
 export const ModalBody = styled(Paper)(({ theme }) => ({
   padding: '1rem',
   backgroundColor: theme.palette.background.surfaces,
-  overflowY: 'auto'
+  overflowY: 'auto',
+  height: '100%'
 }));
 
 const StyledFooter = styled('div', {
@@ -135,16 +152,22 @@ export const Modal: React.FC<ModalProps> = ({
   reactNode,
   children,
   maxWidth = 'xs',
+  isFullScreenModeAllowed,
   ...props
 }) => {
+  const [fullScreen, setFullScreen] = useState(false);
+  const toggleFullScreen = () => {
+    setFullScreen((prev) => !prev);
+  };
   return (
     <StyledDialog
-      fullWidth={true}
       maxWidth={maxWidth}
       open={open}
       onClose={closeModal}
       aria-labelledby="alert-dialog-slide-title"
       aria-describedby="alert-dialog-slide-description"
+      fullScreen={fullScreen}
+      fullWidth={!fullScreen}
       {...props}
     >
       {title && (
@@ -153,9 +176,20 @@ export const Modal: React.FC<ModalProps> = ({
           <Typography component={'div'} variant="h6">
             {title}
           </Typography>
-          <CloseBtn onClick={closeModal}>
-            <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
-          </CloseBtn>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            {isFullScreenModeAllowed && (
+              <CustomTooltip title={fullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
+                {fullScreen ? (
+                  <FullscreenExitButton onClick={toggleFullScreen} />
+                ) : (
+                  <FullscreenButton onClick={toggleFullScreen} />
+                )}
+              </CustomTooltip>
+            )}
+            <CloseBtn onClick={closeModal}>
+              <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
+            </CloseBtn>
+          </div>
         </ModalStyledHeader>
       )}