[Security Solution][Exceptions] - Remove initial add exception item b…

…utton in builder (#72215) (#72306) ## Summary This PR addresses two issues in the builder: - **Existing behavior:** if you add a bunch of entries then delete all but one, the indent that shows for when multiple entries exists does not go away - **Updated behavior:** if you add a bunch of entries and delete all but one, the indent that shows for when multiple entries exist goes away - **Existing behavior:** on render of add exception modal, if no exception items exist (or no exception items with entries exist) an `Add Exception` button appears - **Updated behavior:** if only one entry exists, the delete button is disabled for that entry; on initial render of the add exception modal, if no entries exist, an empty entry is shown Co-authored-by: Elastic Machine <[email protected]>
elastic · Jul 17, 2020 · 00e804f · 00e804f
1 parent 7fcf00c
commit 00e804f
Show file tree

Hide file tree

Showing 8 changed files with 493 additions and 282 deletions.
diff --git a/...y_solution/public/common/components/exceptions/builder/builder_button_options.stories.tsx b/...y_solution/public/common/components/exceptions/builder/builder_button_options.stories.tsx
@@ -16,26 +16,12 @@ addDecorator((storyFn) => (
 ));
 
 storiesOf('Components|Exceptions|BuilderButtonOptions', module)
-  .add('init button', () => {
-    return (
-      <BuilderButtonOptions
-        isAndDisabled={false}
-        isOrDisabled={false}
-        showNestedButton={false}
-        displayInitButton
-        onOrClicked={action('onClick')}
-        onAndClicked={action('onClick')}
-        onNestedClicked={action('onClick')}
-      />
-    );
-  })
   .add('and/or buttons', () => {
     return (
       <BuilderButtonOptions
         isAndDisabled={false}
         isOrDisabled={false}
         showNestedButton={false}
-        displayInitButton={false}
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}
@@ -48,7 +34,6 @@ storiesOf('Components|Exceptions|BuilderButtonOptions', module)
         isAndDisabled={false}
         isOrDisabled={false}
         showNestedButton
-        displayInitButton={false}
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}
@@ -61,7 +46,6 @@ storiesOf('Components|Exceptions|BuilderButtonOptions', module)
         isAndDisabled
         isOrDisabled={false}
         showNestedButton={false}
-        displayInitButton={false}
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}
@@ -74,7 +58,6 @@ storiesOf('Components|Exceptions|BuilderButtonOptions', module)
         isAndDisabled={false}
         isOrDisabled
         showNestedButton={false}
-        displayInitButton={false}
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}

