Merge branch 'master' into fix/popOver

Signed-off-by: TheFaheem <35933338+FaheemOnHub@users.noreply.github.com>

Author: FaheemOnHub

.github/workflows/bump-meshery-version.yml

@@ -39,7 +39,7 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - name: Make changes to pull request
         working-directory: ui
-        run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}}
+        run: npm install @sistent/sistent@${{needs.versions-check.outputs.current}}
       - name: Create Pull Request
         id: cpr
         uses: peter-evans/create-pull-request@v7
@@ -78,7 +78,7 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - name: Make changes to pull request
         working-directory: meshmap
-        run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}}
+        run: npm install @sistent/sistent@${{needs.versions-check.outputs.current}}
       - name: Create Pull Request
         id: cpr
         uses: peter-evans/create-pull-request@v7
@@ -116,7 +116,7 @@ jobs:
                   cache: "npm"
                   cache-dependency-path: '**/package-lock.json'
               - name: Make changes to pull request
-                run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}} --legacy-peer-deps
+                run: npm install @sistent/sistent@${{needs.versions-check.outputs.current}} --legacy-peer-deps
               - name: Create Pull Request
                 id: cpr
                 uses: peter-evans/create-pull-request@v7
@@ -155,7 +155,7 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - name: Make changes to pull request
         working-directory: ui
-        run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}}
+        run: npm install @sistent/sistent@${{needs.versions-check.outputs.current}}
       - name: Create Pull Request
         id: cpr
         uses: peter-evans/create-pull-request@v7

README.md

@@ -1,23 +1,6 @@
-# Layer5 Design System Sistent
+# Sistent Design System Sistent
 
