upcoming: [DI-27104] - Added GlobalFilter and WidgetFilter group by renderer components

packages/manager/.changeset/pr-12865-upcoming-features-1757611405994.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+ACLP: add `GlobalFilterGroupByRendererComponent` and `WidgetFilterGroupByRendererComponent` ([#12865](https://github.com/linode/manager/pull/12865))

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

@@ -12,6 +12,8 @@ import * as React from 'react';
 
 import NullComponent from 'src/components/NullComponent';
 
+import { GROUP_BY_SELECTION_LIMIT } from './constants';
+
 import type { CloudPulseServiceType } from '@linode/api-v4';
 
 export interface GroupByDrawerProps {
@@ -57,8 +59,6 @@ export interface GroupByOption {
   label: string;
   value: string;
 }
-
-const groupBySelectionLimit = 3;
 export const CloudPulseGroupByDrawer = React.memo(
   (props: GroupByDrawerProps) => {
     const {
@@ -76,13 +76,13 @@ export const CloudPulseGroupByDrawer = React.memo(
     const [selectedValue, setSelectedValue] = React.useState<GroupByOption[]>(
       defaultValue.slice(
         0,
-        Math.min(defaultValue.length, groupBySelectionLimit)
+        Math.min(defaultValue.length ?? 0, GROUP_BY_SELECTION_LIMIT)
       )
     );
     const previousValueRef = React.useRef<GroupByOption[]>(
       defaultValue.slice(
         0,
-        Math.min(defaultValue.length, groupBySelectionLimit)
+        Math.min(defaultValue.length, GROUP_BY_SELECTION_LIMIT)
       )
     );
 
@@ -94,7 +94,7 @@ export const CloudPulseGroupByDrawer = React.memo(
     React.useEffect(() => {
       const value = defaultValue.slice(
         0,
-        Math.min(defaultValue.length, groupBySelectionLimit)
+        Math.min(defaultValue.length ?? 0, GROUP_BY_SELECTION_LIMIT)
       );
       onApply(value);
       setSelectedValue(value);
@@ -116,10 +116,10 @@ export const CloudPulseGroupByDrawer = React.memo(
       const isSelected = props['aria-selected'] === true;
       const ListItem = isSelectAllORDeselectAllOption ? StyledListItem : 'li';
       const isDisabled =
-        selectedValue.length >= groupBySelectionLimit && !isSelected;
+        selectedValue.length >= GROUP_BY_SELECTION_LIMIT && !isSelected;
       const isHidden =
         isSelectAllORDeselectAllOption &&
-        options.length > groupBySelectionLimit;
+        options.length > GROUP_BY_SELECTION_LIMIT;
 
       if (isHidden) {
         return <NullComponent />;
@@ -138,7 +138,7 @@ export const CloudPulseGroupByDrawer = React.memo(
 
     return (
       <Drawer onClose={(_) => handleClose()} open={open} title={title}>
-        <Stack gap={4}>
+        <Stack gap={3}>
           <Typography
             component="p"
             sx={(theme) => ({ marginTop: -1, font: theme.font.normal })}
@@ -151,19 +151,19 @@ export const CloudPulseGroupByDrawer = React.memo(
             data-testid="dimension-select"
             helperText={
               options.length > 3
-                ? `You can select up to ${groupBySelectionLimit} dimensions.`
+                ? `You can select up to ${GROUP_BY_SELECTION_LIMIT} dimensions.`
                 : undefined
             }
             isOptionEqualToValue={(option, value) =>
               option.value === value.value
             }
-            label="Select Dimensions"
+            label="Dimensions"
             multiple
             onChange={(_event, value) => {
               setSelectedValue(value);
             }}
             options={options}
-            placeholder="Select Dimensions"
+            placeholder={selectedValue.length > 0 ? '' : 'Select Dimensions'}
             renderOption={renderOptions}
             value={selectedValue}
           />

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

@@ -0,0 +1,141 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { dashboardFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { GlobalFilterGroupByRenderer } from './GlobalFilterGroupByRenderer';
+
+import type { GroupByOption } from './CloudPulseGroupByDrawer';
+
+const handleChange = vi.fn();
+const dashboard = dashboardFactory.build();
+
+const mocks = vi.hoisted(() => ({
+  useGlobalDimensions: vi.fn(),
+}));
+
+const mockGroupByOptions: GroupByOption[] = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+vi.mock('./utils', async () => {
+  const actual = await vi.importActual('./utils');
+
+  return {
+    ...actual,
+    useGlobalDimensions: mocks.useGlobalDimensions,
+  };
+});
+
+describe('Global Group By Renderer Component', () => {
+  it('should render group by icon in disabled mode on undefined dashboard', () => {
+    mocks.useGlobalDimensions.mockReturnValue({
+      isLoading: true,
+      options: [],
+      defaultValue: [],
+    });
+    renderWithTheme(
+      <GlobalFilterGroupByRenderer
+        handleChange={handleChange}
+        selectedDashboard={undefined}
+      />
+    );
+
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeDisabled();
+  });
+
+  it('should render group by icon in disabled mode on data loading', () => {
+    mocks.useGlobalDimensions.mockReturnValue({
+      isLoading: true,
+      options: [],
+      defaultValue: [],
+    });
+    renderWithTheme(
+      <GlobalFilterGroupByRenderer
+        handleChange={handleChange}
+        selectedDashboard={dashboard}
+      />
+    );
+
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeDisabled();
+  });
+
+  it('Should render group by icon as enabled and open drawer on click', async () => {
+    mocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
+    renderWithTheme(
+      <GlobalFilterGroupByRenderer
+        handleChange={handleChange}
+        selectedDashboard={dashboard}
+      />
+    );
+
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
+
+    await groupByIcon.click();
+
+    const drawer = screen.getByTestId('drawer');
+    expect(drawer).toBeInTheDocument();
+
+    expect(handleChange).toHaveBeenCalledWith([]);
+  });
+
+  it('Should not open drawer but group by icon should be enabled', async () => {
+    mocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
+    renderWithTheme(
+      <GlobalFilterGroupByRenderer
+        handleChange={handleChange}
+        selectedDashboard={dashboard}
+      />
+    );
+
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
+
+    const drawer = screen.queryByTestId('drawer');
+    expect(drawer).not.toBeInTheDocument();
+  });
+
+  it('Should open drawer on group by icon click and have default selected values', async () => {
+    const defaultValue = [mockGroupByOptions[0]];
+
+    mocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue,
+    });
+    renderWithTheme(
+      <GlobalFilterGroupByRenderer
+        handleChange={handleChange}
+        selectedDashboard={dashboard}
+      />
+    );
+
+    const groupByIcon = screen.getByTestId('group-by');
+
+    await groupByIcon.click();
+
+    const drawer = screen.getByTestId('drawer');
+    expect(drawer).toBeInTheDocument();
+
+    expect(handleChange).toHaveBeenCalledWith([defaultValue[0].value]);
+
+    defaultValue.forEach((value) => {
+      const option = screen.getByRole('button', { name: value.label });
+      expect(option).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,90 @@
+import { IconButton } from '@linode/ui';
+import React from 'react';
+
+import GroupByIcon from 'src/assets/icons/group-by.svg';
+
+import { CloudPulseTooltip } from '../shared/CloudPulseTooltip';
+import { CloudPulseGroupByDrawer } from './CloudPulseGroupByDrawer';
+import { GLOBAL_GROUP_BY_MESSAGE } from './constants';
+import { useGlobalDimensions } from './utils';
+
+import type { GroupByOption } from './CloudPulseGroupByDrawer';
+import type { Dashboard } from '@linode/api-v4';
+
+interface GlobalFilterGroupByRendererProps {
+  /**
+   * Callback to handle the selected values
+   */
+  handleChange: (selectedValue: string[]) => void;
+  /**
+   * Currently selected dashboard
+   */
+  selectedDashboard?: Dashboard;
+}
+
+export const GlobalFilterGroupByRenderer = (
+  props: GlobalFilterGroupByRendererProps
+) => {
+  const { selectedDashboard, handleChange } = props;
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  const { options, defaultValue, isLoading } = useGlobalDimensions(
+    selectedDashboard?.id,
+    selectedDashboard?.service_type
+  );
+
+  const [open, setOpen] = React.useState(false);
+
+  const onApply = React.useCallback(
+    (selectedValue: GroupByOption[]) => {
+      if (selectedValue.length === 0) {
+        setIsSelected(false);
+      } else {
+        setIsSelected(true);
+      }
+      handleChange(selectedValue.map(({ value }) => value));
+      setOpen(false);
+    },
+    [handleChange]
+  );
+
+  const onCancel = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+  return (
+    <>
+      <CloudPulseTooltip placement="bottom-end" title="Group By">
+        <IconButton
+          aria-label="Group By Dashboard Metrics"
+          color="inherit"
+          data-qa-selected={isSelected}
+          data-testid="group-by"
+          disabled={!selectedDashboard || isLoading}
+          onClick={() => setOpen(true)}
+          size="small"
+          sx={(theme) => ({
+            marginBlockEnd: 'auto',
+            marginTop: { md: theme.spacingFunction(28) },
+            color: isSelected ? theme.color.buttonPrimaryHover : 'inherit',
+          })}
+        >
+          <GroupByIcon height="24px" width="24px" />
+        </IconButton>
+      </CloudPulseTooltip>
+
+      {!isLoading && selectedDashboard && (
+        <CloudPulseGroupByDrawer
+          defaultValue={defaultValue}
+          message={GLOBAL_GROUP_BY_MESSAGE}
+          onApply={onApply}
+          onCancel={onCancel}
+          open={open}
+          options={options}
+          serviceType={selectedDashboard.service_type}
+          subtitle={selectedDashboard.label}
+          title="Global Group By"
+        />
+      )}
+    </>
+  );
+};