cleaned up exceptions builder and added tests

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

@@ -31,7 +31,7 @@ import * as i18n from './translations';
 import { TimelineNonEcsData, Ecs } from '../../../../graphql/types';
 import { useAppToasts } from '../../../hooks/use_app_toasts';
 import { useKibana } from '../../../lib/kibana';
-import { ExceptionBuilder } from '../builder';
+import { ExceptionBuilderComponent } from '../builder';
 import { Loader } from '../../loader';
 import { useAddOrUpdateException } from '../use_add_exception';
 import { useSignalIndex } from '../../../../detections/containers/detection_engine/alerts/use_signal_index';
@@ -317,7 +317,7 @@ export const AddExceptionModal = memo(function AddExceptionModal({
               <ModalBodySection className="builder-section">
                 <EuiText>{i18n.EXCEPTION_BUILDER_INFO}</EuiText>
                 <EuiSpacer />
-                <ExceptionBuilder
+                <ExceptionBuilderComponent
                   exceptionListItems={initialExceptionItems}
                   listType={exceptionListType}
                   listId={ruleExceptionList.list_id}

x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.test.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { BuilderAndBadgeComponent } from './and_badge';
+
+describe('BuilderAndBadgeComponent', () => {
+  test('it renders exceptionItemEntryFirstRowAndBadge for very first exception item in builder', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={0} andLogicIncluded />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper.find('[data-test-subj="exceptionItemEntryFirstRowAndBadge"]').exists()
+    ).toBeTruthy();
+  });
+
+  test('it renders exceptionItemEntryInvisibleAndBadge if "andLogicIncluded" and "entriesLength" is 1 or less', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <BuilderAndBadgeComponent entriesLength={1} exceptionItemIndex={0} andLogicIncluded />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper.find('[data-test-subj="exceptionItemEntryInvisibleAndBadge"]').exists()
+    ).toBeTruthy();
+  });
+
+  test('it renders regular "and" badge if "entriesLength" is greater than 1,  "andLogicIncluded" is true, and "exceptionItemIndex" is not 0', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={1} andLogicIncluded />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionItemEntryAndBadge"]').exists()).toBeTruthy();
+  });
+
+  test('it does not render a badge if "andLogicIncluded" is false', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <BuilderAndBadgeComponent
+          entriesLength={2}
+          exceptionItemIndex={1}
+          andLogicIncluded={false}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionItemEntryAndBadge"]').exists()).toBeFalsy();
+    expect(
+      wrapper.find('[data-test-subj="exceptionItemEntryInvisibleAndBadge"]').exists()
+    ).toBeFalsy();
+    expect(
+      wrapper.find('[data-test-subj="exceptionItemEntryFirstRowAndBadge"]').exists()
+    ).toBeFalsy();
+  });
+});

x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { EuiFlexItem } from '@elastic/eui';
+import styled from 'styled-components';
+
+import { AndOrBadge } from '../../and_or_badge';
+
+const MyInvisibleAndBadge = styled(EuiFlexItem)`
+  visibility: hidden;
+`;
+
+const MyFirstRowContainer = styled(EuiFlexItem)`
+  padding-top: 20px;
+`;
+
+interface BuilderAndBadgeProps {
+  entriesLength: number;
+  exceptionItemIndex: number;
+  andLogicIncluded: boolean;
+}
+
+export const BuilderAndBadgeComponent = React.memo<BuilderAndBadgeProps>(
+  ({ entriesLength, exceptionItemIndex, andLogicIncluded }) => {
+    const badge = <AndOrBadge includeAntennas type="and" />;
+
+    if (andLogicIncluded && entriesLength > 1 && exceptionItemIndex === 0) {
+      return (
+        <MyFirstRowContainer grow={false} data-test-subj="exceptionItemEntryFirstRowAndBadge">
+          {badge}
+        </MyFirstRowContainer>
+      );
+    } else if (andLogicIncluded && entriesLength <= 1) {
+      return (
+        <MyInvisibleAndBadge grow={false} data-test-subj="exceptionItemEntryInvisibleAndBadge">
+          {badge}
+        </MyInvisibleAndBadge>
+      );
+    } else if (andLogicIncluded && entriesLength > 1) {
+      return (
+        <EuiFlexItem grow={false} data-test-subj="exceptionItemEntryAndBadge">
+          {badge}
+        </EuiFlexItem>
+      );
+    } else {
+      return <></>;
+    }
+  }
+);
+
+BuilderAndBadgeComponent.displayName = 'BuilderAndBadge';

x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_delete_button.test.tsx

