Merge branch 'master' into fix-collab

Author: amitamrutiya

CONTRIBUTING-gitflow.md

@@ -14,10 +14,10 @@ While this isn't an absolutely necessary step, if you plan on doing anything mor
 ## Add 'upstream' repo to list of remotes
 
 ```
-git remote add upstream https://github.com/layer5io/meshery.git
+git remote add upstream https://github.com/layer5io/sistent.git
 ```
 
-("meshery" is used as the example repo. Be sure to reference the _actual_ repo you're contributing to e.g. "meshery-linkerd").
+Note: Replace "sistent" with the actual repository name if contributing to a different project under Layer5, such as "docs"
 
 ## Verify the new remote named 'upstream'
 

README.md

@@ -67,7 +67,7 @@ build:
 
 ```
 attach sistent to your project:
-	npm install [path to sistent repo ]
+	npm install <path-to-sistent-on-local-machine>
 ```
 
 > [!NOTE]

package-lock.json

@@ -78,28 +78,12 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.15.11",
     "@xstate/react": "^4.1.1",
-    "lodash": "^4.17.21",
     "react": ">=17",
     "react-dom": ">=17",
     "xstate": "^5.18.2"
   },
   "peerDependenciesMeta": {
-    "lodash": {
-      "optional": true
-    },
-    "@emotion/react": {
-      "optional": true
-    },
-    "@emotion/styled": {
-      "optional": true
-    },
-    "@mui/material": {
-      "optional": true
-    },
     "react": {
       "optional": true
     },
@@ -111,6 +95,9 @@
     "access": "public"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.11",
     "@layer5/meshery-design-embed": "^0.4.0",
     "billboard.js": "^3.14.3",
     "js-yaml": "^4.1.0",

package.json

@@ -69,8 +69,6 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           handleCopyUrl={handleCopyUrl}
           showShareAction={showShareAction}
           handleShare={handleShare}
-          isVisibilityEnabled={isVisibilityEnabled}
-          handleVisibilityChange={handleVisibilityChange}
         />
       </div>
       <Grid container spacing={2}>
@@ -85,7 +83,13 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
                   />
                 </ContentRow>
               )}
-              <UserInfo details={details} showVersion={showVersion} userProfile={userProfile} />
+              <UserInfo
+                details={details}
+                showVersion={showVersion}
+                userProfile={userProfile}
+                isVisibilityEnabled={isVisibilityEnabled}
+                handleVisibilityChange={handleVisibilityChange}
+              />
             </Grid>
           </Grid>
         </Grid>

src/custom/CatalogDetail/OverviewSection.tsx

@@ -1,23 +1,11 @@
 import React, { useState } from 'react';
-
-import {
-  ChainIcon,
-  FacebookIcon,
-  LinkedinIcon,
-  LockIcon,
-  PublicIcon,
-  ShareIcon,
-  TwitterIcon
-} from '../../icons';
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
+import { Box, IconButton, Menu, MenuItem, Typography } from '../../base';
+import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
-
-import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
-import { Box, IconButton, Menu, MenuItem, Typography } from '../../base';
-import { VisibilityChipMenu } from '../VisibilityChipMenu';
-import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
 
 interface SocialSharePopperProps {
@@ -29,8 +17,6 @@ interface SocialSharePopperProps {
   handleCopyUrl: (type: string, name: string, id: string) => void;
   showShareAction: boolean;
   handleShare: () => void;
-  isVisibilityEnabled: boolean;
-  handleVisibilityChange: (visibility: VIEW_VISIBILITY) => void;
 }
 
 const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
@@ -40,9 +26,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   title,
   getUrl,
   handleCopyUrl,
-  handleShare,
-  isVisibilityEnabled,
-  handleVisibilityChange
+  handleShare
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -61,16 +45,6 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   return (
     <ErrorBoundary>
       <CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
-        <VisibilityChipMenu
-          value={details?.visibility as VIEW_VISIBILITY}
-          onChange={(value) => handleVisibilityChange(value as VIEW_VISIBILITY)}
-          enabled={isVisibilityEnabled}
-          options={[
-            [VIEW_VISIBILITY.PUBLIC, PublicIcon],
-            [VIEW_VISIBILITY.PRIVATE, LockIcon]
-          ]}
-        />
-
         <ShareButtonGroup variant="contained">
           <CustomTooltip title="Change access and visibility">
             <ShareButton variant="contained" onClick={handleShare}>

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -1,7 +1,10 @@
 import { Avatar } from '../../base';
 import { CLOUD_URL } from '../../constants/constants';
+import { LockIcon, PublicIcon } from '../../icons';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { getVersion } from '../CustomCatalog/Helper';
+import { VisibilityChipMenu } from '../VisibilityChipMenu';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import { formatDate } from './helper';
 import { ContentDetailsPoints, ContentDetailsText, ContentRow, RedirectLink } from './style';
 import { UserProfile } from './types';
@@ -10,9 +13,17 @@ interface UserInfoProps {
   details: Pattern;
   showVersion?: boolean;
   userProfile?: UserProfile;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: (visibility: VIEW_VISIBILITY) => void;
 }
 
-const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userProfile }) => {
+const UserInfo: React.FC<UserInfoProps> = ({
+  details,
+  showVersion = true,
+  userProfile,
+  isVisibilityEnabled,
+  handleVisibilityChange
+}) => {
   return (
     <>
       <ContentRow>
@@ -57,6 +68,18 @@ const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userPr
           <ContentDetailsText>{getVersion(details)}</ContentDetailsText>
         </ContentRow>
       )}
+      <ContentRow>
+        <ContentDetailsPoints>VISIBILITY</ContentDetailsPoints>
+        <VisibilityChipMenu
+          value={details?.visibility as VIEW_VISIBILITY}
+          onChange={(value) => handleVisibilityChange(value as VIEW_VISIBILITY)}
+          enabled={isVisibilityEnabled}
+          options={[
+            [VIEW_VISIBILITY.PUBLIC, PublicIcon],
+            [VIEW_VISIBILITY.PRIVATE, LockIcon]
+          ]}
+        />
+      </ContentRow>
     </>
   );
 };

