upcoming: [DI-21322] - Retain Resource selections during expand / collapse of filter button

[venkymano-akamai]

Description 📝

Bug fix for retaining the resource selections during expand / collapse of filter button

Changes 🔄

1.Bug fix for retaining the resource selections during expand / collapse of filter button

Target release date 🗓️

10-10-2024

Preview 📷

Include a screenshot or screen recording of the change

💡 Use <video src="" /> tag when including recordings in table.

Before	After

How to test 🧪

1. Login as mock user
2. Navigate to monitor tab
3. Select a dashboard and in filters section select upto resources / cluster
4. Collapse and expand the filter button, the selected resources should be retained

Reproduction steps

Clone the linode/manager/develop branch and do the following steps

1. Login as mock user
2. Navigate to monitor tab
3. Select a dashboard and in filters section select upto resources / cluster
4. Collapse and expand the filter button, the selected resources will not be retained

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[jaalah-akamai]

Since this is a draft and you're looking for another alternative. I figured the issue might be with CloudPulseResourcesSelect.tsx itself. Here is my approach which seems to fix the issue and eliminate the way we're trying to micro-manage the renders:

export const CloudPulseResourcesSelect = ({
  defaultValue,
  disabled,
  handleResourcesSelection,
  placeholder = 'Select a Resource',
  region,
  resourceType,
  savePreferences,
  xFilter,
}: CloudPulseResourcesSelectProps) => {
  const { data: resources = [], isLoading } = useResourcesQuery(
    disabled !== undefined ? !disabled : Boolean(region && resourceType),
    resourceType,
    {},
    xFilter ?? { region }
  );

  const defaultResources = React.useMemo(() => {
    if (!defaultValue || !Array.isArray(defaultValue)) {
      return [];
    }
    const defaultIds = defaultValue.map(String);
    return resources.filter((resource) =>
      defaultIds.includes(String(resource.id))
    );
  }, [defaultValue, resources]);

  React.useEffect(() => {
    if (savePreferences && resources.length > 0) {
      handleResourcesSelection(defaultResources, true);
    }
  }, [savePreferences, resources, defaultResources, handleResourcesSelection]);

  return (
    <Autocomplete
      onChange={(_, resourceSelections) => {
        handleResourcesSelection(resourceSelections, savePreferences);
      }}
      textFieldProps={{
        InputProps: {
          sx: {
            maxHeight: '55px',
            overflow: 'auto',
            svg: { color: themes.light.color.grey3 },
          },
        },
        hideLabel: true,
      }}
      autoHighlight
      clearOnBlur
      data-testid="resource-select"
      defaultValue={defaultResources}
      disabled={disabled || isLoading}
      isOptionEqualToValue={(option, value) => option.id === value.id}
      label="Select a Resource"
      limitTags={2}
      multiple
      options={resources}
      placeholder={placeholder}
    />
  );
};

Since you know the overall feature better, let me know if that works.

[venkymano-akamai]

Since this is a draft and you're looking for another alternative. I figured the issue might be with CloudPulseResourcesSelect.tsx itself. Here is my approach which seems to fix the issue and eliminate the way we're trying to micro-manage the renders:

export const CloudPulseResourcesSelect = ({
  defaultValue,
  disabled,
  handleResourcesSelection,
  placeholder = 'Select a Resource',
  region,
  resourceType,
  savePreferences,
  xFilter,
}: CloudPulseResourcesSelectProps) => {
  const { data: resources = [], isLoading } = useResourcesQuery(
    disabled !== undefined ? !disabled : Boolean(region && resourceType),
    resourceType,
    {},
    xFilter ?? { region }
  );

  const defaultResources = React.useMemo(() => {
    if (!defaultValue || !Array.isArray(defaultValue)) {
      return [];
    }
    const defaultIds = defaultValue.map(String);
    return resources.filter((resource) =>
      defaultIds.includes(String(resource.id))
    );
  }, [defaultValue, resources]);

  React.useEffect(() => {
    if (savePreferences && resources.length > 0) {
      handleResourcesSelection(defaultResources, true);
    }
  }, [savePreferences, resources, defaultResources, handleResourcesSelection]);

  return (
    <Autocomplete
      onChange={(_, resourceSelections) => {
        handleResourcesSelection(resourceSelections, savePreferences);
      }}
      textFieldProps={{
        InputProps: {
          sx: {
            maxHeight: '55px',
            overflow: 'auto',
            svg: { color: themes.light.color.grey3 },
          },
        },
        hideLabel: true,
      }}
      autoHighlight
      clearOnBlur
      data-testid="resource-select"
      defaultValue={defaultResources}
      disabled={disabled || isLoading}
      isOptionEqualToValue={(option, value) => option.id === value.id}
      label="Select a Resource"
      limitTags={2}
      multiple
      options={resources}
      placeholder={placeholder}
    />
  );
};

Since you know the overall feature better, let me know if that works.

Hi @jaalah-akamai Thanks for the suggestion , if you see in your suggested approach we observed couple of issues

1. We don't have a state variable, we rely only on defaultValue.
2. Here, preferences is not working properly, for example, if i select a resource, go to another page like linodes, longview and comeback to monitor page, since it is re-rendering, No values will be shown in the dropdown, also defaultValue is set only once during the initialization of the component.

[bnussman-akamai]

This is unrelated to this PR, but there is no spacing between this button and the Engine field. This should probably be fixed at some point. Having no spacing looks like a UI bug to me

Screen.Recording.2024-10-14.at.3.15.31.PM.mov