[Security Solution][Exceptions] - Update UI exceptions builder nested logic

x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx

@@ -52,50 +52,46 @@ describe('AutocompleteFieldListsComponent', () => {
           selectedField={getField('ip')}
           selectedValue="some-list-id"
           isLoading={false}
-          isClearable={false}
-          isDisabled={true}
+          isClearable={true}
+          isDisabled
           onChange={jest.fn()}
         />
       </ThemeProvider>
     );
 
-    await waitFor(() => {
-      expect(
-        wrapper
-          .find(`[data-test-subj="valuesAutocompleteComboBox listsComboxBox"] input`)
-          .prop('disabled')
-      ).toBeTruthy();
-    });
+    expect(
+      wrapper
+        .find(`[data-test-subj="valuesAutocompleteComboBox listsComboxBox"] input`)
+        .prop('disabled')
+    ).toBeTruthy();
   });
 
   test('it renders loading if "isLoading" is true', async () => {
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <AutocompleteFieldListsComponent
           placeholder="Placeholder text"
-          selectedField={getField('ip')}
-          selectedValue="some-list-id"
-          isLoading={true}
+          selectedField={getField('@tags')}
+          selectedValue=""
+          isLoading
           isClearable={false}
           isDisabled={false}
           onChange={jest.fn()}
         />
       </ThemeProvider>
     );
 
-    await waitFor(() => {
+    wrapper
+      .find(`[data-test-subj="valuesAutocompleteComboBox listsComboxBox"] button`)
+      .at(0)
+      .simulate('click');
+    expect(
       wrapper
-        .find(`[data-test-subj="valuesAutocompleteComboBox listsComboxBox"] button`)
-        .at(0)
-        .simulate('click');
-      expect(
-        wrapper
-          .find(
-            `EuiComboBoxOptionsList[data-test-subj="valuesAutocompleteComboBox listsComboxBox-optionsList"]`
-          )
-          .prop('isLoading')
-      ).toBeTruthy();
-    });
+        .find(
+          `EuiComboBoxOptionsList[data-test-subj="valuesAutocompleteComboBox listsComboxBox-optionsList"]`
+        )
+        .prop('isLoading')
+    ).toBeTruthy();
   });
 
   test('it allows user to clear values if "isClearable" is true', async () => {
@@ -104,19 +100,19 @@ describe('AutocompleteFieldListsComponent', () => {
         <AutocompleteFieldListsComponent
           placeholder="Placeholder text"
           selectedField={getField('ip')}
-          selectedValue="some-list-id"
+          selectedValue=""
           isLoading={false}
-          isClearable={true}
+          isClearable={false}
           isDisabled={false}
           onChange={jest.fn()}
         />
       </ThemeProvider>
     );
     expect(
       wrapper
-        .find(`[data-test-subj="comboBoxInput"]`)
-        .hasClass('euiComboBox__inputWrap-isClearable')
-    ).toBeTruthy();
+        .find('EuiComboBox[data-test-subj="valuesAutocompleteComboBox listsComboxBox"]')
+        .prop('options')
+    ).toEqual([{ label: 'some name' }]);
   });
 
   test('it correctly displays lists that match the selected "keyword" field esType', () => {
@@ -210,19 +206,24 @@ describe('AutocompleteFieldListsComponent', () => {
       onChange: (a: EuiComboBoxOptionOption[]) => void;
     }).onChange([{ label: 'some name' }]);
 
-    expect(mockOnChange).toHaveBeenCalledWith({
-      created_at: DATE_NOW,
-      created_by: 'some user',
-      description: 'some description',
-      id: 'some-list-id',
-      meta: {},
-      name: 'some name',
-      tie_breaker_id: '6a76b69d-80df-4ab2-8c3e-85f466b06a0e',
-      type: 'ip',
-      updated_at: DATE_NOW,
-      updated_by: 'some user',
-      version: VERSION,
-      immutable: IMMUTABLE,
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalledWith({
+        created_at: DATE_NOW,
+        created_by: 'some user',
+        description: 'some description',
+        id: 'some-list-id',
+        meta: {},
+        name: 'some name',
+        tie_breaker_id: '6a76b69d-80df-4ab2-8c3e-85f466b06a0e',
+        type: 'ip',
+        updated_at: DATE_NOW,
+        updated_by: 'some user',
+        _version: undefined,
+        version: VERSION,
+        deserializer: undefined,
+        serializer: undefined,
+        immutable: IMMUTABLE,
+      });
     });
   });
 });

x-pack/plugins/security_solution/public/common/components/autocomplete/operator.test.tsx

@@ -74,7 +74,7 @@ describe('OperatorComponent', () => {
     expect(wrapper.find(`button[data-test-subj="comboBoxClearButton"]`).exists()).toBeTruthy();
   });
 
