updates

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

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 typeof RESOURCE_TYPE[keyof typeof RESOURCE_TYPE], 'f1', 'filter')).toThrow(
       'Unknown resource type filter'
     );
   });

src/actors/worker/workerfy.ts

@@ -71,8 +71,12 @@ 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

@@ -2,7 +2,11 @@ import { Hidden as MuiHidden, HiddenProps as MuiHiddenProps } from '@mui/materia
 import React from 'react';
 
 export const Hidden = React.forwardRef<HTMLDivElement, MuiHiddenProps>((props, ref) => {
-  return React.cloneElement(<MuiHidden {...props} />, { ref });
+  return (
+    <div ref={ref}>
+      <MuiHidden {...props} />
+    </div>
+  );
 });
 
 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 { useEffect, useRef, useState } from 'react';
 import { Link, ListItemIcon } from '../../base';
 import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { ChallengesIcon } from '../../icons';
@@ -17,9 +17,14 @@ const ChallengesSection: React.FC<ChallengesSectionProps> = ({ filteredAcademyDa
   const [openChallenges, setOpenChallenges] = useState(false);
   const [autoUpdate, setAutoUpdate] = useState(true);
 
+  const prevDataRef = useRef(filteredAcademyData);
+
   useEffect(() => {
-    if (autoUpdate) {
-      setOpenChallenges((filteredAcademyData?.['challenges'] ?? []).length > 0);
+    if (autoUpdate && prevDataRef.current !== filteredAcademyData) {
+      prevDataRef.current = filteredAcademyData;
+      queueMicrotask(() => {
+        setOpenChallenges((filteredAcademyData?.['challenges'] ?? []).length > 0);
+      });
     }
   }, [filteredAcademyData, autoUpdate]);
 

src/custom/CatalogDetail/LearningSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Link, ListItemIcon } from '../../base';
 import { MESHERY_CLOUD_PROD } from '../../constants/constants';
 import { LearningIcon } from '../../icons';
@@ -17,9 +17,14 @@ const LearningSection: React.FC<LearningSectionProps> = ({ filteredAcademyData }
   const [openLearning, setOpenLearning] = useState<boolean>(false);
   const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
 
+  const prevDataRef = useRef(filteredAcademyData);
+
   useEffect(() => {
-    if (autoUpdate) {
-      setOpenLearning(Boolean((filteredAcademyData?.['learning-path'] ?? []).length > 0));
+    if (autoUpdate && prevDataRef.current !== filteredAcademyData) {
+      prevDataRef.current = filteredAcademyData;
+      queueMicrotask(() => {
+        setOpenLearning(Boolean((filteredAcademyData?.['learning-path'] ?? []).length > 0));
+      });
     }
   }, [filteredAcademyData, autoUpdate]);
 

src/custom/CustomCatalog/CatalogCardDesignLogo.tsx

@@ -10,6 +10,18 @@ interface CatalogCardDesignLogoProps {
   height: string;
   style?: React.CSSProperties;
 }
+const SvgComponent: React.FC<{
+  type: { type: string };
+  width: string;
+  height: string;
+  style?: React.CSSProperties;
+}> = ({ 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,
@@ -32,14 +44,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 +86,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,12 @@ export function FlipCard({
       onClick={() => {
         if (disableFlip) return;
         setFlipped((flipped) => !flipped);
-        onClick && onClick();
-        onShow && onShow();
+        if (onClick) {
+          onClick();
+        }
+        if (onShow) {
+          onShow();
+        }
       }}
     >
       <InnerCard

src/custom/Helpers/readme.md

@@ -11,13 +11,11 @@ This directory contains a collection of utility and helper components that you c
 ## Available Helper Components
 
 1. **Window Dimensions Hook**: A custom React hook for tracking changes in window dimensions.
-
    - **File**: `Dimension`
    - **Usage**: Provides the `useWindowDimensions` hook, which allows you to get the current window dimensions and react to changes in window size.
    - **Returns**: An object containing the current window dimensions and a boolean value indicating whether the window is currently in landscape mode.
 
 2. **Notification Hook**: A custom React hook for displaying notifications using notistack.
-
    - **File**: `Notification`
    - **Usage**: Provides the `useNotificationHandler` hook, which allows you to display notifications.
    - **Returns**: An object containing the notification state and a function for updating the notification state.

system/patterns/empty-states.md

@@ -9,24 +9,19 @@ Empty states are essential components used to occupy spaces when no content has
 The BlankSlate component comprises various elements that work together to inform the user about a feature and guide them on how to proceed. Here are the key elements of the BlankSlate component and how to customize them:
 
 1. **Graphic**
-
    - Graphics should be purposefully placed to convey the intention of the content, whether it's to bring delight, preview an interface element, or represent the feature's goal.
    - Different graphics may hold different meanings and appeal to users, which is why the BlankSlate component offers multiple variations.
 
 2. **Primary Text**
-
    - Use primary text to explain the purpose of the empty state, making users comfortable to engage with the content or start a feature flow. It should be welcoming, human, and clearly convey the feature's intention.
 
 3. **Secondary Text**
-
    - This optional text provides more detailed information about the feature. It should be concise and non-redundant, allowing users to understand the general purpose and benefits of the feature.
 
 4. **Primary Action**
-
    - Encourage the use of one primary action button that leads to a feature or component creation flow. The button copy should be brief yet descriptive. Consider adding an Octicon for further specification if needed.
 
 5. **Secondary Action**
-
    - A secondary action is optional and usually represented by a text link below the primary action button. It guides users to additional content related to the feature, such as "Learn more about X" or "Check out the guide on X."
 
 6. **Border**