Skip to content

Commit 655c6b6

Browse files
bill-akamaidmcintyr-akamai
bill-akamai
and
dmcintyr-akamai
authored
fix:[M3-10481]- Fix Autocomplete undefined value issues - Part 1 (linode#12706)
* Create debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Update debug-M3-9877.yml * Remove debug .yml file * Fix autocompletes * Update TwoStepRegion * Revert change to LinodeSelect.tsx * Use 'distributed-ALL' as default in TwoStepRegion.tsx * Add PowerActionsDialogOrDrawer.tsx * Added changeset: Replace undefined with null in Autocomplete values to fix MUI errors * Update MaintenancePolicySelect type --------- Co-authored-by: dmcintyr-akamai <[email protected]>
1 parent dd66369 commit 655c6b6

File tree

14 files changed

+42
-32
lines changed

14 files changed

+42
-32
lines changed

‎packages/manager/.changeset/pr-12706-fixed-1755632991962.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+
Replace undefined with null in Autocomplete values to fix MUI errors ([#12706](https://github.com/linode/manager/pull/12706))

‎packages/manager/cypress/component/components/region-select.spec.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ componentTests('RegionSelect', (mount) => {
2929
isGeckoLAEnabled={false}
3030
onChange={() => {}}
3131
regions={[region]}
32-
value={undefined}
32+
value={null}
3333
/>
3434
);
3535

@@ -58,7 +58,7 @@ componentTests('RegionSelect', (mount) => {
5858
isGeckoLAEnabled={false}
5959
onChange={() => {}}
6060
regions={[region]}
61-
value={undefined}
61+
value={null}
6262
/>
6363
);
6464

@@ -88,7 +88,7 @@ componentTests('RegionSelect', (mount) => {
8888
isGeckoLAEnabled={false}
8989
onChange={() => {}}
9090
regions={[region]}
91-
value={undefined}
91+
value={null}
9292
/>
9393
);
9494

@@ -118,7 +118,7 @@ componentTests('RegionSelect', (mount) => {
118118
isGeckoLAEnabled={false}
119119
onChange={() => {}}
120120
regions={[region]}
121-
value={undefined}
121+
value={null}
122122
/>
123123
</>
124124
);
@@ -152,7 +152,7 @@ componentTests('RegionSelect', (mount) => {
152152
isGeckoLAEnabled={false}
153153
onChange={() => {}}
154154
regions={regions}
155-
value={undefined}
155+
value={null}
156156
/>
157157
);
158158

@@ -271,7 +271,7 @@ componentTests('RegionSelect', (mount) => {
271271
isGeckoLAEnabled={false}
272272
onChange={() => {}}
273273
regions={regions}
274-
value={undefined}
274+
value={null}
275275
/>
276276
);
277277

@@ -289,7 +289,7 @@ componentTests('RegionSelect', (mount) => {
289289
isGeckoLAEnabled={false}
290290
onChange={spyFn}
291291
regions={regions}
292-
value={undefined}
292+
value={null}
293293
/>
294294
);
295295

@@ -359,7 +359,7 @@ componentTests('RegionSelect', (mount) => {
359359
isGeckoLAEnabled={false}
360360
onChange={() => {}}
361361
regions={regions}
362-
value={undefined}
362+
value={null}
363363
/>,
364364
{
365365
dcGetWell: true,
@@ -394,7 +394,7 @@ componentTests('RegionSelect', (mount) => {
394394
isGeckoLAEnabled={false}
395395
onChange={() => {}}
396396
regions={regions}
397-
value={undefined}
397+
value={null}
398398
/>
399399
);
400400

@@ -424,7 +424,7 @@ componentTests('RegionSelect', (mount) => {
424424
isGeckoLAEnabled={false}
425425
onChange={() => {}}
426426
regions={regions}
427-
value={undefined}
427+
value={null}
428428
/>
429429
);
430430

@@ -455,7 +455,7 @@ componentTests('RegionSelect', (mount) => {
455455
isGeckoLAEnabled={false}
456456
onChange={() => {}}
457457
regions={regions}
458-
value={undefined}
458+
value={null}
459459
/>
460460
);
461461
checkComponentA11y();

‎packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ interface MaintenancePolicySelectProps {
2828
hideDefaultChip?: boolean;
2929
onChange: (policy: MaintenancePolicy) => void;
3030
textFieldProps?: Partial<TextFieldProps>;
31-
value?: string;
31+
value?: null | string;
3232
}
3333

3434
export const MaintenancePolicySelect = (

‎packages/manager/src/components/RegionSelect/RegionSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const RegionSelect = <
6868
});
6969

7070
const selectedRegion = value
71-
? regionOptions.find((r) => r.id === value)
71+
? (regionOptions.find((r) => r.id === value) ?? null)
7272
: null;
7373

7474
const disabledRegions = regionOptions.reduce<

‎packages/manager/src/components/RegionSelect/RegionSelect.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export interface RegionSelectProps<
6262
/**
6363
* The ID of the selected region.
6464
*/
65-
value: string | undefined;
65+
value: null | string;
6666
width?: number;
6767
}
6868

‎packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,9 @@ export const CloudPulseRegionSelect = React.memo(
167167
placeholder={placeholder ?? 'Select a Region'}
168168
regions={supportedRegionsFromResources}
169169
value={
170-
supportedRegionsFromResources?.length ? selectedRegion : undefined
170+
supportedRegionsFromResources?.length
171+
? (selectedRegion ?? null)
172+
: null
171173
}
172174
/>
173175
);

‎packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export const DatabaseBackups = () => {
222222
option.value === value.value
223223
}
224224
label=""
225-
onChange={(_, newTime) => setSelectedTime(newTime)}
225+
onChange={(_, newTime) => setSelectedTime(newTime ?? null)}
226226
options={TIME_OPTIONS}
227227
placeholder="Choose a time"
228228
renderOption={(props, option) => {
@@ -238,7 +238,7 @@ export const DatabaseBackups = () => {
238238
'data-qa-time-select': true,
239239
},
240240
}}
241-
value={selectedTime}
241+
value={selectedTime ?? null}
242242
/>
243243
</FormControl>
244244
</GridLegacy>

‎packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -527,7 +527,7 @@ export const CreateCluster = () => {
527527
? 'Only regions that support LKE Enterprise clusters are listed.'
528528
: undefined
529529
}
530-
value={selectedRegion?.id}
530+
value={selectedRegion?.id || null}
531531
/>
532532
</Stack>
533533
<StyledDocsLinkContainer

‎packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const MaintenancePolicy = () => {
8888
: MAINTENANCE_POLICY_SELECT_REGION_TEXT
8989
: undefined,
9090
}}
91-
value={field.value ?? undefined}
91+
value={field.value ?? null}
9292
/>
9393
)}
9494
/>

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const TwoStepRegion = (props: CombinedProps) => {
7070
const { disabled, disabledRegions, errorText, onChange, value } = props;
7171

7272
const [regionFilter, setRegionFilter] =
73-
React.useState<RegionFilterValue>('distributed');
73+
React.useState<RegionFilterValue>('distributed-ALL');
7474

7575
const { data: regions } = useRegionsQuery();
7676
const createType = useGetLinodeCreateType();
@@ -120,7 +120,7 @@ export const TwoStepRegion = (props: CombinedProps) => {
120120
onChange={(e, region) => onChange(region)}
121121
regionFilter="core"
122122
regions={regions ?? []}
123-
value={value}
123+
value={value ?? null}
124124
/>
125125
</SafeTabPanel>
126126
<SafeTabPanel index={1}>
@@ -131,18 +131,20 @@ export const TwoStepRegion = (props: CombinedProps) => {
131131
</Typography>
132132
</Box>
133133
<Autocomplete
134+
clearIcon={null}
134135
defaultValue={GEOGRAPHICAL_AREA_OPTIONS[0]}
135-
disableClearable
136136
label="Geographical Area"
137137
onChange={(_, selectedOption) => {
138138
if (selectedOption?.value) {
139139
setRegionFilter(selectedOption.value);
140140
}
141141
}}
142142
options={GEOGRAPHICAL_AREA_OPTIONS}
143-
value={GEOGRAPHICAL_AREA_OPTIONS.find(
144-
(option) => option.value === regionFilter
145-
)}
143+
value={
144+
GEOGRAPHICAL_AREA_OPTIONS.find(
145+
(option) => option.value === regionFilter
146+
) ?? null
147+
}
146148
/>
147149
<RegionSelect
148150
currentCapability="Linodes"
@@ -154,7 +156,7 @@ export const TwoStepRegion = (props: CombinedProps) => {
154156
onChange={(e, region) => onChange(region)}
155157
regionFilter={regionFilter}
156158
regions={regions ?? []}
157-
value={value}
159+
value={value ?? null}
158160
/>
159161
</SafeTabPanel>
160162
</TabPanels>

0 commit comments

Comments
 (0)