From 611e4cad6149f862b9b0b715a5bbfaac246c8306 Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Thu, 14 Nov 2024 19:46:47 +0100 Subject: [PATCH] change: [UIE-8245] - review fix, show default engine --- .../pr-11245-changed-1731425235091.md | 2 +- .../DatabaseCreate/DatabaseClusterData.tsx | 4 +-- .../DatabaseCreate/DatabaseCreate.tsx | 2 +- .../DatabaseCreate/DatabaseEngineSelect.tsx | 30 +++++++++---------- .../DatabaseSettings/MaintenanceWindow.tsx | 11 +++---- 5 files changed, 22 insertions(+), 27 deletions(-) diff --git a/packages/manager/.changeset/pr-11245-changed-1731425235091.md b/packages/manager/.changeset/pr-11245-changed-1731425235091.md index 07d71522fe9..c85fd352839 100644 --- a/packages/manager/.changeset/pr-11245-changed-1731425235091.md +++ b/packages/manager/.changeset/pr-11245-changed-1731425235091.md @@ -2,4 +2,4 @@ "@linode/manager": Changed --- -Replace Select component with Autocomplete ([#11245](https://github.com/linode/manager/pull/11245)) +Replace Select component with Autocomplete in DBaaS ([#11245](https://github.com/linode/manager/pull/11245)) diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx index a3b1971d634..47cdce9018d 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx @@ -83,9 +83,9 @@ export const DatabaseClusterData = (props: Props) => { Select Engine and Region diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 1b58b3f7a39..fa88d9dbde1 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -159,7 +159,7 @@ const DatabaseCreate = () => { }, ], cluster_size: -1 as ClusterSize, - engine: 'mysql' as Engine, + engine: 'mysql/8' as Engine, label: '', region: '', type: '', diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx index 2294d178a4b..49f68fa5aaa 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx @@ -6,20 +6,17 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { getEngineOptions } from 'src/features/Databases/DatabaseCreate/utilities'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; -import type { DatabaseCreateValues } from './DatabaseClusterData'; import type { DatabaseEngine } from '@linode/api-v4'; -import type { FormikErrors } from 'formik'; -import type { Item } from 'src/components/EnhancedSelect'; interface Props { engines: DatabaseEngine[] | undefined; - errors: FormikErrors; + errorText: string | undefined; onChange: (filed: string, value: any) => void; - values: DatabaseCreateValues; + value: string; } + export const DatabaseEngineSelect = (props: Props) => { - const { engines, errors, onChange, values } = props; - const [selectedValue, setSelectedValue] = React.useState(''); + const { engines, errorText, onChange, value } = props; const isRestricted = useRestrictedGlobalGrantCheck({ globalGrantType: 'add_databases', }); @@ -30,6 +27,11 @@ export const DatabaseEngineSelect = (props: Props) => { } return getEngineOptions(engines); }, [engines]); + + const selectedEngine = React.useMemo(() => { + return engineOptions.find((val) => val.value === value); + }, [value, engineOptions]); + return ( { @@ -47,9 +49,8 @@ export const DatabaseEngineSelect = (props: Props) => { } return 'Other'; }} - onChange={(_, selected: Item) => { + onChange={(_, selected) => { onChange('engine', selected.value); - setSelectedValue(selected.label); }} renderOption={(props, option) => { const { key, ...rest } = props; @@ -71,22 +72,19 @@ export const DatabaseEngineSelect = (props: Props) => { textFieldProps={{ InputProps: { startAdornment: ( - - {engineOptions?.find((val) => val.label === selectedValue)?.flag} - + {selectedEngine?.flag} ), }, }} autoHighlight - clearOnBlur={true} - disableClearable={true} + disableClearable disabled={isRestricted} - errorText={errors.engine} + errorText={errorText} isOptionEqualToValue={(option, value) => option.value === value.value} label="Database Engine" options={engineOptions ?? []} placeholder="Select a Database Engine" - value={engineOptions?.find((val) => val.label === values.label)} + value={selectedEngine} /> ); }; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx index 1be58a89e2c..589c995ce9c 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx @@ -229,7 +229,6 @@ export const MaintenanceWindow = (props: Props) => { (thisOption) => thisOption.value === values.day_of_week )} autoHighlight - clearOnBlur={true} disableClearable disabled={disabled} errorText={touched.day_of_week ? errors.day_of_week : undefined} @@ -264,8 +263,7 @@ export const MaintenanceWindow = (props: Props) => { (thisOption) => thisOption.value === values.hour_of_day )} autoHighlight - clearOnBlur={true} - disableClearable={true} + disableClearable disabled={disabled} label="Time" noMarginTop @@ -356,9 +354,8 @@ export const MaintenanceWindow = (props: Props) => { (thisOption) => thisOption.value === values.week_of_month )} autoHighlight - clearOnBlur={true} defaultValue={modifiedWeekSelectionMap[0]} - disableClearable={true} + disableClearable label="Repeats on" noMarginTop options={modifiedWeekSelectionMap} @@ -407,8 +404,8 @@ const daySelectionMap = [ const hourSelectionMap = [ { label: '00:00', value: 0 }, - { label: '01:00', value: 2 }, - { label: '02:00', value: 1 }, + { label: '01:00', value: 1 }, + { label: '02:00', value: 2 }, { label: '03:00', value: 3 }, { label: '04:00', value: 4 }, { label: '05:00', value: 5 },