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 */} - - - !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) => { - 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} />