Skip to content

Commit

Permalink
[SIEM][Detections Engine] - Exceptions viewer cleanup (elastic#68651)
Browse files Browse the repository at this point in the history
### Summary

This PR is a follow up to elastic#68027 where some feedback didn't make it in. It cleans up the and_or_badge component, updates some css, and cleans up stories.
  • Loading branch information
yctercero committed Jun 10, 2020
1 parent 86ea134 commit 318147a
Show file tree
Hide file tree
Showing 18 changed files with 371 additions and 255 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { storiesOf } from '@storybook/react';
import React from 'react';
import React, { ReactNode } from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
Expand All @@ -14,26 +14,21 @@ import { AndOrBadge } from '..';
const sampleText =
'Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys. You are doing me the shock smol borking doggo with a long snoot for pats wow very biscit, length boy. Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys.';

const withTheme = (storyFn: () => ReactNode) => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>{storyFn()}</ThemeProvider>
);

storiesOf('components/AndOrBadge', module)
.add('and', () => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
<AndOrBadge type="and" />
</ThemeProvider>
))
.add('or', () => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
<AndOrBadge type="or" />
</ThemeProvider>
))
.addDecorator(withTheme)
.add('and', () => <AndOrBadge type="and" />)
.add('or', () => <AndOrBadge type="or" />)
.add('antennas', () => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<AndOrBadge type="and" includeAntennas />
</EuiFlexItem>
<EuiFlexItem>
<p>{sampleText}</p>
</EuiFlexItem>
</EuiFlexGroup>
</ThemeProvider>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<AndOrBadge type="and" includeAntennas />
</EuiFlexItem>
<EuiFlexItem>
<p>{sampleText}</p>
</EuiFlexItem>
</EuiFlexGroup>
));
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,20 @@ describe('AndOrBadge', () => {
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
expect(wrapper.find('EuiFlexItem[data-test-subj="andOrBadgeBarTop"]')).toHaveLength(1);
expect(wrapper.find('EuiFlexItem[data-test-subj="andOrBadgeBarBottom"]')).toHaveLength(1);
expect(wrapper.find('[data-test-subj="andOrBadgeBarTop"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="andOrBadgeBarBottom"]').exists()).toBeTruthy();
});

test('it does not render top and bottom antenna bars when "includeAntennas" is false', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<AndOrBadge type="or" />
</ThemeProvider>
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
expect(wrapper.find('[data-test-subj="andOrBadgeBarTop"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="andOrBadgeBarBottom"]').exists()).toBeFalsy();
});

