fix: [DI-27818] - Updated preferences logic to clear child filter preference values (#13066)

* fix: [DI-27818] - Updated preferences logic to clear child filter preference values

* fix: [Di-27818] - Added a map where filter key is different from preference key for that filter

* fix: [DI-27818] - Fixed failing test cases

* fix: [DI-27818] - Fixed failing test cases

* Added . changeset

Author: nikhagra-akamai

packages/manager/.changeset/pr-13066-fixed-1762843106064.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+ACLP Metric: update preference logic to clear children filters ([#13066](https://github.com/linode/manager/pull/13066))

packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts

@@ -295,6 +295,7 @@ export const getCustomSelectProperties = (
       ? CloudPulseSelectTypes.static
       : CloudPulseSelectTypes.dynamic,
     filterFn,
+    dashboardId: dashboard.id,
   };
 };
 

packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts

@@ -24,6 +24,7 @@ export const LINODE_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     {
       configuration: {
         filterKey: 'region',
+        children: ['resource_id'],
         filterType: 'string',
         isFilterable: false,
         isMetricsFilter: false,
@@ -72,6 +73,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     {
       configuration: {
         filterKey: 'engine',
+        children: ['region', 'resource_id'],
         filterType: 'string',
         isFilterable: false, // isFilterable -- this determines whethere you need to pass it metrics api
         isMetricsFilter: false, // if it is false, it will go as a part of filter params, else global filter
@@ -97,6 +99,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     {
       configuration: {
         dependency: ['engine'],
+        children: ['resource_id'],
         filterKey: 'region',
         filterType: 'string',
         isFilterable: false,
@@ -110,6 +113,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     {
       configuration: {
         dependency: ['region', 'engine'],
+        children: ['node_type'],
         filterKey: 'resource_id',
         filterType: 'string',
         isFilterable: true,
@@ -164,6 +168,7 @@ export const NODEBALANCER_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     {
       configuration: {
         filterKey: 'region',
+        children: ['resource_id'],
         filterType: 'string',
         isFilterable: false,
         isMetricsFilter: false,
@@ -229,6 +234,7 @@ export const FIREWALL_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     {
       configuration: {
         filterKey: 'resource_id',
+        children: [PARENT_ENTITY_REGION],
         filterType: 'string',
         isFilterable: true,
         isMetricsFilter: true,
@@ -333,6 +339,7 @@ export const FIREWALL_NODEBALANCER_CONFIG: Readonly<CloudPulseServiceTypeFilterM
       {
         configuration: {
           filterKey: RESOURCE_ID,
+          children: [PARENT_ENTITY_REGION, NODEBALANCER_ID],
           filterType: 'string',
           isFilterable: true,
           isMetricsFilter: true,
@@ -350,6 +357,7 @@ export const FIREWALL_NODEBALANCER_CONFIG: Readonly<CloudPulseServiceTypeFilterM
       {
         configuration: {
           dependency: [RESOURCE_ID],
+          children: [NODEBALANCER_ID],
           filterKey: PARENT_ENTITY_REGION,
           filterType: 'string',
           isFilterable: true,
@@ -395,6 +403,7 @@ export const OBJECTSTORAGE_CONFIG_BUCKET: Readonly<CloudPulseServiceTypeFilterMa
       {
         configuration: {
           filterKey: REGION,
+          children: [ENDPOINT, RESOURCE_ID],
           filterType: 'string',
           isFilterable: true,
           isMetricsFilter: true,
@@ -407,6 +416,7 @@ export const OBJECTSTORAGE_CONFIG_BUCKET: Readonly<CloudPulseServiceTypeFilterMa
       {
         configuration: {
           dependency: [REGION],
+          children: [RESOURCE_ID],
           filterKey: ENDPOINT,
           filterType: 'string',
           isFilterable: false,
@@ -443,6 +453,7 @@ export const BLOCKSTORAGE_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     {
       configuration: {
         filterKey: 'region',
+        children: ['resource_id'],
         filterType: 'string',
         isFilterable: false,
         isMetricsFilter: false,

packages/manager/src/features/CloudPulse/Utils/UserPreference.test.ts

@@ -7,10 +7,14 @@ const queryMocks = vi.hoisted(() => ({
   usePreferences: vi.fn(),
 }));
 
-vi.mock('@linode/queries', () => ({
-  useMutatePreferences: queryMocks.useMutatePreferences,
-  usePreferences: queryMocks.usePreferences,
-}));
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useMutatePreferences: queryMocks.useMutatePreferences,
+    usePreferences: queryMocks.usePreferences,
+  };
+});
 
 describe('usePreferencesToggle', () => {
   it('should initialize with undefined preference', () => {

packages/manager/src/features/CloudPulse/Utils/UserPreference.ts

@@ -2,6 +2,7 @@ import { useMutatePreferences, usePreferences } from '@linode/queries';
 import { useRef } from 'react';
 
 import { DASHBOARD_ID, WIDGETS } from './constants';
+import { FILTER_CONFIG } from './FilterConfig';
 
 import type { AclpConfig, AclpWidget } from '@linode/api-v4';
 import type { ManagerPreferences } from '@linode/utilities';
@@ -127,3 +128,49 @@ export const usePreferencesToggle = <K extends keyof ManagerPreferences>({
     toggle,
   };
 };
+
+const preferenceToFilterKeyMap: Record<string, string> = {
+  resource_id: 'resources',
+};
+
+export const clearChildPreferences = (
+  dashboardId: number,
+  parentFilterKey: string
+): Record<string, undefined> => {
+  const filters = FILTER_CONFIG.get(dashboardId)?.filters;
+
+  if (!filters) {
+    return {};
+  }
+  // Create a mapping of filterKey to its children for quick lookup
+  const filterToChildrenMap: Record<string, string[]> = filters.reduce<
+    Record<string, string[]>
+  >((previousValue, filter) => {
+    const { filterKey: key, children } = filter.configuration;
+    if (children) {
+      previousValue[key] = children;
+    }
+    return previousValue;
+  }, {});
+  const clearedPreferences = new Set<string>([parentFilterKey]);
+  const filterKeyQueue = [parentFilterKey];
+  const response: Record<string, undefined> = {};
+
+  while (filterKeyQueue.length > 0) {
+    const currentFilterKey = filterKeyQueue.shift();
+    if (currentFilterKey === undefined) {
+      continue;
+    }
+    const children = filterToChildrenMap[currentFilterKey];
+
+    // Clear all the children which are not already cleared
+    children?.forEach((childKey) => {
+      if (!clearedPreferences.has(childKey)) {
+        clearedPreferences.add(childKey);
+        filterKeyQueue.push(childKey);
+        response[preferenceToFilterKeyMap[childKey] ?? childKey] = undefined;
+      }
+    });
+  }
+  return response;
+};

packages/manager/src/features/CloudPulse/Utils/models.ts

@@ -114,6 +114,10 @@ export interface CloudPulseServiceTypeFiltersConfiguration {
    * This is an optional field, controls the associated entity type for the dashboard
    */
   associatedEntityType?: AssociatedEntityType;
+  /**
+   * This is an optional field, it is used to define the child filters for a parent filter
+   */
+  children?: string[];
 
   /**
    * This is an optional field, it is used to disable a certain filter, untill of the dependent filters are selected

packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx

@@ -54,6 +54,7 @@ describe('CloudPulseCustomSelect component tests', () => {
   it('should render a component successfully with required props static', () => {
     const screen = renderWithTheme(
       <CloudPulseCustomSelect
+        dashboardId={1}
         filterKey="testfilter"
         filterType="number"
         handleSelectionChange={vi.fn()}
@@ -75,6 +76,7 @@ describe('CloudPulseCustomSelect component tests', () => {
   it('should render a component successfully with required props static with multi select', () => {
     const screen = renderWithTheme(
       <CloudPulseCustomSelect
+        dashboardId={1}
         filterKey="testfilter"
         filterType="number"
         handleSelectionChange={vi.fn()}
@@ -107,6 +109,7 @@ describe('CloudPulseCustomSelect component tests', () => {
     const screen = renderWithTheme(
       <CloudPulseCustomSelect
         apiV4QueryKey={databaseQueries.engines}
+        dashboardId={1}
         filterKey="testfilter"
         filterType="number"
         handleSelectionChange={selectionChnage}
@@ -134,6 +137,7 @@ describe('CloudPulseCustomSelect component tests', () => {
     const screen = renderWithTheme(
       <CloudPulseCustomSelect
         apiV4QueryKey={databaseQueries.engines}
+        dashboardId={1}
         filterKey="testfilter"
         filterType="number"
         handleSelectionChange={selectionChnage}
@@ -168,6 +172,7 @@ describe('CloudPulseCustomSelect component tests', () => {
   it('should render a component successfully with static props and no default value with isOptional true', () => {
     renderWithTheme(
       <CloudPulseCustomSelect
+        dashboardId={1}
         filterKey="testfilter"
         filterType="number"
         handleSelectionChange={vi.fn()}

packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx

@@ -41,6 +41,11 @@ export interface CloudPulseCustomSelectProps {
    */
   clearDependentSelections?: string[];
 
+  /**
+   * The dashboard id where this filter is being used
+   */
+  dashboardId: number;
+
   /**
    * Last selected values from user preferences
    */
@@ -93,6 +98,9 @@ export interface CloudPulseCustomSelectProps {
    */
   isOptional?: boolean;
 
+  /**
+   * The label that needs to be displayed for the select component
+   */
   label: string;
 
   /**
@@ -110,6 +118,9 @@ export interface CloudPulseCustomSelectProps {
    */
   placeholder?: string;
 
+  /**
+   * The user preferences object to get the last selected values
+   */
   preferences?: AclpConfig;
 
   /**
@@ -146,6 +157,7 @@ export const CloudPulseCustomSelect = React.memo(
       options,
       placeholder,
       preferences,
+      dashboardId,
       savePreferences,
       type,
       isOptional,
@@ -203,6 +215,7 @@ export const CloudPulseCustomSelect = React.memo(
         maxSelections,
         savePreferences,
         value,
+        dashboardId,
       });
       setResource(
         Array.isArray(filteredValue)

packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelectUtils.test.ts

@@ -16,6 +16,7 @@ it('test handleCustomSelectionChange method for single selection', () => {
     filterKey: 'test',
     handleSelectionChange,
     value: selectedValue,
+    dashboardId: 1,
   });
 
   expect(result).toBeDefined();
@@ -36,6 +37,7 @@ it('test handleCustomSelectionChange method for multiple selection', () => {
     filterKey: 'test',
     handleSelectionChange,
     value: selectedValue,
+    dashboardId: 1,
   });
 
   expect(result).toBeDefined();

packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelectUtils.ts

@@ -1,3 +1,5 @@
+import { clearChildPreferences } from '../Utils/UserPreference';
+
 import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
 import type { CloudPulseServiceTypeFiltersOptions } from '../Utils/models';
 import type { AclpConfig, FilterValue } from '@linode/api-v4';
@@ -103,6 +105,11 @@ interface CloudPulseCustomSelectionChangeProps
    */
   clearSelections: string[];
 
+  /**
+   * Id of the selected dashboard
+   */
+  dashboardId: number;
+
   /**
    * The maximum number of selections that needs to be allowed
    */
@@ -194,6 +201,7 @@ export const handleCustomSelectionChange = (
     handleSelectionChange,
     maxSelections,
     savePreferences,
+    dashboardId,
   } = selectionChangeProps;
 
   let { value } = selectionChangeProps;
@@ -218,7 +226,10 @@ export const handleCustomSelectionChange = (
 
   // update the preferences
   if (savePreferences) {
-    updatedPreferenceData = { [filterKey]: result };
+    updatedPreferenceData = {
+      ...clearChildPreferences(dashboardId, filterKey),
+      [filterKey]: result,
+    };
   }
 
   // update the clear selections in the preference