[Observability] Add Rule type and Rule name filtering to Rule List via query params (#154201)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/observability/public/pages/rules/rules.tsx

@@ -32,6 +32,20 @@ export function RulesPage() {
   const { ObservabilityPageTemplate } = usePluginContext();
   const history = useHistory();
 
+  useBreadcrumbs([
+    {
+      text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
+        defaultMessage: 'Alerts',
+      }),
+      href: http.basePath.prepend('/app/observability/alerts'),
+    },
+    {
+      text: i18n.translate('xpack.observability.breadcrumbs.rulesLinkText', {
+        defaultMessage: 'Rules',
+      }),
+    },
+  ]);
+
   const filteredRuleTypes = useGetFilteredRuleTypes();
   const { ruleTypes } = useLoadRuleTypes({
     filteredRuleTypes,
@@ -48,42 +62,41 @@ export function RulesPage() {
     useHashQuery: false,
   });
 
-  const { status, lastResponse } = urlStateStorage.get<{
-    status: RuleStatus[];
+  const { lastResponse, search, status, type } = urlStateStorage.get<{
     lastResponse: string[];
-  }>('_a') || { status: [], lastResponse: [] };
+    search: string;
+    status: RuleStatus[];
+    type: string[];
+  }>('_a') || { lastResponse: [], search: '', status: [], type: [] };
 
-  const [stateStatus, setStatus] = useState<RuleStatus[]>(status);
   const [stateLastResponse, setLastResponse] = useState<string[]>(lastResponse);
+  const [stateSearch, setSearch] = useState<string>(search);
+  const [stateStatus, setStatus] = useState<RuleStatus[]>(status);
+  const [stateType, setType] = useState<string[]>(type);
+
   const [stateRefresh, setRefresh] = useState(new Date());
 
   const [addRuleFlyoutVisibility, setAddRuleFlyoutVisibility] = useState(false);
 
-  useBreadcrumbs([
-    {
-      text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
-        defaultMessage: 'Alerts',
-      }),
-      href: http.basePath.prepend('/app/observability/alerts'),
-    },
-    {
-      text: i18n.translate('xpack.observability.breadcrumbs.rulesLinkText', {
-        defaultMessage: 'Rules',
-      }),
-    },
-  ]);
-
   const handleStatusFilterChange = (newStatus: RuleStatus[]) => {
     setStatus(newStatus);
-    urlStateStorage.set('_a', { status: newStatus, lastResponse });
-    return { lastResponse: stateLastResponse || [], status: newStatus };
+    urlStateStorage.set('_a', { lastResponse, search, status: newStatus, type });
   };
 
   const handleLastRunOutcomeFilterChange = (newLastResponse: string[]) => {
     setRefresh(new Date());
     setLastResponse(newLastResponse);
-    urlStateStorage.set('_a', { status, lastResponse: newLastResponse });
-    return { lastResponse: newLastResponse, status: stateStatus || [] };
+    urlStateStorage.set('_a', { lastResponse: newLastResponse, search, status, type });
+  };
+
+  const handleTypeFilterChange = (newType: string[]) => {
+    setType(newType);
+    urlStateStorage.set('_a', { lastResponse, search, status, type: newType });
+  };
+
+  const handleSearchFilterChange = (newSearch: string) => {
+    setSearch(newSearch);
+    urlStateStorage.set('_a', { lastResponse, search: newSearch, status, type });
   };
 
   return (
@@ -132,6 +145,8 @@ export function RulesPage() {
             rulesListKey="observability_rulesListColumns"
             showActionFilter={false}
             statusFilter={stateStatus}
+            searchFilter={stateSearch}
+            typeFilter={stateType}
             visibleColumns={[
               'ruleName',
               'ruleExecutionStatusLastDate',
@@ -140,7 +155,9 @@ export function RulesPage() {
               'ruleExecutionState',
             ]}
             onLastRunOutcomeFilterChange={handleLastRunOutcomeFilterChange}
+            onSearchFilterChange={handleSearchFilterChange}
             onStatusFilterChange={handleStatusFilterChange}
+            onTypeFilterChange={handleTypeFilterChange}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list.tsx

@@ -105,11 +105,6 @@ import { useRulesListUiState as useUiState } from '../../../hooks/use_rules_list
 const RuleAdd = lazy(() => import('../../rule_form/rule_add'));
 const RuleEdit = lazy(() => import('../../rule_form/rule_edit'));
 
-interface RulesPageContainerState {
-  lastResponse: string[];
-  status: RuleStatus[];
-}
-
 export interface RulesListProps {
   filteredRuleTypes?: string[];
   showActionFilter?: boolean;
@@ -117,11 +112,15 @@ export interface RulesListProps {
   showCreateRuleButtonInPrompt?: boolean;
   setHeaderActions?: (components?: React.ReactNode[]) => void;
   statusFilter?: RuleStatus[];
-  onStatusFilterChange?: (status: RuleStatus[]) => RulesPageContainerState;
+  onStatusFilterChange?: (status: RuleStatus[]) => void;
   lastResponseFilter?: string[];
-  onLastResponseFilterChange?: (lastResponse: string[]) => RulesPageContainerState;
+  onLastResponseFilterChange?: (lastResponse: string[]) => void;
   lastRunOutcomeFilter?: string[];
-  onLastRunOutcomeFilterChange?: (lastRunOutcome: string[]) => RulesPageContainerState;
+  onLastRunOutcomeFilterChange?: (lastRunOutcome: string[]) => void;
+  typeFilter?: string[];
+  onTypeFilterChange?: (type: string[]) => void;
+  searchFilter?: string;
+  onSearchFilterChange?: (search: string) => void;
   refresh?: Date;
   rulesListKey?: string;
   visibleColumns?: string[];
@@ -152,6 +151,10 @@ export const RulesList = ({
   onLastResponseFilterChange,
   lastRunOutcomeFilter,
   onLastRunOutcomeFilterChange,
+  searchFilter = '',
+  onSearchFilterChange,
+  typeFilter,
+  onTypeFilterChange,
   setHeaderActions,
   refresh,
   rulesListKey,
@@ -169,11 +172,11 @@ export const RulesList = ({
   const canExecuteActions = hasExecuteActionsCapability(capabilities);
   const [isPerformingAction, setIsPerformingAction] = useState<boolean>(false);
   const [page, setPage] = useState<Pagination>({ index: 0, size: DEFAULT_SEARCH_PAGE_SIZE });
-  const [inputText, setInputText] = useState<string>('');
+  const [inputText, setInputText] = useState<string>(searchFilter);
 
   const [filters, setFilters] = useState<RulesListFilters>(() => ({
-    searchText: '',
-    types: [],
+    searchText: searchFilter || '',
+    types: typeFilter || [],
     actionTypes: [],
     ruleExecutionStatuses: lastResponseFilter || [],
     ruleLastRunOutcomes: lastRunOutcomeFilter || [],
@@ -354,6 +357,12 @@ export const RulesList = ({
         case 'ruleLastRunOutcomes':
           onLastRunOutcomeFilterChange?.(value as string[]);
           break;
+        case 'searchText':
+          onSearchFilterChange?.(value as string);
+          break;
+        case 'types':
+          onTypeFilterChange?.(value as string[]);
+          break;
         default:
           break;
       }
@@ -362,6 +371,8 @@ export const RulesList = ({
       onStatusFilterChange,
       onLastResponseFilterChange,
       onLastRunOutcomeFilterChange,
+      onSearchFilterChange,
+      onTypeFilterChange,
       onClearSelection,
     ]
   );
@@ -396,6 +407,18 @@ export const RulesList = ({
     }
   }, [lastRunOutcomeFilter]);
 
+  useEffect(() => {
+    if (typeof searchFilter === 'string') {
+      updateFilters({ filter: 'searchText', value: searchFilter });
+    }
+  }, [searchFilter]);
+
+  useEffect(() => {
+    if (typeFilter) {
+      updateFilters({ filter: 'types', value: typeFilter });
+    }
+  }, [typeFilter]);
+
   useEffect(() => {
     if (cloneRuleId.current) {
       const ruleItem = tableItems.find((ti) => ti.id === cloneRuleId.current);
@@ -675,6 +698,7 @@ export const RulesList = ({
   };
 
   const numberRulesToDelete = rulesToBulkEdit.length || numberOfSelectedItems;
+
   return (
     <>
       <RulesListPrompts