diff --git a/...rity_solution/public/common/components/exceptions/builder/builder_button_options.test.tsx b/...rity_solution/public/common/components/exceptions/builder/builder_button_options.test.tsx
@@ -16,7 +16,6 @@ describe('BuilderButtonOptions', () => {
         isAndDisabled={false}
         isOrDisabled={false}
         showNestedButton={false}
-        displayInitButton={false}
         onOrClicked={jest.fn()}
         onAndClicked={jest.fn()}
         onNestedClicked={jest.fn()}
@@ -31,44 +30,6 @@ describe('BuilderButtonOptions', () => {
     expect(wrapper.find('[data-test-subj="exceptionsNestedButton"] button')).toHaveLength(0);
   });
 
-  test('it renders "add exception" button if "displayInitButton" is true', () => {
-    const wrapper = mount(
-      <BuilderButtonOptions
-        isAndDisabled={false}
-        isOrDisabled={false}
-        showNestedButton={false}
-        displayInitButton
-        onOrClicked={jest.fn()}
-        onAndClicked={jest.fn()}
-        onNestedClicked={jest.fn()}
-      />
-    );
-
-    expect(wrapper.find('[data-test-subj="exceptionsAddNewExceptionButton"] button')).toHaveLength(
-      1
-    );
-  });
-
-  test('it invokes "onAddExceptionClicked" when "add exception" button is clicked', () => {
-    const onOrClicked = jest.fn();
-
-    const wrapper = mount(
-      <BuilderButtonOptions
-        isAndDisabled={false}
-        isOrDisabled={false}
-        showNestedButton={false}
-        displayInitButton
-        onOrClicked={onOrClicked}
-        onAndClicked={jest.fn()}
-        onNestedClicked={jest.fn()}
-      />
-    );
-
-    wrapper.find('[data-test-subj="exceptionsAddNewExceptionButton"] button').simulate('click');
-
-    expect(onOrClicked).toHaveBeenCalledTimes(1);
-  });
-
   test('it invokes "onOrClicked" when "or" button is clicked', () => {
     const onOrClicked = jest.fn();
 
@@ -77,7 +38,6 @@ describe('BuilderButtonOptions', () => {
         isAndDisabled={false}
         isOrDisabled={false}
         showNestedButton={false}
-        displayInitButton={false}
         onOrClicked={onOrClicked}
         onAndClicked={jest.fn()}
         onNestedClicked={jest.fn()}
@@ -97,7 +57,6 @@ describe('BuilderButtonOptions', () => {
         isAndDisabled={false}
         isOrDisabled={false}
         showNestedButton={false}
-        displayInitButton={false}
         onOrClicked={jest.fn()}
         onAndClicked={onAndClicked}
         onNestedClicked={jest.fn()}
@@ -113,7 +72,6 @@ describe('BuilderButtonOptions', () => {
     const wrapper = mount(
       <BuilderButtonOptions
         showNestedButton={false}
-        displayInitButton={false}
         isOrDisabled={false}
         isAndDisabled
         onOrClicked={jest.fn()}
@@ -131,7 +89,6 @@ describe('BuilderButtonOptions', () => {
     const wrapper = mount(
       <BuilderButtonOptions
         showNestedButton={false}
-        displayInitButton={false}
         isOrDisabled
         isAndDisabled={false}
         onOrClicked={jest.fn()}
@@ -153,7 +110,6 @@ describe('BuilderButtonOptions', () => {
         isAndDisabled={false}
         isOrDisabled={false}
         showNestedButton
-        displayInitButton={false}
         onOrClicked={jest.fn()}
         onAndClicked={jest.fn()}
         onNestedClicked={onNestedClicked}

diff --git a/.../security_solution/public/common/components/exceptions/builder/builder_button_options.tsx b/.../security_solution/public/common/components/exceptions/builder/builder_button_options.tsx
@@ -16,7 +16,6 @@ const MyEuiButton = styled(EuiButton)`
 interface BuilderButtonOptionsProps {
   isOrDisabled: boolean;
   isAndDisabled: boolean;
-  displayInitButton: boolean;
   showNestedButton: boolean;
   onAndClicked: () => void;
   onOrClicked: () => void;
@@ -26,64 +25,47 @@ interface BuilderButtonOptionsProps {
 export const BuilderButtonOptions: React.FC<BuilderButtonOptionsProps> = ({
   isOrDisabled = false,
   isAndDisabled = false,
-  displayInitButton,
   showNestedButton = false,
   onAndClicked,
   onOrClicked,
   onNestedClicked,
 }) => (
   <EuiFlexGroup gutterSize="s" alignItems="center">
-    {displayInitButton ? (
+    <EuiFlexItem grow={false}>
+      <MyEuiButton
+        fill
+        size="s"
+        iconType="plusInCircle"
+        onClick={onAndClicked}
+        data-test-subj="exceptionsAndButton"
+        isDisabled={isAndDisabled}
+      >
+        {i18n.AND}
+      </MyEuiButton>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <MyEuiButton
+        fill
+        size="s"
+        iconType="plusInCircle"
+        onClick={onOrClicked}
+        isDisabled={isOrDisabled}
+        data-test-subj="exceptionsOrButton"
+      >
+        {i18n.OR}
+      </MyEuiButton>
+    </EuiFlexItem>
+    {showNestedButton && (
       <EuiFlexItem grow={false}>
         <EuiButton
-          fill
           size="s"
-          iconType="plusInCircle"
-          onClick={onOrClicked}
-          data-test-subj="exceptionsAddNewExceptionButton"
+          iconType="nested"
+          onClick={onNestedClicked}
+          data-test-subj="exceptionsNestedButton"
         >
-          {i18n.ADD_EXCEPTION_TITLE}
+          {i18n.ADD_NESTED_DESCRIPTION}
         </EuiButton>
       </EuiFlexItem>
-    ) : (
-      <>
-        <EuiFlexItem grow={false}>
-          <MyEuiButton
-            fill
-            size="s"
-            iconType="plusInCircle"
-            onClick={onAndClicked}
-            data-test-subj="exceptionsAndButton"
-            isDisabled={isAndDisabled}
-          >
-            {i18n.AND}
-          </MyEuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <MyEuiButton
-            fill
-            size="s"
-            iconType="plusInCircle"
-            onClick={onOrClicked}
-            isDisabled={isOrDisabled}
-            data-test-subj="exceptionsOrButton"
-          >
-            {i18n.OR}
-          </MyEuiButton>
-        </EuiFlexItem>
-        {showNestedButton && (
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              size="s"
-              iconType="nested"
-              onClick={onNestedClicked}
-              data-test-subj="exceptionsNestedButton"
-            >
-              {i18n.ADD_NESTED_DESCRIPTION}
-            </EuiButton>
-          </EuiFlexItem>
-        )}
-      </>
     )}
   </EuiFlexGroup>
 );