diff --git a/src/components/App/ClusterRoutes.js b/src/components/App/ClusterRoutes.js index a7f9c727bd..af57b1cc58 100644 --- a/src/components/App/ClusterRoutes.js +++ b/src/components/App/ClusterRoutes.js @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { Route, Routes, useSearchParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'; @@ -30,6 +30,17 @@ export default function ClusterRoutes() { const extensions = useRecoilValue(extensionsState); const [cluster, setCluster] = useRecoilState(clusterState); const [search] = useSearchParams(); + const [extensibilityRoutes, setExtensibilityRoutes] = useState(null); + + useEffect(() => { + if (extensions?.length) { + setExtensibilityRoutes( + extensions?.map(extension => + createExtensibilityRoutes(extension, language), + ), + ); + } + }, [extensions, language]); useEffect(() => { if (cluster?.name === currentClusterName) return; @@ -55,15 +66,17 @@ export default function ClusterRoutes() { return ( - - } - /> + {extensibilityRoutes && ( + + } + /> + )} {/* overview route should stay static */} {/* extensibility routes should go first, so if someone overwrites the default view, the new one should have a higher priority */} - {extensions?.map(extension => - createExtensibilityRoutes(extension, language), - )} + {extensibilityRoutes} {resourceRoutes} {otherRoutes} } /> diff --git a/src/components/App/NamespaceRoutes.tsx b/src/components/App/NamespaceRoutes.tsx index a966295bd9..0170cc2ee3 100644 --- a/src/components/App/NamespaceRoutes.tsx +++ b/src/components/App/NamespaceRoutes.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { Routes, Route, useParams } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import { useTranslation } from 'react-i18next'; @@ -18,6 +19,19 @@ export default function NamespaceRoutes() { const { clusterUrl } = useUrl(); const language = useRecoilValue(languageAtom); const extensions = useRecoilValue(extensionsState); + const [extensibilityRoutes, setExtensibilityRoutes] = useState< + JSX.Element[] | null + >(null); + + useEffect(() => { + if (extensions?.length) { + setExtensibilityRoutes( + extensions.map(extension => + createExtensibilityRoutes(extension, language), + ), + ); + } + }, [extensions, language]); const { error } = useGet( namespaceId === '-all-' @@ -27,7 +41,7 @@ export default function NamespaceRoutes() { skip: false, pollingInterval: 0, onDataReceived: () => {}, - }, + } as any, ); const hasAccessToNamespace = JSON.parse(JSON.stringify(error)) === null || @@ -43,19 +57,19 @@ export default function NamespaceRoutes() { return ( - - } - /> - {/* extensibility routes should go first, so if someone overwrites the default view, the new one should have a higher priority */} - {extensions?.map(extension => - createExtensibilityRoutes(extension, language), + {extensibilityRoutes && ( + + } + /> )} + {/* extensibility routes should go first, so if someone overwrites the default view, the new one should have a higher priority */} + {extensibilityRoutes} {resourceRoutesNamespaced} {otherRoutesNamespaced} diff --git a/src/shared/components/ListActions/ListActions.js b/src/shared/components/ListActions/ListActions.js index 35ceaeabff..ebcbf459b5 100644 --- a/src/shared/components/ListActions/ListActions.js +++ b/src/shared/components/ListActions/ListActions.js @@ -22,7 +22,10 @@ const StandaloneAction = ({ action, entry }) => { return (