fix: resolve ESLint errors in CI workflow

src/__testing__/ResponsiveDataTable.test.tsx

@@ -50,7 +50,6 @@ jest.mock('@sistent/mui-datatables', () => {
   };
 });
 
-// eslint-disable-next-line import/first
 import ResponsiveDataTable from '../custom/ResponsiveDataTable';
 
 const mockColumns = [

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();
+      if (snapshotSubscription?.unsubscribe) snapshotSubscription.unsubscribe();
+      if (actorRef?.stop) actorRef.stop();
     }
 
     if (event.data.type === WORKER_COMMANDS.SEND_EVENT) {

src/base/Hidden/Hidden.tsx

@@ -1,8 +1,8 @@
 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.FC<MuiHiddenProps> = (props) => {
+  return <MuiHidden {...props} />;
+};
 
 export default Hidden;

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -72,7 +72,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
           setPageSize(tableState.rowsPerPage);
           break;
         case 'search':
-          setSearch && setSearch(tableState.searchText !== null ? tableState.searchText : '');
+          if (setSearch) {
+            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 { useMemo, useState } from 'react';
 import { Link, ListItemIcon } from '../../base';
 import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { ChallengesIcon } from '../../icons';
@@ -14,18 +14,17 @@ interface ChallengesSectionProps {
 
 const ChallengesSection: React.FC<ChallengesSectionProps> = ({ filteredAcademyData }) => {
   const theme = useTheme();
-  const [openChallenges, setOpenChallenges] = useState(false);
-  const [autoUpdate, setAutoUpdate] = useState(true);
+  const [manualOverride, setManualOverride] = useState<boolean | null>(null);
 
-  useEffect(() => {
-    if (autoUpdate) {
-      setOpenChallenges((filteredAcademyData?.['challenges'] ?? []).length > 0);
-    }
-  }, [filteredAcademyData, autoUpdate]);
+  const hasChallenges = useMemo(
+    () => (filteredAcademyData?.['challenge'] ?? []).length > 0,
+    [filteredAcademyData]
+  );
+
+  const openChallenges = manualOverride !== null ? manualOverride : hasChallenges;
 
   const toggleOpenChallenges = () => {
-    setOpenChallenges((prev) => !prev);
-    setAutoUpdate(false);
+    setManualOverride((prev) => (prev !== null ? !prev : !hasChallenges));
   };
 
   const renderChallengeItem = (item: string, index: number) => (

src/custom/CatalogDetail/ContentClassInfo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box } from '../../base';
 import { CommunityClassIcon, OfficialClassIcon, VerificationClassIcon } from '../../icons';
 import { KEPPEL, useTheme } from '../../theme';
@@ -20,26 +20,27 @@ const ContentClassInfo: React.FC<ContentClassInfoProps> = ({ contentClass, class
 
   const theme = useTheme();
 
-  const CONTENT_CLASS: ContentClassType = {
-    community: {
-      icon: CommunityClassIcon,
-      color: theme.palette.icon.secondary
-    },
-    official: {
-      icon: OfficialClassIcon,
-      color: '#EBC017'
-    },
-    verified: {
-      icon: VerificationClassIcon,
-      color: theme.palette.primary.brand?.default || KEPPEL
-    }
-  } as const;
+  const CONTENT_CLASS: ContentClassType = useMemo(
+    () => ({
+      community: {
+        icon: CommunityClassIcon,
+        color: theme.palette.icon.secondary
+      },
+      official: {
+        icon: OfficialClassIcon,
+        color: '#EBC017'
+      },
+      verified: {
+        icon: VerificationClassIcon,
+        color: theme.palette.primary.brand?.default || KEPPEL
+      }
+    }),
+    [theme.palette.icon.secondary, theme.palette.primary.brand?.default]
+  );
 
-  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;
-  };
+  const classConfig = CONTENT_CLASS[contentClass];
+  const Icon = classConfig?.icon;
+  const fill = classConfig?.color;
 
   return (
     <div>
@@ -61,7 +62,7 @@ const ContentClassInfo: React.FC<ContentClassInfoProps> = ({ contentClass, class
           fontFamily: 'inherit'
         }}
       >
-        <ClassIcon className={contentClass} />
+        {Icon && <Icon width="25px" height="25px" fill={fill} />}
         {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,17 @@ interface LearningSectionProps {
 
 const LearningSection: React.FC<LearningSectionProps> = ({ filteredAcademyData }) => {
   const theme = useTheme();
-  const [openLearning, setOpenLearning] = useState<boolean>(false);
-  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
+  const [manualOverride, setManualOverride] = useState<boolean | null>(null);
 
-  useEffect(() => {
-    if (autoUpdate) {
-      setOpenLearning(Boolean((filteredAcademyData?.['learning-path'] ?? []).length > 0));
-    }
-  }, [filteredAcademyData, autoUpdate]);
+  const hasLearningPaths = useMemo(
+    () => (filteredAcademyData?.['learning-path'] ?? []).length > 0,
+    [filteredAcademyData]
+  );
+
+  const openLearning = manualOverride !== null ? manualOverride : hasLearningPaths;
 
   const toggleOpenLearning = (): void => {
-    setOpenLearning((prev) => !prev);
-    setAutoUpdate(false);
+    setManualOverride((prev) => (prev !== null ? !prev : !hasLearningPaths));
   };
 
   const renderLearningItem = (item: string, index: number) => (

src/custom/CustomCatalog/CatalogCardDesignLogo.tsx

@@ -32,7 +32,7 @@ const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
     setIsZoomed(false);
   };
 
-  const SvgComponent: React.FC<{ type: { type: string } }> = ({ type }) => {
+  const renderSvgComponent = () => {
     return type.type === 'filter' ? (
       <MesheryFilterIcon width={width} height={height} style={style} />
     ) : (
@@ -82,11 +82,11 @@ const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
               </Dialog>
             </>
           ) : (
-            <SvgComponent type={type} />
+            renderSvgComponent()
           )}
         </div>
       ) : (
-        <SvgComponent type={type} />
+        renderSvgComponent()
       )}
     </>
   );

src/custom/FlipCard/FlipCard.tsx

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