ENG-2275 FE Allow monitor filtering in the root action center

CHANGELOG.md

@@ -22,6 +22,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.77.0..main)
 
 ### Changed
+ - Added a monitor filter to the root action center [#7186](https://github.com/ethyca/fides/pull/7186)
  - Updated FE copy for our bulk ignore modal, the schema explorer empty state, and the failed action message/toast. [#7185](https://github.com/ethyca/fides/pull/7185)
 
 ## [2.77.0](https://github.com/ethyca/fides/compare/2.76.1..2.77.0)

clients/admin-ui/src/pages/data-discovery/action-center/index.tsx

@@ -4,6 +4,7 @@ import {
   List,
   Menu,
   Pagination,
+  Select,
   useChakraToast as useToast,
 } from "fidesui";
 import { useEffect, useState } from "react";
@@ -31,25 +32,62 @@ const ActionCenterPage = () => {
   const { paginationProps, pageIndex, pageSize, resetPagination } =
     useAntPagination();
   const [searchQuery, setSearchQuery] = useState("");
+  const [selectedFilter, setSelectedFilter] = useState<string>("all");
   const { webMonitor: webMonitorEnabled, heliosV2: heliosV2Enabled } = flags;
 
-  // Build monitor_type filter based on enabled feature flags
-  const monitorTypes: MONITOR_TYPES[] = [
-    ...(webMonitorEnabled ? [MONITOR_TYPES.WEBSITE] : []),
-    ...(heliosV2Enabled ? [MONITOR_TYPES.DATASTORE] : []),
+  // Build monitor_type filter based on selected filter
+  const getMonitorTypesFromFilter = (
+    filter: string,
+  ): MONITOR_TYPES[] | undefined => {
+    if (filter === MONITOR_TYPES.DATASTORE) {
+      return [MONITOR_TYPES.DATASTORE];
+    }
+    if (filter === MONITOR_TYPES.WEBSITE) {
+      return [MONITOR_TYPES.WEBSITE];
+    }
+    return undefined;
+  };
+
+  const monitorTypes = getMonitorTypesFromFilter(selectedFilter);
+
+  // Build filter options based on enabled monitor types
+  const filterOptions = [
+    ...(webMonitorEnabled || heliosV2Enabled
+      ? [{ value: "all", label: "All monitors" }]
+      : []),
+    ...(heliosV2Enabled
+      ? [{ value: "datastore", label: "Data store monitors" }]
+      : []),
+    ...(webMonitorEnabled
+      ? [{ value: "website", label: "Website monitors" }]
+      : []),
   ];
 
+  // Only show filter when 2+ monitor types are enabled
+  const shouldShowFilter = filterOptions.length > 2;
+
   const { data, isError, isLoading } = useGetAggregateMonitorResultsQuery({
     page: pageIndex,
     size: pageSize,
     search: searchQuery,
-    monitor_type: monitorTypes.length > 0 ? monitorTypes : undefined,
+    monitor_type: monitorTypes,
   });
 
+  // Reset filter if selected option is no longer available
+  useEffect(() => {
+    const isValidFilter = filterOptions.some(
+      (option) => option.value === selectedFilter,
+    );
+    if (!isValidFilter && filterOptions.length > 0) {
+      setSelectedFilter(filterOptions[0].value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [webMonitorEnabled, heliosV2Enabled]);
+
   useEffect(() => {
     resetPagination();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchQuery]);
+  }, [searchQuery, selectedFilter]);
 
   useEffect(() => {
     if (isError) {
@@ -108,11 +146,25 @@ const ActionCenterPage = () => {
           gap="middle"
           vertical
         >
-          <Flex className="justify-between ">
+          <Flex className="items-center justify-between">
             <DebouncedSearchInput
               value={searchQuery}
               onChange={setSearchQuery}
             />
+            {shouldShowFilter && (
+              <Select
+                value={selectedFilter}
+                onChange={(value) => {
+                  if (typeof value === "string") {
+                    setSelectedFilter(value);
+                  }
+                }}
+                options={filterOptions}
+                className="w-auto min-w-[200px]"
+                data-testid="monitor-type-filter"
+                aria-label="Filter by monitor type"
+              />
+            )}
           </Flex>
           <List
             loading={isLoading}