[8.13] [Security Solution] Fix rule filters on the Rule Details page (#177081) (#177242)

# Backport This will backport the following commits from `main` to `8.13`: - [[Security Solution] Fix rule filters on the Rule Details page (#177081)](https://github.com/elastic/kibana/pull/177081)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Georgii Gorbachev <georgii.gorbachev@elastic.co>
2025-04-24 17:59:23 -04:00 · 2024-02-19 18:47:23 -05:00 · 2024-02-19 18:47:23 -05:00 · 7476496fb4
commit 7476496fb4
parent dca2f55a21
2 changed files with 101 additions and 69 deletions
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_definition_section.styles.ts
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_definition_section.styles.ts
@ -0,0 +1,45 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/css';
+import { useMemo } from 'react';
+
+export const useFiltersStyles = () => {
+  return useMemo(
+    () => ({
+      flexGroup: css`
+        max-width: 600px;
+      `,
+    }),
+    []
+  );
+};
+
+export const useQueryStyles = () => {
+  return useMemo(
+    () => ({
+      content: css`
+        white-space: pre-wrap;
+      `,
+    }),
+    []
+  );
+};
+
+export const useRequiredFieldsStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return useMemo(
+    () => ({
+      fieldTypeText: css({
+        fontFamily: euiTheme.font.familyCode,
+        display: 'inline',
+      }),
+    }),
+    [euiTheme.font.familyCode]
+  );
+};
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_definition_section.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_definition_section.tsx
@ -7,7 +7,6 @@

 import React from 'react';
 import { isEmpty } from 'lodash/fp';
