[Security Solution] Adds UI support for filtering by rule source customization

x-pack/plugins/security_solution/public/detection_engine/rule_management/logic/types.ts

@@ -99,6 +99,7 @@ export interface FilterOptions {
   excludeRuleTypes?: Type[];
   enabled?: boolean; // undefined is to display all the rules
   ruleExecutionStatus?: RuleExecutionStatus; // undefined means "all"
+  ruleSource?: RuleSourceTypesEnum[]; // undefined is to display all the rules
 }
 
 export interface FetchRulesResponse {
@@ -202,3 +203,8 @@ export interface FindRulesReferencedByExceptionsProps {
   lists: FindRulesReferencedByExceptionsListProp[];
   signal?: AbortSignal;
 }
+
+export enum RuleSourceTypesEnum {
+  MODIFIED = 'MODIFIED',
+  UNMODIFIED = 'UNMODIFIED',
+}

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx

@@ -118,6 +118,7 @@ export const UpgradePrebuiltRulesTableContextProvider = ({
   const [filterOptions, setFilterOptions] = useState<UpgradePrebuiltRulesTableFilterOptions>({
     filter: '',
     tags: [],
+    ruleSource: [],
   });
 
   const isUpgradingSecurityPackages = useIsUpgradingSecurityPackages();

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_filters.tsx

@@ -9,10 +9,13 @@ import { EuiFilterGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { isEqual } from 'lodash/fp';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
+import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
+import type { RuleSourceTypesEnum } from '../../../../rule_management/logic';
 import * as i18n from './translations';
 import { TagsFilterPopover } from '../rules_table_filters/tags_filter_popover';
 import { RuleSearchField } from '../rules_table_filters/rule_search_field';
 import { useUpgradePrebuiltRulesTableContext } from './upgrade_prebuilt_rules_table_context';
+import { RuleSourceFilterPopover } from './upgrade_rule_source_filter_popover';
 
 const FilterWrapper = styled(EuiFlexGroup)`
   margin-bottom: ${({ theme }) => theme.eui.euiSizeM};
@@ -28,7 +31,11 @@ const UpgradePrebuiltRulesTableFiltersComponent = () => {
     actions: { setFilterOptions },
   } = useUpgradePrebuiltRulesTableContext();
 
-  const { tags: selectedTags } = filterOptions;
+  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
+    'prebuiltRulesCustomizationEnabled'
+  );
+
+  const { tags: selectedTags, ruleSource: selectedRuleSource = [] } = filterOptions;
 
   const handleOnSearch = useCallback(
     (filterString: string) => {
@@ -52,22 +59,45 @@ const UpgradePrebuiltRulesTableFiltersComponent = () => {
     [selectedTags, setFilterOptions]
   );
 
+  const handleSelectedRuleSource = useCallback(
+    (newRuleSource: RuleSourceTypesEnum[]) => {
+      if (!isEqual(newRuleSource, selectedRuleSource)) {
+        setFilterOptions((filters) => ({
+          ...filters,
+          ruleSource: newRuleSource,
+        }));
+      }
+    },
+    [selectedRuleSource, setFilterOptions]
+  );
+
   return (
-    <FilterWrapper gutterSize="m" justifyContent="flexEnd" wrap>
+    <FilterWrapper gutterSize="s" justifyContent="flexEnd" wrap>
       <RuleSearchField
         initialValue={filterOptions.filter}
         onSearch={handleOnSearch}
         placeholder={i18n.SEARCH_PLACEHOLDER}
       />
       <EuiFlexItem grow={false}>
-        <EuiFilterGroup>
-          <TagsFilterPopover
-            onSelectedTagsChanged={handleSelectedTags}
-            selectedTags={selectedTags}
-            tags={tags}
-            data-test-subj="upgradeRulesTagPopover"
-          />
-        </EuiFilterGroup>
+        <EuiFlexGroup gutterSize="s">
+          {isPrebuiltRulesCustomizationEnabled && (
+            <EuiFilterGroup>
+              <RuleSourceFilterPopover
+                onSelectedRuleSourceChanged={handleSelectedRuleSource}
+                selectedRuleSource={selectedRuleSource}
+                data-test-subj="upgradeRulesRuleSourcePopover"
+              />
+            </EuiFilterGroup>
+          )}
+          <EuiFilterGroup>
+            <TagsFilterPopover
+              onSelectedTagsChanged={handleSelectedTags}
+              selectedTags={selectedTags}
+              tags={tags}
+              data-test-subj="upgradeRulesTagPopover"
+            />
+          </EuiFilterGroup>
+        </EuiFlexGroup>
       </EuiFlexItem>
     </FilterWrapper>
   );

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_rule_source_filter_popover.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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, useMemo } from 'react';
+import type { EuiSelectableOption } from '@elastic/eui';
+import { EuiFilterButton, EuiPopover, EuiSelectable } from '@elastic/eui';
+import { RuleSourceTypesEnum } from '../../../../rule_management/logic';
+import * as i18n from '../../../../../detections/pages/detection_engine/rules/translations';
+import { toggleSelectedGroup } from '../../../../../common/components/ml_popover/jobs_table/filters/toggle_selected_group';
+
+interface RuleSourceFilterPopoverProps {
+  selectedRuleSource: RuleSourceTypesEnum[];
+  onSelectedRuleSourceChanged: (newRuleSource: RuleSourceTypesEnum[]) => void;
+}
+
+const RULE_SOURCE_POPOVER_WIDTH = 200;
+
+const RuleSourceFilterPopoverComponent = ({
+  selectedRuleSource,
+  onSelectedRuleSourceChanged,
+}: RuleSourceFilterPopoverProps) => {
+  const [isRuleSourcePopoverOpen, setIsRuleSourcePopoverOpen] = useState(false);
+
+  const selectableOptions: EuiSelectableOption[] = useMemo(
+    () => [
+      {
+        label: i18n.MODIFIED_LABEL,
+        key: RuleSourceTypesEnum.MODIFIED,
+        checked: selectedRuleSource.includes(RuleSourceTypesEnum.MODIFIED) ? 'on' : undefined,
+      },
+      {
+        label: i18n.UNMODIFIED_LABEL,
+        key: RuleSourceTypesEnum.UNMODIFIED,
+        checked: selectedRuleSource.includes(RuleSourceTypesEnum.UNMODIFIED) ? 'on' : undefined,
+      },
+    ],
+    [selectedRuleSource]
+  );
+
+  const handleSelectableOptionsChange = (
+    newOptions: EuiSelectableOption[],
+    _: unknown,
+    changedOption: EuiSelectableOption
+  ) => {
+    toggleSelectedGroup(
+      changedOption.key ?? '',
+      selectedRuleSource,
+      onSelectedRuleSourceChanged as (args: string[]) => void
+    );
+  };
+
+  const triggerButton = (
+    <EuiFilterButton
+      grow
+      iconType="arrowDown"
+      onClick={() => setIsRuleSourcePopoverOpen(!isRuleSourcePopoverOpen)}
+      numFilters={selectableOptions.length}
+      isSelected={isRuleSourcePopoverOpen}
+      hasActiveFilters={selectedRuleSource.length > 0}
+      numActiveFilters={selectedRuleSource.length}
+      data-test-subj="rule-source-filter-popover-button"
+    >
+      {i18n.RULE_SOURCE}
+    </EuiFilterButton>
+  );
+
+  return (
+    <EuiPopover
+      ownFocus
+      button={triggerButton}
+      isOpen={isRuleSourcePopoverOpen}
+      closePopover={() => setIsRuleSourcePopoverOpen(!isRuleSourcePopoverOpen)}
+      panelPaddingSize="none"
+      repositionOnScroll
+      panelProps={{
+        'data-test-subj': 'rule-source-filter-popover',
+      }}
+    >
+      <EuiSelectable options={selectableOptions} onChange={handleSelectableOptionsChange}>
+        {(list) => <div style={{ width: RULE_SOURCE_POPOVER_WIDTH }}>{list}</div>}
+      </EuiSelectable>
+    </EuiPopover>
+  );
+};
+
+export const RuleSourceFilterPopover = React.memo(RuleSourceFilterPopoverComponent);

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/use_filter_prebuilt_rules_to_upgrade.ts

@@ -7,9 +7,12 @@
 
 import { useMemo } from 'react';
 import type { RuleUpgradeInfoForReview } from '../../../../../../common/api/detection_engine/prebuilt_rules';
-import type { FilterOptions } from '../../../../rule_management/logic/types';
+import { RuleSourceTypesEnum, type FilterOptions } from '../../../../rule_management/logic/types';
 
-export type UpgradePrebuiltRulesTableFilterOptions = Pick<FilterOptions, 'filter' | 'tags'>;
+export type UpgradePrebuiltRulesTableFilterOptions = Pick<
+  FilterOptions,
+  'filter' | 'tags' | 'ruleSource'
+>;
 
 export const useFilterPrebuiltRulesToUpgrade = ({
   rules,
@@ -19,7 +22,7 @@ export const useFilterPrebuiltRulesToUpgrade = ({
   filterOptions: UpgradePrebuiltRulesTableFilterOptions;
 }) => {
   const filteredRules = useMemo(() => {
-    const { filter, tags } = filterOptions;
+    const { filter, tags, ruleSource } = filterOptions;
     return rules.filter((ruleInfo) => {
       if (filter && !ruleInfo.current_rule.name.toLowerCase().includes(filter.toLowerCase())) {
         return false;
@@ -29,6 +32,25 @@ export const useFilterPrebuiltRulesToUpgrade = ({
         return tags.every((tag) => ruleInfo.current_rule.tags.includes(tag));
       }
 
+      if (ruleSource && ruleSource.length > 0) {
+        if (
+          ruleSource.includes(RuleSourceTypesEnum.MODIFIED) &&
+          ruleSource.includes(RuleSourceTypesEnum.UNMODIFIED)
+        ) {
+          return true;
+        } else if (
+          ruleSource.includes(RuleSourceTypesEnum.MODIFIED) &&
+          ruleInfo.current_rule.rule_source.type === 'external'
+        ) {
+          return ruleInfo.current_rule.rule_source.is_customized;
+        } else if (
+          ruleSource.includes(RuleSourceTypesEnum.UNMODIFIED) &&
+          ruleInfo.current_rule.rule_source.type === 'external'
+        ) {
+          return ruleInfo.current_rule.rule_source.is_customized === false;
+        }
+      }
+
       return true;
     });
   }, [filterOptions, rules]);

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/use_upgrade_prebuilt_rules_table_columns.tsx

@@ -6,7 +6,14 @@
  */
 
 import type { EuiBasicTableColumn } from '@elastic/eui';
-import { EuiBadge, EuiButtonEmpty, EuiLink, EuiLoadingSpinner, EuiText } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiButtonEmpty,
+  EuiLink,
+  EuiLoadingSpinner,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
 import React, { useMemo } from 'react';
 import type { RuleUpgradeState } from '../../../../rule_management/model/prebuilt_rule_upgrade/rule_upgrade_state';
 import { RulesTableEmptyColumnName } from '../rules_table_empty_column_name';
@@ -104,6 +111,35 @@ const INTEGRATIONS_COLUMN: TableColumn = {
   truncateText: true,
 };
 
+const MODIFIED_COLUMN: TableColumn = {
+  field: 'current_rule.rule_source',
+  name: <RulesTableEmptyColumnName name={i18n.COLUMN_MODIFIED} />,
+  align: 'center',
+  render: (ruleSource: Rule['rule_source']) => {
+    if (
+      ruleSource == null ||
+      ruleSource.type === 'internal' ||
+      (ruleSource.type === 'external' && ruleSource.is_customized === false)
+    ) {
+      return null;
+    }
+
+    return (
+      <EuiToolTip content={i18n.MODIFIED_TOOLTIP}>
+        <EuiBadge
+          color="hollow"
+          data-test-subj="upgradeRulesTableModifiedColumnBadge"
+          aria-label={i18n.MODIFIED_LABEL}
+        >
+          {i18n.MODIFIED_LABEL}
+        </EuiBadge>
+      </EuiToolTip>
+    );
+  },
+  width: '90px',
+  truncateText: true,
+};
+
 const createUpgradeButtonColumn = (
   upgradeRules: UpgradePrebuiltRulesTableActions['upgradeRules'],
   loadingRules: RuleSignatureId[],
@@ -157,6 +193,7 @@ export const useUpgradePrebuiltRulesTableColumns = (): TableColumn[] => {
   return useMemo(
     () => [
       RULE_NAME_COLUMN,
+      ...(isPrebuiltRulesCustomizationEnabled ? [MODIFIED_COLUMN] : []),
       ...(showRelatedIntegrations ? [INTEGRATIONS_COLUMN] : []),
       TAGS_COLUMN,
       {