upcoming: [DPS-41443] - Metrics widget dimension filter and Group By Icons disabled tool tips

packages/manager/.changeset/pr-13496-upcoming-features-1773424202209.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+ACLP-Metrics updated Tooltip messages for Group-by, DimensionFilter icons when in disabled state for the Widgets ([#13496](https://github.com/linode/manager/pull/13496))

packages/manager/.changeset/pr-13496-upcoming-features-1774327007124.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add alternate tool tip texts for group-by, dimension filter widget icons when disabled in ACLP-Metrics ([#13496](https://github.com/linode/manager/pull/13496))

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx

@@ -139,9 +139,16 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       error: '',
       isLoading: false,
     });
+    queryMocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
     renderWithTheme(
       <CloudPulseDashboardWithFilters resource={1} serviceType="nodebalancer" />
     );
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
     const presetButton = screen.getByTestId(PRESET_BUTTON_ID);
     const portsSelect = screen.getByPlaceholderText('e.g., 80,443,3000');
     expect(presetButton).toBeInTheDocument();
@@ -157,9 +164,18 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       error: '',
       isLoading: false,
     });
+    queryMocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
     renderWithTheme(
       <CloudPulseDashboardWithFilters resource={1} serviceType="firewall" />
     );
+
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
+
     const presetButton = screen.getByTestId(PRESET_BUTTON_ID);
     expect(presetButton).toBeInTheDocument();
     expect(screen.getByPlaceholderText('Select a Linode Region')).toBeVisible();
@@ -173,14 +189,20 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       error: '',
       isLoading: false,
     });
-
+    queryMocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
     renderWithTheme(
       <CloudPulseDashboardWithFilters
         region="test"
         resource="test"
         serviceType="objectstorage"
       />
     );
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
 
     const presetButton = screen.getByTestId(PRESET_BUTTON_ID);
     expect(presetButton).toBeInTheDocument();
@@ -192,6 +214,11 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       error: '',
       isLoading: false,
     });
+    queryMocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
     renderWithTheme(
       <CloudPulseDashboardWithFilters
         resource={1}
@@ -208,11 +235,18 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       error: '',
       isLoading: false,
     });
-
+    queryMocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
     renderWithTheme(
       <CloudPulseDashboardWithFilters resource={1} serviceType="blockstorage" />
     );
 
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
+
     const presetButton = screen.getByTestId(PRESET_BUTTON_ID);
     expect(presetButton).toBeInTheDocument();
   });
@@ -237,10 +271,18 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       isLoading: false,
     });
 
+    queryMocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
     renderWithTheme(
       <CloudPulseDashboardWithFilters resource={1} serviceType="firewall" />
     );
 
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
+
     const presetButton = screen.getByTestId(PRESET_BUTTON_ID);
     expect(presetButton).toBeInTheDocument();
     await userEvent.click(screen.getByPlaceholderText('Select a Dashboard'));

packages/manager/src/features/CloudPulse/GroupBy/GlobalFilterGroupByRenderer.test.tsx

@@ -138,4 +138,26 @@ describe('Global Group By Renderer Component', () => {
       expect(option).toBeInTheDocument();
     });
   });
+  it('Should disable the group by icon and show alternate tooltip text when options are empty', async () => {
+    const defaultValue = [mockGroupByOptions[0]];
+
+    mocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: [],
+      defaultValue,
+    });
+    renderWithTheme(
+      <GlobalFilterGroupByRenderer
+        handleChange={handleChange}
+        selectedDashboard={dashboard}
+      />
+    );
+
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeDisabled();
+
+    expect(
+      screen.getByTestId('No dimensions available for grouping')
+    ).toBeVisible();
+  });
 });

packages/manager/src/features/CloudPulse/GroupBy/GlobalFilterGroupByRenderer.tsx

