diff --git a/packages/manager/.changeset/pr-10437-tech-stories-1715194468413.md b/packages/manager/.changeset/pr-10437-tech-stories-1715194468413.md
new file mode 100644
index 00000000000..602b8ed4296
--- /dev/null
+++ b/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))
diff --git a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx
index 65a60178bb5..00415bd3ef8 100644
--- a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx
+++ b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx
@@ -1,4 +1,5 @@
import { Volume } from '@linode/api-v4';
+import { styled } from '@mui/material/styles';
import { useFormik } from 'formik';
import { useSnackbar } from 'notistack';
import * as React from 'react';
@@ -6,17 +7,16 @@ 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();
};
@@ -121,6 +104,11 @@ export const AttachVolumeDrawer = React.memo((props: Props) => {
)}
{generalError && }
{
if (linode !== null) {
formik.setFieldValue('linode_id', linode.id);
@@ -128,7 +116,6 @@ export const AttachVolumeDrawer = React.memo((props: Props) => {
}}
clearable={false}
disabled={isReadOnly}
- errorText={formik.errors.linode_id ?? linodeError}
filter={{ region: volume?.region }}
noMarginTop
value={formik.values.linode_id}
@@ -138,27 +125,24 @@ export const AttachVolumeDrawer = React.memo((props: Props) => {
Only Linodes in this Volume’s region are displayed.
)}
- {/* Config Selection */}
-
-
+ {
+ formik.setFieldValue('config_id', +id);
+ }}
+ disabled={isReadOnly || formik.values.linode_id === -1}
+ name="configId"
+ onBlur={() => null}
+ value={formik.values.config_id}
+ />
+
{
);
});
+
+const StyledConfigSelect = styled(ConfigSelect, {
+ label: 'StyledConfigSelect',
+})(() => ({
+ p: { marginLeft: 0 },
+}));
diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx
index 1725e7d9d84..8b611c74ea1 100644
--- a/packages/manager/src/features/Volumes/VolumeCreate.tsx
+++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx
@@ -364,7 +364,7 @@ export const VolumeCreate = () => {
)}
{
}
}
- if (linodeId === null) {
- return null;
- }
-
return (
-