[SIEM][Exceptions] - Part 1 of ExceptionViewer UI (#68027)

### Summary The ExceptionViewer is a component that displays all of a user's exception list items. It will allow them to delete, edit, search and add exception items. This is part 1 of the UI for the ExceptionViewer. Trying to keep PRs relatively small and found this was one way to split it up. This first part accomplishes the following: - adds helper functions that will be used in the ExceptionBuilder as well and offer ways to format and access the new exception list item structure - creates ExceptionItem component, this is the component that displays the exception item information - moves the and_or_badge component into the common folder - adds stories for the ExceptionItem to easily test changes (Note that the color of some things like the and_or_badge is a bit off, as the light gray color used for it isn't picked up in the mock eui theme)
elastic · Jun 8, 2020 · 5ef120c · 5ef120c
1 parent c767df4
commit 5ef120c
Show file tree

Hide file tree

Showing 24 changed files with 2,129 additions and 65 deletions.
diff --git a/...ns/security_solution/public/common/components/and_or_badge/__examples__/index.stories.tsx b/...ns/security_solution/public/common/components/and_or_badge/__examples__/index.stories.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+
+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.';
+
+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>
+  ))
+  .add('antennas', () => (
+    <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <AndOrBadge type="and" includeAntennas />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <p>{sampleText}</p>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </ThemeProvider>
+  ));
diff --git a/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 { AndOrBadge } from './';
+
+describe('AndOrBadge', () => {
+  test('it renders top and bottom antenna bars when "includeAntennas" is true', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <AndOrBadge includeAntennas type="and" />
+      </ThemeProvider>
+    );
+
+    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);
+  });
+
+  test('it renders "and" when "type" is "and"', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <AndOrBadge type="and" />
+      </ThemeProvider>
+    );
+
+    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"', () => {
+    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('EuiFlexItem[data-test-subj="and-or-badge-bar"]')).toHaveLength(0);
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.tsx b/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.tsx
@@ -0,0 +1,108 @@
+/*
+ * 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, 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';
+
+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();
+  }
+);
+
+AndOrBadge.displayName = 'AndOrBadge';
diff --git a/...nts/timeline/and_or_badge/translations.ts → ...n/components/and_or_badge/translations.ts b/...nts/timeline/and_or_badge/translations.ts → ...n/components/and_or_badge/translations.ts
diff --git a/...gins/security_solution/public/common/components/exceptions/__examples__/index.stories.tsx b/...gins/security_solution/public/common/components/exceptions/__examples__/index.stories.tsx
@@ -0,0 +1,118 @@
+/*
+ * 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 { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { ExceptionItem } from '../viewer';
+import { Operator } from '../types';
+import { getExceptionItemMock } from '../mocks';
+
+storiesOf('components/exceptions', module)
+  .add('ExceptionItem/with os', () => {
+    const payload = getExceptionItemMock();
+    payload.description = '';
+    payload.comments = [];
+    payload.entries = [
+      {
+        field: 'actingProcess.file.signer',
+        type: 'match',
+        operator: Operator.INCLUSION,
+        value: 'Elastic, N.V.',
+      },
+    ];
+
+    return (
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionItem
+          commentsAccordionId={'accordion--comments'}
+          exceptionItem={payload}
+          handleDelete={() => {}}
+          handleEdit={() => {}}
+        />
+      </ThemeProvider>
+    );
+  })
+  .add('ExceptionItem/with description', () => {
+    const payload = getExceptionItemMock();
+    payload._tags = [];
+    payload.comments = [];
+    payload.entries = [
+      {
+        field: 'actingProcess.file.signer',
+        type: 'match',
+        operator: Operator.INCLUSION,
+        value: 'Elastic, N.V.',
+      },
+    ];
+
+    return (
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionItem
+          commentsAccordionId={'accordion--comments'}
+          exceptionItem={payload}
+          handleDelete={() => {}}
+          handleEdit={() => {}}
+        />
+      </ThemeProvider>
+    );
+  })
+  .add('ExceptionItem/with comments', () => {
+    const payload = getExceptionItemMock();
+    payload._tags = [];
+    payload.description = '';
+    payload.entries = [
+      {
+        field: 'actingProcess.file.signer',
+        type: 'match',
+        operator: Operator.INCLUSION,
+        value: 'Elastic, N.V.',
+      },
+    ];
+
+    return (
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionItem
+          commentsAccordionId={'accordion--comments'}
+          exceptionItem={payload}
+          handleDelete={() => {}}
+          handleEdit={() => {}}
+        />
+      </ThemeProvider>
+    );
+  })
+  .add('ExceptionItem/with nested entries', () => {
+    const payload = getExceptionItemMock();
+    payload._tags = [];
+    payload.description = '';
+    payload.comments = [];
+
+    return (
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionItem
+          commentsAccordionId={'accordion--comments'}
+          exceptionItem={payload}
+          handleDelete={() => {}}
+          handleEdit={() => {}}
+        />
+      </ThemeProvider>
+    );
+  })
+  .add('ExceptionItem/with everything', () => {
+    const payload = getExceptionItemMock();
+
+    return (
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionItem
+          commentsAccordionId={'accordion--comments'}
+          exceptionItem={payload}
+          handleDelete={() => {}}
+          handleEdit={() => {}}
+        />
+      </ThemeProvider>
+    );
+  });