Skip to content

Commit 45a974c

Browse files
illumeillume
committed
frontend: Home/RecentClusters: Add selecting multiple clusters
Signed-off-by: René Dudfield <renedudfield@microsoft.com>
1 parent 31c060b commit 45a974c

14 files changed

+357
-422
lines changed

‎frontend/src/components/App/Home/RecentClusters.tsx‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Grid from '@mui/material/Grid';
1+
import { Button, Grid, ToggleButton as MuiToggledButton, ToggleButtonGroup } from '@mui/material';
2+
import { styled } from '@mui/system';
23
import React from 'react';
34
import { useTranslation } from 'react-i18next';
45
import { generatePath, useHistory } from 'react-router-dom';
@@ -7,7 +8,11 @@ import { getRecentClusters, setRecentCluster } from '../../../helpers/recentClus
78
import { getClusterPrefixedPath } from '../../../lib/cluster';
89
import { Cluster } from '../../../lib/k8s/cluster';
910
import { createRouteURL } from '../../../lib/router';
11+
import { MULTI_HOME_ENABLED } from './config';
1012
import SquareButton from './SquareButton';
13+
const ToggleButton = styled(MuiToggledButton)({
14+
textTransform: 'none',
15+
});
1116

1217
interface ClusterButtonProps extends React.PropsWithChildren<{}> {
1318
/** The cluster to display this button for. */
@@ -49,7 +54,9 @@ export default function RecentClusters(props: RecentClustersProps) {
4954
node.focus();
5055
}
5156
}, []);
52-
const { t } = useTranslation();
57+
const { t } = useTranslation('translation');
58+
const [selectedClusters, setSelectedClusters] = React.useState<Cluster[]>([]);
59+
5360
const recentClustersLabelId = 'recent-clusters-label';
5461
const maxRecentClusters = 3;
5562
// We slice it here for the maximum recent clusters just for extra safety, since this
@@ -86,6 +93,23 @@ export default function RecentClusters(props: RecentClustersProps) {
8693
});
8794
}
8895