src/custom/CatalogDetail/UserInfo.tsx

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React from 'react';
 import { Tooltip, TooltipProps } from '../../base';
 import { WHITE } from '../../theme';
@@ -11,6 +12,7 @@ type CustomTooltipProps = {
   fontWeight?: number;
   variant?: 'standard' | 'small';
   bgColor?: string;
+  componentsProps?: TooltipProps['componentsProps'];
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
 function CustomTooltip({
@@ -22,34 +24,39 @@ function CustomTooltip({
   fontWeight = 400,
   variant = 'standard',
   bgColor = '#141414',
+  componentsProps = {},
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
     <Tooltip
-      componentsProps={{
-        tooltip: {
-          sx: {
-            background: bgColor,
-            color: WHITE,
-            fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
-            fontWeight: { fontWeight },
-            borderRadius: '0.5rem',
-            padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
-            boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
+      componentsProps={_.merge(
+        {
+          tooltip: {
+            sx: {
+              background: bgColor,
+              color: WHITE,
+              maxWidth: '600px',
+              fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
+              fontWeight: { fontWeight },
+              borderRadius: '0.5rem',
+              padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
+              boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
+            }
+          },
+          popper: {
+            sx: {
+              zIndex: 9999999999,
+              opacity: '1'
+            }
+          },
+          arrow: {
+            sx: {
+              color: bgColor
+            }
           }
         },
-        popper: {
-          sx: {
-            zIndex: 9999999999,
-            opacity: '1'
-          }
-        },
-        arrow: {
-          sx: {
-            color: bgColor
-          }
-        }
-      }}
+        componentsProps
+      )}
       title={typeof title === 'string' ? <RenderMarkdownTooltip content={title} /> : title}
       placement={placement}
       arrow

src/custom/CustomTooltip/customTooltip.tsx

@@ -29,7 +29,6 @@ const BoxContainer = styled(Card)<{ playgroundCardBackgroundImgSrc?: string }>(
     backgroundPosition: 'right bottom',
     backgroundSize: 'cover',
     backgroundRepeat: 'no-repeat',
-    minWidth: 285,
     height: '100%',
     position: 'relative',
     backgroundColor:
@@ -38,7 +37,6 @@ const BoxContainer = styled(Card)<{ playgroundCardBackgroundImgSrc?: string }>(
 );
 
 const StyledCard = styled(Card)(({ theme }) => ({
-  minWidth: 275,
   height: '100%',
   backgroundColor:
     theme.palette.mode === 'dark' ? theme.palette.background.card : theme.palette.common.white

src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx

@@ -3,7 +3,6 @@ import { OpenInNewIcon } from '../../icons';
 import { styled } from '../../theme';
 
 const StyledCard = styled(Card)(({ theme }) => ({
-  minWidth: 275,
   height: '100%',
   backgroundColor:
     theme.palette.mode === 'dark' ? theme.palette.background.card : theme.palette.common.white