Skip to content

Commit

Permalink
updated details panel to remain constant heights on toggle and add sc…
Browse files Browse the repository at this point in the history 
…roll to description. tests updated.
  • Loading branch information
@yctercero
yctercero committed Mar 14, 2020
1 parent 0dda6d9 commit 82c71c3
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 62 deletions.
4 changes: 2 additions & 2 deletions x-pack/legacy/plugins/siem/cypress/screens/rule_details.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]';

Expand Down
20 changes: 8 additions & 12 deletions ...iem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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(
<ThemeProvider theme={theme}>
<StepAboutRuleToggleDetails
Expand All @@ -141,7 +137,7 @@ describe('StepAboutRuleToggleDetails', () => {
expect(wrapper.find(EuiButtonGroup).exists()).toBeTruthy();
expect(
wrapper
.find('EuiButtonToggle[id="about"]')
.find('EuiButtonToggle[id="details"]')
.at(0)
.prop('isSelected')
).toBeTruthy();
Expand All @@ -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(
<ThemeProvider theme={theme}>
<StepAboutRuleToggleDetails
Expand All @@ -167,15 +163,15 @@ describe('StepAboutRuleToggleDetails', () => {
</ThemeProvider>
);

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
.find('input[title="Investigation notes"]')
.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();
});

Expand Down
132 changes: 84 additions & 48 deletions ...ins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
EuiSpacer,
EuiFlexItem,
EuiText,
EuiFlexGroup,
EuiResizeObserver,
} from '@elastic/eui';
import React, { memo, useState } from 'react';
import styled from 'styled-components';
Expand All @@ -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,
},
{
Expand All @@ -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<StepPanelProps> = ({
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 (
<MyPanel>
Expand All @@ -69,40 +84,61 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
</>
)}
{stepData != null && stepDataDetails != null && (
<>
<HeaderSection title={i18n.ABOUT_TEXT}>
{!isEmpty(stepDataDetails.note) && (
<EuiButtonGroup
options={toggleOptions}
idSelected={selectedToggleOption}
onChange={val => {
setToggleOption(val);
}}
/>
)}
</HeaderSection>
<AboutDescriptionContainer>
<AboutDescriptionScrollContainer className="eui-yScrollWithShadows">
{selectedToggleOption === 'about' ? (
<>
<EuiSpacer size="xs" />
<EuiText size="s" data-test-subj="stepAboutRuleDetailsToggleDescriptionText">
<p>{stepDataDetails.description}</p>
</EuiText>
<EuiSpacer size="m" />
<StepAboutRule
descriptionColumns="singleSplit"
isReadOnlyView={true}
isLoading={false}
defaultValues={stepData}
/>
</>
) : (
<Markdown raw={stepDataDetails.note} />
<FlexGroupFullHeight gutterSize="xs" direction="column">
<EuiFlexItem grow={1}>
<HeaderSection title={i18n.ABOUT_TEXT}>
{!isEmpty(stepDataDetails.note) && (
<EuiButtonGroup
options={toggleOptions}
idSelected={selectedToggleOption}
onChange={val => {
setToggleOption(val);
}}
data-test-subj="stepAboutDetailsToggle"
/>
)}
</AboutDescriptionScrollContainer>
</AboutDescriptionContainer>
</>
</HeaderSection>
</EuiFlexItem>
<EuiFlexItem grow={5}>
{selectedToggleOption === 'details' ? (
<EuiResizeObserver data-test-subj="stepAboutDetailsContent" onResize={onResize}>
{resizeRef => (
<AboutContent ref={resizeRef}>
<VerticalOverflowContainer maxHeight={120}>
<VerticalOverflowContent maxHeight={120} className="eui-yScrollWithShadows">
<EuiText
size="s"
data-test-subj="stepAboutRuleDetailsToggleDescriptionText"
>
{stepDataDetails.description}
</EuiText>
</VerticalOverflowContent>
</VerticalOverflowContainer>
<EuiSpacer size="m" />
<StepAboutRule
descriptionColumns="singleSplit"
isReadOnlyView={true}
isLoading={false}
defaultValues={stepData}
/>
</AboutContent>
)}
</EuiResizeObserver>
) : (
<VerticalOverflowContainer
data-test-subj="stepAboutDetailsNoteContent"
maxHeight={aboutPanelHeight}
>
<VerticalOverflowContent
maxHeight={aboutPanelHeight}
className="eui-yScrollWithShadows"
>
<Markdown raw={stepDataDetails.note} />
</VerticalOverflowContent>
</VerticalOverflowContainer>
)}
</EuiFlexItem>
</FlexGroupFullHeight>
)}
</MyPanel>
);
Expand Down

0 comments on commit 82c71c3

Please sign in to comment.