fix: don't show data for un auth user

src/components/Errors/PageError/PageError.tsx

@@ -34,5 +34,10 @@ export function PageError({title, description, error, children, ...restProps}: P
 }
 
 export function isAccessError(error: unknown) {
-    return Boolean(error && typeof error === 'object' && 'status' in error && error.status === 403);
+    return Boolean(
+        error &&
+            typeof error === 'object' &&
+            'status' in error &&
+            (error.status === 403 || error.status === 401),
+    );
 }

src/containers/App/Content.tsx

@@ -43,38 +43,45 @@ type RouteSlot = {
     path: string;
     slot: SlotComponent<any>;
     component: React.ComponentType<any>;
+    wrapper?: React.ComponentType<any>;
     exact?: boolean;
 };
 const routesSlots: RouteSlot[] = [
     {
         path: routes.cluster,
         slot: ClusterSlot,
         component: lazyComponent(() => import('../Cluster/Cluster'), 'Cluster'),
+        wrapper: DataWrapper,
     },
     {
         path: routes.tenant,
         slot: TenantSlot,
         component: lazyComponent(() => import('../Tenant/Tenant'), 'Tenant'),
+        wrapper: DataWrapper,
     },
     {
         path: routes.node,
         slot: NodeSlot,
         component: lazyComponent(() => import('../Node/Node'), 'Node'),
+        wrapper: DataWrapper,
     },
     {
         path: routes.pDisk,
         slot: PDiskPageSlot,
         component: lazyComponent(() => import('../PDiskPage/PDiskPage'), 'PDiskPage'),
+        wrapper: DataWrapper,
     },
     {
         path: routes.vDisk,
         slot: VDiskPageSlot,
         component: lazyComponent(() => import('../VDiskPage/VDiskPage'), 'VDiskPage'),
+        wrapper: DataWrapper,
     },
     {
         path: routes.tablet,
         slot: TabletSlot,
         component: lazyComponent(() => import('../Tablet'), 'Tablet'),
+        wrapper: DataWrapper,
     },
     {
         path: routes.tabletsFilters,
@@ -83,6 +90,7 @@ const routesSlots: RouteSlot[] = [
             () => import('../TabletsFilters/TabletsFilters'),
             'TabletsFilters',
         ),
+        wrapper: DataWrapper,
     },
 ];
 
@@ -105,7 +113,12 @@ function renderRouteSlot(slots: SlotMap, route: RouteSlot) {
                 } else {
                     content = slot.rendered;
                 }
-                return <main className={b('main')}>{content}</main>;
+                const Wrapper = route.wrapper ?? React.Fragment;
+                return (
+                    <main className={b('main')}>
+                        <Wrapper>{content}</Wrapper>
+                    </main>
+                );
             }}
         />
     );
@@ -144,29 +157,33 @@ export function Content(props: ContentProps) {
             {additionalRoutes?.rendered}
             {/* Single cluster routes */}
             <Route key="single-cluster">
-                <GetUser>
-                    <GetNodesList />
-                    <GetCapabilities />
-                    <Header mainPage={mainPage} />
-                    <Switch>
-                        {routesSlots.map((route) => {
-                            return renderRouteSlot(slots, route);
-                        })}
-                        <Route
-                            path={redirectProps.from || redirectProps.path}
-                            exact={redirectProps.exact}
-                            strict={redirectProps.strict}
-                            render={() => (
-                                <Redirect to={redirectProps.to} push={redirectProps.push} />
-                            )}
-                        />
-                    </Switch>
-                </GetUser>
+                <Header mainPage={mainPage} />
+                <Switch>
+                    {routesSlots.map((route) => {
+                        return renderRouteSlot(slots, route);
+                    })}
+                    <Route
+                        path={redirectProps.from || redirectProps.path}
+                        exact={redirectProps.exact}
+                        strict={redirectProps.strict}
+                        render={() => <Redirect to={redirectProps.to} push={redirectProps.push} />}
+                    />
+                </Switch>
             </Route>
         </Switch>
     );
 }
 
+function DataWrapper({children}: {children: React.ReactNode}) {
+    return (
+        <GetUser>
+            <GetNodesList />
+            <GetCapabilities />
+            {children}
+        </GetUser>
+    );
+}
+
 function GetUser({children}: {children: React.ReactNode}) {
     const {isLoading, error} = authenticationApi.useWhoamiQuery(undefined);
 

src/containers/Tenant/Tenant.tsx

@@ -4,6 +4,7 @@ import {Helmet} from 'react-helmet-async';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {PageError, isAccessError} from '../../components/Errors/PageError/PageError';
+import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
 import SplitPane from '../../components/SplitPane';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {useGetSchemaQuery} from '../../store/reducers/schema/schema';
@@ -73,7 +74,7 @@ export function Tenant(props: TenantProps) {
 
     const path = schema ?? tenantName;
 
-    const {data: currentItem, error} = useGetSchemaQuery({path, database: tenantName});
+    const {data: currentItem, error, isLoading} = useGetSchemaQuery({path, database: tenantName});
     const {PathType: currentPathType, PathSubType: currentPathSubType} =
         currentItem?.PathDescription?.Self || {};
 
@@ -97,35 +98,37 @@ export function Tenant(props: TenantProps) {
                 defaultTitle={`${title} — YDB Monitoring`}
                 titleTemplate={`%s — ${title} — YDB Monitoring`}
             />
-            <PageError error={showBlockingError ? error : undefined}>
-                <SplitPane
-                    defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
-                    defaultSizes={[25, 75]}
-                    triggerCollapse={summaryVisibilityState.triggerCollapse}
-                    triggerExpand={summaryVisibilityState.triggerExpand}
-                    minSize={[36, 200]}
-                    onSplitStartDragAdditional={onSplitStartDragAdditional}
-                >
-                    <ObjectSummary
-                        type={currentPathType}
-                        subType={currentPathSubType}
-                        tenantName={tenantName}
-                        path={path}
-                        onCollapseSummary={onCollapseSummaryHandler}
-                        onExpandSummary={onExpandSummaryHandler}
-                        isCollapsed={summaryVisibilityState.collapsed}
-                    />
-                    <div className={b('main')}>
-                        <ObjectGeneral
+            <LoaderWrapper loading={isLoading}>
+                <PageError error={showBlockingError ? error : undefined}>
+                    <SplitPane
+                        defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
+                        defaultSizes={[25, 75]}
+                        triggerCollapse={summaryVisibilityState.triggerCollapse}
+                        triggerExpand={summaryVisibilityState.triggerExpand}
+                        minSize={[36, 200]}
+                        onSplitStartDragAdditional={onSplitStartDragAdditional}
+                    >
+                        <ObjectSummary
                             type={currentPathType}
-                            additionalTenantProps={props.additionalTenantProps}
-                            additionalNodesProps={props.additionalNodesProps}
+                            subType={currentPathSubType}
                             tenantName={tenantName}
                             path={path}
+                            onCollapseSummary={onCollapseSummaryHandler}
+                            onExpandSummary={onExpandSummaryHandler}
+                            isCollapsed={summaryVisibilityState.collapsed}
                         />
-                    </div>
-                </SplitPane>
-            </PageError>
+                        <div className={b('main')}>
+                            <ObjectGeneral
+                                type={currentPathType}
+                                additionalTenantProps={props.additionalTenantProps}
+                                additionalNodesProps={props.additionalNodesProps}
+                                tenantName={tenantName}
+                                path={path}
+                            />
+                        </div>
+                    </SplitPane>
+                </PageError>
+            </LoaderWrapper>
         </div>
     );
 }