[Security Solution]Expandable flyout - Replace rule sections with new…

… components (#169029) This PR updates rule preview panel in the document expandable flyout: - Replaced rule details sections with the simplified components from #166158 - Added `itemRenderer` to allow custom render of the description list - Removed `isPanelView` props from the rule detail read only components. It was added to accommodate the preview styling (#163027) **No UI change from this PR** **How to test** - Go to alerts page and generate some alerts - Expand a row in the table, a flyout should appear - Click `Show rule summary` to expand the rule preview panel
elastic · Oct 25, 2023 · c68ecf8 · c68ecf8
1 parent 76bd0ef
commit c68ecf8
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 140 deletions.
diff --git a/...on/public/detection_engine/rule_management/components/rule_details/rule_about_section.tsx b/...on/public/detection_engine/rule_management/components/rule_details/rule_about_section.tsx
@@ -367,24 +367,30 @@ const prepareAboutSectionListItems = (
   return aboutSectionListItems;
 };
 
-export interface RuleAboutSectionProps {
+export interface RuleAboutSectionProps extends React.ComponentProps<typeof EuiDescriptionList> {
   rule: Partial<RuleResponse>;
   hideName?: boolean;
   hideDescription?: boolean;
 }
 
-export const RuleAboutSection = ({ rule, hideName, hideDescription }: RuleAboutSectionProps) => {
+export const RuleAboutSection = ({
+  rule,
+  hideName,
+  hideDescription,
+  ...descriptionListProps
+}: RuleAboutSectionProps) => {
   const aboutSectionListItems = prepareAboutSectionListItems(rule, hideName, hideDescription);
 
   return (
     <div>
       <EuiSpacer size="m" />
       <EuiDescriptionList
-        type="column"
+        type={descriptionListProps.type ?? 'column'}
+        rowGutterSize={descriptionListProps.rowGutterSize ?? 'm'}
         listItems={aboutSectionListItems}
         columnWidths={DESCRIPTION_LIST_COLUMN_WIDTHS}
-        rowGutterSize="m"
         data-test-subj="listItemColumnStepRuleDescription"
+        {...descriptionListProps}
       />
     </div>
   );

diff --git a/...blic/detection_engine/rule_management/components/rule_details/rule_definition_section.tsx b/...blic/detection_engine/rule_management/components/rule_details/rule_definition_section.tsx
@@ -579,7 +579,8 @@ const prepareDefinitionSectionListItems = (
   return definitionSectionListItems;
 };
 
-export interface RuleDefinitionSectionProps {
+export interface RuleDefinitionSectionProps
+  extends React.ComponentProps<typeof EuiDescriptionList> {
   rule: Partial<RuleResponse>;
   isInteractive?: boolean;
   dataTestSubj?: string;
@@ -589,6 +590,7 @@ export const RuleDefinitionSection = ({
   rule,
   isInteractive = false,
   dataTestSubj,
+  ...descriptionListProps
 }: RuleDefinitionSectionProps) => {
   const { savedQuery } = useGetSavedQuery({
     savedQueryId: rule.type === 'saved_query' ? rule.saved_id : '',
@@ -604,11 +606,12 @@ export const RuleDefinitionSection = ({
   return (
     <div data-test-subj={dataTestSubj}>
       <EuiDescriptionList
-        type="column"
+        type={descriptionListProps.type ?? 'column'}
+        rowGutterSize={descriptionListProps.rowGutterSize ?? 'm'}
         listItems={definitionSectionListItems}
         columnWidths={DESCRIPTION_LIST_COLUMN_WIDTHS}
-        rowGutterSize="m"
         data-test-subj="listItemColumnStepRuleDescription"
+        {...descriptionListProps}
       />
     </div>
   );

diff --git a/...public/detection_engine/rule_management/components/rule_details/rule_schedule_section.tsx b/...public/detection_engine/rule_management/components/rule_details/rule_schedule_section.tsx
@@ -27,11 +27,14 @@ const From = ({ from, interval }: FromProps) => (
   <EuiText size="s">{getHumanizedDuration(from, interval)}</EuiText>
 );
 
-export interface RuleScheduleSectionProps {
+export interface RuleScheduleSectionProps extends React.ComponentProps<typeof EuiDescriptionList> {
   rule: Partial<RuleResponse>;
 }
 
-export const RuleScheduleSection = ({ rule }: RuleScheduleSectionProps) => {
+export const RuleScheduleSection = ({
+  rule,
+  ...descriptionListProps
+}: RuleScheduleSectionProps) => {
   if (!rule.interval || !rule.from) {
     return null;
   }
@@ -52,10 +55,11 @@ export const RuleScheduleSection = ({ rule }: RuleScheduleSectionProps) => {
   return (
     <div data-test-subj="listItemColumnStepRuleDescription">
       <EuiDescriptionList
-        type="column"
+        type={descriptionListProps.type ?? 'column'}
+        rowGutterSize={descriptionListProps.rowGutterSize ?? 'm'}
         listItems={ruleSectionListItems}
         columnWidths={DESCRIPTION_LIST_COLUMN_WIDTHS}
-        rowGutterSize="m"
+        {...descriptionListProps}
       />
     </div>
   );

diff --git a/...k/plugins/security_solution/public/detections/components/rules/description_step/index.tsx b/...k/plugins/security_solution/public/detections/components/rules/description_step/index.tsx
@@ -9,7 +9,6 @@ import { EuiDescriptionList, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { isEmpty, chunk, get, pick, isNumber } from 'lodash/fp';
 import React, { memo, useState } from 'react';
 import styled from 'styled-components';
-import { css } from '@emotion/css';
 import type { ThreatMapping, Threats, Type } from '@kbn/securitysolution-io-ts-alerting-types';
 import type { DataViewBase, Filter } from '@kbn/es-query';
 import { FilterStateStore } from '@kbn/es-query';
@@ -65,29 +64,20 @@ const DescriptionListContainer = styled(EuiDescriptionList)`
   }
 `;
 
-const panelViewStyle = css`
-  dt {
-    font-size: 90% !important;
-  }
-  text-overflow: ellipsis;
-`;
-
 const DESCRIPTION_LIST_COLUMN_WIDTHS: [string, string] = ['50%', '50%'];
 
 interface StepRuleDescriptionProps<T> {
   columns?: 'multi' | 'single' | 'singleSplit';
   data: unknown;
   indexPatterns?: DataViewBase;
   schema: FormSchema<T>;
-  isInPanelView?: boolean; // Option to show description list in smaller font
 }
 
 export const StepRuleDescriptionComponent = <T,>({
   data,
   columns = 'multi',
   indexPatterns,
   schema,
-  isInPanelView,
 }: StepRuleDescriptionProps<T>) => {
   const kibana = useKibana();
   const license = useLicense();
@@ -134,16 +124,6 @@ export const StepRuleDescriptionComponent = <T,>({
     );
   }
 
-  if (isInPanelView) {
-    return (
-      <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="listItemColumnStepRuleDescriptionPanel">
-          <EuiDescriptionList listItems={listItems} className={panelViewStyle} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }
-
   return (
     <EuiFlexGroup>
       <EuiFlexItem data-test-subj="listItemColumnStepRuleDescription">

diff --git a/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx b/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx
@@ -60,7 +60,6 @@ interface StepAboutRuleReadOnlyProps {
   addPadding: boolean;
   descriptionColumns: 'multi' | 'single' | 'singleSplit';
   defaultValues: AboutStepRule;
-  isInPanelView?: boolean; // Option to show description list in smaller font
 }
 
 const ThreeQuartersContainer = styled.div`
@@ -399,16 +398,10 @@ const StepAboutRuleReadOnlyComponent: FC<StepAboutRuleReadOnlyProps> = ({
   addPadding,
   defaultValues: data,
   descriptionColumns,
-  isInPanelView = false,
 }) => {
   return (
     <StepContentWrapper data-test-subj="aboutStep" addPadding={addPadding}>
-      <StepRuleDescription
-        columns={descriptionColumns}
-        schema={defaultSchema}
-        data={data}
-        isInPanelView={isInPanelView}
-      />
+      <StepRuleDescription columns={descriptionColumns} schema={defaultSchema} data={data} />
     </StepContentWrapper>
   );
 };

diff --git a/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
@@ -118,7 +118,6 @@ interface StepDefineRuleReadOnlyProps {
   descriptionColumns: 'multi' | 'single' | 'singleSplit';
   defaultValues: DefineStepRule;
   indexPattern: DataViewBase;
-  isInPanelView?: boolean; // Option to show description list in smaller font
 }
 
 export const MyLabelButton = styled(EuiButtonEmpty)`
@@ -994,7 +993,6 @@ const StepDefineRuleReadOnlyComponent: FC<StepDefineRuleReadOnlyProps> = ({
   defaultValues: data,
   descriptionColumns,
   indexPattern,
-  isInPanelView = false,
 }) => {
   const dataForDescription: Partial<DefineStepRule> = getStepDataDataSource(data);
 
@@ -1005,7 +1003,6 @@ const StepDefineRuleReadOnlyComponent: FC<StepDefineRuleReadOnlyProps> = ({
         schema={filterRuleFieldsForType(schema, data.ruleType)}
         data={filterRuleFieldsForType(dataForDescription, data.ruleType)}
         indexPatterns={indexPattern}
-        isInPanelView={isInPanelView}
       />
     </StepContentWrapper>
   );

diff --git a/...plugins/security_solution/public/detections/components/rules/step_schedule_rule/index.tsx b/...plugins/security_solution/public/detections/components/rules/step_schedule_rule/index.tsx
@@ -27,7 +27,6 @@ interface StepScheduleRuleReadOnlyProps {
   addPadding: boolean;
   descriptionColumns: 'multi' | 'single' | 'singleSplit';
   defaultValues: ScheduleStepRule;
-  isInPanelView?: boolean; // Option to show description list in smaller font
 }
 
 const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
@@ -70,16 +69,10 @@ const StepScheduleRuleReadOnlyComponent: FC<StepScheduleRuleReadOnlyProps> = ({
   addPadding,
   defaultValues: data,
   descriptionColumns,
-  isInPanelView = false,
 }) => {
   return (
     <StepContentWrapper addPadding={addPadding}>
-      <StepRuleDescription
-        columns={descriptionColumns}
-        schema={schema}
-        data={data}
-        isInPanelView={isInPanelView}
-      />
+      <StepRuleDescription columns={descriptionColumns} schema={schema} data={data} />
     </StepContentWrapper>
   );
 };