@@ -73,13 +73,18 @@ export const GlobalFilterGroupByRenderer = (
   }, []);
   return (
     <>
-      <CloudPulseTooltip placement="bottom-end" title="Group By">
+      <CloudPulseTooltip
+        placement="bottom-end"
+        title={
+          !options.length ? 'No dimensions available for grouping' : 'Group By'
+        }
+      >
         <IconButton
           aria-label="Group By Dashboard Metrics"
           color="inherit"
           data-qa-selected={isSelected}
           data-testid="group-by"
-          disabled={!selectedDashboard || isLoading}
+          disabled={!options.length || !selectedDashboard || isLoading}
           onClick={() => setOpen(true)}
           size="small"
           sx={(theme) => ({

packages/manager/src/features/CloudPulse/GroupBy/WidgetFilterGroupByRenderer.test.tsx

@@ -56,7 +56,9 @@ describe('Widget Group By Renderer', () => {
     const groupByIcon = screen.getByTestId('widget-group-by');
     expect(groupByIcon).toBeInTheDocument();
     expect(groupByIcon).toBeDisabled();
-
+    expect(
+      screen.getByTestId('No dimensions available for grouping')
+    ).toBeVisible();
     await groupByIcon.click();
 
     const drawer = screen.queryByTestId('drawer');

packages/manager/src/features/CloudPulse/GroupBy/WidgetFilterGroupByRenderer.tsx

@@ -96,7 +96,10 @@ export const WidgetFilterGroupByRenderer = (
 
   return (
     <>
-      <CloudPulseTooltip placement="bottom-end" title="Group By">
+      <CloudPulseTooltip
+        placement="bottom-end"
+        title={isDisabled ? 'No dimensions available for grouping' : 'Group By'}
+      >
         <IconButton
           aria-label="Group By Dashboard Metrics"
           color="inherit"

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

@@ -30,6 +30,21 @@ it('test getDashboardProperties method', () => {
   expect(result.region).toEqual('us-east');
 });
 
+it('test getDashboardProperties method with selected groupBy values', () => {
+  const result = getDashboardProperties({
+    dashboardObj: mockDashboard,
+    filterValue: {
+      region: 'us-east',
+    },
+    resource: 1,
+    groupBy: ['entity_id', 'region'],
+    region: 'us-east',
+  });
+
+  expect(result).toBeDefined();
+  expect(result.groupBy).toEqual(['entity_id', 'region']);
+});
+
 it('test checkMandatoryFiltersSelected method for time duration and resource', () => {
   let result = checkMandatoryFiltersSelected({
     dashboardObj: mockDashboard,

packages/manager/src/features/CloudPulse/Widget/components/DimensionFilters/CloudPulseDimensionFiltersSelect.test.tsx

@@ -53,4 +53,26 @@ describe('Tests for CloudPulse Dimension Filters Select', () => {
     const cancelButton = screen.getByText('Cancel');
     expect(cancelButton).toBeInTheDocument();
   });
+  it('renders the CloudPulse Dimension Filter icon with disabled tool tip text when no dimension options are passed', async () => {
+    const handleSubmit = vi.fn();
+    renderWithTheme(
+      <CloudPulseDimensionFiltersSelect
+        dashboardId={1}
+        dimensionOptions={[]}
+        drawerLabel="Test Metric"
+        handleSelectionChange={handleSubmit}
+        selectedDimensions={[]}
+        serviceType="linode"
+      />
+    );
+
+    // Verify the tooltip text is being rendered and the icon button is disabled
+    const tooltipElement = screen.getByTestId(
+      'No dimensions available for filtering'
+    );
+    expect(tooltipElement).toBeVisible();
+
+    const iconButton = screen.getByTestId('dimension-filter');
+    expect(iconButton).toBeDisabled();
+  });
 });

packages/manager/src/features/CloudPulse/Widget/components/DimensionFilters/CloudPulseDimensionFiltersSelect.tsx

@@ -75,15 +75,23 @@ export const CloudPulseDimensionFiltersSelect = React.memo(
 
     const selectionCount = selectedDimensions?.length ?? 0;
 
+    const isDisabled = !dimensionOptions.length;
     return (
       <>
-        <CloudPulseTooltip placement="bottom-end" title="Dimension Filters">
+        <CloudPulseTooltip
+          placement="bottom-end"
+          title={
+            isDisabled
+              ? 'No dimensions available for filtering'
+              : 'Dimension Filters'
+          }
+        >
           <IconButton
             aria-label={`Widget Dimension Filter ${drawerLabel}`}
             color="inherit"
             data-qa-selected={selectionCount}
             data-testid="dimension-filter"
-            disabled={!dimensionOptions.length}
+            disabled={isDisabled}
             onClick={() => setOpen(true)}
             size="small"
             sx={(theme) => ({