Skip to content

Commit 30087c7

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #3583 from sniok/tabs-windows
frontend: Implement new Activity feature for tabs and windows
2 parents 54d6e8a + a20e16a commit 30087c7

File tree

77 files changed

+2512
-1065
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+2512
-1065
lines changed

‎frontend/src/components/App/Layout.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { useTypedSelector } from '../../redux/hooks';
3636
import store from '../../redux/stores/store';
3737
import { useUIPanelsGroupedBySide } from '../../redux/uiSlice';
3838
import { fetchStatelessClusterKubeConfigs, isEqualClusterConfigs } from '../../stateless/';
39+
import { ActivitiesRenderer } from '../activity/Activity';
3940
import ActionsNotifier from '../common/ActionsNotifier';
4041
import AlertNotification from '../common/AlertNotification';
4142
import DetailsDrawer from '../common/Resource/DetailsDrawer';
@@ -250,19 +251,23 @@ export default function Layout({}: LayoutProps) {
250251
<TopBar />
251252
<Box
252253
sx={{
253-
display: 'flex',
254+
display: 'grid',
254255
overflow: 'hidden',
255256
flexGrow: 1,
256257
position: 'relative',
258+
gridTemplateRows: '1fr min-content',
259+
gridTemplateColumns: 'min-content 1fr',
257260
}}
258261
>
259262
<Sidebar />
260263
<Main
261264
id="main"
262265
sx={{
263-
flexGrow: 1,
264-
marginLeft: 'initial',
265266
overflow: 'auto',
267+
position: 'relative',
268+
minHeight: 0,
269+
gridColumn: '2 / 3',
270+
gridRow: '1 / 2',
266271
}}
267272
>
268273
{clustersNotInURL.slice(0, MAXIMUM_NUM_ALERTS).map(clusterName => (
@@ -285,6 +290,7 @@ export default function Layout({}: LayoutProps) {
285290
</Container>
286291
</Box>
287292
</Main>
293+
<ActivitiesRenderer />
288294
<DetailsDrawer />
289295
</Box>
290296
{panels.bottom.map(it => (

‎frontend/src/components/App/Settings/DrawerModeSettings.tsx‎

Lines changed: 135 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,45 +14,150 @@
1414
* limitations under the License.
1515
*/
1616

17-
import FormControlLabel from '@mui/material/FormControlLabel';
18-
import Switch from '@mui/material/Switch';
19-
import React from 'react';
20-
import { useTranslation } from 'react-i18next';
17+
import { Icon } from '@iconify/react';
18+
import { alpha, Box, Button, useTheme } from '@mui/material';
19+
import React, { ReactNode } from 'react';
20+
import { Trans } from 'react-i18next';
2121
import { useDispatch } from 'react-redux';
2222
import { setDetailDrawerEnabled } from '../../../redux/drawerModeSlice';
2323
import { useTypedSelector } from '../../../redux/hooks';
24-
import { TooltipIcon } from '../../common/Tooltip';
24+
25+
function OverlayPreview({ variant }: { variant: 'full-page' | 'overlay' }) {
26+
const theme = useTheme();
27+
const size = '150px';
28+
29+
return (
30+
<Box
31+
sx={{
32+
width: size,
33+
height: size,
34+
border: '1px solid',
35+
borderColor: theme.palette.divider,
36+
position: 'relative',
37+
borderRadius: theme.shape.borderRadius + 'px',
38+
overflow: 'hidden',
39+
}}
40+
>
41+
<Box
42+
sx={{
43+
position: 'absolute',
44+
top: 0,
45+
left: 0,
46+
width: '100%',
47+
height: '10%',
48+
borderBottom: '1px solid',
49+
borderColor: theme.palette.divider,
50+
}}
51+
></Box>
52+
<Box
53+
sx={{
54+
position: 'absolute',
55+
width: '20%',
56+
height: '90%',
57+
top: '10%',
58+
left: 0,
59+
borderRight: '1px solid',
60+
borderColor: theme.palette.divider,
61+
}}
62+
/>
63+
{variant === 'overlay' && (
64+
<Box
65+
sx={{
66+
position: 'absolute',
67+
background: theme.palette.background.muted,
68+
width: '50%',
69+
height: '90%',
70+
top: '10%',
71+
left: '50%',
72+
border: '1px solid',
73+
borderColor: theme.palette.divider,
74+
display: 'flex',
75+
alignItems: 'center',
76+
justifyContent: 'center',
77+
borderRadius: theme.shape.borderRadius + 'px',
78+
}}
79+
>
80+
<Box sx={{ position: 'absolute', top: 0, right: 0, padding: '3px' }}>
81+
<Icon icon="mdi:close" />
82+
</Box>
83+
</Box>
84+
)}
85+
{variant === 'full-page' && (
86+
<Box
87+
sx={{
88+
position: 'absolute',
89+
background: theme.palette.background.muted,
90+
width: '80%',
91+
height: '90%',
92+
top: '10%',
93+
left: '20%',
94+
display: 'flex',
95+
alignItems: 'center',
96+
justifyContent: 'center',
97+
}}
98+
>
99+
<Box
100+
sx={{
101+
position: 'absolute',
102+
top: 0,
103+
left: 0,
104+
padding: '3px',
105+
}}
106+
>
107+
<Icon icon="mdi:chevron-left" />
108+
</Box>
109+
</Box>
110+
)}
111+
</Box>
112+
);
113+
}
114+
115+
const OptionButton = ({
116+
children,
117+
active,
118+
onClick,
119+
}: {
120+
children: ReactNode;
121+
active: boolean;
122+
onClick: React.MouseEventHandler<HTMLButtonElement>;
123+
}) => (
124+
<Button
125+
aria-pressed={active}
126+
onClick={onClick}
127+
sx={theme => ({
128+
display: 'flex',
129+
flexDirection: 'column',
130+
color: 'unset',
131+
textTransform: 'none',
132+
gap: 1,
133+
border: '2px solid',
134+
borderColor: active
135+
? alpha(theme.palette.action.active, theme.palette.action.activatedOpacity)
136+
: 'transparent',
137+
})}
138+
>
139+
{children}
140+
</Button>
141+
);
25142

26143
export default function DrawerModeSettings() {
27144
const dispatch = useDispatch();
28-
const { t } = useTranslation('translation');
29145

30146
const isDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
31147

32-
function drawerModeToggle() {
33-
dispatch(setDetailDrawerEnabled(!isDrawerEnabled));
34-
}
35-
36148
return (
37-
<FormControlLabel
38-
control={
39-
<Switch
40-
checked={isDrawerEnabled}
41-
onClick={drawerModeToggle}
42-
name="drawerMode"
43-
color="primary"
44-
/>
45-
}
46-
label={
47-
<>
48-
{t('translation|Overlay')}
49-
<TooltipIcon>
50-
{t(
51-
'translation|Shows resource details in a pane overlaid on the list view instead of a full page.'
52-
)}
53-
</TooltipIcon>
54-
</>
55-
}
56-
/>
149+
<Box sx={{ display: 'flex' }}>
150+
<OptionButton active={isDrawerEnabled} onClick={() => dispatch(setDetailDrawerEnabled(true))}>
151+
<OverlayPreview variant="overlay" />
152+
<Trans>Window</Trans>
153+
</OptionButton>
154+
<OptionButton
155+
active={!isDrawerEnabled}
156+
onClick={() => dispatch(setDetailDrawerEnabled(false))}
157+
>
158+
<OverlayPreview variant="full-page" />
159+
<Trans>Full page</Trans>
160+
</OptionButton>
161+
</Box>
57162
);
58163
}

‎frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -139,41 +139,66 @@
139139
<dd
140140
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
141141
>
142-
<label
143-
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
142+
<div
143+
class="MuiBox-root css-k008qs"
144144
>
145-
<span
146-
class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
145+
<button
146+
aria-pressed="true"
147+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-17o2rvr-MuiButtonBase-root-MuiButton-root"
148+
tabindex="0"
149+
type="button"
147150
>
148-
<span
149-
class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked Mui-checked css-1emuodk-MuiButtonBase-root-MuiSwitch-switchBase"
151+
<div
152+
class="MuiBox-root css-q5uj3p"
150153
>
151-
<input
152-
checked=""
153-
class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
154-
name="drawerMode"
155-
type="checkbox"
156-
/>
157-
<span
158-
class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
154+
<div
155+
class="MuiBox-root css-10tc75p"
159156
/>
160-
<span
161-
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
157+
<div
158+
class="MuiBox-root css-1tuh5dl"
162159
/>
163-
</span>
160+
<div
161+
class="MuiBox-root css-1wsar2n"
162+
>
163+
<div
164+
class="MuiBox-root css-flohcj"
165+
/>
166+
</div>
167+
</div>
168+
Window
164169
<span
165-
class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
170+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
166171
/>
167-
</span>
168-
<span
169-
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-1ezega9-MuiTypography-root"
172+
</button>
173+
<button
174+
aria-pressed="false"
175+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-gl7zuq-MuiButtonBase-root-MuiButton-root"
176+
tabindex="0"
177+
type="button"
170178
>
171-
Overlay
172179
<div
173-
class="MuiContainer-root MuiContainer-maxWidthLg css-64uahr-MuiContainer-root"
180+
class="MuiBox-root css-q5uj3p"
181+
>
182+
<div
183+
class="MuiBox-root css-10tc75p"
184+
/>
185+
<div
186+
class="MuiBox-root css-1tuh5dl"
187+
/>
188+
<div
189+
class="MuiBox-root css-b95qjn"
190+
>
191+
<div
192+
class="MuiBox-root css-y7640i"
193+
/>
194+
</div>
195+
</div>
196+
Full page
197+
<span
198+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
174199
/>
175-
</span>
176-
</label>
200+
</button>
201+
</div>
177202
</dd>
178203
<dt
179204
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"

‎frontend/src/components/Sidebar/Sidebar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,11 @@ export const PureSidebar = memo(
371371
}, [items]);
372372

373373
return (
374-
<Box component="nav" aria-label={t('translation|Navigation')}>
374+
<Box
375+
component="nav"
376+
aria-label={t('translation|Navigation')}
377+
sx={{ minHeight: 0, gridColumn: '1 / 2', gridRow: '1 / 3' }}
378+
>
375379
<Drawer
376380
variant={isTemporaryDrawer ? 'temporary' : 'permanent'}
377381
PaperProps={{

‎frontend/src/components/Sidebar/__snapshots__/NavigationTabs.ClusterParentSelected.stories.storyshot‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,27 +88,27 @@
8888
</div>
8989
<div
9090
aria-labelledby="full-width-tab-0-NavigationTabs-tabs-id"
91-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
91+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
9292
id="full-width-tabpanel-0-NavigationTabs-tabs-id"
9393
role="tabpanel"
9494
/>
9595
<div
9696
aria-labelledby="full-width-tab-1-NavigationTabs-tabs-id"
97-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
97+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
9898
hidden=""
9999
id="full-width-tabpanel-1-NavigationTabs-tabs-id"
100100
role="tabpanel"
101101
/>
102102
<div
103103
aria-labelledby="full-width-tab-2-NavigationTabs-tabs-id"
104-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
104+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
105105
hidden=""
106106
id="full-width-tabpanel-2-NavigationTabs-tabs-id"
107107
role="tabpanel"
108108
/>
109109
<div
110110
aria-labelledby="full-width-tab-3-NavigationTabs-tabs-id"
111-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
111+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
112112
hidden=""
113113
id="full-width-tabpanel-3-NavigationTabs-tabs-id"
114114
role="tabpanel"

‎frontend/src/components/Sidebar/__snapshots__/NavigationTabs.ItemWithoutOwnURLSelected.stories.storyshot‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,28 +88,28 @@
8888
</div>
8989
<div
9090
aria-labelledby="full-width-tab-0-NavigationTabs-tabs-id"
91-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
91+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
9292
hidden=""
9393
id="full-width-tabpanel-0-NavigationTabs-tabs-id"
9494
role="tabpanel"
9595
/>
9696
<div
9797
aria-labelledby="full-width-tab-1-NavigationTabs-tabs-id"
98-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
98+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
9999
hidden=""
100100
id="full-width-tabpanel-1-NavigationTabs-tabs-id"
101101
role="tabpanel"
102102
/>
103103
<div
104104
aria-labelledby="full-width-tab-2-NavigationTabs-tabs-id"
105-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
105+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
106106
hidden=""
107107
id="full-width-tabpanel-2-NavigationTabs-tabs-id"
108108
role="tabpanel"
109109
/>
110110
<div
111111
aria-labelledby="full-width-tab-3-NavigationTabs-tabs-id"
112-
class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
112+
class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
113113
id="full-width-tabpanel-3-NavigationTabs-tabs-id"
114114
role="tabpanel"
115115
/>

0 commit comments

Comments
 (0)