Fix ESLint errors causing CI failure

src/__testing__/routing.test.ts

@@ -43,7 +43,7 @@ describe('routing utilities', () => {
     expect(getShareableResourceRoute(RESOURCE_TYPE.DESIGN, 'd2', 'design')).toBe(
       'http://localhost/workspace?mode=design&design=d2'
     );
-    expect(() => getShareableResourceRoute('filter' as any, 'f1', 'filter')).toThrow(
+    expect(() => getShareableResourceRoute('filter' as unknown as RESOURCE_TYPE, 'f1', 'filter')).toThrow(
       'Unknown resource type filter'
     );
   });

src/actors/worker/workerfy.ts

@@ -71,8 +71,8 @@ export const workerfyActor = (actor: AnyActorLogic) => {
     }
 
     if (event.data.type === WORKER_COMMANDS.STOP_ACTOR) {
-      snapshotSubscription?.unsubscribe && snapshotSubscription.unsubscribe();
-      actorRef?.stop && actorRef.stop();
+      snapshotSubscription?.unsubscribe?.();
+      actorRef?.stop?.();
     }
 
     if (event.data.type === WORKER_COMMANDS.SEND_EVENT) {

src/base/Hidden/Hidden.tsx

@@ -1,8 +1,9 @@
 import { Hidden as MuiHidden, HiddenProps as MuiHiddenProps } from '@mui/material';
 import React from 'react';
 
-export const Hidden = React.forwardRef<HTMLDivElement, MuiHiddenProps>((props, ref) => {
-  return React.cloneElement(<MuiHidden {...props} />, { ref });
+export const Hidden = React.forwardRef<HTMLDivElement, MuiHiddenProps>((props) => {
+  // MuiHidden doesn't support ref forwarding
+  return <MuiHidden {...props} />;
 });
 
 export default Hidden;

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -72,7 +72,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
           setPageSize(tableState.rowsPerPage);
           break;
         case 'search':
-          setSearch && setSearch(tableState.searchText !== null ? tableState.searchText : '');
+          setSearch?.(tableState.searchText !== null ? tableState.searchText : '');
           break;
         case 'sort':
           if (

src/custom/CatalogDetail/ChallengesSection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Link, ListItemIcon } from '../../base';
 import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { ChallengesIcon } from '../../icons';
@@ -14,18 +14,21 @@ interface ChallengesSectionProps {
 
 const ChallengesSection: React.FC<ChallengesSectionProps> = ({ filteredAcademyData }) => {
   const theme = useTheme();
-  const [openChallenges, setOpenChallenges] = useState(false);
-  const [autoUpdate, setAutoUpdate] = useState(true);
-
-  useEffect(() => {
-    if (autoUpdate) {
-      setOpenChallenges((filteredAcademyData?.['challenges'] ?? []).length > 0);
-    }
-  }, [filteredAcademyData, autoUpdate]);
+  const [userToggleValue, setUserToggleValue] = useState<boolean | null>(null);
+
+  const hasChallenges = useMemo(
+    () => (filteredAcademyData?.['challenges'] ?? []).length > 0,
+    [filteredAcademyData]
+  );
+
+  // Derive the open state: use user's manual toggle if set, otherwise use hasChallenges
+  const openChallenges = userToggleValue ?? hasChallenges;
 
   const toggleOpenChallenges = () => {
-    setOpenChallenges((prev) => !prev);
-    setAutoUpdate(false);
+    setUserToggleValue((prev) => {
+      const currentValue = prev !== null ? prev : hasChallenges;
+      return !currentValue;
+    });
   };
 
   const renderChallengeItem = (item: string, index: number) => (

src/custom/CatalogDetail/ContentClassInfo.tsx

@@ -12,6 +12,17 @@ interface ContentClassInfoProps {
   classes: Class[];
 }
 
+interface ClassIconProps {
+  className: string;
+  contentClass: ContentClassType;
+}
+
+const ClassIcon: React.FC<ClassIconProps> = ({ className, contentClass }) => {
+  const Icon = contentClass[className]?.icon;
+  const fill = contentClass[className]?.color;
+  return Icon ? <Icon width="25px" height="25px" fill={fill} /> : null;
+};
+
 const ContentClassInfo: React.FC<ContentClassInfoProps> = ({ contentClass, classes }) => {
   const _classDescription = (className: string): string | undefined => {
     const classObj = classes && classes.find((classObj) => classObj.class === className);
@@ -35,12 +46,6 @@ const ContentClassInfo: React.FC<ContentClassInfoProps> = ({ contentClass, class
     }
   } as const;
 
-  const ClassIcon: React.FC<{ className: string }> = ({ className }) => {
-    const Icon = CONTENT_CLASS[className]?.icon;
-    const fill = CONTENT_CLASS[className]?.color;
-    return Icon ? <Icon width="25px" height="25px" fill={fill} /> : null;
-  };
-
   return (
     <div>
       <Box style={{ display: 'flex', alignItems: 'center', gap: '0.3rem' }}>
@@ -61,7 +66,7 @@ const ContentClassInfo: React.FC<ContentClassInfoProps> = ({ contentClass, class
           fontFamily: 'inherit'
         }}
       >
-        <ClassIcon className={contentClass} />
+        <ClassIcon className={contentClass} contentClass={CONTENT_CLASS} />
         {formatToTitleCase(contentClass)}
       </ContentDetailsText>
     </div>

src/custom/CatalogDetail/LearningSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Link, ListItemIcon } from '../../base';
 import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { LearningIcon } from '../../icons';
@@ -14,18 +14,21 @@ interface LearningSectionProps {
 
 const LearningSection: React.FC<LearningSectionProps> = ({ filteredAcademyData }) => {
   const theme = useTheme();
-  const [openLearning, setOpenLearning] = useState<boolean>(false);
-  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
-
-  useEffect(() => {
-    if (autoUpdate) {
-      setOpenLearning(Boolean((filteredAcademyData?.['learning-path'] ?? []).length > 0));
-    }
-  }, [filteredAcademyData, autoUpdate]);
+  const [userToggleValue, setUserToggleValue] = useState<boolean | null>(null);
+
+  const hasLearningPaths = useMemo(
+    () => Boolean((filteredAcademyData?.['learning-path'] ?? []).length > 0),
+    [filteredAcademyData]
+  );
+
+  // Derive the open state: use user's manual toggle if set, otherwise use hasLearningPaths
+  const openLearning = userToggleValue ?? hasLearningPaths;
 
   const toggleOpenLearning = (): void => {
-    setOpenLearning((prev) => !prev);
-    setAutoUpdate(false);
+    setUserToggleValue((prev) => {
+      const currentValue = prev !== null ? prev : hasLearningPaths;
+      return !currentValue;
+    });
   };
 
   const renderLearningItem = (item: string, index: number) => (

src/custom/CustomCatalog/CatalogCardDesignLogo.tsx

@@ -11,6 +11,21 @@ interface CatalogCardDesignLogoProps {
   style?: React.CSSProperties;
 }
 
+interface SvgComponentProps {
+  type: { type: string };
+  width: string;
+  height: string;
+  style: React.CSSProperties;
+}
+
+const SvgComponent: React.FC<SvgComponentProps> = ({ type, width, height, style }) => {
+  return type.type === 'filter' ? (
+    <MesheryFilterIcon width={width} height={height} style={style} />
+  ) : (
+    <DesignIcon width={width} height={height} style={style} />
+  );
+};
+
 const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
   zoomEffect = false,
   imgURL,
@@ -32,14 +47,6 @@ const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
     setIsZoomed(false);
   };
 
-  const SvgComponent: React.FC<{ type: { type: string } }> = ({ type }) => {
-    return type.type === 'filter' ? (
-      <MesheryFilterIcon width={width} height={height} style={style} />
-    ) : (
-      <DesignIcon width={width} height={height} style={style} />
-    );
-  };
-
   return (
     <>
       {imgURL && imgURL.length > 0 ? (
@@ -82,11 +89,11 @@ const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
               </Dialog>
             </>
           ) : (
-            <SvgComponent type={type} />
+            <SvgComponent type={type} width={width} height={height} style={style} />
           )}
         </div>
       ) : (
-        <SvgComponent type={type} />
+        <SvgComponent type={type} width={width} height={height} style={style} />
       )}
     </>
   );

src/custom/FlipCard/FlipCard.tsx

@@ -108,8 +108,8 @@ export function FlipCard({
       onClick={() => {
         if (disableFlip) return;
         setFlipped((flipped) => !flipped);
-        onClick && onClick();
-        onShow && onShow();
+        onClick?.();
+        onShow?.();
       }}
     >
       <InnerCard

src/custom/Modal/index.tsx

@@ -91,15 +91,15 @@ export const useModal = ({ headerIcon }: { headerIcon: React.ReactNode }): UseMo
   const [reactNode, setReactNode] = useState<React.ReactNode | null>(null);
 
   const openModal: openModalCallback = ({ title, reactNode = null, onClose }) => {
-    title && setTitle(title);
-    onClose && (onCloseRef.current = onClose);
+    if (title) setTitle(title);
+    if (onClose) onCloseRef.current = onClose;
     setOpen(true);
-    reactNode && setReactNode(reactNode);
+    if (reactNode) setReactNode(reactNode);
   };
 
   const closeModal = () => {
     setOpen(false);
-    onCloseRef.current && onCloseRef.current();
+    onCloseRef.current?.();
     setReactNode(null);
     setTitle('');
     onCloseRef.current = null;

src/custom/ResourceDetailFormatters/Formatter.tsx

@@ -65,6 +65,10 @@ interface ResourceProgressProps {
   type: string;
 }
 
+interface ResourceProgressWithChartProps extends ResourceProgressProps {
+  chartOptions: (percentage: number, type: string) => ChartOptions;
+}
+
 interface StatusColorType {
   background: string;
   text: string;
@@ -358,6 +362,13 @@ export const StatusChip = ({ status }: { status: string }) => {
   );
 };
 
+const ResourceProgress: React.FC<ResourceProgressWithChartProps> = ({ title, percentage, type, chartOptions }) => (
+  <ResourceProgressContainer>
+    <Typography variant="body1">{title}</Typography>
+    <BBChart options={chartOptions(percentage, type)} />
+  </ResourceProgressContainer>
+);
+
 export const MemoryUsage: React.FC<MemoryUsageProps> = ({
   allocatable,
   capacity,
@@ -427,25 +438,15 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
     [height, width]
   );
 
-  const ResourceProgress = useCallback<React.FC<ResourceProgressProps>>(
-    ({ title, percentage, type }) => (
-      <ResourceProgressContainer>
-        <Typography variant="body1">{title}</Typography>
-        <BBChart options={chartOptions(percentage, type)} />
-      </ResourceProgressContainer>
-    ),
-    [chartOptions]
-  );
-
   if (!allocatable || !capacity) {
     return null;
   }
 
   return (
     <FlexResourceContainer>
-      <ResourceProgress title="System Reserved Cpu" percentage={reservedCpu} type={'CPU'} />
-      <ResourceProgress title="Memory Usage" percentage={memoryUsage} type={'Memory'} />
-      <ResourceProgress title="Disk Usage" percentage={diskUsagePercent} type={'Disk'} />
+      <ResourceProgress title="System Reserved Cpu" percentage={reservedCpu} type={'CPU'} chartOptions={chartOptions} />
+      <ResourceProgress title="Memory Usage" percentage={memoryUsage} type={'Memory'} chartOptions={chartOptions} />
+      <ResourceProgress title="Disk Usage" percentage={diskUsagePercent} type={'Disk'} chartOptions={chartOptions} />
     </FlexResourceContainer>
   );
 };

src/custom/ResponsiveDataTable.tsx

@@ -179,7 +179,7 @@ const ResponsiveDataTable = ({
           if (colToAdd) {
             if (colToAdd.options) {
               colToAdd.options.display = true;
-              updateCols && updateCols([...columns]);
+              updateCols?.([...columns]);
             }
           }
           break;
@@ -189,7 +189,7 @@ const ResponsiveDataTable = ({
           if (colToRemove) {
             if (colToRemove.options) {
               colToRemove.options.display = false;
-              updateCols && updateCols([...columns]);
+              updateCols?.([...columns]);
             }
           }
           break;
@@ -236,7 +236,7 @@ const ResponsiveDataTable = ({
         }
       }
     });
-    updateCols && updateCols([...columns]);
+    updateCols?.([...columns]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columnVisibility, updateCols]);
 

src/custom/ShareModal/ShareModal.tsx

@@ -82,7 +82,7 @@ const AccessListActor: React.FC<AccessListActorProps> = ({
           src={actorData.avatar_url}
           imgProps={{ referrerPolicy: 'no-referrer' }}
           onClick={() => {
-            hostURL && openInNewTab(`${hostURL}/user/${actorData.id}`);
+            if (hostURL) openInNewTab(`${hostURL}/user/${actorData.id}`);
           }}
         />
       </ListItemAvatar>

src/custom/TeamTable/TeamTableConfiguration.tsx

@@ -227,7 +227,7 @@ export default function TeamTableConfiguration({
                       id={`edit_team-${tableMeta.rowIndex}`}
                       title="Edit Team"
                       onClick={(ev) => {
-                        isEditTeamAllowed && handleTeamView(ev, tableMeta.rowData);
+                        if (isEditTeamAllowed) handleTeamView(ev, tableMeta.rowData);
                       }}
                       iconType="edit"
                     >
@@ -252,9 +252,9 @@ export default function TeamTableConfiguration({
                     id={`remove_team-${tableMeta.rowIndex}`}
                     title={'Move Team'}
                     onClick={() => {
-                      isRemoveTeamFromWorkspaceAllowed &&
-                        handleRemoveTeamFromWorkspace &&
+                      if (isRemoveTeamFromWorkspaceAllowed && handleRemoveTeamFromWorkspace) {
                         handleRemoveTeamFromWorkspace(tableMeta.rowData[0]);
+                      }
                     }}
                     iconType="delete"
                   >
@@ -267,7 +267,7 @@ export default function TeamTableConfiguration({
                     id={`delete_team-${tableMeta.rowIndex}`}
                     title={'Delete Team'}
                     onClick={(ev: React.MouseEvent) => {
-                      isDeleteTeamAllowed && handleDeleteTeam(ev, tableMeta.rowData);
+                      if (isDeleteTeamAllowed) handleDeleteTeam(ev, tableMeta.rowData);
                     }}
                     iconType="delete"
                   >

src/custom/TypingFilter/index.tsx

@@ -147,7 +147,7 @@ export function TypingFilter({ filterSchema, handleFilter, autoFilter = false }:
       />
       <Popper
         open={filterState.state != FilteringState.IDLE && isPopperOpen}
-        anchorEl={inputFieldRef.current}
+        anchorEl={anchorEl}
         placement="bottom-start"
         style={{ zIndex: 2000 }}
         transition

src/custom/Workspaces/EnvironmentTable.tsx

@@ -163,11 +163,12 @@ const EnvironmentTable: React.FC<EnvironmentTableProps> = ({
               id={`delete_team-${tableMeta.rowIndex}`}
               title="Remove Environment"
               onClick={() => {
-                isRemoveAllowed &&
+                if (isRemoveAllowed) {
                   unassignEnvironmentFromWorkspace({
                     workspaceId,
                     environmentId: tableMeta.rowData[0]
                   });
+                }
               }}
               iconType="delete"
             >

src/custom/Workspaces/WorkspaceContentMoveModal.tsx

@@ -150,7 +150,7 @@ const WorkspaceContentMoveModal: React.FC<WorkspaceContentMoveModalProps> = ({
         message: `Successfully moved ${type === RESOURCE_TYPE.DESIGN ? 'design' : 'view'}${multiSelectedContent.length > 1 ? 's' : ''} to ${selectedWorkspaceForMove!.name}`,
         event_type: EVENT_TYPES.SUCCESS
       });
-    } catch (error) {
+    } catch {
       notify({
         message: `Failed to move ${type === RESOURCE_TYPE.DESIGN ? 'design' : 'view'}. Please try again.`,
         event_type: EVENT_TYPES.ERROR