Merge branch 'master' into dependabot/npm_and_yarn/site/babel/helpers-7.26.10

amitamrutiya · web-flow · commit fc3daca97563 · 2025-05-14T15:20:11.000+05:30
diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@ make build
 If you wish to build in watch mode:
 
 ```
-make watchmode-build
+make build-watch
 ```
 
 To check if your code meets the formatting standards, you can run:
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@layer5/meshery-design-embed": "^0.4.0",
-    "@layer5/schemas": "^0.0.6-14",
+    "@layer5/schemas": "^0.0.6-16",
     "@mui/material": "^5.15.11",
     "@types/mui-datatables": "*",
     "billboard.js": "^3.14.3",
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -6,7 +6,6 @@ export const KEPPEL_GREEN_FILL = '#00B39F';
 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 KANVAS_MODE = {
   DESIGNER: 'design',
@@ -28,3 +27,43 @@ export const RESOURCE_TYPE = {
 } as const;
 
 export type ResourceType = (typeof RESOURCE_TYPE)[keyof typeof RESOURCE_TYPE];
+export interface ICEServer {
+  urls: string;
+  username?: string;
+  credential?: string;
+}
+
+/**
+ * ICE server configuration for WebRTC connections
+ */
+export const ICE_SERVERS: ICEServer[] = [
+  {
+    urls: 'stun:stun.l.google.com:19302'
+  },
+  {
+    urls: 'stun:global.stun.twilio.com:3478'
+  },
+  {
+    urls: 'stun:openrelay.metered.ca:80'
+  },
+  {
+    urls: 'turn:openrelay.metered.ca:80',
+    username: 'openrelayproject',
+    credential: 'openrelayproject'
+  },
+  {
+    urls: 'turn:openrelay.metered.ca:443',
+    username: 'openrelayproject',
+    credential: 'openrelayproject'
+  },
+  {
+    urls: 'turn:openrelay.metered.ca:443?transport=tcp',
+    username: 'openrelayproject',
+    credential: 'openrelayproject'
+  }
+];
+
+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';
diff --git a/src/custom/Carousel/style.tsx b/src/custom/Carousel/style.tsx
@@ -6,6 +6,7 @@ export const CarouselButton = styled('button')(({ theme }) => ({
   transform: 'translateY(-50%)',
   zIndex: '1',
   background: theme.palette.background.paper,
+  color: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,
   border: 'none',
   cursor: 'pointer',
   padding: '0.5rem',
diff --git a/src/custom/CatalogDesignTable/AuthorCell.tsx b/src/custom/CatalogDesignTable/AuthorCell.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Avatar, Box, Grid, Typography } from '../../base';
-import { CLOUD_URL } from '../../constants/constants';
+import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { PersonIcon } from '../../icons';
 import { CustomTooltip } from '../CustomTooltip';
 
@@ -44,7 +44,7 @@ const AuthorCell: React.FC<AuthorCellProps> = ({
                   alt={displayName}
                   src={avatarUrl}
                   onClick={() => {
-                    window.open(`${CLOUD_URL}/user/${userId}`, '_blank');
+                    window.open(`${MESHERY_CLOUD_PROD}/user/${userId}`, '_blank');
                   }}
                 >
                   {!avatarUrl && <PersonIcon />}
diff --git a/src/custom/CatalogDetail/ChallengesSection.tsx b/src/custom/CatalogDetail/ChallengesSection.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link, ListItemIcon } from '../../base';
-import { CLOUD_URL } from '../../constants/constants';
+import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { ChallengesIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import CollapsibleSection from './CollapsibleSection';
@@ -30,7 +30,7 @@ const ChallengesSection: React.FC<ChallengesSectionProps> = ({ filteredAcademyDa
 
   const renderChallengeItem = (item: string, index: number) => (
     <Link
-      href={`${CLOUD_URL}/academy/challenges/${slugify('' + item)}`}
+      href={`${MESHERY_CLOUD_PROD}/academy/challenges/${slugify('' + item)}`}
       target="_blank"
       rel="noopener noreferrer"
       style={{ textDecoration: 'none', color: 'inherit' }}
diff --git a/src/custom/CatalogDetail/LearningSection.tsx b/src/custom/CatalogDetail/LearningSection.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Link, ListItemIcon } from '../../base';
-import { CLOUD_URL } from '../../constants/constants';
+import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { LearningIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import CollapsibleSection from './CollapsibleSection';
@@ -30,7 +30,7 @@ const LearningSection: React.FC<LearningSectionProps> = ({ filteredAcademyData }
 
   const renderLearningItem = (item: string, index: number) => (
     <Link
-      href={`${CLOUD_URL}/academy/learning-paths/${slugify('' + item)}`}
+      href={`${MESHERY_CLOUD_PROD}/academy/learning-paths/${slugify('' + item)}`}
       target="_blank"
       rel="noopener noreferrer"
       style={{ textDecoration: 'none', color: 'inherit' }}
diff --git a/src/custom/CatalogDetail/UserInfo.tsx b/src/custom/CatalogDetail/UserInfo.tsx
@@ -1,5 +1,5 @@
 import { Avatar } from '../../base';
-import { CLOUD_URL } from '../../constants/constants';
+import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { LockIcon, PublicIcon } from '../../icons';
 import { getFormatDate } from '../../utils';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -44,7 +44,7 @@ const UserInfo: React.FC<UserInfoProps> = ({
             }}
           />
           <RedirectLink
-            href={`${CLOUD_URL}/user/${details?.user_id}`}
+            href={`${MESHERY_CLOUD_PROD}/user/${details?.user_id}`}
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx
@@ -4,7 +4,7 @@ import { useCallback, useState } from 'react';
 import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
 import { darkTeal } from '../../theme';
-import { SLIGHT_BLUE } from '../../theme/colors/colors';
+import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
 import {
@@ -152,7 +152,15 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
                 styleProps={appliedStyleProps}
               />
             </Box>
-            <Box sx={{ backgroundColor: SLIGHT_BLUE, height: '5vh' }} />
+            <Box
+              sx={{
+                background:
+                  theme.palette.mode === 'light'
+                    ? lightModalGradient.fotter
+                    : darkModalGradient.fotter,
+                height: '5vh'
+              }}
+            />
           </Box>
         </Drawer>
       </FilterDrawerDiv>
diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/src/custom/CatalogFilterSection/FilterSection.tsx
@@ -62,7 +62,13 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           backgroundColor: styleProps.sectionTitleBackgroundColor
         }}
       >
-        <Typography variant="h6" fontWeight="bold" fontFamily={styleProps.fontFamily}>
+        <Typography
+          sx={{
+            fontSize: '1rem'
+          }}
+          fontWeight="bold"
+          fontFamily={styleProps.fontFamily}
+        >
           {(sectionDisplayName || filterKey).toUpperCase()}
         </Typography>
         {openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
diff --git a/src/custom/CatalogFilterSection/style.tsx b/src/custom/CatalogFilterSection/style.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { Box, Button, ListItemButton } from '../../base';
-import { SLIGHT_BLUE } from '../../theme/colors/colors';
+import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { StyleProps } from './CatalogFilterSidebar';
 
 export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -46,12 +46,12 @@ export const FilterButton = styled(Button)(({ theme }) => ({
   }
 }));
 
-export const FiltersDrawerHeader = styled(Box)(() => ({
+export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '0.5rem 1rem',
-  backgroundColor: SLIGHT_BLUE,
+  background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
   height: '10vh'
 }));
 
diff --git a/src/custom/NavigationNavbar/navigationNavbar.tsx b/src/custom/NavigationNavbar/navigationNavbar.tsx
@@ -1,6 +1,6 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { ListItemTextProps, MenuListProps } from '@mui/material';
+import { ListItemTextProps, MenuListProps, useMediaQuery, useTheme } from '@mui/material';
 import React, { MouseEvent, useState } from 'react';
 import { Collapse, Divider, ListItemText, MenuItem } from '../../base';
 import { IconWrapper, MenuItemList, MenuItemSubList, MenuListStyle, SubIconWrapper } from './style';
@@ -13,6 +13,7 @@ type NavigationItem = {
   onClick: () => void;
   subItems?: NavigationItem[];
   addDivider?: boolean;
+  showOnWeb?: boolean;
 };
 
 interface NavigationNavbarProps {
@@ -26,6 +27,8 @@ const NavigationNavbar: React.FC<NavigationNavbarProps> = ({
   MenuListProps = {},
   ListItemTextProps = {}
 }) => {
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
   const [openSectionId, setOpenSectionId] = useState<string | null>(null);
   const toggleSectionOpen = (sectionId: string, event: MouseEvent<SVGSVGElement>) => {
     event.stopPropagation();
@@ -41,6 +44,12 @@ const NavigationNavbar: React.FC<NavigationNavbarProps> = ({
         const permission = item.permission ?? true;
         const addDivider = item.addDivider ?? false;
 
+        const showOnWeb = item.showOnWeb ?? true;
+
+        if (!showOnWeb && isDesktop) {
+          return null;
+        }
+
         return (
           <React.Fragment key={item.id}>
             <MenuItem disabled={!permission} onClick={item.onClick}>
diff --git a/src/custom/PerformersSection/styles.tsx b/src/custom/PerformersSection/styles.tsx
@@ -90,8 +90,7 @@ export const Title = styled(Typography)(({ theme }) => ({
 }));
 
 export const StyledCard = styled(Card)<StyledCardProps>(({ theme }) => ({
-  width: 'inherit',
-  minWidth: '150px',
+  width: '200px',
   borderRadius: '16px',
   position: 'relative',
   overflow: 'hidden',
diff --git a/src/custom/UsersTable/UserTableAvatarInfo.tsx b/src/custom/UsersTable/UserTableAvatarInfo.tsx
@@ -1,5 +1,5 @@
 import { Avatar, Box, Grid, Typography } from '../../base';
-import { CLOUD_URL } from '../../constants/constants';
+import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { PersonIcon } from '../../icons';
 import { useTheme } from '../../theme';
 
@@ -18,7 +18,7 @@ const UserTableAvatarInfo: React.FC<UserTableAvatarInfoProps> = ({
 }): JSX.Element => {
   const theme = useTheme();
   const handleProfileClick = (): void => {
-    window.open(`${CLOUD_URL}/user/${userId}`);
+    window.open(`${MESHERY_CLOUD_PROD}/user/${userId}`);
   };
 
   return (
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useRoomActivity';
diff --git a/src/hooks/useRoomActivity.ts b/src/hooks/useRoomActivity.ts
diff --git a/src/index.tsx b/src/index.tsx
