refactor: [UIE-8245] - DBaaS: Replace Select component with Autocomplete (#11245)

* change: [UIE-8245] - DBaaS: replace Select with Autocomplete

* change: [UIE-8245] - DBaaS: replace Select with Autocomplete (Settings Tab)

* Added changeset: Replace Select component with Autocomplete

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

Author: mpolotsk-akamai

packages/manager/.changeset/pr-11245-changed-1731425235091.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Replace Select component with Autocomplete in DBaaS ([#11245](https://github.com/linode/manager/pull/11245))

packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx

@@ -2,20 +2,15 @@ import { Divider } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import React from 'react';
 
-import Select from 'src/components/EnhancedSelect';
-import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
 import { Typography } from 'src/components/Typography';
 import {
   StyledLabelTooltip,
   StyledTextField,
 } from 'src/features/Databases/DatabaseCreate/DatabaseCreate.style';
-import { EngineOption } from 'src/features/Databases/DatabaseCreate/EngineOption';
+import { DatabaseEngineSelect } from 'src/features/Databases/DatabaseCreate/DatabaseEngineSelect';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
-import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOptionFromGroupedOptions';
-
-import { getEngineOptions } from './utilities';
 
 import type {
   ClusterSize,
@@ -27,7 +22,6 @@ import type {
   ReplicationCommitTypes,
 } from '@linode/api-v4';
 import type { FormikErrors } from 'formik';
-import type { Item } from 'src/components/EnhancedSelect';
 export interface DatabaseCreateValues {
   allow_list: {
     address: string;
@@ -59,13 +53,6 @@ export const DatabaseClusterData = (props: Props) => {
     globalGrantType: 'add_databases',
   });
 
-  const engineOptions = React.useMemo(() => {
-    if (!engines) {
-      return [];
-    }
-    return getEngineOptions(engines);
-  }, [engines]);
-
   const labelToolTip = (
     <StyledLabelTooltip>
       <strong>Label must:</strong>
@@ -94,22 +81,11 @@ export const DatabaseClusterData = (props: Props) => {
       <Divider spacingBottom={12} spacingTop={38} />
       <Grid>
         <Typography variant="h2">Select Engine and Region</Typography>
-        {/* TODO: use Autocomplete instead of Select */}
-        <Select
-          onChange={(selected: Item<string>) => {
-            onChange('engine', selected.value);
-          }}
-          value={getSelectedOptionFromGroupedOptions(
-            values.engine,
-            engineOptions
-          )}
-          components={{ Option: EngineOption, SingleValue: _SingleValue }}
-          disabled={isRestricted}
+        <DatabaseEngineSelect
+          engines={engines}
           errorText={errors.engine}
-          isClearable={false}
-          label="Database Engine"
-          options={engineOptions}
-          placeholder="Select a Database Engine"
+          onChange={onChange}
+          value={values.engine}
         />
       </Grid>
       <Grid>

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -158,7 +158,7 @@ const DatabaseCreate = () => {
       },
     ],
     cluster_size: -1 as ClusterSize,
-    engine: 'mysql' as Engine,
+    engine: 'mysql/8' as Engine,
     label: '',
     region: '',
     type: '',

packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx

@@ -0,0 +1,90 @@
+import { Box } from '@linode/ui';
+import Grid from '@mui/material/Unstable_Grid2';
+import React from 'react';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { getEngineOptions } from 'src/features/Databases/DatabaseCreate/utilities';
+import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
+
+import type { DatabaseEngine } from '@linode/api-v4';
+
+interface Props {
+  engines: DatabaseEngine[] | undefined;
+  errorText: string | undefined;
+  onChange: (filed: string, value: any) => void;
+  value: string;
+}
+
+export const DatabaseEngineSelect = (props: Props) => {
+  const { engines, errorText, onChange, value } = props;
+  const isRestricted = useRestrictedGlobalGrantCheck({
+    globalGrantType: 'add_databases',
+  });
+
+  const engineOptions = React.useMemo(() => {
+    if (!engines) {
+      return [];
+    }
+    return getEngineOptions(engines);
+  }, [engines]);
+
+  const selectedEngine = React.useMemo(() => {
+    return engineOptions.find((val) => val.value === value);
+  }, [value, engineOptions]);
+
+  return (
+    <Autocomplete
+      groupBy={(option) => {
+        if (option.engine.match(/mysql/i)) {
+          return 'MySQL';
+        }
+        if (option.engine.match(/postgresql/i)) {
+          return 'PostgreSQL';
+        }
+        if (option.engine.match(/mongodb/i)) {
+          return 'MongoDB';
+        }
+        if (option.engine.match(/redis/i)) {
+          return 'Redis';
+        }
+        return 'Other';
+      }}
+      onChange={(_, selected) => {
+        onChange('engine', selected.value);
+      }}
+      renderOption={(props, option) => {
+        const { key, ...rest } = props;
+        return (
+          <li {...rest} data-testid="db-engine-option" key={key}>
+            <Grid
+              alignItems="center"
+              container
+              direction="row"
+              justifyContent="flex-start"
+              spacing={2}
+            >
+              <Grid className="py0">{option.flag}</Grid>
+              <Grid>{option.label}</Grid>
+            </Grid>
+          </li>
+        );
+      }}
+      textFieldProps={{
+        InputProps: {
+          startAdornment: (
+            <Box sx={{ pr: 1, pt: 0.7 }}>{selectedEngine?.flag}</Box>
+          ),
+        },
+      }}
+      autoHighlight
+      disableClearable
+      disabled={isRestricted}
+      errorText={errorText}
+      isOptionEqualToValue={(option, value) => option.value === value.value}
+      label="Database Engine"
+      options={engineOptions ?? []}
+      placeholder="Select a Database Engine"
+      value={selectedEngine}
+    />
+  );
+};

packages/manager/src/features/Databases/DatabaseCreate/EngineOption.tsx

@@ -1,4 +1,3 @@
-import { groupBy } from 'ramda';
 import React from 'react';
 
 import MongoDBIcon from 'src/assets/icons/mongodb.svg';
@@ -68,48 +67,17 @@ export const engineIcons: EngineIconsProps = {
   postgresql: <PostgreSQLIcon height="24" width="24" />,
   redis: null,
 };
+
 export const getEngineOptions = (engines: DatabaseEngine[]) => {
-  const groupedEngines = groupBy<DatabaseEngine>((engineObject) => {
-    if (engineObject.engine.match(/mysql/i)) {
-      return 'MySQL';
-    }
-    if (engineObject.engine.match(/postgresql/i)) {
-      return 'PostgreSQL';
-    }
-    if (engineObject.engine.match(/mongodb/i)) {
-      return 'MongoDB';
-    }
-    if (engineObject.engine.match(/redis/i)) {
-      return 'Redis';
-    }
-    return 'Other';
-  }, engines);
-  return ['MySQL', 'PostgreSQL', 'MongoDB', 'Redis', 'Other'].reduce(
-    (accum, thisGroup) => {
-      if (
-        !groupedEngines[thisGroup] ||
-        groupedEngines[thisGroup].length === 0
-      ) {
-        return accum;
-      }
-      return [
-        ...accum,
-        {
-          label: thisGroup,
-          options: groupedEngines[thisGroup]
-            .map((engineObject) => ({
-              ...engineObject,
-              flag: engineIcons[engineObject.engine],
-              label: getDatabasesDescription({
-                engine: engineObject.engine,
-                version: engineObject.version,
-              }),
-              value: `${engineObject.engine}/${engineObject.version}`,
-            }))
-            .sort((a, b) => (a.version > b.version ? -1 : 1)),
-        },
-      ];
-    },
-    []
-  );
+  return engines.map((e) => {
+    return {
+      engine: e.engine,
+      flag: engineIcons[e.engine],
+      label: getDatabasesDescription({
+        engine: e.engine,
+        version: e.version,
+      }),
+      value: `${e.engine}/${e.version}`,
+    };
+  });
 };