From 3f90d8df4f8ae46374b217b9c3d9d143cbfdf27d Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Thu, 2 May 2024 21:34:41 -0500 Subject: [PATCH 1/6] change: [M3-6903] - Replace instances in: volumes --- .../features/Volumes/AttachVolumeDrawer.tsx | 50 +++++++++++++------ 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx index 65a60178bb5..dba45d54bad 100644 --- a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx @@ -5,8 +5,8 @@ import * as React from 'react'; import { number, object } from 'yup'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; +import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; 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'; @@ -17,6 +17,10 @@ import { useGrants } from 'src/queries/profile'; import { useAttachVolumeMutation } from 'src/queries/volumes/volumes'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; +interface ConfigOption { + label: string; + value: string; +} interface Props { onClose: () => void; open: boolean; @@ -40,6 +44,10 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { const { checkForNewEvents } = useEventsPollingActions(); const { data: grants } = useGrants(); + const [selectedOption, setSelectedOption] = React.useState({ + label: '', + value: '', + }); const { error, mutateAsync: attachVolume } = useAttachVolumeMutation(); @@ -58,7 +66,7 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { }); }, validateOnBlur: false, - validateOnChange: false, + validateOnChange: true, validationSchema: AttachVolumeValidationSchema, }); @@ -76,6 +84,7 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { React.useEffect(() => { if (configs.length === 1) { formik.setFieldValue('config_id', configs[0].id); + setSelectedOption({ label: configs[0].label, value: `${configs[0].id}` }); } }, [configs]); @@ -85,6 +94,10 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { const handleClose = () => { reset(); + setSelectedOption({ + label: '', + value: '', + }); props.onClose(); }; @@ -140,23 +153,30 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { )} {/* 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} /> From bb80aa523545a08e2402e61031ce317010b94bb7 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 8 May 2024 10:15:31 -0500 Subject: [PATCH 3/6] Reuse ConfigSelect in AttachVolumeDrawer --- .../features/Volumes/AttachVolumeDrawer.tsx | 60 ++++--------------- 1 file changed, 10 insertions(+), 50 deletions(-) diff --git a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx index dba45d54bad..ebd2b0fb088 100644 --- a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx @@ -5,22 +5,18 @@ import * as React from 'react'; import { number, object } from 'yup'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; 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'; -interface ConfigOption { - label: string; - value: string; -} +import { ConfigSelect } from './VolumeDrawer/ConfigSelect'; + interface Props { onClose: () => void; open: boolean; @@ -44,10 +40,6 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { const { checkForNewEvents } = useEventsPollingActions(); const { data: grants } = useGrants(); - const [selectedOption, setSelectedOption] = React.useState({ - label: '', - value: '', - }); const { error, mutateAsync: attachVolume } = useAttachVolumeMutation(); @@ -70,34 +62,12 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { 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); - setSelectedOption({ label: configs[0].label, value: `${configs[0].id}` }); - } - }, [configs]); - const reset = () => { formik.resetForm(); }; const handleClose = () => { reset(); - setSelectedOption({ - label: '', - value: '', - }); props.onClose(); }; @@ -153,30 +123,20 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { )} {/* Config Selection */} - - option.value === value.value - } - onChange={(_, selected) => { - if (selected) { - formik.setFieldValue('config_id', Number(selected.value)); - } + onChange={(id: number) => { + formik.setFieldValue('config_id', +id); }} - placeholder={ - configsLoading ? 'Loading Config...' : 'Select a Config' - } - disableClearable disabled={isReadOnly || formik.values.linode_id === -1} - id="config_id" - label="Config" - loading={configsLoading} - options={!configsLoading ? configChoices : []} - value={selectedOption} + linodeId={formik.values.linode_id} + name="configId" + onBlur={() => null} + value={formik.values.config_id} /> Date: Wed, 8 May 2024 13:54:28 -0500 Subject: [PATCH 4/6] Added changeset: Replace Select with Autocomplete in: volumes --- .../.changeset/pr-10437-tech-stories-1715194468413.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10437-tech-stories-1715194468413.md 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)) From b8dbb10c003180f510d1a9cc21dc7e4d9bafe2db Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 29 May 2024 09:18:34 -0500 Subject: [PATCH 5/6] PR feedback: @bnussman @DevDW @HanaXu --- .../features/Volumes/AttachVolumeDrawer.tsx | 50 +++++++++++-------- .../src/features/Volumes/VolumeCreate.tsx | 2 +- .../Volumes/VolumeDrawer/ConfigSelect.tsx | 6 +-- 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx index ebd2b0fb088..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,7 +7,6 @@ import { number, object } from 'yup'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -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'; @@ -104,6 +104,11 @@ export const AttachVolumeDrawer = React.memo((props: Props) => { )} {generalError && } { if (linode !== null) { formik.setFieldValue('linode_id', linode.id); @@ -111,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} @@ -121,24 +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} - linodeId={formik.values.linode_id} - name="configId" - onBlur={() => null} - value={formik.values.config_id} - /> - + { + 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 ( { : { label: '', value: -1 } } disableClearable + fullWidth id={name} isOptionEqualToValue={(option, value) => option.value === value.value} label="Config" + noMarginTop onBlur={onBlur} options={configList ?? []} placeholder="Select a Config" From 881b66949d87003d386bf1c9cdd8659c00b38cb0 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 29 May 2024 09:20:57 -0500 Subject: [PATCH 6/6] code cleanup --- .../manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx index 0795937e8f3..3075ecac946 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx @@ -68,7 +68,6 @@ export const ConfigSelect = React.memo((props: Props) => { : { label: '', value: -1 } } disableClearable - fullWidth id={name} isOptionEqualToValue={(option, value) => option.value === value.value} label="Config"