diff --git a/packages/manager/.changeset/pr-12052-tech-stories-1744889150021.md b/packages/manager/.changeset/pr-12052-tech-stories-1744889150021.md new file mode 100644 index 00000000000..06a423492e9 --- /dev/null +++ b/packages/manager/.changeset/pr-12052-tech-stories-1744889150021.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +Reduce api requests made for every keystroke in Volume attach drawer ([#12052](https://github.com/linode/manager/pull/12052)) diff --git a/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeAttachForm.tsx b/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeAttachForm.tsx index 982deaf58f7..e9c76128f46 100644 --- a/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeAttachForm.tsx +++ b/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeAttachForm.tsx @@ -97,7 +97,10 @@ export const LinodeVolumeAttachForm = (props: Props) => { validationSchema: AttachVolumeValidationSchema, }); - const { data: volume } = useVolumeQuery(values.volume_id); + const { data: volume } = useVolumeQuery( + values.volume_id, + values.volume_id !== -1 + ); const linodeRequiresClientLibraryUpdate = volume?.encryption === 'enabled' && @@ -112,10 +115,10 @@ export const LinodeVolumeAttachForm = (props: Props) => {
{isReadOnly && ( )} diff --git a/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/VolumeSelect.tsx b/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/VolumeSelect.tsx index e6196936703..199c9d16fce 100644 --- a/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/VolumeSelect.tsx +++ b/packages/manager/src/features/Volumes/Drawers/VolumeDrawer/VolumeSelect.tsx @@ -16,28 +16,13 @@ export const VolumeSelect = (props: Props) => { const { disabled, error, name, onBlur, onChange, region, value } = props; const [inputValue, setInputValue] = React.useState(''); - - const searchFilter = inputValue - ? { - '+or': [ - { label: { '+contains': inputValue } }, - { tags: { '+contains': inputValue } }, - ], - } - : {}; - - const { - data, - fetchNextPage, - hasNextPage, - isLoading, - } = useInfiniteVolumesQuery({ - ...searchFilter, - ...(region ? { region } : {}), - '+order': 'asc', - // linode_id: null, <- if the API let us, we would do this - '+order_by': 'label', - }); + const { data, fetchNextPage, hasNextPage, isLoading } = + useInfiniteVolumesQuery({ + ...(region ? { region } : {}), + '+order': 'asc', + // linode_id: null, <- if the API let us, we would do this + '+order_by': 'label', + }); const options = data?.pages .flatMap((page) => page.data) @@ -47,6 +32,15 @@ export const VolumeSelect = (props: Props) => { return ( option.id === selectedVolume?.id} + label="Volume" ListboxProps={{ onScroll: (event: React.SyntheticEvent) => { const listboxNode = event.currentTarget; @@ -59,9 +53,8 @@ export const VolumeSelect = (props: Props) => { } }, }} - helperText={ - region && "Only volumes in this Linode's region are attachable." - } + loading={isLoading} + onBlur={onBlur} onChange={(event, value) => { onChange(value?.id ?? -1); setInputValue(''); @@ -73,14 +66,6 @@ export const VolumeSelect = (props: Props) => { setInputValue(''); } }} - disabled={disabled} - errorText={error} - id={name} - inputValue={selectedVolume ? selectedVolume.label : inputValue} - isOptionEqualToValue={(option) => option.id === selectedVolume?.id} - label="Volume" - loading={isLoading} - onBlur={onBlur} options={options ?? []} placeholder="Select a Volume" value={selectedVolume}