Update React to v19.2.1

frontend/package.json

@@ -36,8 +36,8 @@
     "@mui/material": "^6.4.7",
     "@mui/x-tree-view": "^7.26.0",
     "@octokit/rest": "^22.0.0",
-    "@react-three/drei": "^9.80.0",
-    "@react-three/fiber": "^8.13.6",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.4.2",
     "@tanstack/react-query": "^5.67.1",
     "@tanstack/react-query-devtools": "^5.67.1",
     "@types/js-yaml": "^4.0.9",
@@ -57,10 +57,9 @@
     "monaco-editor": "^0.52.2",
     "nanoid": "^5.0.9",
     "puppeteer-core": "^24.1.1",
-    "react": "^18.3.1",
+    "react": "^19.2.1",
     "react-chatbot-kit": "^2.2.2",
-    "react-dom": "^18.3.1",
-    "react-flow-renderer": "^10.3.17",
+    "react-dom": "^19.2.1",
     "react-hot-toast": "^2.5.2",
     "react-i18next": "^15.5.2",
     "react-icons": "^5.4.0",
@@ -91,9 +90,10 @@
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.13.1",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/testing-library__jest-dom": "^6.0.0",
+    "@types/three": "^0.181.0",
     "@types/xterm": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",

frontend/src/components/CommandPalette.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence, Variants } from 'framer-motion';
@@ -875,7 +875,10 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
             background: isDark ? 'rgba(55, 65, 81, 0.5)' : 'rgba(243, 244, 246, 0.7)',
           }}
         >
-          <command.icon className="text-base" style={{ color: getIconColor(command.type) }} />
+          {React.createElement(command.icon, {
+            className: 'text-base',
+            style: { color: getIconColor(command.type) },
+          })}
         </div>
         <div className="min-w-0 flex-1">
           <div

frontend/src/components/LanguageSwitcher.tsx

