[Security Solution][Exceptions] - Moves remaining exceptions builder logic into lists plugin

packages/kbn-optimizer/limits.yml

@@ -46,7 +46,7 @@ pageLoadAssetSize:
   lens: 96624
   licenseManagement: 41817
   licensing: 39008
-  lists: 202261
+  lists: 228500
   logstash: 53548
   management: 46112
   maps: 183610

src/dev/code_coverage/ingest_coverage/__tests__/enumerate_patterns.test.js

@@ -35,14 +35,4 @@ describe(`enumeratePatterns`, () => {
       'src/plugins/charts/public/static/color_maps/color_maps.ts kibana-app'
     );
   });
-  it(`should resolve x-pack/plugins/security_solution/public/common/components/exceptions/builder/translations.ts to kibana-security`, () => {
-    const short = 'x-pack/plugins/security_solution';
-    const actual = enumeratePatterns(REPO_ROOT)(log)(new Map([[short, ['kibana-security']]]));
-
-    expect(
-      actual[0].includes(
-        `${short}/public/common/components/exceptions/builder/translations.ts kibana-security`
-      )
-    ).toBe(true);
-  });
 });

x-pack/plugins/lists/public/common/empty_value.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const getEmptyValue = (): string => '—';

x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { RecursivePartial } from '@elastic/eui/src/components/common';
+
+import { EuiTheme } from '../../../../../../src/plugins/kibana_react/common';
+
+export const getMockTheme = (partialTheme: RecursivePartial<EuiTheme>): EuiTheme =>
+  partialTheme as EuiTheme;

x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Story, addDecorator } from '@storybook/react';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
+
+import { AndOrBadge, AndOrBadgeProps } 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 mockTheme = getMockTheme({
+  darkMode: false,
+  eui: euiLightVars,
+});
+
+addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
+
+export default {
+  argTypes: {
+    includeAntennas: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determines whether extending vertical lines appear extended off of round badge',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+      type: {
+        required: false,
+      },
+    },
+    type: {
+      control: {
+        options: ['and', 'or'],
+        type: 'select',
+      },
+      description: '`and | or` - determines text displayed in badge.',
+      table: {
+        defaultValue: {
+          summary: 'and',
+        },
+      },
+      type: {
+        required: true,
+      },
+    },
+  },
+  component: AndOrBadge,
+  title: 'AndOrBadge',
+};
+
+const AndOrBadgeTemplate: Story<AndOrBadgeProps> = (args) => (
+  <EuiFlexGroup>
+    <EuiFlexItem grow={false}>
+      <AndOrBadge {...args} />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <p>{sampleText}</p>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export const Default = AndOrBadgeTemplate.bind({});
+Default.args = {
+  includeAntennas: false,
+  type: 'and',
+};

x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx

@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { mount } from 'enzyme';
+
+import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
+
+import { AndOrBadge } from './';
+
+const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
+
+describe('AndOrBadge', () => {
+  test('it renders top and bottom antenna bars when "includeAntennas" is true', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={mockTheme}>
+        <AndOrBadge includeAntennas 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 does not render top and bottom antenna bars when "includeAntennas" is false', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={mockTheme}>
+        <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"', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={mockTheme}>
+        <AndOrBadge 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={mockTheme}>
+        <AndOrBadge type="or" />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
+  });
+});

x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { RoundedBadge } from './rounded_badge';
+import { RoundedBadgeAntenna } from './rounded_badge_antenna';
+
+export type AndOr = 'and' | 'or';
+export interface AndOrBadgeProps {
+  type: AndOr;
+  includeAntennas?: boolean;
+}
+/** Displays AND / OR in a round badge */
+// This ticket is closed, however, as of 3/23/21 no round badge yet
+// Ref: https://github.com/elastic/eui/issues/1655
+export const AndOrBadge = React.memo<AndOrBadgeProps>(({ type, includeAntennas = false }) => {
+  return includeAntennas ? <RoundedBadgeAntenna type={type} /> : <RoundedBadge type={type} />;
+});
+
+AndOrBadge.displayName = 'AndOrBadge';

x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.test.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { RoundedBadge } from './rounded_badge';
+
+describe('RoundedBadge', () => {
+  test('it renders "and" when "type" is "and"', () => {
+    const wrapper = mount(<RoundedBadge type="and" />);
+
+    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(<RoundedBadge type="or" />);
+
+    expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
+  });
+});

x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+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';

x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { mount } from 'enzyme';
+
+import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
+
+import { RoundedBadgeAntenna } from './rounded_badge_antenna';
+
+const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
+
+describe('RoundedBadgeAntenna', () => {
+  test('it renders top and bottom antenna bars', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={mockTheme}>
+        <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={mockTheme}>
+        <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={mockTheme}>
+        <RoundedBadgeAntenna type="or" />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
+  });
+});

x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+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 }): string => theme.eui.euiColorLightShade};
+  position: relative;
+  width: 2px;
+  &:after {
+    background: ${({ theme }): string => 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;
+  }
+`;
+
+export const RoundedBadgeAntenna: React.FC<{ type: AndOr }> = ({ type }) => (
+  <EuiFlexGroup
+    className="andBadgeContainer"
+    gutterSize="none"
+    direction="column"
+    alignItems="center"
+  >
+    <TopAntenna data-test-subj="andOrBadgeBarTop" grow={1} />
+    <EuiFlexItem grow={false}>
+      <RoundedBadge type={type} />
+    </EuiFlexItem>
+    <BottomAntenna data-test-subj="andOrBadgeBarBottom" grow={1} />
+  </EuiFlexGroup>
+);
+
+RoundedBadgeAntenna.displayName = 'RoundedBadgeAntenna';