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

x-pack/plugins/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>
+  ));

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);
+  });
+});

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';

x-pack/plugins/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>
+    );
+  });