Merge pull request #3366 from farodin91/expand-crs-on-sidebar

frontend: expand crs on sidebar

Author: k8s-ci-robot

frontend/src/components/App/RouteSwitcher.tsx

@@ -149,10 +149,16 @@ interface AuthRouteProps {
 }
 
 function AuthRoute(props: AuthRouteProps) {
-  const { children, sidebar, requiresAuth = true, requiresCluster = true, ...other } = props;
-
+  const {
+    children,
+    sidebar,
+    requiresAuth = true,
+    requiresCluster = true,
+    computedMatch = {},
+    ...other
+  } = props;
   const redirectRoute = getCluster() ? 'login' : 'chooser';
-  useSidebarItem(sidebar);
+  useSidebarItem(sidebar, computedMatch);
   const cluster = useCluster();
   const query = useQuery({
     queryKey: ['auth', cluster],

frontend/src/components/Sidebar/ListItemLink.tsx

@@ -37,16 +37,17 @@ interface ListItemLinkProps {
   icon?: IconProps['icon'];
   iconOnly?: boolean;
   hasParent?: boolean;
+  level?: number;
   fullWidth?: boolean;
   divider?: boolean;
   containerProps?: {
     [prop: string]: any;
   };
 }
 
-const StyledLi = styled('li')<{ hasParent?: boolean }>(({ hasParent }) => ({
+const StyledLi = styled('li')<{ level: number }>(({ level }) => ({
   marginRight: '5px',
-  marginLeft: hasParent ? '35px' : '5px',
+  marginLeft: `${level * 30 + 5}px`,
   marginBottom: '1px',
 }));
 
@@ -60,6 +61,7 @@ export default function ListItemLink(props: ListItemLinkProps) {
     iconOnly,
     subtitle,
     hasParent,
+    level,
     fullWidth,
     ...other
   } = props;
@@ -108,9 +110,9 @@ export default function ListItemLink(props: ListItemLinkProps) {
   }
 
   const hasSubtitle = Boolean(subtitle);
-
+  const calcLevel = level === null ? (hasParent ? 1 : 0) : level!;
   return (
-    <StyledLi hasParent={hasParent}>
+    <StyledLi level={calcLevel}>
       <ListItemButton
         component={renderLink}
         {...other}
@@ -129,7 +131,7 @@ export default function ListItemLink(props: ListItemLinkProps) {
             color: 'currentColor',
           },
 
-          ':before': other.divider
+          ':after': other.divider
             ? {
                 content: '""',
                 position: 'absolute',

frontend/src/components/Sidebar/NavigationTabs.stories.tsx

@@ -16,6 +16,8 @@
 
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 import { Meta, StoryFn } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
@@ -134,15 +136,18 @@ export default {
   decorators: [
     (Story, context: { args: { mockSidebarState?: Partial<SidebarState> } }) => {
       const store = createMockStoryStore(context.args.mockSidebarState || {});
+      const queryClient = new QueryClient();
       return (
         <Provider store={store}>
           <BrowserRouter>
             <TestContext store={store}>
-              <Route path="/">
-                <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
-                  <Story />
-                </div>
-              </Route>
+              <QueryClientProvider client={queryClient}>
+                <Route path="/">
+                  <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
+                    <Story />
+                  </div>
+                </Route>
+              </QueryClientProvider>
             </TestContext>
           </BrowserRouter>
         </Provider>
@@ -151,6 +156,30 @@ export default {
   ],
   parameters: {
     controls: { include: ['mockSidebarState'] },
+    msw: {
+      handlers: {
+        story: [
+          http.get(
+            'http://localhost:4466/apis/apiextensions.k8s.io/v1/customresourcedefinitions',
+            () =>
+              HttpResponse.json({
+                kind: 'List',
+                items: [],
+                metadata: {},
+              })
+          ),
+          http.get(
+            'http://localhost:4466/apis/apiextensions.k8s.io/v1beta1/customresourcedefinitions',
+            () =>
+              HttpResponse.json({
+                kind: 'List',
+                items: [],
+                metadata: {},
+              })
+          ),
+        ],
+      },
+    },
   },
   argTypes: {
     mockSidebarState: {