upcoming: [DI-28504] - Add tooltip for clusters filter in lke and fix preferences bug in nodebalancers filter (#13141)

* upcoming: [DI-28504] - Add tooltip for clusters filter in lke

* upcoming: [DI-28504] - Update test case

* upcoming: [DI-28504] - Fix nodebalancers preferences bug

* upcoming: [DI-28504] - Remove typo

* upcoming: [DI-28504] - Add changeset

---------

Co-authored-by: venkatmano-akamai <[email protected]>

Author: ankita-akamai

packages/manager/.changeset/pr-13141-upcoming-features-1764311100780.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+CloudPulse-Metrics: Add tooltip for clusters filter in lke and fix preferences bug for nodebalancers filter in firewall-nodebalancer dashboard ([#13141](https://github.com/linode/manager/pull/13141))

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

@@ -91,6 +91,8 @@ export const INTERFACE_IDS_LIMIT_ERROR_MESSAGE =
 
 export const INTERFACE_IDS_PLACEHOLDER_TEXT = 'e.g., 1234,5678';
 
+export const CLUSTERS_TOOLTIP_TEXT = 'It includes enterprise Clusters only.';
+
 export const NO_REGION_MESSAGE: Record<number, string> = {
   1: 'No database clusters configured in any regions.',
   2: 'No Linodes configured in any regions.',

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

@@ -138,7 +138,11 @@ export const CloudPulseFirewallNodebalancersSelect = React.memo(
         return;
       }
       // To save default values, go through side effects
-      if (!getNodebalancersList || !savePreferences || selectedNodebalancers) {
+      if (
+        !getNodebalancersList.length ||
+        !savePreferences ||
+        selectedNodebalancers
+      ) {
         if (selectedNodebalancers) {
           setSelectedNodebalancers([]);
           handleNodebalancersSelection([]);

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
+import { CLUSTERS_TOOLTIP_TEXT } from '../Utils/constants';
 import { CloudPulseResourcesSelect } from './CloudPulseResourcesSelect';
 
 const queryMocks = vi.hoisted(() => ({
@@ -44,6 +45,21 @@ describe('CloudPulseResourcesSelect component tests', () => {
     expect(screen.getByPlaceholderText('Select Resources')).toBeInTheDocument();
   });
 
+  it('renders with the tooltip-text for lke service', async () => {
+    renderWithTheme(
+      <CloudPulseResourcesSelect
+        handleResourcesSelection={mockResourceHandler}
+        label="Clusters"
+        region={'us-east'}
+        resourceType={'lke'}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: CLUSTERS_TOOLTIP_TEXT })
+    ).toBeVisible();
+  });
+
   it('should render disabled component if the props are undefined or regions and service type does not have any resources', () => {
     renderWithTheme(
       <CloudPulseResourcesSelect

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { useFlags } from 'src/hooks/useFlags';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 
-import { RESOURCE_FILTER_MAP } from '../Utils/constants';
+import { CLUSTERS_TOOLTIP_TEXT, RESOURCE_FILTER_MAP } from '../Utils/constants';
 import { filterUsingDependentFilters } from '../Utils/FilterBuilder';
 import { deepEqual } from '../Utils/utils';
 import { CLOUD_PULSE_TEXT_FIELD_PROPS } from './styles';
@@ -69,6 +69,8 @@ export const CloudPulseResourcesSelect = React.memo(
     } = props;
 
     const flags = useFlags();
+    const tooltipText =
+      resourceType === 'lke' ? CLUSTERS_TOOLTIP_TEXT : undefined;
 
     const {
       data: resources,
@@ -206,7 +208,10 @@ export const CloudPulseResourcesSelect = React.memo(
             </ListItem>
           );
         }}
-        textFieldProps={{ ...CLOUD_PULSE_TEXT_FIELD_PROPS }}
+        textFieldProps={{
+          ...CLOUD_PULSE_TEXT_FIELD_PROPS,
+          labelTooltipText: tooltipText,
+        }}
         value={selectedResources ?? []}
       />
     );