[RAM] Add shareable rule status filter

x-pack/plugins/triggers_actions_ui/public/application/internal/shareable_components_sandbox/rule_state_filter_sandbox.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { RuleStateFilterProps } from '../../../types';
+import { getRuleStateFilterLazy } from '../../../common/get_rule_state_filter';
+
+export const RuleStateFilterSandbox = () => {
+  const [selectedStates, setSelectedStates] = useState<RuleStateFilterProps['selectedStates']>([]);
+
+  return (
+    <div style={{ flex: 1 }}>
+      {getRuleStateFilterLazy({
+        selectedStates,
+        onChange: setSelectedStates,
+      })}
+      <div>Selected states: {JSON.stringify(selectedStates)}</div>
+    </div>
+  );
+};

x-pack/plugins/triggers_actions_ui/public/application/internal/shareable_components_sandbox/shareable_components_sandbox.tsx

@@ -7,11 +7,13 @@
 
 import React from 'react';
 import { RuleStatusDropdownSandbox } from './rule_status_dropdown_sandbox';
+import { RuleStateFilterSandbox } from './rule_state_filter_sandbox';
 
 export const InternalShareableComponentsSandbox: React.FC<{}> = () => {
   return (
     <>
       <RuleStatusDropdownSandbox />
+      <RuleStateFilterSandbox />
     </>
   );
 };

x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx

