fix(Header): wait for capabilities before show content (#3145)

Author: Raubzeug

src/containers/App/Content.tsx

@@ -14,6 +14,7 @@ import routes, {getClusterPath} from '../../routes';
 import type {RootState} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
 import {
+    useAllCapabilitiesLoaded,
     useCapabilitiesQuery,
     useClusterWithoutAuthInUI,
     useMetaCapabilitiesLoaded,
@@ -235,11 +236,10 @@ function GetNodesList() {
 }
 
 function GetCapabilities({children}: {children: React.ReactNode}) {
-    const {data, error} = useCapabilitiesQuery();
+    const {error} = useCapabilitiesQuery();
 
     useMetaCapabilitiesQuery();
-    // It is always true if there is no meta, since request finishes with an error
-    const metaCapabilitiesLoaded = useMetaCapabilitiesLoaded();
+    const capabilitiesLoaded = useAllCapabilitiesLoaded();
 
     //do nothing, authentication is in progress upon redirect
     if (isRedirectToAuth(error)) {
@@ -250,10 +250,8 @@ function GetCapabilities({children}: {children: React.ReactNode}) {
         return <AccessDenied />;
     }
 
-    const capabilitiesLoaded = Boolean(data || error);
-
     return (
-        <LoaderWrapper loading={!capabilitiesLoaded || !metaCapabilitiesLoaded} size="l">
+        <LoaderWrapper loading={!capabilitiesLoaded} size="l">
             {children}
         </LoaderWrapper>
     );

src/containers/Header/Header.tsx

@@ -19,6 +19,7 @@ import {checkIsClustersPage, checkIsTenantPage, getClusterPath} from '../../rout
 import {environment} from '../../store';
 import {
     useAddClusterFeatureAvailable,
+    useAllCapabilitiesLoaded,
     useDatabasesAvailable,
     useDeleteDatabaseFeatureAvailable,
     useEditDatabaseFeatureAvailable,
@@ -50,6 +51,7 @@ import './Header.scss';
 const b = cn('header');
 
 function Header() {
+    const capabilitiesLoaded = useAllCapabilitiesLoaded();
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
@@ -242,9 +244,12 @@ function Header() {
         return null;
     };
 
-    const renderHeader = () => {
+    const renderContent = () => {
+        if (!capabilitiesLoaded) {
+            return null;
+        }
         return (
-            <header className={b()}>
+            <React.Fragment>
                 <Breadcrumbs className={b('breadcrumbs')}>
                     {breadcrumbItems.map((item, index) => {
                         const {icon, text, link} = item;
@@ -268,9 +273,13 @@ function Header() {
                 </Breadcrumbs>
 
                 {renderRightControls()}
-            </header>
+            </React.Fragment>
         );
     };
+
+    const renderHeader = () => {
+        return <header className={b()}>{renderContent()}</header>;
+    };
     return renderHeader();
 }
 

src/store/reducers/capabilities/hooks.ts

@@ -30,6 +30,14 @@ export function useCapabilitiesLoaded() {
     return Boolean(data || error);
 }
 
+export function useAllCapabilitiesLoaded() {
+    // It is always true if there is no meta, since request finishes with an error
+    const metaCapabilitiesLoaded = useMetaCapabilitiesLoaded();
+    const capabilitiesLoaded = useCapabilitiesLoaded();
+
+    return metaCapabilitiesLoaded && capabilitiesLoaded;
+}
+
 const useGetFeatureVersion = (feature: Capability) => {
     const database = useDatabaseFromQuery();