Skip to content

Commit

Permalink
Merge pull request meshery#8904 from meshery/revert-8903-revert-8893-…
Browse files Browse the repository at this point in the history
…theBeginner86/chore/24

[extensions] Fix Collaborator Extension Point Re-rendering
  • Loading branch information
theBeginner86 authored Sep 25, 2023
2 parents d9a90e3 + ac85926 commit a2cb921
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 89 deletions.
142 changes: 66 additions & 76 deletions ui/components/ExtensionSandbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
16 changes: 3 additions & 13 deletions ui/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -538,7 +536,7 @@ function K8sContextMenu({
);
}

class Header extends React.Component {
class Header extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
Expand All @@ -548,6 +546,7 @@ class Header extends React.Component {
};
}
componentDidMount() {
console.log('header component mounted');
dataFetch(
'/api/provider/capabilities',
{
Expand All @@ -562,7 +561,7 @@ class Header extends React.Component {
collaboratorExt: ExtensionPointSchemaValidator('collaborator')(
result?.extensions?.collaborator,
),
capabilitiesRegistryObj,
capabilityregistryObj: capabilitiesRegistryObj,
});
this.props.updateCapabilities({ capabilitiesRegistry: result });
}
Expand All @@ -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;
};
Expand Down

0 comments on commit a2cb921

Please sign in to comment.