@@ -32,3 +32,6 @@ export const ActionForm = suspendedComponentWithProps(
 export const RuleStatusDropdown = suspendedComponentWithProps(
   lazy(() => import('./rules_list/components/rule_status_dropdown'))
 );
+export const RuleStateFilter = suspendedComponentWithProps(
+  lazy(() => import('./rules_list/components/rule_state_filter'))
+);

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

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
+import { RuleStateFilter } from './rule_state_filter';
+
+const onChangeMock = jest.fn();
+
+describe('rule_state_filter', () => {
+  beforeEach(() => {
+    onChangeMock.mockReset();
+  });
+
+  it('renders correctly', () => {
+    const wrapper = mountWithIntl(<RuleStateFilter selectedStates={[]} onChange={onChangeMock} />);
+
+    expect(wrapper.find(EuiFilterSelectItem).exists()).toBeFalsy();
+    expect(wrapper.find(EuiFilterButton).exists()).toBeTruthy();
+
+    expect(wrapper.find('.euiNotificationBadge').text()).toEqual('0');
+  });
+
+  it('can open the popover correctly', () => {
+    const wrapper = mountWithIntl(<RuleStateFilter selectedStates={[]} onChange={onChangeMock} />);
+
+    expect(wrapper.find('[data-test-subj="ruleStateFilterSelect"]').exists()).toBeFalsy();
+
+    wrapper.find(EuiFilterButton).simulate('click');
+
+    const statusItems = wrapper.find(EuiFilterSelectItem);
+    expect(statusItems.length).toEqual(3);
+  });
+
+  it('can select states', () => {
+    const wrapper = mountWithIntl(<RuleStateFilter selectedStates={[]} onChange={onChangeMock} />);
+
+    wrapper.find(EuiFilterButton).simulate('click');
+
+    wrapper.find(EuiFilterSelectItem).at(0).simulate('click');
+    expect(onChangeMock).toHaveBeenCalledWith(['enabled']);
+
+    wrapper.setProps({
+      selectedStates: ['enabled'],
+    });
+
+    wrapper.find(EuiFilterSelectItem).at(0).simulate('click');
+    expect(onChangeMock).toHaveBeenCalledWith([]);
+
+    wrapper.find(EuiFilterSelectItem).at(1).simulate('click');
+    expect(onChangeMock).toHaveBeenCalledWith(['enabled', 'disabled']);
+  });
+});

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

@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { useState, useCallback } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiFilterButton, EuiPopover, EuiFilterGroup, EuiFilterSelectItem } from '@elastic/eui';
+
+type State = 'enabled' | 'muted' | 'disabled';
+
+const states: State[] = ['enabled', 'disabled', 'muted'];
+
+const optionStyles = {
+  textTransform: 'capitalize' as const,
+};
+
+const getOptionDataTestSubj = (state: State) => `ruleStateFilterOption-${state}`;
+
+export interface RuleStateFilterProps {
+  selectedStates: State[];
+  dataTestSubj?: string;
+  buttonDataTestSubj?: string;
+  optionDataTestSubj?: (state: State) => string;
+  onChange: (selectedStates: State[]) => void;
+}
+
+export const RuleStateFilter = (props: RuleStateFilterProps) => {
+  const {
+    selectedStates = [],
+    dataTestSubj = 'ruleStateFilterSelect',
+    buttonDataTestSubj = 'ruleStateFilterButton',
+    optionDataTestSubj = getOptionDataTestSubj,
+    onChange = () => {},
+  } = props;
+
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+
+  const onFilterItemClick = useCallback(
+    (newOption: State) => () => {
+      if (selectedStates.includes(newOption)) {
+        onChange(selectedStates.filter((option) => option !== newOption));
+        return;
+      }
+      onChange([...selectedStates, newOption]);
+    },
+    [selectedStates, onChange]
+  );
+
+  const onClick = useCallback(() => {
+    setIsPopoverOpen((prevIsOpen) => !prevIsOpen);
+  }, [setIsPopoverOpen]);
+
+  return (
+    <EuiFilterGroup>
+      <EuiPopover
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        button={
+          <EuiFilterButton
+            data-test-subj={buttonDataTestSubj}
+            iconType="arrowDown"
+            hasActiveFilters={selectedStates.length > 0}
+            numActiveFilters={selectedStates.length}
+            numFilters={selectedStates.length}
+            onClick={onClick}
+          >
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.ruleDetails.ruleStateFilterButton"
+              defaultMessage="State"
+            />
+          </EuiFilterButton>
+        }
+      >
+        <div data-test-subj={dataTestSubj}>
+          {states.map((state) => {
+            return (
+              <EuiFilterSelectItem
+                key={state}
+                style={optionStyles}
+                data-test-subj={optionDataTestSubj(state)}
+                onClick={onFilterItemClick(state)}
+                checked={selectedStates.includes(state) ? 'on' : undefined}
+              >
+                {state}
+              </EuiFilterSelectItem>
+            );
+          })}
+        </div>
+      </EuiPopover>
+    </EuiFilterGroup>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export { RuleStateFilter as default };

x-pack/plugins/triggers_actions_ui/public/common/get_rule_state_filter.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { RuleStateFilter } from '../application/sections';
+import type { RuleStateFilterProps } from '../application/sections/rules_list/components/rule_state_filter';
+
+export const getRuleStateFilterLazy = (props: RuleStateFilterProps) => {
+  return <RuleStateFilter {...props} />;
+};

x-pack/plugins/triggers_actions_ui/public/mocks.ts

@@ -25,6 +25,7 @@ import {
 } from './types';
 import { getAlertsTableLazy } from './common/get_alerts_table';
 import { getRuleStatusDropdownLazy } from './common/get_rule_status_dropdown';
+import { getRuleStateFilterLazy } from './common/get_rule_state_filter';
 
 function createStartMock(): TriggersAndActionsUIPublicPluginStart {
   const actionTypeRegistry = new TypeRegistry<ActionTypeModel>();
@@ -63,6 +64,9 @@ function createStartMock(): TriggersAndActionsUIPublicPluginStart {
     getRuleStatusDropdown: (props) => {
       return getRuleStatusDropdownLazy(props);
     },
+    getRuleStateFilter: (props) => {
+      return getRuleStateFilterLazy(props);
+    },
   };
 }
 

x-pack/plugins/triggers_actions_ui/public/plugin.ts

@@ -30,6 +30,7 @@ import { getAddAlertFlyoutLazy } from './common/get_add_alert_flyout';
 import { getEditAlertFlyoutLazy } from './common/get_edit_alert_flyout';
 import { getAlertsTableLazy } from './common/get_alerts_table';
 import { getRuleStatusDropdownLazy } from './common/get_rule_status_dropdown';
+import { getRuleStateFilterLazy } from './common/get_rule_state_filter';
 import { ExperimentalFeaturesService } from './common/experimental_features_service';
 import {
   ExperimentalFeatures,
@@ -45,6 +46,7 @@ import type {
   ConnectorEditFlyoutProps,
   AlertsTableProps,
   RuleStatusDropdownProps,
+  RuleStateFilterProps,
   AlertsTableConfigurationRegistry,
 } from './types';
 import { TriggersActionsUiConfigType } from '../common/types';
@@ -75,6 +77,7 @@ export interface TriggersAndActionsUIPublicPluginStart {
   ) => ReactElement<RuleEditProps>;
   getAlertsTable: (props: AlertsTableProps) => ReactElement<AlertsTableProps>;
   getRuleStatusDropdown: (props: RuleStatusDropdownProps) => ReactElement<RuleStatusDropdownProps>;
+  getRuleStateFilter: (props: RuleStateFilterProps) => ReactElement<RuleStateFilterProps>;
 }
 
 interface PluginsSetup {
@@ -244,6 +247,9 @@ export class Plugin
       getRuleStatusDropdown: (props: RuleStatusDropdownProps) => {
         return getRuleStatusDropdownLazy(props);
       },
+      getRuleStateFilter: (props: RuleStateFilterProps) => {
+        return getRuleStateFilterLazy(props);
+      },
     };
   }
 

x-pack/plugins/triggers_actions_ui/public/types.ts

@@ -48,7 +48,7 @@ import {
 import { RuleRegistrySearchRequestPagination } from '@kbn/rule-registry-plugin/common';
 import { TypeRegistry } from './application/type_registry';
 import type { ComponentOpts as RuleStatusDropdownProps } from './application/sections/rules_list/components/rule_status_dropdown';
-
+import type { RuleStateFilterProps } from './application/sections/rules_list/components/rule_state_filter';
 // In Triggers and Actions we treat all `Alert`s as `SanitizedRule<RuleTypeParams>`
 // so the `Params` is a black-box of Record<string, unknown>
 type SanitizedRule<Params extends RuleTypeParams = never> = Omit<
@@ -80,6 +80,7 @@ export type {
   ResolvedRule,
   SanitizedRule,
   RuleStatusDropdownProps,
+  RuleStateFilterProps,
 };
 export type { ActionType, AsApiContract };
 export {