upcoming: [DI-27663]: Resetting stale dimension filter values from the from (linode#13018)

* upcoming: [DI-27663] - Hook to remove invalidate dimension filter values from form

* renaming the hook

* removed unnecessary comment

* add changesets

* upcmong: [DI-27663] - Added unit tests to the cleanup hook

* fix tense in changeset

Author: santoshp210-akamai

packages/manager/.changeset/pr-13018-upcoming-features-1761563954707.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+ACLP-Alerting: Add hook to cleanup stale value from Alerting form  ([#13018](https://github.com/linode/manager/pull/13018))

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/FirewallDimensionFilterAutocomplete.test.tsx

@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { vi } from 'vitest';
@@ -242,4 +242,115 @@ describe('<FirewallDimensionFilterAutocomplete />', () => {
       await screen.findByRole('option', { name: 'us-east' })
     ).toBeVisible();
   });
+  it('cleans up invalid single value (string)', async () => {
+    queryMocks.useFirewallFetchOptions.mockReturnValue({
+      values: [{ label: 'Linode-1', value: '1' }],
+      isLoading: false,
+      isError: false,
+    });
+    const fieldOnChange = vi.fn();
+    const { rerender } = renderWithTheme(
+      <FirewallDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="invalid"
+        multiple={false}
+      />
+    );
+    // Simulate update to trigger effect
+    queryMocks.useFirewallFetchOptions.mockReturnValue({
+      values: [{ label: 'Linode-1', value: '1' }],
+      isLoading: false,
+      isError: false,
+    });
+    rerender(
+      <FirewallDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="invalid"
+        multiple={false}
+      />
+    );
+    await waitFor(() => {
+      expect(fieldOnChange).toHaveBeenCalledWith(null);
+    });
+  });
+
+  it('cleans up invalid multi value (comma-separated string)', async () => {
+    queryMocks.useFirewallFetchOptions.mockReturnValue({
+      values: [
+        { label: 'Linode-1', value: '1' },
+        { label: 'Linode-2', value: '2' },
+      ],
+      isLoading: false,
+      isError: false,
+    });
+    const fieldOnChange = vi.fn();
+    const { rerender } = renderWithTheme(
+      <FirewallDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="1,3,2"
+        multiple={true}
+      />
+    );
+    queryMocks.useFirewallFetchOptions.mockReturnValue({
+      values: [
+        { label: 'Linode-1', value: '1' },
+        { label: 'Linode-2', value: '2' },
+      ],
+      isLoading: false,
+      isError: false,
+    });
+    rerender(
+      <FirewallDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="1,3,2"
+        multiple={true}
+      />
+    );
+    await waitFor(() => {
+      expect(fieldOnChange).toHaveBeenCalledWith('1,2');
+    });
+  });
+
+  it('cleans up all invalid multi values (comma-separated string)', async () => {
+    queryMocks.useFirewallFetchOptions.mockReturnValue({
+      values: [
+        { label: 'Linode-1', value: '1' },
+        { label: 'Linode-2', value: '2' },
+      ],
+      isLoading: false,
+      isError: false,
+    });
+    const fieldOnChange = vi.fn();
+    const { rerender } = renderWithTheme(
+      <FirewallDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="3,4"
+        multiple={true}
+      />
+    );
+    queryMocks.useFirewallFetchOptions.mockReturnValue({
+      values: [
+        { label: 'Linode-1', value: '1' },
+        { label: 'Linode-2', value: '2' },
+      ],
+      isLoading: false,
+      isError: false,
+    });
+    rerender(
+      <FirewallDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="3,4"
+        multiple={true}
+      />
+    );
+    await waitFor(() => {
+      expect(fieldOnChange).toHaveBeenCalledWith('');
+    });
+  });
 });

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/FirewallDimensionFilterAutocomplete.tsx

@@ -2,6 +2,7 @@ import { useRegionsQuery } from '@linode/queries';
 import { Autocomplete } from '@linode/ui';
 import React from 'react';
 
+import { useCleanupStaleValues } from './useCleanupStaleValues';
 import { useFirewallFetchOptions } from './useFirewallFetchOptions';
 import { handleValueChange, resolveSelectedValues } from './utils';
 
@@ -39,6 +40,15 @@ export const FirewallDimensionFilterAutocomplete = (
     type,
     scope,
   });
+
+  useCleanupStaleValues({
+    options: values,
+    fieldValue,
+    multiple,
+    onChange: fieldOnChange,
+    isLoading,
+  });
+
   return (
     <Autocomplete
       data-qa-dimension-filter={`${name}-value`}

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ObjectStorageDimensionFilterAutocomplete.test.tsx

@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { vi } from 'vitest';
@@ -220,4 +220,49 @@ describe('<ObjectStorageDimensionFilterAutocomplete />', () => {
       'us-east-1.linodeobjects.com,us-west-1.linodeobjects.com'
     );
   });
+  it('field cleanup removes invalid values', async () => {
+    queryMocks.useObjectStorageFetchOptions.mockReturnValue({
+      values: [
+        {
+          label: 'us-east-1.linodeobjects.com',
+          value: 'us-east-1.linodeobjects.com',
+        },
+      ],
+      isLoading: false,
+      isError: false,
+    });
+
+    const fieldOnChange = vi.fn();
+
+    const { rerender } = renderWithTheme(
+      <ObjectStorageDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="invalid-endpoint.linodeobjects.com"
+      />
+    );
+
+    queryMocks.useObjectStorageFetchOptions.mockReturnValue({
+      values: [
+        {
+          label: 'us-west-1.linodeobjects.com',
+          value: 'us-west-1.linodeobjects.com',
+        },
+      ],
+      isLoading: false,
+      isError: false,
+    });
+    // Trigger the effect by rerendering with the same props
+    rerender(
+      <ObjectStorageDimensionFilterAutocomplete
+        {...defaultProps}
+        fieldOnChange={fieldOnChange}
+        fieldValue="invalid-endpoint.linodeobjects.com"
+      />
+    );
+    // fieldOnChange should be called to clean up the invalid value
+    await waitFor(() => {
+      expect(fieldOnChange).toHaveBeenCalledWith(null);
+    });
+  });
 });

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ObjectStorageDimensionFilterAutocomplete.tsx

@@ -2,6 +2,7 @@ import { useRegionsQuery } from '@linode/queries';
 import { Autocomplete } from '@linode/ui';
 import React from 'react';
 
+import { useCleanupStaleValues } from './useCleanupStaleValues';
 import { useObjectStorageFetchOptions } from './useObjectStorageFetchOptions';
 import { handleValueChange, resolveSelectedValues } from './utils';
 
@@ -41,6 +42,14 @@ export const ObjectStorageDimensionFilterAutocomplete = (
     serviceType,
   });
 
+  useCleanupStaleValues({
+    options: values,
+    fieldValue,
+    multiple,
+    onChange: fieldOnChange,
+    isLoading,
+  });
+
   return (
     <Autocomplete
       data-qa-dimension-filter={`${name}-value`}