From 84fddf89d14ca2d3e2093545e03bba47ed2cca60 Mon Sep 17 00:00:00 2001 From: Pranav Singh Date: Sun, 24 Sep 2023 21:40:37 +0530 Subject: [PATCH 1/3] Revert "Revert "[extensions] Fix Collaborator Extension Point Re-rendering"" --- ui/components/ExtensionSandbox.js | 5 ++++- ui/components/Header.js | 22 +++++++++++----------- ui/lib/store.js | 12 ++++++++++-- ui/pages/_app.js | 2 -- 4 files changed, 25 insertions(+), 16 deletions(-) diff --git a/ui/components/ExtensionSandbox.js b/ui/components/ExtensionSandbox.js index 2b2c34aaf36..ed9f28b331a 100644 --- a/ui/components/ExtensionSandbox.js +++ b/ui/components/ExtensionSandbox.js @@ -7,6 +7,7 @@ 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 @@ -310,7 +311,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 }) { +function ExtensionSandbox ({ type, Extension, isDrawerCollapsed, toggleDrawer, capabilitiesRegistry, updateCollaboratorExtState }) { const [extension, setExtension] = useState([]); const [isLoading, setIsLoading] = useState(true); @@ -377,6 +378,7 @@ function ExtensionSandbox({ type, Extension, isDrawerCollapsed, toggleDrawer, ca : (type === "collaborator")? ( getComponentURIFromPathForCollaborator(extension).map(uri => { + updateCollaboratorExtState({ collaboratorExtState : true }); return }) ) @@ -394,6 +396,7 @@ function ExtensionSandbox({ type, Extension, isDrawerCollapsed, toggleDrawer, ca 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 index aba879fd63b..eb1d14cb5c8 100644 --- a/ui/components/Header.js +++ b/ui/components/Header.js @@ -29,11 +29,9 @@ import { successHandlerGenerator, errorHandlerGenerator } from './ConnectionWizard/helpers/common'; import { promisifiedDataFetch } from '../lib/data-fetch'; -import { updateK8SConfig, updateProgress, updateCapabilities } from '../lib/store'; +import { updateK8SConfig, updateProgress, updateCapabilities, updateCollaboratorExtState } 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'; @@ -516,7 +514,7 @@ function K8sContextMenu({ ) } -class Header extends React.Component { +class Header extends React.PureComponent { constructor(props) { super(props); @@ -527,6 +525,7 @@ class Header extends React.Component { } } componentDidMount() { + console.log("header component mounted") dataFetch( "/api/provider/capabilities", { @@ -539,7 +538,7 @@ class Header extends React.Component { this.setState({ collaboratorExt : ExtensionPointSchemaValidator("collaborator")(result?.extensions?.collaborator), - capabilitiesRegistryObj, + capabilityregistryObj : capabilitiesRegistryObj, }); this.props.updateCapabilities({ capabilitiesRegistry : result }) } @@ -551,13 +550,12 @@ class Header extends React.Component { } - componentDidUpdate(prevProps) { - if (!_.isEqual(prevProps.capabilitiesRegistry, this.props.capabilitiesRegistry)) { - this.setState({ capabilityregistryObj : new CapabilityRegistryClass(this.props.capabilitiesRegistry) }); + shouldComponentUpdate(nextProps) { + if (!nextProps?.collaboratorExtState && this.state.capabilityregistryObj !== null) { + return true; } - + return false; } - componentWillUnmount = () => { this._isMounted = false; } @@ -656,7 +654,8 @@ const mapStateToProps = (state) => { k8sconfig : state.get('k8sConfig'), operatorState : state.get('operatorState'), meshSyncState : state.get('meshSyncState'), - capabilitiesRegistry : state.get("capabilitiesRegistry") + capabilitiesRegistry : state.get("capabilitiesRegistry"), + collaboratorExtState : state.get("collaboratorExtState"), }) }; @@ -664,6 +663,7 @@ 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 index 3f44bcef58c..0f7fd88d571 100644 --- a/ui/lib/store.js +++ b/ui/lib/store.js @@ -70,6 +70,7 @@ const initialState = fromJS({ // global gql-subscriptions operatorState: null, meshSyncState: null, + collaboratorExtState: false, }); export const actionTypes = { @@ -99,7 +100,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 @@ -181,7 +182,10 @@ export const reducer = (state = initialState, action) => { return state.merge({meshSyncState: action.meshSyncState}); case actionTypes.UPDATE_EXTENSION_TYPE: - return state.merge({ extensionType: action.extensionType }); + return state.merge({ extensionType: action.extensionType }); + + case actionTypes.UPDATE_COLLABORTOR_EXT_STATE: + return state.merge({ collaboratorExtState: action.collaboratorExtState }); case actionTypes.UPDATE_CAPABILITY_REGISTRY: return state.merge({capabilitiesRegistry: action.capabilitiesRegistry}) @@ -285,6 +289,10 @@ 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 index b1c66ac55fd..966ad796517 100644 --- a/ui/pages/_app.js +++ b/ui/pages/_app.js @@ -250,8 +250,6 @@ class MesheryApp extends App { document.removeEventListener("fullscreenchange", this.fullScreenChanged); } - - componentDidUpdate(prevProps) { const { k8sConfig, capabilitiesRegistry } = this.props; From 62f744947baa3329f3b87eca43c5a15f60c44ab1 Mon Sep 17 00:00:00 2001 From: Pranav Singh Date: Mon, 25 Sep 2023 05:29:08 +0530 Subject: [PATCH 2/3] memoize extension sandbox Signed-off-by: Pranav Singh --- ui/components/ExtensionSandbox.js | 28 ++++++---------------------- ui/components/Header.js | 7 ------- 2 files changed, 6 insertions(+), 29 deletions(-) diff --git a/ui/components/ExtensionSandbox.js b/ui/components/ExtensionSandbox.js index ed9f28b331a..d44ec944743 100644 --- a/ui/components/ExtensionSandbox.js +++ b/ui/components/ExtensionSandbox.js @@ -311,30 +311,10 @@ 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 }) { +const ExtensionSandbox = React.memo(function MemoizedExtensionSandbox({ type, Extension, isDrawerCollapsed, toggleDrawer, capabilitiesRegistry, updateCollaboratorExtState }) { 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); - } - } - // 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 }); @@ -392,7 +372,11 @@ function ExtensionSandbox ({ type, Extension, isDrawerCollapsed, toggleDrawer, c } ) -} +}, (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 index eb1d14cb5c8..f1592bf81b5 100644 --- a/ui/components/Header.js +++ b/ui/components/Header.js @@ -549,13 +549,6 @@ class Header extends React.PureComponent { this._isMounted = true; } - - shouldComponentUpdate(nextProps) { - if (!nextProps?.collaboratorExtState && this.state.capabilityregistryObj !== null) { - return true; - } - return false; - } componentWillUnmount = () => { this._isMounted = false; } From a1b14c872676bfc17202a7b752319b3a05ec0778 Mon Sep 17 00:00:00 2001 From: Pranav Singh Date: Mon, 25 Sep 2023 06:04:45 +0530 Subject: [PATCH 3/3] rm unwanted redux var Signed-off-by: Pranav Singh --- ui/components/ExtensionSandbox.js | 5 +---- ui/components/Header.js | 4 +--- ui/lib/store.js | 7 ------- 3 files changed, 2 insertions(+), 14 deletions(-) diff --git a/ui/components/ExtensionSandbox.js b/ui/components/ExtensionSandbox.js index d44ec944743..eb4a13348fc 100644 --- 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 */ -const ExtensionSandbox = React.memo(function MemoizedExtensionSandbox({ type, Extension, isDrawerCollapsed, toggleDrawer, capabilitiesRegistry, updateCollaboratorExtState }) { +const ExtensionSandbox = React.memo(function MemoizedExtensionSandbox({ type, Extension, isDrawerCollapsed, toggleDrawer, capabilitiesRegistry }) { const [extension, setExtension] = useState([]); const [isLoading, setIsLoading] = useState(true); @@ -358,7 +357,6 @@ const ExtensionSandbox = React.memo(function MemoizedExtensionSandbox({ type, Ex : (type === "collaborator")? ( getComponentURIFromPathForCollaborator(extension).map(uri => { - updateCollaboratorExtState({ collaboratorExtState : true }); return }) ) @@ -380,7 +378,6 @@ const ExtensionSandbox = React.memo(function MemoizedExtensionSandbox({ type, Ex 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 index f1592bf81b5..c0bf4bd8ea5 100644 --- a/ui/components/Header.js +++ b/ui/components/Header.js @@ -29,7 +29,7 @@ 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 { SETTINGS } from '../constants/navigator'; @@ -648,7 +648,6 @@ const mapStateToProps = (state) => { operatorState : state.get('operatorState'), meshSyncState : state.get('meshSyncState'), capabilitiesRegistry : state.get("capabilitiesRegistry"), - collaboratorExtState : state.get("collaboratorExtState"), }) }; @@ -656,7 +655,6 @@ 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 index 0f7fd88d571..938bbbbfa3b 100644 --- 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,6 @@ 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 @@ -184,8 +182,6 @@ export const reducer = (state = initialState, action) => { case actionTypes.UPDATE_EXTENSION_TYPE: return state.merge({ extensionType: action.extensionType }); - case actionTypes.UPDATE_COLLABORTOR_EXT_STATE: - return state.merge({ collaboratorExtState: action.collaboratorExtState }); case actionTypes.UPDATE_CAPABILITY_REGISTRY: return state.merge({capabilitiesRegistry: action.capabilitiesRegistry}) @@ -289,9 +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})