-The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.
-
-<hr>
-<h3 align="center"> --> Visit <a href="https://layer5.io/projects/sistent">https://layer5.io/projects/sistent</a></h3>
-<hr>
-
-## Using Sistent
-
-Visit the Sistent website for further instructions.
-
-### Brand
-
-- Layer5 Brand Guide ([PDF](https://layer5.io/brand/brand-guide.pdf))
-- [Layer5 Logos](https://layer5.io/company/brand) (more assets available in shared Community drive).
-
-### Components and Packages
-
-- Design System components in React.js
+The Sistent Design System provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences. Visit the <a href="https://layer5.io/projects/sistent">project website</a> for more information.
 
 ## Contributing to Sistent
 
@@ -94,7 +77,7 @@ npm install <path-to-sistent-on-local-machine>
 This will update your Sistent dependency to:
 
 ```
-"@layer5/sistent" : "file:../../sistent"
+"@sistent/sistent" : "file:../../sistent"
 ```
 
 2. Build your local Sistent fork
@@ -117,12 +100,13 @@ 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
+npm uninstall @sistent/sistent
 ```
 
 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
+npm install @sistent/sistent
 ```
 
 #### Method 2: Using `npm link`
@@ -140,7 +124,7 @@ 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
+npm link @sistent/sistent
 ```
 
 3.Build your local Sistent fork
@@ -168,24 +152,25 @@ 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>
+# ├── @sistent/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
+ls -l node_modules/@sistent/sistent
 
 # Expected output:
-# node_modules/@layer5/sistent -> ../../../../../sistent
+# node_modules/@sistent/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
+npm unlink @sistent/sistent
+npm install @sistent/sistent
 ```
+
 > [!NOTE]
 > Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability.
 
@@ -228,4 +213,4 @@ Find out more on the <a href="https://layer5.io/community">Layer5 community</a>.
 ✔️<em><strong>Explore more</strong></em> in the <a href="https://layer5.io/community/handbook">Community Handbook</a>.<br />
 </p>
 <p align="center">
-<i>Not sure where to start?</i> Grab an open issue with the <a href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Alayer5labs+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22help+wanted%22+">help-wanted label</a>.</p>
+<i>Not sure where to start?</i> Grab an open issue with the <a href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+(org%3Alayer5io+OR+org%3Ameshery+OR+org%3Alayer5labs+OR+org%3Aservice-mesh-performance+OR+org%3Aservice-mesh-patterns+OR+org%3Ameshery-extensions)+label%3A%22help+wanted%22">help-wanted label</a>.</p>

site/gatsby-browser.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { ThemeProvider } from './src/components/Theme';
 import './src/styles/global.css';
-import React from "react";
 
 export const wrapRootElement = ({ element }) => <ThemeProvider>{element}</ThemeProvider>;

site/package-lock.json

@@ -5,15 +5,10 @@ import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
 import { darkTeal } from '../../theme';
 import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
+import { CustomTooltip } from '../CustomTooltip';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
-import {
-  FilterButton,
-  FilterDrawerDiv,
-  FilterText,
-  FiltersCardDiv,
-  FiltersDrawerHeader
-} from './style';
+import { FilterButton, FilterDrawerDiv, FiltersCardDiv, FiltersDrawerHeader } from './style';
 
 export interface FilterOption {
   value: string;
@@ -109,13 +104,14 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
         />
       </FiltersCardDiv>
       <FilterDrawerDiv>
-        <FilterButton variant="contained" onClick={handleDrawerOpen}>
-          <FilterAltIcon
-            style={{ height: '28px', width: '28px' }}
-            fill={theme.palette.text.default}
-          />
-          <FilterText>Filters</FilterText>
-        </FilterButton>
+        <CustomTooltip title="Filters" placement="bottom">
+          <FilterButton variant="contained" onClick={handleDrawerOpen}>
+            <FilterAltIcon
+              style={{ height: '28px', width: '28px' }}
+              fill={theme.palette.text.default}
+            />
+          </FilterButton>
+        </CustomTooltip>
 
         <Drawer
           anchor="bottom"

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -42,6 +42,18 @@ const getValidSvgPaths = async (
   return validSvgPaths;
 };
 
+// Parses the pattern file content (YAML) and returns the version field.
+// If parsing fails or version is missing, returns the default version.
+const getWorkingVersionFromPatternFile = (patternFileContent: string) => {
+  try {
+    const patternFile = jsyaml.load(patternFileContent);
+    return patternFile?.version || DEFAULT_DESIGN_VERSION;
+  } catch (e) {
+    console.error('Failed to parse pattern file to get version:', e);
+    return DEFAULT_DESIGN_VERSION;
+  }
+};
+
 interface HandleImageProps {
   technologies: string[];
   basePath?: string;
@@ -60,15 +72,18 @@ export const handleImage = async ({
 };
 export const DEFAULT_DESIGN_VERSION = '0.0.0';
 
+// Returns the version of a design based on its visibility.
+// - For 'published' designs, returns the stable published version.
+// - For 'public' or 'private', returns the working version from the pattern file.
+// - Defaults to the working version if visibility is unrecognized.
 export const getVersion = (design: Pattern) => {
-  if (design.visibility === 'public') {
-    return design?.catalog_data?.published_version || DEFAULT_DESIGN_VERSION;
-  }
-  try {
-    const patternFile = jsyaml.load(design.pattern_file);
-    return patternFile?.version || DEFAULT_DESIGN_VERSION;
-  } catch (e) {
-    console.error(e);
-    return DEFAULT_DESIGN_VERSION;
+  switch (design.visibility) {
+    case 'published':
+      return design?.catalog_data?.published_version || DEFAULT_DESIGN_VERSION;
+    case 'public':
+    case 'private':
+      return getWorkingVersionFromPatternFile(design.pattern_file);
+    default:
+      return getWorkingVersionFromPatternFile(design.pattern_file);
   }
 };

src/custom/CustomCatalog/Helper.ts

@@ -9,7 +9,7 @@ The `ErrorBoundary` component is designed to catch errors that occur within its
 Wrap your component with the `ErrorBoundary`:
 
 ```tsx
-import { ErrorBoundary } from '@layer5/sistent';
+import { ErrorBoundary } from '@sistent/sistent';
 
 const MyComponent = () => {
   // Your component logic
@@ -43,7 +43,7 @@ const MyComponent = () => {
 Wrap your component using `withErrorBoundary`:
 
 ```tsx
-import { withErrorBoundary } from '@layer5/sistent';
+import { withErrorBoundary } from '@sistent/sistent';
 
 const MyComponent = withErrorBoundary(() => {
   return {
@@ -61,7 +61,7 @@ const MyComponent = withErrorBoundary(() => {
 Wrap your component using withSuppressedErrorBoundary:
 
 ```tsx
-import { withSuppressedErrorBoundary } from '@layer5/sistent';
+import { withSuppressedErrorBoundary } from '@sistent/sistent';
 
 const MyComponent = withSuppressedErrorBoundary(() => {
   return {

src/custom/ErrorBoundary/README.md

@@ -121,7 +121,12 @@ export const ModalBody = styled(Paper)(({ theme }) => ({
   padding: '1rem',
   backgroundColor: theme.palette.background.surfaces,
   overflowY: 'auto',
-  height: '100%'
+  height: '100%',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  },
+  '-ms-overflow-style': 'none'
 }));
 
 const StyledFooter = styled('div', {

src/custom/Modal/index.tsx

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { Box, Button } from '../../base';
 import { iconXSmall } from '../../constants/iconsSizes';
 import { LeaderBoardIcon, TropyIcon } from '../../icons';
-import { useTheme } from '../../theme';
+import { useMediaQuery, useTheme } from '../../theme';
 import { Carousel } from '../Carousel';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
@@ -228,6 +228,7 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
 }) => {
   const theme = useTheme();
   const { queries, isLoading, hasError } = useMetricQueries(useGetCatalogFilters);
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   const stats = useMemo(
     () =>
@@ -265,14 +266,31 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
               style={{
                 height: '2rem',
                 width: '2rem',
-                color: theme.palette.icon.secondary
+                color: theme.palette.icon.secondary,
+                display: smallScreen ? 'none' : 'inline-flex'
               }}
             />
           </Box>
           {onOpenLeaderboard && (
-            <Button variant="contained" onClick={() => onOpenLeaderboard()}>
-              Open Leaderboard
-            </Button>
+            <div>
+              <Button variant="contained" onClick={() => onOpenLeaderboard()}>
+                <TropyIcon
+                  style={{
+                    height: '2rem',
+                    width: '2rem',
+                    display: smallScreen ? 'inline-flex' : 'none'
+                  }}
+                />
+                <p
+                  style={{
+                    margin: 0,
+                    display: smallScreen ? 'none' : 'inline-flex'
+                  }}
+                >
+                  Open Leaderboard
+                </p>
+              </Button>
+            </div>
           )}
         </TitleBox>
         <CardsContainer>

src/custom/PerformersSection/PerformersSection.tsx

@@ -10,6 +10,10 @@ interface PerformersSectionButtonProps {
   handleClick: () => void;
 }
 
+interface OpenLeaderBoardButtonProps {
+  handleClick: () => void;
+}
+
 const PerformersSectionButton: React.FC<PerformersSectionButtonProps> = ({ open, handleClick }) => {
   const theme = useTheme();
 
@@ -21,7 +25,7 @@ const PerformersSectionButton: React.FC<PerformersSectionButtonProps> = ({ open,
           onClick={handleClick}
           sx={{
             height: '3.7rem',
-            padding: '0.3rem'
+            padding: '0.3rem 1rem 0.3rem 0.3rem'
           }}
           style={{
             backgroundColor: open ? undefined : theme.palette.background.constant?.disabled
@@ -35,6 +39,24 @@ const PerformersSectionButton: React.FC<PerformersSectionButtonProps> = ({ open,
   );
 };
 
+const OpenLeaderBoardButton: React.FC<OpenLeaderBoardButtonProps> = ({ handleClick }) => {
+  return (
+    <CustomTooltip title={'Open Leaderboard'} placement="bottom">
+      <Button
+        variant="contained"
+        onClick={handleClick}
+        sx={{
+          height: '3.7rem',
+          padding: '0.3rem',
+          display: { xs: 'inline-flex', sm: 'none' }
+        }}
+      >
+        <TropyIcon style={{ height: '2rem', width: '2rem' }} />
+      </Button>
+    </CustomTooltip>
+  );
+};
+
 export const StateCardSekeleton = () => {
   return (
     <CardSkeleton>
@@ -53,4 +75,4 @@ export const StateCardSekeleton = () => {
     </CardSkeleton>
   );
 };
-export default PerformersSectionButton;
+export { OpenLeaderBoardButton, PerformersSectionButton };