test('it renders "and" when "type" is "and"', () => {
Expand All @@ -32,7 +44,6 @@ describe('AndOrBadge', () => {
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
expect(wrapper.find('EuiFlexItem[data-test-subj="and-or-badge-bar"]')).toHaveLength(0);
});

test('it renders "or" when "type" is "or"', () => {
Expand All @@ -43,6 +54,5 @@ describe('AndOrBadge', () => {
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
expect(wrapper.find('EuiFlexItem[data-test-subj="and-or-badge-bar"]')).toHaveLength(0);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -3,105 +3,18 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiFlexGroup, EuiBadge, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import styled, { css } from 'styled-components';

import * as i18n from './translations';

const AndOrBadgeAntenna = styled(EuiFlexItem)`
${({ theme }) => css`
background: ${theme.eui.euiColorLightShade};
position: relative;
width: 2px;
&:after {
background: ${theme.eui.euiColorLightShade};
content: '';
height: 8px;
right: -4px;
position: absolute;
width: 9px;
clip-path: circle();
}
&.topAndOrBadgeAntenna {
&:after {
top: -1px;
}
}
&.bottomAndOrBadgeAntenna {
&:after {
bottom: -1px;
}
}
&.euiFlexItem {
margin: 0 12px 0 0;
}
`}
`;

const EuiFlexItemWrapper = styled(EuiFlexItem)`
&.euiFlexItem {
margin: 0 12px 0 0;
}
`;

const RoundedBadge = (styled(EuiBadge)`
align-items: center;
border-radius: 100%;
display: inline-flex;
font-size: 9px;
height: 34px;
justify-content: center;
margin: 0 5px 0 5px;
padding: 7px 6px 4px 6px;
user-select: none;
width: 34px;
.euiBadge__content {
position: relative;
top: -1px;
}
.euiBadge__text {
text-overflow: clip;
}
` as unknown) as typeof EuiBadge;

RoundedBadge.displayName = 'RoundedBadge';
import { RoundedBadge } from './rounded_badge';
import { RoundedBadgeAntenna } from './rounded_badge_antenna';

export type AndOr = 'and' | 'or';

/** Displays AND / OR in a round badge */
// Ref: https://github.com/elastic/eui/issues/1655
export const AndOrBadge = React.memo<{ type: AndOr; includeAntennas?: boolean }>(
({ type, includeAntennas = false }) => {
const getBadge = () => (
<RoundedBadge data-test-subj="and-or-badge" color="hollow">
{type === 'and' ? i18n.AND : i18n.OR}
</RoundedBadge>
);

const getBadgeWithAntennas = () => (
<EuiFlexGroup
className="andBadgeContainer"
gutterSize="none"
direction="column"
alignItems="center"
>
<AndOrBadgeAntenna
className="topAndOrBadgeAntenna"
data-test-subj="andOrBadgeBarTop"
grow={1}
/>
<EuiFlexItemWrapper grow={false}>{getBadge()}</EuiFlexItemWrapper>
<AndOrBadgeAntenna
className="bottomAndOrBadgeAntenna"
data-test-subj="andOrBadgeBarBottom"
grow={1}
/>
</EuiFlexGroup>
);

return includeAntennas ? getBadgeWithAntennas() : getBadge();
return includeAntennas ? <RoundedBadgeAntenna type={type} /> : <RoundedBadge type={type} />;
}
);

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';

import { RoundedBadge } from './rounded_badge';

describe('RoundedBadge', () => {
test('it renders "and" when "type" is "and"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<RoundedBadge type="and" />
</ThemeProvider>
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
});

test('it renders "or" when "type" is "or"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<RoundedBadge type="or" />
</ThemeProvider>
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiBadge } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';

import * as i18n from './translations';
import { AndOr } from '.';

const RoundBadge = (styled(EuiBadge)`
align-items: center;
border-radius: 100%;
display: inline-flex;
font-size: 9px;
height: 34px;
justify-content: center;
margin: 0 5px 0 5px;
padding: 7px 6px 4px 6px;
user-select: none;
width: 34px;
.euiBadge__content {
position: relative;
top: -1px;
}
.euiBadge__text {
text-overflow: clip;
}
` as unknown) as typeof EuiBadge;

RoundBadge.displayName = 'RoundBadge';

export const RoundedBadge: React.FC<{ type: AndOr }> = ({ type }) => (
<RoundBadge data-test-subj="and-or-badge" color="hollow">
{type === 'and' ? i18n.AND : i18n.OR}
</RoundBadge>
);

RoundedBadge.displayName = 'RoundedBadge';
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';

import { RoundedBadgeAntenna } from './rounded_badge_antenna';

describe('RoundedBadgeAntenna', () => {
test('it renders top and bottom antenna bars', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<RoundedBadgeAntenna type="and" />
</ThemeProvider>
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
expect(wrapper.find('[data-test-subj="andOrBadgeBarTop"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="andOrBadgeBarBottom"]').exists()).toBeTruthy();
});

test('it renders "and" when "type" is "and"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<RoundedBadgeAntenna type="and" />
</ThemeProvider>
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
});

test('it renders "or" when "type" is "or"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<RoundedBadgeAntenna type="or" />
</ThemeProvider>
);

expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import styled, { css } from 'styled-components';

import { RoundedBadge } from './rounded_badge';
import { AndOr } from '.';

const antennaStyles = css`
background: ${({ theme }) => theme.eui.euiColorLightShade};
position: relative;
width: 2px;
margin: 0 12px 0 0;
&:after {
background: ${({ theme }) => theme.eui.euiColorLightShade};
content: '';
height: 8px;
right: -4px;
position: absolute;
width: 10px;
clip-path: circle();
}
`;

const TopAntenna = styled(EuiFlexItem)`
${antennaStyles}
&:after {
top: 0;
}
`;
const BottomAntenna = styled(EuiFlexItem)`
${antennaStyles}
&:after {
bottom: 0;
}
`;

const EuiFlexItemWrapper = styled(EuiFlexItem)`
margin: 0 12px 0 0;
`;

export const RoundedBadgeAntenna: React.FC<{ type: AndOr }> = ({ type }) => (
<EuiFlexGroup
className="andBadgeContainer"
gutterSize="none"
direction="column"
alignItems="center"
>
<TopAntenna data-test-subj="andOrBadgeBarTop" grow={1} />
<EuiFlexItemWrapper grow={false}>
<RoundedBadge type={type} />
</EuiFlexItemWrapper>
<BottomAntenna data-test-subj="andOrBadgeBarBottom" grow={1} />
</EuiFlexGroup>
);

RoundedBadgeAntenna.displayName = 'RoundedBadgeAntenna';
Loading

0 comments on commit 318147a

Please sign in to comment.