@@ -0,0 +1,136 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
+import { getEntryMatchMock } from '../../../../../../lists/common/schemas/types/entry_match.mock';
+
+import { BuilderEntryDeleteButtonComponent } from './entry_delete_button';
+
+describe('BuilderEntryDeleteButtonComponent', () => {
+  test('it renders firstRowBuilderDeleteButton for very first entry in builder', () => {
+    const wrapper = mount(
+      <BuilderEntryDeleteButtonComponent
+        entryIndex={0}
+        exceptionItemIndex={0}
+        nestedParentIndex={null}
+        isOnlyItem={false}
+        entries={getExceptionListItemSchemaMock().entries}
+        onDelete={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[data-test-subj="firstRowBuilderDeleteButton"] button')).toHaveLength(1);
+  });
+
+  test('it does not render firstRowBuilderDeleteButton if entryIndex is not 0', () => {
+    const wrapper = mount(
+      <BuilderEntryDeleteButtonComponent
+        entryIndex={1}
+        exceptionItemIndex={0}
+        nestedParentIndex={null}
+        isOnlyItem={false}
+        entries={getExceptionListItemSchemaMock().entries}
+        onDelete={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[data-test-subj="firstRowBuilderDeleteButton"]')).toHaveLength(0);
+    expect(wrapper.find('[data-test-subj="builderDeleteButton"] button')).toHaveLength(1);
+  });
+
+  test('it does not render firstRowBuilderDeleteButton if exceptionItemIndex is not 0', () => {
+    const wrapper = mount(
+      <BuilderEntryDeleteButtonComponent
+        entryIndex={0}
+        exceptionItemIndex={1}
+        nestedParentIndex={null}
+        isOnlyItem={false}
+        entries={getExceptionListItemSchemaMock().entries}
+        onDelete={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[data-test-subj="firstRowBuilderDeleteButton"]')).toHaveLength(0);
+    expect(wrapper.find('[data-test-subj="builderDeleteButton"] button')).toHaveLength(1);
+  });
+
+  test('it does not render firstRowBuilderDeleteButton if nestedParentIndex is not null', () => {
+    const wrapper = mount(
+      <BuilderEntryDeleteButtonComponent
+        entryIndex={0}
+        exceptionItemIndex={0}
+        nestedParentIndex={0}
+        isOnlyItem={false}
+        entries={getExceptionListItemSchemaMock().entries}
+        onDelete={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[data-test-subj="firstRowBuilderDeleteButton"]')).toHaveLength(0);
+    expect(wrapper.find('[data-test-subj="builderDeleteButton"] button')).toHaveLength(1);
+  });
+
+  test('it invokes "onDelete" when button is clicked', () => {
+    const onDelete = jest.fn();
+
+    const wrapper = mount(
+      <BuilderEntryDeleteButtonComponent
+        entryIndex={0}
+        exceptionItemIndex={1}
+        nestedParentIndex={null}
+        isOnlyItem={false}
+        entries={getExceptionListItemSchemaMock().entries}
+        onDelete={onDelete}
+      />
+    );
+
+    wrapper.find('[data-test-subj="builderDeleteButton"] button').simulate('click');
+
+    expect(onDelete).toHaveBeenCalledTimes(1);
+    expect(onDelete).toHaveBeenCalledWith(0, null);
+  });
+
+  test('it disables button if it is the only entry left and no field has been selected', () => {
+    const exceptionItem = {
+      ...getExceptionListItemSchemaMock(),
+      entries: [{ ...getEntryMatchMock(), field: '' }],
+    };
+    const wrapper = mount(
+      <BuilderEntryDeleteButtonComponent
+        entryIndex={0}
+        exceptionItemIndex={0}
+        nestedParentIndex={0}
+        isOnlyItem
+        entries={exceptionItem.entries}
+        onDelete={jest.fn()}
+      />
+    );
+
+    const button = wrapper.find('[data-test-subj="builderDeleteButton"] button').at(0);
+
+    expect(button.prop('disabled')).toBeTruthy();
+  });
+
+  test('it does not disable button if it is the only entry left and field has been selected', () => {
+    const wrapper = mount(
+      <BuilderEntryDeleteButtonComponent
+        entryIndex={1}
+        exceptionItemIndex={0}
+        nestedParentIndex={null}
+        isOnlyItem
+        entries={getExceptionListItemSchemaMock().entries}
+        onDelete={jest.fn()}
+      />
+    );
+
+    const button = wrapper.find('[data-test-subj="builderDeleteButton"] button').at(0);
+
+    expect(button.prop('disabled')).toBeFalsy();
+  });
+});