From 82c71c3795d3dd95b41ab32d518847159ee07da0 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Sat, 14 Mar 2020 12:59:39 -0400 Subject: [PATCH] updated details panel to remain constant heights on toggle and add scroll to description. tests updated. --- .../siem/cypress/screens/rule_details.ts | 4 +- .../step_about_rule_details/index.test.tsx | 20 ++- .../step_about_rule_details/index.tsx | 132 +++++++++++------- 3 files changed, 94 insertions(+), 62 deletions(-) diff --git a/x-pack/legacy/plugins/siem/cypress/screens/rule_details.ts b/x-pack/legacy/plugins/siem/cypress/screens/rule_details.ts index 46da52cd0ddd8a..b41d32f9a5f57a 100644 --- a/x-pack/legacy/plugins/siem/cypress/screens/rule_details.ts +++ b/x-pack/legacy/plugins/siem/cypress/screens/rule_details.ts @@ -25,10 +25,10 @@ export const ABOUT_TIMELINE = 3; export const DEFINITION_CUSTOM_QUERY = 1; export const DEFINITION_DESCRIPTION = - '[data-test-subj="definition"] .euiDescriptionList__description'; + '[data-test-subj="listItemColumnStepRuleDescription"] .euiDescriptionList__description'; export const DEFINITION_INDEX_PATTERNS = - '[data-test-subj="definition"] .euiDescriptionList__description .euiBadge__text'; + '[data-test-subj="listItemColumnStepRuleDescription"] .euiDescriptionList__description .euiBadge__text'; export const RULE_NAME_HEADER = '[data-test-subj="header-page-title"]'; diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx index 996482588aaaf8..4ff81c9f4f6e59 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx @@ -87,13 +87,9 @@ describe('StepAboutRuleToggleDetails', () => { /> ); - expect(wrapper.find(EuiButtonGroup).exists()).toBeFalsy(); - expect( - wrapper - .find('EuiText[data-test-subj="stepAboutRuleDetailsToggleDescriptionText"] p') - .at(0) - .text() - ).toEqual(mockAboutStepWithoutNote.description); + expect(wrapper.find('[data-test-subj="stepAboutDetailsToggle"]').exists()).toBeFalsy(); + expect(wrapper.find('[data-test-subj="stepAboutDetailsNoteContent"]').exists()).toBeFalsy(); + expect(wrapper.find('[data-test-subj="stepAboutDetailsContent"]').exists()).toBeTruthy(); }); test('it does not render description as part of the description list', () => { @@ -124,7 +120,7 @@ describe('StepAboutRuleToggleDetails', () => { }); describe('note value does exist', () => { - test('it renders toggle buttons, defaulted to `about`', () => { + test('it renders toggle buttons, defaulted to `details`', () => { const wrapper = mount( { expect(wrapper.find(EuiButtonGroup).exists()).toBeTruthy(); expect( wrapper - .find('EuiButtonToggle[id="about"]') + .find('EuiButtonToggle[id="details"]') .at(0) .prop('isSelected') ).toBeTruthy(); @@ -153,7 +149,7 @@ describe('StepAboutRuleToggleDetails', () => { ).toBeFalsy(); }); - test('it allows users to toggle between `about` and `note`', () => { + test('it allows users to toggle between `details` and `note`', () => { const wrapper = mount( { ); - expect(wrapper.find('EuiButtonGroup[idSelected="about"]').exists()).toBeTruthy(); + expect(wrapper.find('EuiButtonGroup[idSelected="details"]').exists()).toBeTruthy(); expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeFalsy(); wrapper @@ -175,7 +171,7 @@ describe('StepAboutRuleToggleDetails', () => { .at(0) .simulate('change', { target: { value: 'notes' } }); - expect(wrapper.find('EuiButtonGroup[idSelected="about"]').exists()).toBeFalsy(); + expect(wrapper.find('EuiButtonGroup[idSelected="details"]').exists()).toBeFalsy(); expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeTruthy(); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx index ca6a1ca5063e31..ccad1c01c4681a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx @@ -12,6 +12,8 @@ import { EuiSpacer, EuiFlexItem, EuiText, + EuiFlexGroup, + EuiResizeObserver, } from '@elastic/eui'; import React, { memo, useState } from 'react'; import styled from 'styled-components'; @@ -23,9 +25,30 @@ import { AboutStepRule, AboutStepRuleDetails } from '../../types'; import * as i18n from './translations'; import { StepAboutRule } from '../step_about_rule/'; +const MyPanel = styled(EuiPanel)` + position: relative; +`; + +const FlexGroupFullHeight = styled(EuiFlexGroup)` + height: 100%; +`; + +const VerticalOverflowContainer = styled.div((props: { maxHeight: number }) => ({ + 'max-height': `${props.maxHeight ?? '200'}px`, + 'overflow-y': 'hidden', +})); + +const VerticalOverflowContent = styled.div((props: { maxHeight: number }) => ({ + 'max-height': `${props.maxHeight}px`, +})); + +const AboutContent = styled.div` + height: 100%; +`; + const toggleOptions: EuiButtonGroupOption[] = [ { - id: 'about', + id: 'details', label: i18n.ABOUT_PANEL_DETAILS_TAB, }, { @@ -40,25 +63,17 @@ interface StepPanelProps { loading: boolean; } -const MyPanel = styled(EuiPanel)` - position: relative; -`; - -const AboutDescriptionContainer = styled(EuiFlexItem)` - max-height: 550px; - overflow-y: hidden; -`; - -const AboutDescriptionScrollContainer = styled.div` - overflow-x: hidden; -`; - const StepAboutRuleToggleDetailsComponent: React.FC = ({ stepData, stepDataDetails, loading, }) => { - const [selectedToggleOption, setToggleOption] = useState('about'); + const [selectedToggleOption, setToggleOption] = useState('details'); + const [aboutPanelHeight, setAboutPanelHeight] = useState(); + + const onResize = (e: { height: number; width: number }) => { + setAboutPanelHeight(e.height); + }; return ( @@ -69,40 +84,61 @@ const StepAboutRuleToggleDetailsComponent: React.FC = ({ )} {stepData != null && stepDataDetails != null && ( - <> - - {!isEmpty(stepDataDetails.note) && ( - { - setToggleOption(val); - }} - /> - )} - - - - {selectedToggleOption === 'about' ? ( - <> - - -

{stepDataDetails.description}

- - - - - ) : ( - + + + + {!isEmpty(stepDataDetails.note) && ( + { + setToggleOption(val); + }} + data-test-subj="stepAboutDetailsToggle" + /> )} - - - + + + + {selectedToggleOption === 'details' ? ( + + {resizeRef => ( + + + + + {stepDataDetails.description} + + + + + + + )} + + ) : ( + + + + + + )} + + )} );