96+
/**
97+
* Callback for when the "View" button is clicked. It will navigate to the selected clusters.
98+
*/
99+
function onViewClusters() {
100+
selectedClusters.forEach(cluster => {
101+
setRecentCluster(cluster);
102+
});
103+
104+
history.push({
105+
pathname: generatePath(getClusterPrefixedPath(), {
106+
cluster: selectedClusters.map(cluster => cluster.name).join('+'),
107+
}),
108+
});
109+
}
110+
111+
const doMulti = recentClusters.length > 1 && MULTI_HOME_ENABLED;
112+
89113
return (
90114
<Grid
91115
aria-labelledby={`#${recentClustersLabelId}`}
@@ -94,15 +118,42 @@ export default function RecentClusters(props: RecentClustersProps) {
94118
alignItems="flex-start"
95119
spacing={2}
96120
>
97-
{recentClusters.map((cluster, i) => (
98-
<Grid item key={cluster.name}>
99-
<ClusterButton
100-
focusedRef={i === 0 ? focusedRef : undefined}
101-
cluster={cluster}
102-
onClick={() => onClusterButtonClicked(cluster)}
103-
/>
121+
{!doMulti &&
122+
recentClusters.map((cluster, i) => (
123+
<Grid item key={cluster.name}>
124+
<ClusterButton
125+
focusedRef={i === 0 ? focusedRef : undefined}
126+
cluster={cluster}
127+
onClick={() => onClusterButtonClicked(cluster)}
128+
/>
129+
</Grid>
130+
))}
131+
{doMulti && (
132+
<Grid container item alignItems="center">
133+
<ToggleButtonGroup
134+
value={selectedClusters}
135+
onChange={(event, clusters) => setSelectedClusters(clusters)}
136+
aria-label={t('Selected clusters')}
137+
exclusive={false}
138+
>
139+
{recentClusters.map(cluster => (
140+
<ToggleButton key={cluster.name} value={cluster}>
141+
{cluster.name}
142+
</ToggleButton>
143+
))}
144+
</ToggleButtonGroup>
145+
<Grid item pl={2}>
146+
<Button
147+
variant="contained"
148+
disabled={selectedClusters.length < 1}
149+
color="primary"
150+
onClick={onViewClusters}
151+
>
152+
{t('View')}
153+
</Button>
154+
</Grid>
104155
</Grid>
105-
))}
156+
)}
106157
{isElectron() && (
107158
<Grid item>
108159
<SquareButton

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.MoreThanThreeClusters.stories.storyshot‎

Lines changed: 50 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,85 +5,62 @@
55
class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 css-1vj4bu4-MuiGrid-root"
66
>
77
<div
8-
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
8+
class="MuiGrid-root MuiGrid-container MuiGrid-item css-lx31tv-MuiGrid-root"
99
>
10-
<button
11-
class="MuiButtonBase-root css-10d1a0h-MuiButtonBase-root"
12-
tabindex="0"
13-
type="button"
10+
<div
11+
aria-label="Selected clusters"
12+
class="MuiToggleButtonGroup-root css-1kgngcn-MuiToggleButtonGroup-root"
13+
role="group"
1414
>
15-
<div
16-
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
15+
<button
16+
aria-pressed="false"
17+
class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-1j4gaun-MuiButtonBase-root-MuiToggleButton-root"
18+
tabindex="0"
19+
type="button"
20+
value="[object Object]"
1721
>
18-
<div
19-
class="MuiCardContent-root css-d64700-MuiCardContent-root"
20-
>
21-
<p
22-
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
23-
title="cluster0"
24-
>
25-
cluster0
26-
</p>
27-
</div>
28-
</div>
29-
<span
30-
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
31-
/>
32-
</button>
33-
</div>
34-
<div
35-
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
36-
>
37-
<button
38-
class="MuiButtonBase-root css-10d1a0h-MuiButtonBase-root"
39-
tabindex="0"
40-
type="button"
41-
>
42-
<div
43-
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
22+
cluster0
23+
<span
24+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
25+
/>
26+
</button>
27+
<button
28+
aria-pressed="false"
29+
class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1j4gaun-MuiButtonBase-root-MuiToggleButton-root"
30+
tabindex="0"
31+
type="button"
32+
value="[object Object]"
4433
>
45-
<div
46-
class="MuiCardContent-root css-d64700-MuiCardContent-root"
47-
>
48-
<p
49-
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
50-
title="cluster1"
51-
>
52-
cluster1
53-
</p>
54-
</div>
55-
</div>
56-
<span
57-
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
58-
/>
59-
</button>
60-
</div>
61-
<div
62-
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
63-
>
64-
<button
65-
class="MuiButtonBase-root css-10d1a0h-MuiButtonBase-root"
66-
tabindex="0"
67-
type="button"
34+
cluster1
35+
<span
36+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
37+
/>
38+
</button>
39+
<button
40+
aria-pressed="false"
41+
class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-1j4gaun-MuiButtonBase-root-MuiToggleButton-root"
42+
tabindex="0"
43+
type="button"
44+
value="[object Object]"
45+
>
46+
cluster2
47+
<span
48+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
49+
/>
50+
</button>
51+
</div>
52+
<div
53+
class="MuiGrid-root MuiGrid-item css-1oluiat-MuiGrid-root"
6854
>
69-
<div
70-
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
55+
<button
56+
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-gn8fa3-MuiButtonBase-root-MuiButton-root"
57+
disabled=""
58+
tabindex="-1"
59+
type="button"
7160
>
72-
<div
73-
class="MuiCardContent-root css-d64700-MuiCardContent-root"
74-
>
75-
<p
76-
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
77-
title="cluster2"
78-
>
79-
cluster2
80-
</p>
81-
</div>
82-
</div>
83-
<span
84-
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
85-
/>
86-
</button>
61+
View
62+
</button>
63+
</div>
8764
</div>
8865
</div>
8966
</div>

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.OneRecentCluster.stories.storyshot‎

Lines changed: 50 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,85 +5,62 @@
55
class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 css-1vj4bu4-MuiGrid-root"
66
>
77
<div
8-
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
8+
class="MuiGrid-root MuiGrid-container MuiGrid-item css-lx31tv-MuiGrid-root"
99
>
10-
<button
11-
class="MuiButtonBase-root css-10d1a0h-MuiButtonBase-root"
12-
tabindex="0"
13-
type="button"
10+
<div
11+
aria-label="Selected clusters"
12+
class="MuiToggleButtonGroup-root css-1kgngcn-MuiToggleButtonGroup-root"
13+
role="group"
1414
>
15-
<div
16-
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
15+
<button
16+
aria-pressed="false"
17+
class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-firstButton css-1j4gaun-MuiButtonBase-root-MuiToggleButton-root"
18+
tabindex="0"
19+
type="button"
20+
value="[object Object]"
1721
>
18-
<div
19-
class="MuiCardContent-root css-d64700-MuiCardContent-root"
20-
>
21-
<p
22-
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
23-
title="cluster0"
24-
>
25-
cluster0
26-
</p>
27-
</div>
28-
</div>
29-
<span
30-
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
31-
/>
32-
</button>
33-
</div>
34-
<div
35-
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
36-
>
37-
<button
38-
class="MuiButtonBase-root css-10d1a0h-MuiButtonBase-root"
39-
tabindex="0"
40-
type="button"
41-
>
42-
<div
43-
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
22+
cluster0
23+
<span
24+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
25+
/>
26+
</button>
27+
<button
28+
aria-pressed="false"
29+
class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-middleButton css-1j4gaun-MuiButtonBase-root-MuiToggleButton-root"
30+
tabindex="0"
31+
type="button"
32+
value="[object Object]"
4433
>
45-
<div
46-
class="MuiCardContent-root css-d64700-MuiCardContent-root"
47-
>
48-
<p
49-
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
50-
title="cluster1"
51-
>
52-
cluster1
53-
</p>
54-
</div>
55-
</div>
56-
<span
57-
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
58-
/>
59-
</button>
60-
</div>
61-
<div
62-
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
63-
>
64-
<button
65-
class="MuiButtonBase-root css-10d1a0h-MuiButtonBase-root"
66-
tabindex="0"
67-
type="button"
34+
cluster1
35+
<span
36+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
37+
/>
38+
</button>
39+
<button
40+
aria-pressed="false"
41+
class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-lastButton css-1j4gaun-MuiButtonBase-root-MuiToggleButton-root"
42+
tabindex="0"
43+
type="button"
44+
value="[object Object]"
45+
>
46+
cluster2
47+
<span
48+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
49+
/>
50+
</button>
51+
</div>
52+
<div
53+
class="MuiGrid-root MuiGrid-item css-1oluiat-MuiGrid-root"
6854
>
69-
<div
70-
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
55+
<button
56+
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-gn8fa3-MuiButtonBase-root-MuiButton-root"
57+
disabled=""
58+
tabindex="-1"
59+
type="button"
7160
>
72-
<div
73-
class="MuiCardContent-root css-d64700-MuiCardContent-root"
74-
>
75-
<p
76-
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
77-
title="cluster2"
78-
>
79-
cluster2
80-
</p>
81-
</div>
82-
</div>
83-
<span
84-
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
85-
/>
86-
</button>
61+
View
62+
</button>
63+
</div>
8764
</div>
8865
</div>
8966
</div>

0 commit comments

Comments
 (0)