[7.x] [SIEM][Detections Engine] - Exceptions viewer cleanup (#68651)

x-pack/plugins/security_solution/public/common/components/and_or_badge/__examples__/index.stories.tsx

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

x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx

@@ -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"', () => {
@@ -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"', () => {
@@ -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);
   });
 });

x-pack/plugins/security_solution/public/common/components/and_or_badge/index.tsx

@@ -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} />;
   }
 );
 

x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.test.tsx

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

x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.tsx

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

x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx

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

x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.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;
+ * 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';