upcoming: [DI-23081] - Add filtering, pagination and sorting for resources section in CloudPulse alerts show details page

packages/manager/.changeset/pr-11541-upcoming-features-1737477406490.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add filtering, pagination and sorting for resources section in CloudPulse alerts show details page ([#11541](https://github.com/linode/manager/pull/11541))

packages/manager/src/features/CloudPulse/Alerts/AlertsResources/AlertsResources.test.tsx

@@ -1,3 +1,5 @@
+import { waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { linodeFactory, regionFactory } from 'src/factories';
@@ -22,11 +24,21 @@ const queryMocks = vi.hoisted(() => ({
 
 const regions = regionFactory.buildList(3);
 
-const linodes = linodeFactory.buildList(3);
+const linodes = linodeFactory.buildList(3).map((value, index) => {
+  return {
+    ...value,
+    region: regions[index].id, // lets assign the regions from region factory to linode instances here
+  };
+});
 
 const searchPlaceholder = 'Search for a Region or Resource';
 const regionPlaceholder = 'Select Regions';
 
+beforeAll(() => {
+  window.scrollTo = vi.fn(); // mock for scrollTo and scroll
+  window.scroll = vi.fn();
+});
+
 beforeEach(() => {
   queryMocks.useResourcesQuery.mockReturnValue({
     data: linodes,
@@ -75,4 +87,90 @@ describe('AlertResources component tests', () => {
       getByText('Table data is unavailable. Please try again later.')
     ).toBeInTheDocument();
   });
+  it('should handle search, region filter functionality', async () => {
+    const {
+      getByPlaceholderText,
+      getByRole,
+      getByTestId,
+      getByText,
+      queryByText,
+    } = renderWithTheme(
+      <AlertResources alertResourceIds={['1', '2', '3']} serviceType="linode" />
+    );
+    // Get the search input box
+    const searchInput = getByPlaceholderText(searchPlaceholder);
+    await userEvent.type(searchInput, linodes[1].label);
+    // Wait for search results to update
+    await waitFor(() => {
+      expect(queryByText(linodes[0].label)).not.toBeInTheDocument();
+      expect(getByText(linodes[1].label)).toBeInTheDocument();
+    });
+    // clear the search input
+    await userEvent.clear(searchInput);
+    await waitFor(() => {
+      expect(getByText(linodes[0].label)).toBeInTheDocument();
+      expect(getByText(linodes[1].label)).toBeInTheDocument();
+    });
+    // search with invalid text and a region
+    await userEvent.type(searchInput, 'dummy');
+    await userEvent.click(getByRole('button', { name: 'Open' }));
+    await userEvent.click(getByTestId(regions[0].id));
+    await userEvent.click(getByRole('button', { name: 'Close' }));
+    await waitFor(() => {
+      expect(queryByText(linodes[0].label)).not.toBeInTheDocument();
+      expect(queryByText(linodes[1].label)).not.toBeInTheDocument();
+    });
+    // now clear the search input and the region filter will be applied
+    await userEvent.clear(searchInput);
+    await waitFor(() => {
+      expect(getByText(linodes[0].label)).toBeInTheDocument();
+      expect(queryByText(linodes[1].label)).not.toBeInTheDocument();
+    });
+  });
+
+  it('should handle sorting correctly', async () => {
+    const { getByTestId } = renderWithTheme(
+      <AlertResources alertResourceIds={['1', '2', '3']} serviceType="linode" />
+    );
+    const resourceColumn = getByTestId('resource'); // get the resource header column
+    await userEvent.click(resourceColumn);
+
+    const tableBody = getByTestId('alert_resources_content');
+    let rows = Array.from(tableBody.querySelectorAll('tr'));
+    expect(
+      rows
+        .map(({ textContent }) => textContent)
+        .every((text, index) => {
+          return text?.includes(linodes[linodes.length - 1 - index].label);
+        })
+    ).toBe(true);
+
+    await userEvent.click(resourceColumn); // again reverse the sorting
+    rows = Array.from(tableBody.querySelectorAll('tr'));
+    expect(
+      rows
+        .map(({ textContent }) => textContent)
+        .every((text, index) => text?.includes(linodes[index].label))
+    ).toBe(true);
+
+    const regionColumn = getByTestId('region'); // get the region header column
+
+    await userEvent.click(regionColumn); // sort ascending for region
+    rows = Array.from(tableBody.querySelectorAll('tr')); // refetch
+    expect(
+      rows
+        .map(({ textContent }) => textContent)
+        .every((text, index) =>
+          text?.includes(linodes[linodes.length - 1 - index].region)
+        )
+    ).toBe(true);
+
+    await userEvent.click(regionColumn); // reverse the sorting
+    rows = Array.from(tableBody.querySelectorAll('tr'));
+    expect(
+      rows
+        .map(({ textContent }) => textContent)
+        .every((text, index) => text?.includes(linodes[index].region)) // validation
+    ).toBe(true);
+  });
 });

packages/manager/src/features/CloudPulse/Alerts/AlertsResources/AlertsResources.tsx

@@ -2,25 +2,29 @@ import { CircleProgress, Stack, Typography } from '@linode/ui';
 import { Grid } from '@mui/material';
 import React from 'react';
 
+import EntityIcon from 'src/assets/icons/entityIcons/alerts.svg';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 
+import { StyledPlaceholder } from '../AlertsDetail/AlertDetail';
 import {
+  getFilteredResources,
   getRegionOptions,
   getRegionsIdRegionMap,
+  scrollToElement,
 } from '../Utils/AlertResourceUtils';
 import { AlertsRegionFilter } from './AlertsRegionFilter';
 import { DisplayAlertResources } from './DisplayAlertResources';
 
+import type { AlertInstance } from './DisplayAlertResources';
 import type { Region } from '@linode/api-v4';
 
 export interface AlertResourcesProp {
   /**
    * The label of the alert to be displayed
    */
   alertLabel?: string;
-
   /**
    * The set of resource ids associated with the alerts, that needs to be displayed
    */
@@ -35,8 +39,7 @@ export interface AlertResourcesProp {
 export const AlertResources = React.memo((props: AlertResourcesProp) => {
   const { alertLabel, alertResourceIds, serviceType } = props;
   const [searchText, setSearchText] = React.useState<string>();
-
-  const [, setFilteredRegions] = React.useState<string[]>();
+  const [filteredRegions, setFilteredRegions] = React.useState<string[]>();
 
   const {
     data: regions,
@@ -69,55 +72,102 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
     });
   }, [resources, alertResourceIds, regionsIdToRegionMap]);
 
+  const isDataLoadingError = isRegionsError || isResourcesError;
+
   const handleSearchTextChange = (searchText: string) => {
     setSearchText(searchText);
   };
 
   const handleFilteredRegionsChange = (selectedRegions: string[]) => {
-    setFilteredRegions(selectedRegions);
+    setFilteredRegions(
+      selectedRegions.map(
+        (region) =>
+          regionsIdToRegionMap.get(region)
+            ? `${regionsIdToRegionMap.get(region)?.label} (${region})`
+            : region // Stores filtered regions in the format `region.label (region.id)` that is displayed and filtered in the table
+      )
+    );
   };
 
+  /**
+   * Filters resources based on the provided resource IDs, search text, and filtered regions.
+   */
+  const filteredResources: AlertInstance[] = React.useMemo(() => {
+    return getFilteredResources({
+      data: resources,
+      filteredRegions,
+      regionsIdToRegionMap,
+      resourceIds: alertResourceIds,
+      searchText,
+    });
+  }, [
+    resources,
+    alertResourceIds,
+    searchText,
+    filteredRegions,
+    regionsIdToRegionMap,
+  ]);
+
   const titleRef = React.useRef<HTMLDivElement>(null); // Reference to the component title, used for scrolling to the title when the table's page size or page number changes.
 
   if (isResourcesFetching || isRegionsFetching) {
     return <CircleProgress />;
   }
 
-  const isDataLoadingError = isRegionsError || isResourcesError;
+  if (!isDataLoadingError && alertResourceIds.length === 0) {
+    return (
+      <Stack gap={2}>
+        <Typography ref={titleRef} variant="h2">
+          {alertLabel || 'Resources'}
+          {/* It can be either the passed alert label or just Resources */}
+        </Typography>
+        <StyledPlaceholder
+          icon={EntityIcon}
+          subtitle="You can assign alerts during the resource creation process."
+          title="No resources are currently assigned to this alert definition."
+        />
+      </Stack>
+    );
+  }
 
   return (
     <Stack gap={2}>
       <Typography ref={titleRef} variant="h2">
         {alertLabel || 'Resources'}
         {/* It can be either the passed alert label or just Resources */}
       </Typography>
-
-      <Grid container spacing={3}>
-        <Grid columnSpacing={1} container item rowSpacing={3} xs={12}>
-          <Grid item md={3} xs={12}>
-            <DebouncedSearchTextField
-              sx={{
-                maxHeight: '34px',
-              }}
-              clearable
-              hideLabel
-              label="Search for a Region or Resource"
-              onSearch={handleSearchTextChange}
-              placeholder="Search for a Region or Resource"
-              value={searchText || ''}
-            />
+      {(isDataLoadingError || alertResourceIds.length) && ( // if there is data loading error display error message with empty table setup
+        <Grid container spacing={3}>
+          <Grid columnSpacing={1} container item rowSpacing={3} xs={12}>
+            <Grid item md={3} xs={12}>
+              <DebouncedSearchTextField
+                sx={{
+                  maxHeight: '34px',
+                }}
+                clearable
+                hideLabel
+                label="Search for a Region or Resource"
+                onSearch={handleSearchTextChange}
+                placeholder="Search for a Region or Resource"
+                value={searchText || ''}
+              />
+            </Grid>
+            <Grid item md={4} xs={12}>
+              <AlertsRegionFilter
+                handleSelectionChange={handleFilteredRegionsChange}
+                regionOptions={regionOptions}
+              />
+            </Grid>
           </Grid>
-          <Grid item md={4} xs={12}>
-            <AlertsRegionFilter
-              handleSelectionChange={handleFilteredRegionsChange}
-              regionOptions={regionOptions}
+          <Grid item xs={12}>
+            <DisplayAlertResources
+              filteredResources={filteredResources}
+              isDataLoadingError={isDataLoadingError}
+              scrollToElement={() => scrollToElement(titleRef.current)}
             />
           </Grid>
         </Grid>
-        <Grid item xs={12}>
-          <DisplayAlertResources isDataLoadingError={isDataLoadingError} />
-        </Grid>
-      </Grid>
+      )}
     </Stack>
   );
 });