change: [UIE-8245] - review fix, show default engine

linode · Nov 15, 2024 · 611e4ca · 611e4ca
1 parent 7f4a0ef
commit 611e4ca
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 27 deletions.
diff --git 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
@@ -83,9 +83,9 @@ export const DatabaseClusterData = (props: Props) => {
         <Typography variant="h2">Select Engine and Region</Typography>
         <DatabaseEngineSelect
           engines={engines}
-          errors={errors}
+          errorText={errors.engine}
           onChange={onChange}
-          values={values}
+          value={values.engine}
         />
       </Grid>
       <Grid>

diff --git 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
@@ -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<DatabaseCreateValues>;
+  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 (
     <Autocomplete
       groupBy={(option) => {
@@ -47,9 +49,8 @@ export const DatabaseEngineSelect = (props: Props) => {
         }
         return 'Other';
       }}
-      onChange={(_, selected: Item<string>) => {
+      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: (
-            <Box sx={{ pr: 1, pt: 0.7 }}>
-              {engineOptions?.find((val) => val.label === selectedValue)?.flag}
-            </Box>
+            <Box sx={{ pr: 1, pt: 0.7 }}>{selectedEngine?.flag}</Box>
           ),
         },
       }}
       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/...ages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/...ages/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 },