Merge pull request meshery#8904 from meshery/revert-8903-revert-8893-…

…theBeginner86/chore/24 [extensions] Fix Collaborator Extension Point Re-rendering
Mohith234 · Sep 25, 2023 · a2cb921 · a2cb921
2 parents d9a90e3 + ac85926
commit a2cb921
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 89 deletions.
diff --git a/ui/components/ExtensionSandbox.js b/ui/components/ExtensionSandbox.js
@@ -307,84 +307,74 @@ function createPathForRemoteComponent(componentName) {
  *  4. collaborator - for collaborator extension
  * @param {{ type: "navigator" | "user_prefs" | "account" | "collaborator", Extension: JSX.Element }} props
  */
-function ExtensionSandbox({
-  type,
-  Extension,
-  isDrawerCollapsed,
-  toggleDrawer,
-  capabilitiesRegistry,
-}) {
-  const [extension, setExtension] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    if (type === 'navigator' && !isDrawerCollapsed) {
-      toggleDrawer({ isDrawerCollapsed: !isDrawerCollapsed });
-    }
-    if (capabilitiesRegistry) {
-      const data = ExtensionPointSchemaValidator(type)(capabilitiesRegistry?.extensions[type]);
-      if (data !== undefined) {
-        setExtension(data);
-        setIsLoading(false);
+const ExtensionSandbox = React.memo(
+  function MemoizedExtensionSandbox({
+    type,
+    Extension,
+    isDrawerCollapsed,
+    toggleDrawer,
+    capabilitiesRegistry,
+  }) {
+    const [extension, setExtension] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      if (type === 'navigator' && !isDrawerCollapsed) {
+        toggleDrawer({ isDrawerCollapsed: !isDrawerCollapsed });
       }
-    }
-    // necessary to cleanup states on each unmount to prevent memory leaks and unwanted clashes between extension points
-    return () => {
-      setExtension([]);
-      setIsLoading(true);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (type === 'navigator' && !isDrawerCollapsed) {
-      toggleDrawer({ isDrawerCollapsed: !isDrawerCollapsed });
-    }
-    if (capabilitiesRegistry) {
-      const data = ExtensionPointSchemaValidator(type)(capabilitiesRegistry?.extensions[type]);
-      if (data !== undefined) {
-        setExtension(data);
-        setIsLoading(false);
+      if (capabilitiesRegistry) {
+        const data = ExtensionPointSchemaValidator(type)(capabilitiesRegistry?.extensions[type]);
+        if (data !== undefined) {
+          setExtension(data);
+          setIsLoading(false);
+        }
       }
-    }
-    // necessary to cleanup states on each unmount to prevent memory leaks and unwanted clashes between extension points
-    return () => {
-      setExtension([]);
-      setIsLoading(true);
-    };
-  }, [type]);
-
-  return (
-    <>
-      {isLoading ? (
-        type === 'collaborator' ? (
-          ''
-        ) : (
-          <LoadingScreen animatedIcon="AnimatedMeshery" message="Establishing Remote Connection" />
-        )
-      ) : type === 'navigator' ? (
-        <Extension
-          url={createPathForRemoteComponent(
-            getComponentURIFromPathForNavigator(extension, getPath()),
-          )}
-        />
-      ) : type === 'user_prefs' ? (
-        getComponentURIFromPathForUserPrefs(extension).map((uri) => {
-          return <Extension url={createPathForRemoteComponent(uri)} key={uri} />;
-        })
-      ) : type === 'collaborator' ? (
-        getComponentURIFromPathForCollaborator(extension).map((uri) => {
-          return <Extension url={createPathForRemoteComponent(uri)} key={uri} />;
-        })
-      ) : type === 'account' ? (
-        <Extension
-          url={createPathForRemoteComponent(
-            getComponentURIFromPathForAccount(extension, getPath()),
-          )}
-        />
-      ) : null}
-    </>
-  );
-}
+      // necessary to cleanup states on each unmount to prevent memory leaks and unwanted clashes between extension points
+      return () => {
+        setExtension([]);
+        setIsLoading(true);
+      };
+    }, [type]);
+
+    return (
+      <>
+        {isLoading ? (
+          type === 'collaborator' ? (
+            ''
+          ) : (
+            <LoadingScreen
+              animatedIcon="AnimatedMeshery"
+              message="Establishing Remote Connection"
+            />
+          )
+        ) : type === 'navigator' ? (
+          <Extension
+            url={createPathForRemoteComponent(
+              getComponentURIFromPathForNavigator(extension, getPath()),
+            )}
+          />
+        ) : type === 'user_prefs' ? (
+          getComponentURIFromPathForUserPrefs(extension).map((uri) => {
+            return <Extension url={createPathForRemoteComponent(uri)} key={uri} />;
+          })
+        ) : type === 'collaborator' ? (
+          getComponentURIFromPathForCollaborator(extension).map((uri) => {
+            return <Extension url={createPathForRemoteComponent(uri)} key={uri} />;
+          })
+        ) : type === 'account' ? (
+          <Extension
+            url={createPathForRemoteComponent(
+              getComponentURIFromPathForAccount(extension, getPath()),
+            )}
+          />
+        ) : null}
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.type === nextProps.type;
+  },
+);
 
 const mapDispatchToProps = (dispatch) => ({
   toggleDrawer: bindActionCreators(toggleDrawer, dispatch),

diff --git a/ui/components/Header.js b/ui/components/Header.js
@@ -33,8 +33,6 @@ import { promisifiedDataFetch } from '../lib/data-fetch';
 import { updateK8SConfig, updateProgress, updateCapabilities } from '../lib/store';
 import { bindActionCreators } from 'redux';
 import BadgeAvatars from './CustomAvatar';
-import { CapabilitiesRegistry as CapabilityRegistryClass } from '../utils/disabledComponents';
-import _ from 'lodash';
 import { SETTINGS } from '../constants/navigator';
 import { cursorNotAllowed, disabledStyle } from '../css/disableComponent.styles';
 import PromptComponent from './PromptComponent';
@@ -538,7 +536,7 @@ function K8sContextMenu({
   );
 }
 
-class Header extends React.Component {
+class Header extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -548,6 +546,7 @@ class Header extends React.Component {
     };
   }
   componentDidMount() {
+    console.log('header component mounted');
     dataFetch(
       '/api/provider/capabilities',
       {
@@ -562,7 +561,7 @@ class Header extends React.Component {
             collaboratorExt: ExtensionPointSchemaValidator('collaborator')(
               result?.extensions?.collaborator,
             ),
-            capabilitiesRegistryObj,
+            capabilityregistryObj: capabilitiesRegistryObj,
           });
           this.props.updateCapabilities({ capabilitiesRegistry: result });
         }
@@ -572,15 +571,6 @@ class Header extends React.Component {
     console.log('capabilitiesRegistry (mounted header)', this.props.capabilitiesRegistry);
     this._isMounted = true;
   }
-
-  componentDidUpdate(prevProps) {
-    if (!_.isEqual(prevProps.capabilitiesRegistry, this.props.capabilitiesRegistry)) {
-      this.setState({
-        capabilityregistryObj: new CapabilityRegistryClass(this.props.capabilitiesRegistry),
-      });
-    }
-  }
-
   componentWillUnmount = () => {
     this._isMounted = false;
   };