refactor: [M3-6903] - Replace Select with Autocomplete in: volumes

packages/manager/.changeset/pr-10437-tech-stories-1715194468413.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Replace Select with Autocomplete in: volumes ([#10437](https://github.com/linode/manager/pull/10437))

packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -56,7 +56,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability', async () => {
     const account = accountFactory.build({
-      capabilities: ["Managed Databases"],
+      capabilities: ['Managed Databases'],
     });
 
     server.use(

packages/manager/src/features/Databases/utilities.test.ts

@@ -51,7 +51,7 @@ describe('useIsDatabasesEnabled', () => {
       }),
       http.get('*/v4beta/databases/engines', () => {
         return HttpResponse.json(makeResourcePage([]));
-      }),
+      })
     );
 
     const { result } = renderHook(() => useIsDatabasesEnabled(), {

packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx

@@ -6,17 +6,17 @@ import { number, object } from 'yup';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
-import Select, { Item } from 'src/components/EnhancedSelect';
 import { FormControl } from 'src/components/FormControl';
 import { FormHelperText } from 'src/components/FormHelperText';
 import { Notice } from 'src/components/Notice/Notice';
 import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect';
 import { useEventsPollingActions } from 'src/queries/events/events';
-import { useAllLinodeConfigsQuery } from 'src/queries/linodes/configs';
 import { useGrants } from 'src/queries/profile';
 import { useAttachVolumeMutation } from 'src/queries/volumes/volumes';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
 
+import { ConfigSelect } from './VolumeDrawer/ConfigSelect';
+
 interface Props {
   onClose: () => void;
   open: boolean;
@@ -58,27 +58,10 @@ export const AttachVolumeDrawer = React.memo((props: Props) => {
       });
     },
     validateOnBlur: false,
-    validateOnChange: false,
+    validateOnChange: true,
     validationSchema: AttachVolumeValidationSchema,
   });
 
-  const { data, isLoading: configsLoading } = useAllLinodeConfigsQuery(
-    formik.values.linode_id,
-    formik.values.linode_id !== -1
-  );
-
-  const configs = data ?? [];
-
-  const configChoices = configs.map((config) => {
-    return { label: config.label, value: `${config.id}` };
-  });
-
-  React.useEffect(() => {
-    if (configs.length === 1) {
-      formik.setFieldValue('config_id', configs[0].id);
-    }
-  }, [configs]);
-
   const reset = () => {
     formik.resetForm();
   };
@@ -140,23 +123,20 @@ export const AttachVolumeDrawer = React.memo((props: Props) => {
         )}
         {/* Config Selection */}
         <FormControl fullWidth>
-          <Select
-            onChange={(item: Item<string>) =>
-              formik.setFieldValue('config_id', Number(item.value))
+          <ConfigSelect
+            error={
+              formik.touched.config_id && formik.errors.config_id
+                ? formik.errors.config_id
+                : configError
             }
-            value={configChoices.find(
-              (item) => item.value === String(formik.values.config_id)
-            )}
+            onChange={(id: number) => {
+              formik.setFieldValue('config_id', +id);
+            }}
             disabled={isReadOnly || formik.values.linode_id === -1}
-            errorText={formik.errors.config_id ?? configError}
-            id="config_id"
-            isClearable={false}
-            isLoading={configsLoading}
-            label="Config"
-            name="config_id"
-            noMarginTop
-            options={configChoices}
-            placeholder="Select a Config"
+            linodeId={formik.values.linode_id}
+            name="configId"
+            onBlur={() => null}
+            value={formik.values.config_id}
           />
         </FormControl>
         <ActionsPanel

packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { FormControl } from 'src/components/FormControl';
 import { useAllLinodeConfigsQuery } from 'src/queries/linodes/configs';
 
@@ -52,30 +52,32 @@ export const ConfigSelect = React.memo((props: Props) => {
       fullWidth={width ? false : true}
       style={{ marginTop: 20, width }}
     >
-      <Select
+      <Autocomplete
         errorText={
           error ?? configsError
             ? 'An error occurred while retrieving configs for this Linode.'
             : undefined
         }
-        noOptionsMessage={
-          () =>
-            !configs || configs.length == 0
-              ? 'No configs are available for this Linode.'
-              : 'No options.' // No matches for search
+        noOptionsText={
+          !configs || configs.length == 0
+            ? 'No configs are available for this Linode.'
+            : 'No options.'
         }
-        onChange={(e: Item<number>) => {
-          onChange(+e.value);
+        onChange={(_, selected) => {
+          onChange(+selected.value);
         }}
+        value={
+          value && value !== -1
+            ? configList?.find((thisConfig) => thisConfig.value === value)
+            : { label: '', value: -1 }
+        }
+        disableClearable
         id={name}
-        isClearable={false}
+        isOptionEqualToValue={(option, value) => option.value === value.value}
         label="Config"
-        name={name}
-        noMarginTop
         onBlur={onBlur}
-        options={configList}
+        options={configList ?? []}
         placeholder="Select a Config"
-        value={configList?.find((thisConfig) => thisConfig.value === value)}
         {...rest}
       />
     </FormControl>