-import styled from 'styled-components';
 import {
  EuiDescriptionList,
  EuiText,
@ -15,7 +14,6 @@ import {
  EuiFlexItem,
  EuiFlexGroup,
  EuiLoadingSpinner,
-  EuiBadge,
 } from '@elastic/eui';
 import type { EuiDescriptionListProps } from '@elastic/eui';
 import type {
@ -25,9 +23,10 @@ import type {
 import type { Filter } from '@kbn/es-query';
 import type { SavedQuery } from '@kbn/data-plugin/public';
 import { mapAndFlattenFilters } from '@kbn/data-plugin/public';
+import type { DataView } from '@kbn/data-views-plugin/public';
 import { FieldIcon } from '@kbn/react-field';
 import { castEsToKbnFieldTypeName } from '@kbn/field-types';
-import { FilterBadgeGroup } from '@kbn/unified-search-plugin/public';
+import { FilterItems } from '@kbn/unified-search-plugin/public';
 import type {
  AlertSuppressionMissingFieldsStrategy,
  RequiredFieldArray,
@ -55,6 +54,11 @@ import { BadgeList } from './badge_list';
 import { DEFAULT_DESCRIPTION_LIST_COLUMN_WIDTHS } from './constants';
 import * as i18n from './translations';
 import { useAlertSuppression } from '../../logic/use_alert_suppression';
+import {
+  useFiltersStyles,
+  useQueryStyles,
+  useRequiredFieldsStyles,
+} from './rule_definition_section.styles';

 interface SavedQueryNameProps {
  savedQueryName: string;
@ -66,12 +70,6 @@ const SavedQueryName = ({ savedQueryName }: SavedQueryNameProps) => (
  </EuiText>
 );

-const EuiBadgeWrap = styled(EuiBadge)`
-  .euiBadge__text {
-    white-space: pre-wrap !important;
-  }
-`;
-
 interface FiltersProps {
  filters: Filter[];
  dataViewId?: string;
@ -80,51 +78,42 @@ interface FiltersProps {
 }

 const Filters = ({ filters, dataViewId, index, 'data-test-subj': dataTestSubj }: FiltersProps) => {
+  const flattenedFilters = mapAndFlattenFilters(filters);
+
  const { indexPattern } = useRuleIndexPattern({
    dataSourceType: dataViewId ? DataSourceType.DataView : DataSourceType.IndexPatterns,
    index: index ?? [],
    dataViewId,
  });

-  const flattenedFilters = mapAndFlattenFilters(filters);
+  const styles = useFiltersStyles();

  return (
-    <EuiFlexGroup wrap responsive={false} gutterSize="xs" data-test-subj={dataTestSubj}>
-      {flattenedFilters.map((filter, idx) => {
-        const displayContent = filter.meta.alias ? (
-          filter.meta.alias
-        ) : (
-          <FilterBadgeGroup filters={[filter]} dataViews={[indexPattern]} />
-        );
-        return (
-          <EuiFlexItem
-            grow={false}
-            key={`filter-${idx}`}
-            css={{ width: '100%' }}
-            data-test-subj={`filterItem-${filter.meta.key}`}
-          >
-            <EuiBadgeWrap color="hollow">
-              {indexPattern != null ? displayContent : <EuiLoadingSpinner size="m" />}
-            </EuiBadgeWrap>
-          </EuiFlexItem>
-        );
-      })}
+    <EuiFlexGroup
+      data-test-subj={dataTestSubj}
+      className={styles.flexGroup}
+      wrap
+      responsive={false}
+      gutterSize="xs"
+    >
+      <FilterItems filters={flattenedFilters} indexPatterns={[indexPattern as DataView]} readOnly />
    </EuiFlexGroup>
  );
 };

-const QueryContent = styled.div`
-  white-space: pre-wrap;
-`;
-
 interface QueryProps {
  query: string;
  'data-test-subj'?: string;
 }

-const Query = ({ query, 'data-test-subj': dataTestSubj = 'query' }: QueryProps) => (
-  <QueryContent data-test-subj={dataTestSubj}>{query}</QueryContent>
-);
+const Query = ({ query, 'data-test-subj': dataTestSubj = 'query' }: QueryProps) => {
+  const styles = useQueryStyles();
+  return (
+    <div data-test-subj={dataTestSubj} className={styles.content}>
+      {query}
+    </div>
+  );
+};

 interface IndexProps {
  index: string[];
@ -260,42 +249,40 @@ const RuleType = ({ type }: RuleTypeProps) => (
  <EuiText size="s">{getRuleTypeDescription(type)}</EuiText>
 );

-const StyledFieldTypeText = styled(EuiText)`
-  font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
-  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
-  display: inline;
-`;
-
 interface RequiredFieldsProps {
  requiredFields: RequiredFieldArray;
 }

-const RequiredFields = ({ requiredFields }: RequiredFieldsProps) => (
-  <EuiFlexGrid gutterSize={'s'} data-test-subj="requiredFieldsPropertyValue">
-    {requiredFields.map((rF, index) => (
-      <EuiFlexItem grow={false} key={rF.name}>
-        <EuiFlexGroup alignItems="center" gutterSize={'xs'}>
-          <EuiFlexItem grow={false}>
-            <FieldIcon
-              data-test-subj="field-type-icon"
-              type={castEsToKbnFieldTypeName(rF.type)}
-              label={rF.type}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <StyledFieldTypeText
-              grow={false}
-              size={'s'}
-              data-test-subj="requiredFieldsPropertyValueItem"
-            >
-              {` ${rF.name}${index + 1 !== requiredFields.length ? ', ' : ''}`}
-            </StyledFieldTypeText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    ))}
-  </EuiFlexGrid>
-);
+const RequiredFields = ({ requiredFields }: RequiredFieldsProps) => {
+  const styles = useRequiredFieldsStyles();
+  return (
+    <EuiFlexGrid data-test-subj="requiredFieldsPropertyValue" gutterSize={'s'}>
+      {requiredFields.map((rF, index) => (
+        <EuiFlexItem grow={false} key={rF.name}>
+          <EuiFlexGroup alignItems="center" gutterSize={'xs'}>
+            <EuiFlexItem grow={false}>
+              <FieldIcon
+                data-test-subj="field-type-icon"
+                type={castEsToKbnFieldTypeName(rF.type)}
+                label={rF.type}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText
+                data-test-subj="requiredFieldsPropertyValueItem"
+                className={styles.fieldTypeText}
+                grow={false}
+                size="xs"
+              >
+                {` ${rF.name}${index + 1 !== requiredFields.length ? ', ' : ''}`}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGrid>
+  );
+};

 interface TimelineTitleProps {
  timelineTitle: string;