@@ -93,7 +93,7 @@
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [isOpen, focusedIndex]);
 
   // Lock body scroll while dropdown portal is open
   useEffect(() => {
@@ -316,7 +316,9 @@
                       {languages.map((lang, idx) => (
                         <button
                           key={lang.code}
-                          ref={el => (itemRefs.current[idx] = el)}
+                          ref={el => {
+                            itemRefs.current[idx] = el;
+                          }}
                           tabIndex={0}
                           onClick={() => changeLanguage(lang.code)}
                           className={

frontend/src/components/ProtectedRoute.tsx

@@ -4,7 +4,7 @@ import { useAuth } from '../hooks/useAuth';
 import LoadingFallback from './LoadingFallback';
 
 interface ProtectedRouteProps {
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 
 const ProtectedRoute = ({ children }: ProtectedRouteProps) => {

frontend/src/components/PublicRoute.tsx

@@ -4,7 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { useAuth } from '../hooks/useAuth';
 
 interface PublicRouteProps {
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 
 const PublicRoute = ({ children }: PublicRouteProps) => {

frontend/src/components/WecsTopology.tsx

@@ -52,43 +52,6 @@
 import useEdgeTypeStore from '../stores/edgeTypeStore';
 
 // Updated Interfaces
-export interface NodeData {
-  label: JSX.Element;
-  isDeploymentOrJobPod?: boolean;
-}
-
-export interface BaseNode {
-  id: string;
-  data: NodeData;
-  position: { x: number; y: number };
-  style?: React.CSSProperties;
-}
-
-export interface CustomNode extends BaseNode {
-  sourcePosition?: Position;
-  targetPosition?: Position;
-  collapsed?: boolean;
-  showMenu?: boolean;
-}
-
-export interface BaseEdge {
-  id: string;
-  source: string;
-  target: string;
-}
-
-export interface CustomEdge extends BaseEdge {
-  type?: string;
-  animated?: boolean;
-  style?: React.CSSProperties;
-  markerEnd?: {
-    type: MarkerType;
-    width?: number;
-    height?: number;
-    color?: string;
-  };
-}
-
 export interface ResourceItem {
   apiVersion: string;
   kind: string;
@@ -133,6 +96,49 @@
   [key: string]: unknown; // Add index signature to make compatible with TreeViewComponent
 }
 
+export interface NodeLabelProps {
+  label: string;
+  resourceData?: ResourceItem;
+  [key: string]: unknown;
+}
+
+export interface NodeData {
+  label: React.ReactElement<NodeLabelProps>;
+  isDeploymentOrJobPod?: boolean;
+}
+
+export interface BaseNode {
+  id: string;
+  data: NodeData;
+  position: { x: number; y: number };
+  style?: React.CSSProperties;
+}
+
+export interface CustomNode extends BaseNode {
+  sourcePosition?: Position;
+  targetPosition?: Position;
+  collapsed?: boolean;
+  showMenu?: boolean;
+}
+
+export interface BaseEdge {
+  id: string;
+  source: string;
+  target: string;
+}
+
+export interface CustomEdge extends BaseEdge {
+  type?: string;
+  animated?: boolean;
+  style?: React.CSSProperties;
+  markerEnd?: {
+    type: MarkerType;
+    width?: number;
+    height?: number;
+    color?: string;
+  };
+}
+
 export interface WecsResource {
   name: string;
   raw: ResourceItem;
@@ -599,7 +605,7 @@
         }))
       );
     }
   }, [edgeType]);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -1286,7 +1292,7 @@
       prevNodes.current = layoutedNodes;
       setIsTransforming(false);
     },
     [createNode, fetchAllClusterTimestamps]
   );
 
   // Memoize the data processing to avoid unnecessary re-renders

frontend/src/components/bindingPolicy/BPTable.tsx

@@ -45,7 +45,7 @@ const BPTable: React.FC<BPTableProps> = ({
   setActiveFilters,
   selectedPolicies,
   onSelectionChange,
-}): JSX.Element => {
+}) => {
   // Add debug log to see the policies structure
   console.log('BPTable - Received Policies:', policies);
 

frontend/src/components/common/ButtonTooltip.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 interface TooltipProps {
   tooltip: string;
   disabled: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
   placement?: 'top' | 'bottom' | 'left' | 'right';
 }

frontend/src/components/its/ClustersTable/dialogs/LabelEditDialog/LabelsList.tsx

@@ -25,8 +25,8 @@ interface LabelsListProps {
   onEditKeyChange: (value: string) => void;
   onEditValueChange: (value: string) => void;
   onEditKeyDown: (e: React.KeyboardEvent) => void;
-  editKeyInputRef: React.RefObject<HTMLInputElement>;
-  editValueInputRef: React.RefObject<HTMLInputElement>;
+  editKeyInputRef: React.RefObject<HTMLInputElement | null>;
+  editValueInputRef: React.RefObject<HTMLInputElement | null>;
   t: (key: string, options?: Record<string, string | number>) => string;
 }
 

frontend/src/components/its/ImportCluster/QuickConnectTab.tsx

@@ -44,7 +44,7 @@ interface QuickConnectProps {
     message: string;
     severity: 'success' | 'error' | 'warning' | 'info';
   }) => void;
-  successAlertRef: RefObject<HTMLDivElement>;
+  successAlertRef: RefObject<HTMLDivElement | null>;
   setManualCommand: (command: CommandResponse | null) => void;
   showLogs: boolean;
   setShowLogs: (show: boolean) => void;
@@ -400,7 +400,7 @@ const SuccessView: React.FC<{
   textColor: string;
   manualCommand: CommandResponse;
   cardStyle: SxProps<Theme>;
-  successAlertRef: RefObject<HTMLDivElement>;
+  successAlertRef: RefObject<HTMLDivElement | null>;
   onCancel: () => void;
   clearManualCommand: () => void;
   primaryButtonStyles: SxProps<Theme>;

frontend/src/components/login/globe/CosmicDust.tsx

@@ -48,16 +48,14 @@ const CosmicDust = ({ isActive = true }: CosmicDustProps) => {
       <bufferGeometry>
         <bufferAttribute
           attach="attributes-position"
+          args={[positions, 3]}
           count={count}
-          array={positions}
-          itemSize={3}
           usage={THREE.StaticDrawUsage}
         />
         <bufferAttribute
           attach="attributes-size"
+          args={[sizes, 1]}
           count={count}
-          array={sizes}
-          itemSize={1}
           usage={THREE.StaticDrawUsage}
         />
       </bufferGeometry>

frontend/src/components/menu/Tooltip.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 
 interface TooltipProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   position: { top: number; left: number };
 }
 

frontend/src/components/treeView/TreeViewCanvas.tsx

@@ -42,7 +42,7 @@ interface TreeViewCanvasProps {
   onExpandAll: () => void;
   onCollapseAll: () => void;
   isCollapsed: boolean;
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
   resourceFilters?: ObjectFilter;
   onResourceFiltersChange?: (filters: ObjectFilter) => void;
   onToggleFullscreen?: () => void;

frontend/src/components/treeView/TreeViewNodes.tsx

@@ -471,7 +471,8 @@ export const useTreeViewNodes = ({ onNodeSelect, onMenuOpen, isExpanded }: TreeV
   const updateNodeStyles = useCallback(
     (nodes: CustomNode[]) => {
       return nodes.map(node => {
-        const resourceData = node.data?.label?.props?.resourceData;
+        const resourceData = (node.data?.label?.props as { resourceData?: ResourceItem })
+          ?.resourceData;
         const hasHighlightedLabel =
           resourceData?.metadata?.labels &&
           highlightedLabels &&

frontend/src/components/treeView/types.ts

@@ -2,8 +2,14 @@ import React from 'react';
 import { Position, MarkerType } from 'reactflow';
 
 // Base interfaces
+export interface NodeLabelProps {
+  label: string;
+  resourceData?: ResourceItem;
+  [key: string]: unknown;
+}
+
 export interface NodeData {
-  label: JSX.Element;
+  label: React.ReactElement<NodeLabelProps>;
 }
 
 export interface BaseNode {

frontend/src/components/wecs_details/tabs/ExecTab.tsx

@@ -29,7 +29,7 @@
   selectedContainer: string;
   loadingContainers: boolean;
   isTerminalMaximized: boolean;
-  execTerminalRef: React.RefObject<HTMLDivElement>;
+  execTerminalRef: React.RefObject<HTMLDivElement | null>;
   execTerminalKey: string;
   handleContainerChange: (event: SelectChangeEvent<string>) => void;
   setIsContainerSelectActive: (active: boolean) => void;
@@ -274,7 +274,7 @@
       clearTimeout(timeoutId);
       if (cleanupFn) cleanupFn();
     };
   }, [theme, type, name, namespace, cluster, selectedContainer, execTerminalKey, t]);
 
   // Use available containers if containers prop is empty
   const containersToUse = containers.length > 0 ? containers : [];

frontend/src/components/wecs_details/tabs/LogsTab.tsx

@@ -24,7 +24,7 @@ interface LogsTabProps {
   type: string;
   theme: string;
   t: (key: string, options?: Record<string, unknown>) => string;
-  terminalRef: React.RefObject<HTMLDivElement>;
+  terminalRef: React.RefObject<HTMLDivElement | null>;
   logsContainers: ContainerInfo[];
   selectedLogsContainer: string;
   loadingLogsContainers: boolean;

frontend/src/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useCallback, Suspense, lazy } from 'react';
+import React, { useEffect, useState, useMemo, useCallback, Suspense, lazy } from 'react';
 import { useK8sQueries } from '../hooks/queries/useK8sQueries';
 import { useClusterQueries } from '../hooks/queries/useClusterQueries';
 import { motion, AnimatePresence, Variants } from 'framer-motion';
@@ -116,7 +116,7 @@
     <div>
       <div className="mb-2 flex items-center justify-between">
         <span className="group relative flex items-center text-sm font-medium text-gray-600 dark:text-gray-300">
-          {Icon && <Icon size={14} className="mr-2 text-gray-500" />}
+          {Icon && React.createElement(Icon, { size: 14, className: 'mr-2 text-gray-500' })}
           {label}
           {tooltip && (
             <>
@@ -293,7 +293,7 @@
   };
 
   interface CardLinkWrapperProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     link?: string;
   }
 
@@ -391,7 +391,7 @@
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center">
             <div className={`rounded-xl p-2.5 ${getIconGradient()} mr-3 text-white shadow-lg`}>
-              <Icon size={18} />
+              {React.createElement(Icon, { size: 18 })}
             </div>
             <span className="text-sm font-medium text-gray-700 transition-colors dark:text-gray-300">
               {title}
@@ -459,7 +459,7 @@
       <div className="flex items-center justify-between border-b px-5 pb-3 pt-5 dark:border-gray-700">
         <div className="flex items-center">
           <div className={`mr-3 rounded-lg p-2 ${iconColor} transition-colors`}>
-            <Icon size={18} />
+            {React.createElement(Icon, { size: 18 })}
           </div>
           <h2 className="text-lg font-semibold text-gray-900 transition-colors dark:text-gray-100">
             {title}
@@ -553,7 +553,7 @@
         setIsLoading(false);
       }
     }
   }, [clustersLoading, bpLoading, clusterData, bindingPoliciesData, userLoading, userActivities]);
 
   useEffect(() => {
     processData();