-  test('it displays "operatorOptions" if param is passed in', () => {
+  test('it displays "operatorOptions" if param is passed in with items', () => {
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <OperatorComponent
@@ -95,6 +95,52 @@ describe('OperatorComponent', () => {
     ).toEqual([{ label: 'is not' }]);
   });
 
+  test('it does not display "operatorOptions" if param is passed in with no items', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <OperatorComponent
+          placeholder="Placeholder text"
+          selectedField={getField('machine.os.raw')}
+          operator={isOperator}
+          isDisabled={false}
+          isLoading={false}
+          isClearable={false}
+          onChange={jest.fn()}
+          operatorOptions={[]}
+        />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"]`).at(0).prop('options')
+    ).toEqual([
+      {
+        label: 'is',
+      },
+      {
+        label: 'is not',
+      },
+      {
+        label: 'is one of',
+      },
+      {
+        label: 'is not one of',
+      },
+      {
+        label: 'exists',
+      },
+      {
+        label: 'does not exist',
+      },
+      {
+        label: 'is in list',
+      },
+      {
+        label: 'is not in list',
+      },
+    ]);
+  });
+
   test('it correctly displays selected operator', () => {
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>

x-pack/plugins/security_solution/public/common/components/autocomplete/operator.tsx

@@ -35,7 +35,10 @@ export const OperatorComponent: React.FC<OperatorState> = ({
 }): JSX.Element => {
   const getLabel = useCallback(({ message }): string => message, []);
   const optionsMemo = useMemo(
-    (): OperatorOption[] => (operatorOptions ? operatorOptions : getOperators(selectedField)),
+    (): OperatorOption[] =>
+      operatorOptions != null && operatorOptions.length > 0
+        ? operatorOptions
+        : getOperators(selectedField),
     [operatorOptions, selectedField]
   );
   const selectedOptionsMemo = useMemo((): OperatorOption[] => (operator ? [operator] : []), [

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

@@ -304,6 +304,7 @@ export const AddExceptionModal = memo(function AddExceptionModal({
                   indexPatterns={indexPatterns}
                   isOrDisabled={false}
                   isAndDisabled={false}
+                  isNestedDisabled={false}
                   data-test-subj="alert-exception-builder"
                   id-aria="alert-exception-builder"
                   onChange={handleBuilderOnChange}

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

@@ -21,22 +21,43 @@ storiesOf('Components|Exceptions|BuilderButtonOptions', module)
       <BuilderButtonOptions
         isAndDisabled={false}
         isOrDisabled={false}
+        isNestedDisabled={false}
+        isNested={false}
         showNestedButton={false}
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}
+        onAddClickWhenNested={action('onClick')}
       />
     );
   })
-  .add('nested button', () => {
+  .add('nested button - isNested false', () => {
     return (
       <BuilderButtonOptions
         isAndDisabled={false}
         isOrDisabled={false}
+        isNestedDisabled={false}
+        isNested={false}
         showNestedButton
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}
+        onAddClickWhenNested={action('onClick')}
+      />
+    );
+  })
+  .add('nested button - isNested true', () => {
+    return (
+      <BuilderButtonOptions
+        isAndDisabled={false}
+        isOrDisabled={false}
+        isNestedDisabled={false}
+        isNested
+        showNestedButton
+        onOrClicked={action('onClick')}
+        onAndClicked={action('onClick')}
+        onNestedClicked={action('onClick')}
+        onAddClickWhenNested={action('onClick')}
       />
     );
   })
@@ -45,10 +66,13 @@ storiesOf('Components|Exceptions|BuilderButtonOptions', module)
       <BuilderButtonOptions
         isAndDisabled
         isOrDisabled={false}
+        isNestedDisabled={false}
+        isNested={false}
         showNestedButton={false}
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}
+        onAddClickWhenNested={action('onClick')}
       />
     );
   })
@@ -57,10 +81,28 @@ storiesOf('Components|Exceptions|BuilderButtonOptions', module)
       <BuilderButtonOptions
         isAndDisabled={false}
         isOrDisabled
+        isNestedDisabled={false}
+        isNested={false}
         showNestedButton={false}
         onOrClicked={action('onClick')}
         onAndClicked={action('onClick')}
         onNestedClicked={action('onClick')}
+        onAddClickWhenNested={action('onClick')}
+      />
+    );
+  })
+  .add('nested disabled', () => {
+    return (
+      <BuilderButtonOptions
+        isAndDisabled={false}
+        isOrDisabled={false}
+        isNestedDisabled
+        isNested={false}
+        showNestedButton
+        onOrClicked={action('onClick')}
+        onAndClicked={action('onClick')}
+        onNestedClicked={action('onClick')}
+        onAddClickWhenNested={action('onClick')}
       />
     );
   });