Skip to content

Commit 5d84137

Browse files
harsh-akamaiharsh-akamai
authored
Fixed: [M3-9621], [M3-9628], [M2-9629], [M3-9648] - Bug fixes in Linode Create and Landing Pages (#12028)
* linode create bug fixes * pagination issue on Linodes Tag Filter page * variable change * Added changeset: Bugs in Linode Create,Landing & Detail Pages * feedback @dwiley-akamai * removed extra error notice in VPC section of create Linode
1 parent a140661 commit 5d84137

5 files changed

Lines changed: 73 additions & 56 deletions

File tree

‎packages/manager/.changeset/pr-12028-fixed-1744724101282.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@linode/manager': Fixed
3+
---
4+
5+
Bugs in Linode Create, Landing & Detail Pages ([#12028](https://github.com/linode/manager/pull/12028))

‎packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
3030
paddingRight: theme.spacing(1),
3131
width: 50,
3232
},
33+
3334
cellUser: {
3435
width: '30%',
3536
},
@@ -57,16 +58,11 @@ interface Props {
5758
export const UserSSHKeyPanel = (props: Props) => {
5859
const { classes } = useStyles();
5960
const theme = useTheme();
60-
const {
61-
authorizedUsers,
62-
disabled,
63-
headingVariant,
64-
setAuthorizedUsers,
65-
} = props;
66-
67-
const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
68-
false
69-
);
61+
const { authorizedUsers, disabled, headingVariant, setAuthorizedUsers } =
62+
props;
63+
64+
const [isCreateDrawerOpen, setIsCreateDrawerOpen] =
65+
React.useState<boolean>(false);
7066

7167
const pagination = usePagination(1);
7268

@@ -206,7 +202,7 @@ export const UserSSHKeyPanel = (props: Props) => {
206202
<Typography className={classes.title} variant={headingVariant ?? 'h2'}>
207203
SSH Keys
208204
</Typography>
209-
<Table spacingBottom={16}>
205+
<Table>
210206
<TableHead>
211207
<TableRow>
212208
<TableCell className={classes.cellCheckbox} />
@@ -230,6 +226,7 @@ export const UserSSHKeyPanel = (props: Props) => {
230226
buttonType="outlined"
231227
disabled={disabled}
232228
onClick={() => setIsCreateDrawerOpen(true)}
229+
sx={{ marginTop: theme.tokens.spacing.S16 }}
233230
>
234231
Add an SSH Key
235232
</Button>

‎packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -282,15 +282,6 @@ export const VPC = () => {
282282
/>
283283
)}
284284
<VPCRangesDescription />
285-
{formState.errors.interfaces?.[0] &&
286-
'ip_ranges' in formState.errors.interfaces[0] && (
287-
<Notice
288-
text={
289-
formState.errors.interfaces[0]?.ip_ranges?.message
290-
}
291-
variant="error"
292-
/>
293-
)}
294285
<VPCRanges />
295286
</>
296287
)}

‎packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx‎

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ interface DisplayGroupedLinodesProps
4848
display: 'grid' | 'list';
4949
filteredLinodesLoading: boolean;
5050
handleRegionFilter: (regionFilter: RegionFilter) => void;
51-
linodeViewPreference: 'grid' | 'list';
5251
linodesAreGrouped: boolean;
52+
linodeViewPreference: 'grid' | 'list';
5353
openDialog: (type: DialogType, linodeID: number, linodeLabel: string) => void;
5454
openPowerActionDialog: (
5555
bootAction: Action,
@@ -85,8 +85,17 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
8585
const groupByDescriptionId = React.useId();
8686

8787
const dataLength = data.length;
88-
8988
const orderedGroupedLinodes = sortGroups(groupByTags(data));
89+
90+
const tabGroupRefs = React.useRef([]);
91+
92+
// avoids recreating the refs array unless the no. of linodes have changed
93+
if (tabGroupRefs.current.length !== orderedGroupedLinodes.length) {
94+
tabGroupRefs.current = orderedGroupedLinodes.map(
95+
(_, i) => tabGroupRefs.current[i] || React.createRef()
96+
);
97+
}
98+
9099
const tableWrapperProps = {
91100
dataLength,
92101
handleOrderChange,
@@ -146,17 +155,17 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
146155
</div>
147156
<Tooltip placement="top-end" title="Ungroup by tag">
148157
<IconButton
158+
aria-describedby={groupByDescriptionId}
159+
aria-label="Toggle group by tag"
160+
className={linodesAreGrouped ? 'MuiIconButton-isActive' : ''}
161+
disableRipple
162+
onClick={toggleGroupLinodes}
149163
sx={(theme) => ({
150164
':hover': {
151165
color: theme.tokens.color.Brand[60],
152166
},
153167
color: theme.tokens.component.Table.HeaderNested.Icon,
154168
})}
155-
aria-describedby={groupByDescriptionId}
156-
aria-label="Toggle group by tag"
157-
className={linodesAreGrouped ? 'MuiIconButton-isActive' : ''}
158-
disableRipple
159-
onClick={toggleGroupLinodes}
160169
>
161170
<GroupByTag />
162171
</IconButton>
@@ -171,15 +180,22 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
171180
No items to display.
172181
</Typography>
173182
) : null}
174-
{orderedGroupedLinodes.map(([tag, linodes]) => {
183+
{orderedGroupedLinodes.map(([tag, linodes], index) => {
175184
return (
176-
<Box data-qa-tag-header={tag} key={tag} sx={{ marginBottom: 2 }}>
185+
<Box
186+
data-qa-tag-header={tag}
187+
key={tag}
188+
ref={tabGroupRefs.current[index]}
189+
sx={{ marginBottom: 2 }}
190+
>
177191
<Grid container>
178192
<Grid size={12}>
179193
<StyledTagHeader variant="h2">{tag}</StyledTagHeader>
180194
</Grid>
181195
</Grid>
182196
<Paginate
197+
// If there are more Linodes with maintenance than the current page size, show the minimum
198+
data={linodes}
183199
// page size needed to show ALL Linodes with maintenance.
184200
pageSize={
185201
numberOfLinodesWithMaintenance > infinitePageSize
@@ -188,9 +204,8 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
188204
)
189205
: infinitePageSize
190206
}
191-
// If there are more Linodes with maintenance than the current page size, show the minimum
192-
data={linodes}
193207
pageSizeSetter={setInfinitePageSize}
208+
scrollToRef={tabGroupRefs.current[index]}
194209
>
195210
{({
196211
count,
@@ -217,16 +232,16 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
217232
<Component {...finalProps} />
218233
<Grid size={12}>
219234
<PaginationFooter
220-
sx={{
221-
border: 0,
222-
}}
223235
count={count}
224236
eventCategory={'linodes landing'}
225237
handlePageChange={handlePageChange}
226238
handleSizeChange={handlePageSizeChange}
227239
page={page}
228240
pageSize={pageSize}
229241
showAll
242+
sx={{
243+
border: 0,
244+
}}
230245
/>
231246
</Grid>
232247
</React.Fragment>
@@ -253,8 +268,8 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
253268
)}
254269
<TableWrapper
255270
{...tableWrapperProps}
256-
linodeViewPreference="list"
257271
linodesAreGrouped={true}
272+
linodeViewPreference="list"
258273
toggleGroupLinodes={toggleGroupLinodes}
259274
toggleLinodeView={toggleLinodeView}
260275
>
@@ -265,13 +280,14 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
265280
<TableRowEmpty colSpan={12} />
266281
</TableBody>
267282
) : null}
268-
{orderedGroupedLinodes.map(([tag, linodes]) => {
283+
{orderedGroupedLinodes.map(([tag, linodes], index) => {
269284
return (
270285
<React.Fragment key={tag}>
271286
<Paginate
272287
data={linodes}
273288
pageSize={infinitePageSize}
274289
pageSizeSetter={setInfinitePageSize}
290+
scrollToRef={tabGroupRefs.current[index]}
275291
>
276292
{({
277293
count,
@@ -294,7 +310,10 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
294310
pageSize,
295311
};
296312
return (
297-
<TableBody data-qa-tag-header={tag}>
313+
<TableBody
314+
data-qa-tag-header={tag}
315+
ref={tabGroupRefs.current[index]}
316+
>
298317
<StyledTagHeaderRow>
299318
<TableCell colSpan={7}>
300319
<StyledTagHeader variant="h2">
@@ -307,10 +326,6 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
307326
<TableRow>
308327
<TableCell colSpan={7} sx={{ padding: 0 }}>
309328
<PaginationFooter
310-
sx={{
311-
borderLeft: 0,
312-
borderRight: 0,
313-
}}
314329
count={count}
315330
eventCategory={'linodes landing'}
316331
handlePageChange={handlePageChange}
@@ -319,6 +334,10 @@ export const DisplayGroupedLinodes = (props: DisplayGroupedLinodesProps) => {
319334
pageSize={pageSize}
320335
// Disabling showAll as it is impacting page performance.
321336
showAll={false}
337+
sx={{
338+
borderLeft: 0,
339+
borderRight: 0,
340+
}}
322341
/>
323342
</TableCell>
324343
</TableRow>

‎packages/manager/src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeAddDrawer.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,12 @@ export const LinodeVolumeAddDrawer = (props: Props) => {
2222
const { linode, onClose, open, openDetails } = props;
2323

2424
const [mode, setMode] = React.useState<'attach' | 'create'>('create');
25-
const [
26-
clientLibraryCopyVisible,
27-
setClientLibraryCopyVisible,
28-
] = React.useState(false);
2925

30-
const {
31-
isBlockStorageEncryptionFeatureEnabled,
32-
} = useIsBlockStorageEncryptionFeatureEnabled();
26+
const [clientLibraryCopyVisible, setClientLibraryCopyVisible] =
27+
React.useState(false);
28+
29+
const { isBlockStorageEncryptionFeatureEnabled } =
30+
useIsBlockStorageEncryptionFeatureEnabled();
3331

3432
const linodeSupportsBlockStorageEncryption = Boolean(
3533
linode.capabilities?.includes('Block Storage Encryption')
@@ -40,16 +38,23 @@ export const LinodeVolumeAddDrawer = (props: Props) => {
4038
setClientLibraryCopyVisible(false);
4139
};
4240

41+
const closeDrawer = () => {
42+
if (mode !== 'create') {
43+
setMode('create');
44+
}
45+
onClose();
46+
};
47+
4348
return (
4449
<Drawer
50+
NotFoundComponent={NotFound}
51+
onClose={closeDrawer}
52+
open={open}
4553
title={
4654
mode === 'attach'
4755
? `Attach Volume to ${linode.label}`
4856
: `Create Volume for ${linode.label}`
4957
}
50-
NotFoundComponent={NotFound}
51-
onClose={onClose}
52-
open={open}
5358
>
5459
<ModeSelection mode={mode} onChange={toggleMode} />
5560
{isBlockStorageEncryptionFeatureEnabled &&
@@ -63,23 +68,23 @@ export const LinodeVolumeAddDrawer = (props: Props) => {
6368
)}
6469
{mode === 'attach' ? (
6570
<LinodeVolumeAttachForm
71+
linode={linode}
72+
onClose={closeDrawer}
6673
setClientLibraryCopyVisible={(visible: boolean) =>
6774
setClientLibraryCopyVisible(visible)
6875
}
69-
linode={linode}
70-
onClose={onClose}
7176
/>
7277
) : (
7378
<LinodeVolumeCreateForm
79+
linode={linode}
7480
linodeSupportsBlockStorageEncryption={
7581
linodeSupportsBlockStorageEncryption
7682
}
83+
onClose={closeDrawer}
84+
openDetails={openDetails}
7785
setClientLibraryCopyVisible={(visible: boolean) =>
7886
setClientLibraryCopyVisible(visible)
7987
}
80-
linode={linode}
81-
onClose={onClose}
82-
openDetails={openDetails}
8388
/>
8489
)}
8590
</Drawer>

0 commit comments

Comments
 (0)