Merge pull request #8903 from meshery/revert-8893-theBeginner86/chore/24

Revert "[extensions] Fix Collaborator Extension Point Re-rendering"
meshery · Sep 24, 2023 · 6640f6f · 6640f6f
2 parents cea5d5e + 45040f2
commit 6640f6f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 25 deletions.
diff --git a/ui/components/ExtensionSandbox.js b/ui/components/ExtensionSandbox.js
@@ -7,7 +7,6 @@ import normalizeURI from "../utils/normalizeURI";
 import dataFetch from "../lib/data-fetch";
 import ExtensionPointSchemaValidator from "../utils/ExtensionPointSchemaValidator";
 import LoadingScreen from "./LoadingComponents/LoadingComponent";
-import { updateCollaboratorExtState } from "../lib/store";
 
 /**
  * getPath returns the current pathname
@@ -311,7 +310,7 @@ 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, updateCollaboratorExtState }) {
+function ExtensionSandbox({ type, Extension, isDrawerCollapsed, toggleDrawer, capabilitiesRegistry }) {
   const [extension, setExtension] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -378,7 +377,6 @@ function ExtensionSandbox ({ type, Extension, isDrawerCollapsed, toggleDrawer, c
                   : (type === "collaborator")?
                     (
                       getComponentURIFromPathForCollaborator(extension).map(uri => {
-                        updateCollaboratorExtState({ collaboratorExtState : true });
                         return <Extension url={createPathForRemoteComponent(uri)} key={uri} />
                       })
                     )
@@ -396,7 +394,6 @@ function ExtensionSandbox ({ type, Extension, isDrawerCollapsed, toggleDrawer, c
 
 const mapDispatchToProps = (dispatch) => ({
   toggleDrawer : bindActionCreators(toggleDrawer, dispatch),
-  updateCollaboratorExtState : bindActionCreators(updateCollaboratorExtState, dispatch),
 });
 
 const mapStateToProps = (state) => ({

diff --git a/ui/components/Header.js b/ui/components/Header.js
@@ -29,9 +29,11 @@ import {
   successHandlerGenerator, errorHandlerGenerator
 } from './ConnectionWizard/helpers/common';
 import { promisifiedDataFetch } from '../lib/data-fetch';
-import { updateK8SConfig, updateProgress, updateCapabilities, updateCollaboratorExtState } from '../lib/store';
+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';
@@ -514,7 +516,7 @@ function K8sContextMenu({
   )
 }
 
-class Header extends React.PureComponent {
+class Header extends React.Component {
 
   constructor(props) {
     super(props);
@@ -525,7 +527,6 @@ class Header extends React.PureComponent {
     }
   }
   componentDidMount() {
-    console.log("header component mounted")
     dataFetch(
       "/api/provider/capabilities",
       {
@@ -538,7 +539,7 @@ class Header extends React.PureComponent {
 
           this.setState({
             collaboratorExt : ExtensionPointSchemaValidator("collaborator")(result?.extensions?.collaborator),
-            capabilityregistryObj : capabilitiesRegistryObj,
+            capabilitiesRegistryObj,
           });
           this.props.updateCapabilities({ capabilitiesRegistry : result })
         }
@@ -550,12 +551,13 @@ class Header extends React.PureComponent {
 
   }
 
-  shouldComponentUpdate(nextProps) {
-    if (!nextProps?.collaboratorExtState && this.state.capabilityregistryObj !== null) {
-      return true;
+  componentDidUpdate(prevProps) {
+    if (!_.isEqual(prevProps.capabilitiesRegistry, this.props.capabilitiesRegistry)) {
+      this.setState({ capabilityregistryObj : new CapabilityRegistryClass(this.props.capabilitiesRegistry) });
     }
-    return false;
+
   }
+
   componentWillUnmount = () => {
     this._isMounted = false;
   }
@@ -654,16 +656,14 @@ const mapStateToProps = (state) => {
     k8sconfig : state.get('k8sConfig'),
     operatorState : state.get('operatorState'),
     meshSyncState : state.get('meshSyncState'),
-    capabilitiesRegistry : state.get("capabilitiesRegistry"),
-    collaboratorExtState : state.get("collaboratorExtState"),
+    capabilitiesRegistry : state.get("capabilitiesRegistry")
   })
 };
 
 const mapDispatchToProps = (dispatch) => ({
   updateK8SConfig : bindActionCreators(updateK8SConfig, dispatch),
   updateProgress : bindActionCreators(updateProgress, dispatch),
   updateCapabilities : bindActionCreators(updateCapabilities, dispatch),
-  updateCollaboratorExtState : bindActionCreators(updateCollaboratorExtState, dispatch),
 });
 
 

diff --git a/ui/lib/store.js b/ui/lib/store.js
@@ -70,7 +70,6 @@ const initialState = fromJS({
   // global gql-subscriptions
   operatorState: null,
   meshSyncState: null,
-  collaboratorExtState: false,
 });
 
 export const actionTypes = {
@@ -100,7 +99,7 @@ export const actionTypes = {
   UPDATE_EXTENSION_TYPE: 'UPDATE_EXTENSION_TYPE',
   UPDATE_CAPABILITY_REGISTRY: 'UPDATE_CAPABILITY_REGISTRY',
   UPDATE_TELEMETRY_URLS : 'UPDATE_TELEMETRY_URLS',
-  UPDATE_COLLABORTOR_EXT_STATE: 'UPDATE_COLLABORTOR_EXT_STATE',
+
 };
 
 // REDUCERS
@@ -182,10 +181,7 @@ export const reducer = (state = initialState, action) => {
       return state.merge({meshSyncState: action.meshSyncState});
 
     case actionTypes.UPDATE_EXTENSION_TYPE:
-      return state.merge({ extensionType: action.extensionType });
-
-    case actionTypes.UPDATE_COLLABORTOR_EXT_STATE:
-      return state.merge({ collaboratorExtState: action.collaboratorExtState });
+        return state.merge({ extensionType: action.extensionType });
 
     case actionTypes.UPDATE_CAPABILITY_REGISTRY:
       return state.merge({capabilitiesRegistry: action.capabilitiesRegistry})
@@ -289,10 +285,6 @@ export const updateExtensionType = ({ extensionType }) => dispatch => {
   return dispatch({type: actionTypes.UPDATE_EXTENSION_TYPE, extensionType})
 }
 
-export const updateCollaboratorExtState = ({ collaboratorExtState }) => dispatch => {
-  return dispatch({type: actionTypes.UPDATE_COLLABORTOR_EXT_STATE, collaboratorExtState})
-}
-
 export const updateCapabilities = ({capabilitiesRegistry}) => dispatch => {
   return dispatch({type: actionTypes.UPDATE_CAPABILITY_REGISTRY, capabilitiesRegistry})
 }

diff --git a/ui/pages/_app.js b/ui/pages/_app.js
@@ -250,6 +250,8 @@ class MesheryApp extends App {
     document.removeEventListener("fullscreenchange", this.fullScreenChanged);
   }
 
+
+
   componentDidUpdate(prevProps) {
     const { k8sConfig, capabilitiesRegistry } = this.props;