Skip to content

Tech story: [UIE-8943] - Replace dropdowns in Database cluster settings page with CDS select web component #13057

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Tech story: [UIE-8943] - Replace dropdowns in Database cluster settings page with CDS select web component #13057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
088a9bf
Resolve merge conflicts
grevanak-akamai Nov 20, 2025
30b2df3
Fix previous commit
grevanak-akamai Nov 20, 2025
53b4619
Merge branch 'develop' into feature/UIE-8943
pmakode-akamai Nov 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-13057-changed-1762343659819.md
View file
Open in desktop
Copy link
Contributor

@dwiley-akamai dwiley-akamai Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could arguably be a Tech Story since it's not really a change impacting the look/feel or functionality for the user

Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Tech Stories
---

DBaaS: Replace the dropdowns in Database cluster settings page with CDS select web component ([#13057](https://github.com/linode/manager/pull/13057))
2 changes: 1 addition & 1 deletion packages/manager/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"@tanstack/react-query-devtools": "5.51.24",
"@tanstack/react-router": "^1.111.11",
"@xterm/xterm": "^5.5.0",
"akamai-cds-react-components": "0.0.1-alpha.15",
"akamai-cds-react-components": "0.0.1-alpha.16",
"algoliasearch": "^4.14.3",
"axios": "~1.12.0",
"braintree-web": "^3.92.2",
Expand Down
178 changes: 99 additions & 79 deletions ...ages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import { yupResolver } from '@hookform/resolvers/yup';
import { useDatabaseMutation } from '@linode/queries';
import {
Autocomplete,
Box,
FormControl,
FormControlLabel,
InputLabel,
Notice,
Radio,
RadioGroup,
Expand All @@ -13,7 +15,7 @@ import {
} from '@linode/ui';
import { updateMaintenanceSchema } from '@linode/validation';
import { styled } from '@mui/material/styles';
import { Button } from 'akamai-cds-react-components';
import { Button, Select } from 'akamai-cds-react-components';
import { DateTime } from 'luxon';
import { useSnackbar } from 'notistack';
import * as React from 'react';
Expand Down Expand Up @@ -157,89 +159,107 @@ export const MaintenanceWindow = (props: Props) => {
<Controller
control={control}
name="day_of_week"
render={({ field, fieldState }) => (
<Autocomplete
autoHighlight
disableClearable
disabled={disabled}
errorText={fieldState.error?.message}
isOptionEqualToValue={(option, value) =>
option.value === value.value
}
label="Day of Week"
noMarginTop
onChange={(_, day) => {
field.onChange(day.value);
weekSelectionModifier(day.label, weekSelectionMap);
}}
options={daySelectionMap}
placeholder="Choose a day"
renderOption={(props, option) => (
<li {...props}>{option.label}</li>
)}
textFieldProps={{
dataAttrs: {
'data-qa-weekday-select': true,
},
}}
value={daySelectionMap.find(
(thisOption) => thisOption.value === dayOfWeek
)}
/>
render={({ field }) => (
<Box>
<InputLabel
data-qa-dropdown-label="day-of-week-select"
data-qa-textfield-label="Day of Week"
sx={{
marginBottom: '8px',
transform: 'none',
}}
>
Day of Week
</InputLabel>
<Box
data-qa-autocomplete="Day of Week"
sx={{ width: '125px' }}
>
<Select
autocomplete
id="dayOfWeek"
items={daySelectionMap}
onChange={(e: CustomEvent) => {
const day: { label: string; value: number } =
e.detail;
field.onChange(day.value);
weekSelectionModifier(day.label, weekSelectionMap);
}}
placeholder="Choose a day"
selected={daySelectionMap.find(
(thisOption) => thisOption.value === dayOfWeek
)}
valueFn={(day: { label: string; value: number }) =>
`${day.label}`
}
/>
</Box>
</Box>
)}
/>
</FormControl>
<FormControl>
<div style={{ alignItems: 'center', display: 'flex' }}>
<Controller
control={control}
name="hour_of_day"
render={({ field, fieldState }) => (
<Autocomplete
autoHighlight
defaultValue={hourSelectionMap.find(
(option) => option.value === 20
)}
disableClearable
disabled={disabled}
errorText={fieldState.error?.message}
label="Time"
noMarginTop
onChange={(_, hour) => {
field.onChange(hour?.value);
}}
options={hourSelectionMap}
placeholder="Choose a time"
renderOption={(props, option) => (
<li {...props}>{option.label}</li>
)}
textFieldProps={{
dataAttrs: {
'data-qa-time-select': true,
},
<Controller
control={control}
name="hour_of_day"
render={({ field }) => (
<Box data-qa-autocomplete="Time">
<Box>
<InputLabel
data-qa-dropdown-label="time-select"
data-qa-textfield-label="Time"
htmlFor="time"
sx={{
marginBottom: '8px',
transform: 'none',
}}
>
Time
</InputLabel>
</Box>
<Box
sx={{
display: 'flex',
}}
value={hourSelectionMap.find(
(thisOption) => thisOption.value === hourOfDay
)}
/>
)}
/>
<TooltipIcon
status="info"
sxTooltipIcon={{
marginTop: '1.75rem',
padding: '0px 8px',
}}
text={
<Typography>
UTC is {utcOffsetText(utcOffsetInHours)} hours compared
to your local timezone. Click{' '}
<Link to="/profile/display">here</Link> to view or
change your timezone settings.
</Typography>
}
/>
</div>
>
<Box sx={{ width: '120px' }}>
<Select
autocomplete
disabled={disabled}
id="time"
items={hourSelectionMap}
onChange={(e: CustomEvent) => {
const hour: { label: string; value: number } =
e.detail;
field.onChange(hour?.value);
}}
placeholder="Choose a time"
selected={hourSelectionMap.find(
(thisOption) => thisOption.value === hourOfDay
)}
valueFn={(time: { label: string }) =>
`${time.label}`
}
/>
</Box>
<TooltipIcon
status="info"
sxTooltipIcon={{
padding: '0px 8px',
}}
text={
<Typography>
UTC is {utcOffsetText(utcOffsetInHours)} hours
compared to your local timezone. Click{' '}
<Link to="/profile/display">here</Link> to view or
change your timezone settings.
</Typography>
}
/>
</Box>
</Box>
)}
/>
</FormControl>
</Stack>
{isLegacy && (
Expand Down
18 changes: 9 additions & 9 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.