Merge branch 'master' into fix/mobile_filter_title_bar_fix

amitamrutiya · web-flow · commit 4ae5c7b5009f · 2025-05-14T15:14:57.000+05:30
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/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
@@ -0,0 +1,200 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ICE_SERVERS,
+  ICEServer,
+  MESHERY_CLOUD_PROD,
+  MESHERY_CLOUD_STAGING,
+  MESHERY_CLOUD_WS_PROD,
+  MESHERY_CLOUD_WS_STAGING
+} from '../constants/constants';
+
+interface UserProfile {
+  [key: string]: unknown;
+}
+
+interface CollaborationConfigParams {
+  provider_url: string;
+  getUserProfile: () => Promise<{ data: UserProfile }>;
+  getUserAccessToken: () => Promise<{ data: string }>;
+}
+
+interface CollaborationConfig {
+  signalingUrl: string[];
+  user: UserProfile;
+  authToken: string;
+  refreshAuthToken: () => Promise<string>;
+  websocketCallbacks: string[];
+  peerOpts: {
+    config: {
+      iceServers: ICEServer[];
+    };
+  };
+}
+
+interface SubscribeToRoomsActivityMessage {
+  type: string;
+}
+
+interface UserMapChangeMessage {
+  type: string;
+  user_map?: UserMapping;
+}
+
+interface UserMapping {
+  [roomId: string]: {
+    [userId: string]: unknown;
+  };
+}
+
+interface UseRoomActivityParams {
+  provider_url: string;
+  getUserProfile: () => Promise<{ data: UserProfile }>;
+  getUserAccessToken: () => Promise<{ data: string }>;
+}
+
+const SUBSCRIBE_TO_ROOMS_ACTIVITY_MSG: SubscribeToRoomsActivityMessage = {
+  type: 'subscribe_to_rooms_activity'
+};
+const USER_MAP_CHANGE_MSG = 'user_map';
+
+/**
+ * Determines the appropriate websocket host based on the provider host
+ * @param {string} providerHost - The provider host
+ * @returns {string} - The websocket host
+ */
+const getWebsocketHost = (providerHost: string): string => {
+  if (providerHost === MESHERY_CLOUD_PROD) {
+    return MESHERY_CLOUD_WS_PROD;
+  } else if (providerHost === MESHERY_CLOUD_STAGING) {
+    return MESHERY_CLOUD_WS_STAGING;
+  }
+
+  return providerHost;
+};
+
+/**
+ * Determines the appropriate WebSocket protocol based on current page protocol
+ * @returns {string} - WebSocket protocol ('ws://' or 'wss://')
+ */
+export function getWebSocketProtocol(): string {
+  const isSecure = window.location.protocol === 'https:'; // https only accepts secure websockets
+  return isSecure ? 'wss://' : 'ws://';
+}
+
+/**
+ * Constructs a signaling URL from a provider URL
+ * @param {string} providerUrl - The provider URL
+ * @returns {string} - The signaling URL
+ */
+const getSignalingUrlFromProviderUrl = (providerUrl: string): string => {
+  const parsedUrl = new URL(providerUrl);
+  const websocketHost = getWebsocketHost(parsedUrl.host);
+  const protocol = websocketHost === MESHERY_CLOUD_WS_PROD ? 'wss://' : getWebSocketProtocol();
+  return `${protocol}${websocketHost}/collaboration`;
+};
+
+/**
+ * Gets collaboration configuration for WebRTC
+ */
+export const getCollaborationConfig = async ({
+  provider_url,
+  getUserProfile,
+  getUserAccessToken
+}: CollaborationConfigParams): Promise<CollaborationConfig> => {
+  const { data: userProfile } = await getUserProfile();
+
+  const websocketCallbacks = ['user_info', 'user_left', 'user_joined', 'user_map'];
+
+  // Fetch token after fetching provider and user so that it
+  // gets refreshed if necessary.
+  const { data: accessToken } = await getUserAccessToken();
+  const refreshToken = async () => {
+    return (await getUserAccessToken()).data;
+  };
+
+  return {
+    signalingUrl: [getSignalingUrlFromProviderUrl(provider_url)],
+    user: userProfile,
+    authToken: accessToken,
+    refreshAuthToken: refreshToken,
+    websocketCallbacks,
+    peerOpts: {
+      config: {
+        iceServers: ICE_SERVERS
+      }
+    }
+  };
+};
+
+/**
+ * Subscribes to room activity via WebSocket
+ */
+const subscribeToRoomActivity = async (
+  wsRef: React.MutableRefObject<WebSocket | null>,
+  onUserMapChange: (userMap: UserMapping) => void,
+  provider_url: string,
+  getUserProfile: () => Promise<{ data: UserProfile }>,
+  getUserAccessToken: () => Promise<{ data: string }>
+): Promise<void> => {
+  const config = await getCollaborationConfig({
+    provider_url,
+    getUserProfile,
+    getUserAccessToken
+  });
+
+  // Create the websocket connection with proper headers
+  const ws = new WebSocket(config.signalingUrl[0], ['auth', config.authToken]);
+  wsRef.current = ws;
+
+  ws.addEventListener('open', () => {
+    console.log('[RoomActivity] connected to room activity');
+    ws.send(JSON.stringify(SUBSCRIBE_TO_ROOMS_ACTIVITY_MSG));
+  });
+
+  ws.addEventListener('message', (event: MessageEvent) => {
+    const data = JSON.parse(event.data) as UserMapChangeMessage;
+    if (data.type === USER_MAP_CHANGE_MSG && data.user_map) {
+      onUserMapChange(data.user_map);
+    }
+  });
+
+  ws.addEventListener('close', () => {
+    console.log('[RoomActivity] subscription to room activity closed');
+  });
+
+  ws.addEventListener('error', (err: Event) => {
+    console.error('[RoomActivity] error in room activity subscription', err);
+  });
+};
+
+/**
+ * Hook to subscribe to and get room activity data
+ */
+export const useRoomActivity = ({
+  provider_url,
+  getUserProfile,
+  getUserAccessToken
+}: UseRoomActivityParams): UserMapping => {
+  const [allRoomsUserMapping, setAllRoomsUserMapping] = useState<UserMapping>({});
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    subscribeToRoomActivity(
+      wsRef,
+      setAllRoomsUserMapping,
+      provider_url,
+      getUserProfile,
+      getUserAccessToken
+    );
+
+    const ws = wsRef.current;
+
+    return () => {
+      if (ws) {
+        ws.close();
+      }
+    };
+  }, [provider_url, getUserProfile, getUserAccessToken]);
+
+  return allRoomsUserMapping;
+};
diff --git a/src/index.tsx b/src/index.tsx
