Skip to content

refactor: [M3-9647] - Reduce api requests made for every keystroke in Volume attach drawer #12052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 21, 2025
Merged

refactor: [M3-9647] - Reduce api requests made for every keystroke in Volume attach drawer #12052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
112597b
refactor: [M3-9647] - Reduce api requests made for every keystroke in…
harsh-akamai Apr 16, 2025
a8746fe
Merge branch 'develop' of https://github.com/linode/manager into M3-9…
harsh-akamai Apr 16, 2025
5d9c009
Added changeset: Reduce api requests made for every keystroke in Volu…
harsh-akamai Apr 17, 2025
b552782
feedback @bnussman-akamai
harsh-akamai May 5, 2025
7e6fb40
Merge branch 'develop' of https://github.com/linode/manager into M3-9…
harsh-akamai May 5, 2025
64085cd
added useVolumeQuery() for the searched volume
harsh-akamai May 14, 2025
033f5bf
Merge branch 'develop' into M3-9647-reduce-api-calls-for-linode-volume
harsh-akamai May 14, 2025
3403733
add useDebouncedValue hook
harsh-akamai May 16, 2025
d6a6597
Merge branch 'M3-9647-reduce-api-calls-for-linode-volume' of https://…
harsh-akamai May 16, 2025
761c274
Merge branch 'develop' into M3-9647-reduce-api-calls-for-linode-volume
harsh-akamai May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-12052-tech-stories-1744889150021.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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))
5 changes: 4 additions & 1 deletion packages/manager/src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeAttachForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enabled the useVolumeQuery only when Volume_id is set and not -1(default value)


const linodeRequiresClientLibraryUpdate =
volume?.encryption === 'enabled' &&
Expand Down
33 changes: 22 additions & 11 deletions packages/manager/src/features/Volumes/Drawers/VolumeDrawer/VolumeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useInfiniteVolumesQuery } from '@linode/queries';
import { useInfiniteVolumesQuery, useVolumeQuery } from '@linode/queries';
import { Autocomplete } from '@linode/ui';
import { useDebouncedValue } from '@linode/utilities';
import * as React from 'react';

interface Props {
Expand All @@ -17,11 +18,13 @@ export const VolumeSelect = (props: Props) => {

const [inputValue, setInputValue] = React.useState<string>('');

const searchFilter = inputValue
const debouncedInputValue = useDebouncedValue(inputValue);

const searchFilter = debouncedInputValue
? {
'+or': [
{ label: { '+contains': inputValue } },
{ tags: { '+contains': inputValue } },
{ label: { '+contains': debouncedInputValue } },
{ tags: { '+contains': debouncedInputValue } },
],
}
: {};
Expand All @@ -35,16 +38,24 @@ export const VolumeSelect = (props: Props) => {
'+order_by': 'label',
});

const options = data?.pages
.flatMap((page) => page.data)
.map(({ id, label }) => ({ id, label }));
const options = data?.pages.flatMap((page) => page.data);

const { data: volume, isLoading: isLoadingSelected } = useVolumeQuery(
value,
value > 0
);

if (value && volume && !options?.some((item) => item.id === volume.id)) {
options?.push(volume);
}

const selectedVolume = options?.find((option) => option.id === value) ?? null;

return (
<Autocomplete
disabled={disabled}
errorText={error}
filterOptions={(options) => options}
helperText={
region && "Only volumes in this Linode's region are attachable."
}
Expand All @@ -64,13 +75,13 @@ export const VolumeSelect = (props: Props) => {
}
},
}}
loading={isLoading}
loading={isLoading || isLoadingSelected}
onBlur={onBlur}
onChange={(event, value) => {
onChange(value?.id ?? -1);
onChange={(_, value) => {
setInputValue('');
onChange(value?.id ?? -1);
}}
onInputChange={(event, value, reason) => {
onInputChange={(_, value, reason) => {
if (reason === 'input') {
setInputValue(value);
} else {
Expand Down