Skip to content

Commit 82b8999

Browse files
authored
Merge pull request #3366 from farodin91/expand-crs-on-sidebar
frontend: expand crs on sidebar
2 parents 1ac7017 + bd06bfc commit 82b8999

21 files changed

+373
-77
lines changed

frontend/src/components/App/RouteSwitcher.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,10 +149,16 @@ interface AuthRouteProps {
149149
}
150150

151151
function AuthRoute(props: AuthRouteProps) {
152-
const { children, sidebar, requiresAuth = true, requiresCluster = true, ...other } = props;
153-
152+
const {
153+
children,
154+
sidebar,
155+
requiresAuth = true,
156+
requiresCluster = true,
157+
computedMatch = {},
158+
...other
159+
} = props;
154160
const redirectRoute = getCluster() ? 'login' : 'chooser';
155-
useSidebarItem(sidebar);
161+
useSidebarItem(sidebar, computedMatch);
156162
const cluster = useCluster();
157163
const query = useQuery({
158164
queryKey: ['auth', cluster],

frontend/src/components/Sidebar/ListItemLink.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,17 @@ interface ListItemLinkProps {
3737
icon?: IconProps['icon'];
3838
iconOnly?: boolean;
3939
hasParent?: boolean;
40+
level?: number;
4041
fullWidth?: boolean;
4142
divider?: boolean;
4243
containerProps?: {
4344
[prop: string]: any;
4445
};
4546
}
4647

47-
const StyledLi = styled('li')<{ hasParent?: boolean }>(({ hasParent }) => ({
48+
const StyledLi = styled('li')<{ level: number }>(({ level }) => ({
4849
marginRight: '5px',
49-
marginLeft: hasParent ? '35px' : '5px',
50+
marginLeft: `${level * 30 + 5}px`,
5051
marginBottom: '1px',
5152
}));
5253

@@ -60,6 +61,7 @@ export default function ListItemLink(props: ListItemLinkProps) {
6061
iconOnly,
6162
subtitle,
6263
hasParent,
64+
level,
6365
fullWidth,
6466
...other
6567
} = props;
@@ -108,9 +110,9 @@ export default function ListItemLink(props: ListItemLinkProps) {
108110
}
109111

110112
const hasSubtitle = Boolean(subtitle);
111-
113+
const calcLevel = level === null ? (hasParent ? 1 : 0) : level!;
112114
return (
113-
<StyledLi hasParent={hasParent}>
115+
<StyledLi level={calcLevel}>
114116
<ListItemButton
115117
component={renderLink}
116118
{...other}
@@ -129,7 +131,7 @@ export default function ListItemLink(props: ListItemLinkProps) {
129131
color: 'currentColor',
130132
},
131133

132-
':before': other.divider
134+
':after': other.divider
133135
? {
134136
content: '""',
135137
position: 'absolute',

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

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

1717
import { configureStore, createSlice } from '@reduxjs/toolkit';
1818
import { Meta, StoryFn } from '@storybook/react';
19+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
20+
import { http, HttpResponse } from 'msw';
1921
import React from 'react';
2022
import { Provider } from 'react-redux';
2123
import { BrowserRouter, Route } from 'react-router-dom';
@@ -134,15 +136,18 @@ export default {
134136
decorators: [
135137
(Story, context: { args: { mockSidebarState?: Partial<SidebarState> } }) => {
136138
const store = createMockStoryStore(context.args.mockSidebarState || {});
139+
const queryClient = new QueryClient();
137140
return (
138141
<Provider store={store}>
139142
<BrowserRouter>
140143
<TestContext store={store}>
141-
<Route path="/">
142-
<div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
143-
<Story />
144-
</div>
145-
</Route>
144+
<QueryClientProvider client={queryClient}>
145+
<Route path="/">
146+
<div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
147+
<Story />
148+
</div>
149+
</Route>
150+
</QueryClientProvider>
146151
</TestContext>
147152
</BrowserRouter>
148153
</Provider>
@@ -151,6 +156,30 @@ export default {
151156
],
152157
parameters: {
153158
controls: { include: ['mockSidebarState'] },
159+
msw: {
160+
handlers: {
161+
story: [
162+
http.get(
163+
'http://localhost:4466/apis/apiextensions.k8s.io/v1/customresourcedefinitions',
164+
() =>
165+
HttpResponse.json({
166+
kind: 'List',
167+
items: [],
168+
metadata: {},
169+
})
170+
),
171+
http.get(
172+
'http://localhost:4466/apis/apiextensions.k8s.io/v1beta1/customresourcedefinitions',
173+
() =>
174+
HttpResponse.json({
175+
kind: 'List',
176+
items: [],
177+
metadata: {},
178+
})
179+
),
180+
],
181+
},
182+
},
154183
},
155184
argTypes: {
156185
mockSidebarState: {

0 commit comments

Comments
 (0)