From e433903c75858c5f936bf9d94c8f8c91166751d4 Mon Sep 17 00:00:00 2001
From: stephmilovic <stephanie.milovic@elastic.co>
Date: Thu, 16 Apr 2020 10:06:11 -0600
Subject: [PATCH 1/4] weird bug

---
 .../pages/case/components/create/index.tsx    | 13 ++-
 .../pages/case/components/tag_list/form.tsx   | 95 +++++++++++++++++++
 .../pages/case/components/tag_list/index.tsx  | 16 +++-
 .../plugins/siem/public/shared_imports.ts     |  2 +
 4 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
index 53b792bb9b5eb..c59510551f428 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
@@ -3,7 +3,7 @@
  * 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, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -24,6 +24,7 @@ import { useInsertTimeline } from '../../../../components/timeline/insert_timeli
 import * as i18n from '../../translations';
 import { SiemPageName } from '../../../home/types';
 import { MarkdownEditorForm } from '../../../../components/markdown_editor/form';
+import { useGetTags } from '../../../../containers/case/use_get_tags';
 
 export const CommonUseField = getUseField({ component: Field });
 
@@ -59,6 +60,14 @@ export const Create = React.memo(() => {
     options: { stripEmptyFields: false },
     schema,
   });
+  const { tags: tagOptions } = useGetTags();
+  const options = useMemo(
+    () =>
+      tagOptions.map(label => ({
+        label,
+      })),
+    [tagOptions]
+  );
   const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CasePostRequest>(
     form,
     'description'
@@ -108,6 +117,8 @@ export const Create = React.memo(() => {
                 fullWidth: true,
                 placeholder: '',
                 disabled: isLoading,
+                options,
+                noSuggestions: false,
               },
             }}
           />
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx
new file mode 100644
index 0000000000000..ab5b992182e07
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx
@@ -0,0 +1,95 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+
+import { FieldHook, VALIDATION_TYPES, FieldValidateResponse } from '../../../../shared_imports';
+
+interface Props {
+  field: FieldHook;
+  euiFieldProps?: Record<string, any>;
+  idAria?: string;
+  [key: string]: any;
+}
+
+export const ComboBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
+  // Errors for the comboBox value (the "array")
+  const errorMessageField = field.getErrorsMessages();
+
+  // Errors for comboBox option added (the array "item")
+  const errorMessageArrayItem = field.getErrorsMessages({
+    validationType: VALIDATION_TYPES.ARRAY_ITEM,
+  });
+
+  const isInvalid = field.errors.length
+    ? errorMessageField !== null || errorMessageArrayItem !== null
+    : false;
+
+  // Concatenate error messages.
+  const errorMessage =
+    errorMessageField && errorMessageArrayItem
+      ? `${errorMessageField}, ${errorMessageArrayItem}`
+      : errorMessageField
+      ? errorMessageField
+      : errorMessageArrayItem;
+
+  const onCreateComboOption = (value: string) => {
+    // Note: for now, all validations for a comboBox array item have to be synchronous
+    // If there is a need to support asynchronous validation, we'll work on it (and will need to update the <EuiComboBox /> logic).
+    const { isValid } = field.validate({
+      value,
+      validationType: VALIDATION_TYPES.ARRAY_ITEM,
+    }) as FieldValidateResponse;
+
+    if (!isValid) {
+      // Return false to explicitly reject the user's input.
+      return false;
+    }
+
+    const newValue = [...(field.value as string[]), value];
+
+    field.setValue(newValue);
+  };
+
+  const onComboChange = (options: EuiComboBoxOptionOption[]) => {
+    field.setValue(options.map(option => option.label));
+  };
+
+  const onSearchComboChange = (value: string) => {
+    if (value) {
+      field.clearErrors(VALIDATION_TYPES.ARRAY_ITEM);
+    }
+  };
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      labelAppend={field.labelAppend}
+      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiComboBox
+        noSuggestions
+        placeholder={i18n.translate('esUi.forms.comboBoxField.placeHolderText', {
+          defaultMessage: 'Type and then hit "ENTER"',
+        })}
+        selectedOptions={(field.value as any[]).map(v => ({ label: v }))}
+        onCreateOption={onCreateComboOption}
+        onChange={onComboChange}
+        onSearchChange={onSearchComboChange}
+        fullWidth
+        data-test-subj="input"
+        {...euiFieldProps}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
index 9bac000b93235..3f5a649f48f76 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   EuiText,
   EuiHorizontalRule,
@@ -21,6 +21,8 @@ import * as i18n from './translations';
 import { Form, useForm } from '../../../../shared_imports';
 import { schema } from './schema';
 import { CommonUseField } from '../create';
+import { useGetTags } from '../../../../containers/case/use_get_tags';
+import { ComboBoxField } from './form';
 
 interface TagListProps {
   disabled?: boolean;
@@ -54,7 +56,14 @@ export const TagList = React.memo(
         setIsEditTags(false);
       }
     }, [form, onSubmit]);
-
+    const { tags: tagOptions } = useGetTags();
+    const options = useMemo(
+      () =>
+        tagOptions.map(label => ({
+          label,
+        })),
+      [tagOptions]
+    );
     return (
       <EuiText>
         <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
@@ -92,12 +101,15 @@ export const TagList = React.memo(
                 <Form form={form}>
                   <CommonUseField
                     path="tags"
+                    // component={ComboBoxField}
                     componentProps={{
                       idAria: 'caseTags',
                       'data-test-subj': 'caseTags',
                       euiFieldProps: {
                         fullWidth: true,
                         placeholder: '',
+                        options,
+                        noSuggestions: false,
                       },
                     }}
                   />
diff --git a/x-pack/legacy/plugins/siem/public/shared_imports.ts b/x-pack/legacy/plugins/siem/public/shared_imports.ts
index c83433ef129c9..0c0ac637a4229 100644
--- a/x-pack/legacy/plugins/siem/public/shared_imports.ts
+++ b/x-pack/legacy/plugins/siem/public/shared_imports.ts
@@ -8,6 +8,7 @@ export {
   getUseField,
   getFieldValidityAndErrorMessage,
   FieldHook,
+  FieldValidateResponse,
   FIELD_TYPES,
   Form,
   FormData,
@@ -17,6 +18,7 @@ export {
   UseField,
   useForm,
   ValidationFunc,
+  VALIDATION_TYPES,
 } from '../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
 export {
   Field,

From 368f4ad887d45248c8db0b4e677821970c497d16 Mon Sep 17 00:00:00 2001
From: stephmilovic <stephanie.milovic@elastic.co>
Date: Fri, 17 Apr 2020 11:04:47 -0600
Subject: [PATCH 2/4] tests fixed

---
 .../pages/case/components/__mock__/form.ts    |  6 ++
 .../case/components/create/index.test.tsx     | 45 ++++++++-
 .../pages/case/components/create/index.tsx    | 48 ++++++++--
 .../pages/case/components/tag_list/form.tsx   | 95 -------------------
 .../case/components/tag_list/index.test.tsx   | 44 ++++++++-
 .../pages/case/components/tag_list/index.tsx  | 47 +++++++--
 .../user_action_tree/index.test.tsx           |  6 +-
 7 files changed, 171 insertions(+), 120 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/__mock__/form.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/__mock__/form.ts
index 9d2ac29bc47d7..cc01edcfaab11 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/__mock__/form.ts
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/__mock__/form.ts
@@ -3,6 +3,10 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { useForm } from '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks';
+jest.mock(
+  '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
+);
 export const mockFormHook = {
   isSubmitted: false,
   isSubmitting: false,
@@ -35,3 +39,5 @@ export const getFormMock = (sampleData: any) => ({
     }),
   getFormData: () => sampleData,
 });
+
+export const useFormMock = useForm as jest.Mock;
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx
index d480744fc932a..470cd8e88160c 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx
@@ -14,6 +14,8 @@ import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router
 
 import { useInsertTimeline } from '../../../../components/timeline/insert_timeline_popover/use_insert_timeline';
 import { usePostCase } from '../../../../containers/case/use_post_case';
+import { useGetTags } from '../../../../containers/case/use_get_tags';
+
 jest.mock('../../../../components/timeline/insert_timeline_popover/use_insert_timeline');
 jest.mock('../../../../containers/case/use_post_case');
 import { useForm } from '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks';
@@ -22,6 +24,14 @@ import { SiemPageName } from '../../../home/types';
 jest.mock(
   '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
+jest.mock('../../../../containers/case/use_get_tags');
+jest.mock(
+  '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider',
+  () => ({
+    FormDataProvider: ({ children }: { children: ({ tags }: { tags: string[] }) => void }) =>
+      children({ tags: ['rad', 'dude'] }),
+  })
+);
 
 export const useFormMock = useForm as jest.Mock;
 
@@ -40,9 +50,11 @@ const defaultInsertTimeline = {
   handleCursorChange,
   handleOnTimelineChange,
 };
+
+const sampleTags = ['coke', 'pepsi'];
 const sampleData = {
   description: 'what a great description',
-  tags: ['coke', 'pepsi'],
+  tags: sampleTags,
   title: 'what a cool title',
 };
 const defaultPostCase = {
@@ -52,14 +64,28 @@ const defaultPostCase = {
   postCase,
 };
 describe('Create case', () => {
+  // Suppress warnings about "noSuggestions" prop
+  /* eslint-disable no-console */
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+  /* eslint-enable no-console */
+  const fetchTags = jest.fn();
   const formHookMock = getFormMock(sampleData);
-
   beforeEach(() => {
     jest.resetAllMocks();
     useInsertTimelineMock.mockImplementation(() => defaultInsertTimeline);
     usePostCaseMock.mockImplementation(() => defaultPostCase);
     useFormMock.mockImplementation(() => ({ form: formHookMock }));
     jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
+    (useGetTags as jest.Mock).mockImplementation(() => ({
+      tags: [...sampleTags],
+      fetchTags,
+    }));
   });
 
   it('should post case on submit click', async () => {
@@ -118,4 +144,19 @@ describe('Create case', () => {
     );
     expect(wrapper.find(`[data-test-subj="create-case-loading-spinner"]`).exists()).toBeTruthy();
   });
+  it('Tag options render with new tags added', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Create />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="caseTags"] [data-test-subj="input"]`)
+        .first()
+        .prop('options')
+    ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
+  });
 });
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
index c59510551f428..975354fa5ed34 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
@@ -3,7 +3,7 @@
  * 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, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -15,8 +15,16 @@ import {
 import styled, { css } from 'styled-components';
 import { Redirect } from 'react-router-dom';
 
+import { isEqual } from 'lodash/fp';
 import { CasePostRequest } from '../../../../../../../../plugins/case/common/api';
-import { Field, Form, getUseField, useForm, UseField } from '../../../../shared_imports';
+import {
+  Field,
+  Form,
+  getUseField,
+  useForm,
+  UseField,
+  FormDataProvider,
+} from '../../../../shared_imports';
 import { usePostCase } from '../../../../containers/case/use_post_case';
 import { schema } from './schema';
 import { InsertTimelinePopover } from '../../../../components/timeline/insert_timeline_popover';
@@ -61,12 +69,19 @@ export const Create = React.memo(() => {
     schema,
   });
   const { tags: tagOptions } = useGetTags();
-  const options = useMemo(
+  const [options, setOptions] = useState(
+    tagOptions.map(label => ({
+      label,
+    }))
+  );
+  useEffect(
     () =>
-      tagOptions.map(label => ({
-        label,
-      })),
-    [tagOptions]
+      setOptions(
+        tagOptions.map(label => ({
+          label,
+        }))
+      ),
+    [tagOptions.length]
   );
   const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CasePostRequest>(
     form,
@@ -142,6 +157,25 @@ export const Create = React.memo(() => {
             }}
           />
         </ContainerBig>
+        <FormDataProvider pathsToWatch="tags">
+          {({ tags: anotherTags }) => {
+            const current: string[] = options.map(opt => opt.label);
+            const newOptions = anotherTags.reduce((acc: string[], item: string) => {
+              if (!acc.includes(item)) {
+                return [...acc, item];
+              }
+              return acc;
+            }, current);
+            if (!isEqual(current, newOptions)) {
+              setOptions(
+                newOptions.map((label: string) => ({
+                  label,
+                }))
+              );
+            }
+            return null;
+          }}
+        </FormDataProvider>
       </Form>
       <Container>
         <EuiFlexGroup
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx
deleted file mode 100644
index ab5b992182e07..0000000000000
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/form.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
-
-import { FieldHook, VALIDATION_TYPES, FieldValidateResponse } from '../../../../shared_imports';
-
-interface Props {
-  field: FieldHook;
-  euiFieldProps?: Record<string, any>;
-  idAria?: string;
-  [key: string]: any;
-}
-
-export const ComboBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
-  // Errors for the comboBox value (the "array")
-  const errorMessageField = field.getErrorsMessages();
-
-  // Errors for comboBox option added (the array "item")
-  const errorMessageArrayItem = field.getErrorsMessages({
-    validationType: VALIDATION_TYPES.ARRAY_ITEM,
-  });
-
-  const isInvalid = field.errors.length
-    ? errorMessageField !== null || errorMessageArrayItem !== null
-    : false;
-
-  // Concatenate error messages.
-  const errorMessage =
-    errorMessageField && errorMessageArrayItem
-      ? `${errorMessageField}, ${errorMessageArrayItem}`
-      : errorMessageField
-      ? errorMessageField
-      : errorMessageArrayItem;
-
-  const onCreateComboOption = (value: string) => {
-    // Note: for now, all validations for a comboBox array item have to be synchronous
-    // If there is a need to support asynchronous validation, we'll work on it (and will need to update the <EuiComboBox /> logic).
-    const { isValid } = field.validate({
-      value,
-      validationType: VALIDATION_TYPES.ARRAY_ITEM,
-    }) as FieldValidateResponse;
-
-    if (!isValid) {
-      // Return false to explicitly reject the user's input.
-      return false;
-    }
-
-    const newValue = [...(field.value as string[]), value];
-
-    field.setValue(newValue);
-  };
-
-  const onComboChange = (options: EuiComboBoxOptionOption[]) => {
-    field.setValue(options.map(option => option.label));
-  };
-
-  const onSearchComboChange = (value: string) => {
-    if (value) {
-      field.clearErrors(VALIDATION_TYPES.ARRAY_ITEM);
-    }
-  };
-
-  return (
-    <EuiFormRow
-      label={field.label}
-      labelAppend={field.labelAppend}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
-      error={errorMessage}
-      isInvalid={isInvalid}
-      fullWidth
-      data-test-subj={rest['data-test-subj']}
-      describedByIds={rest.idAria ? [rest.idAria] : undefined}
-    >
-      <EuiComboBox
-        noSuggestions
-        placeholder={i18n.translate('esUi.forms.comboBoxField.placeHolderText', {
-          defaultMessage: 'Type and then hit "ENTER"',
-        })}
-        selectedOptions={(field.value as any[]).map(v => ({ label: v }))}
-        onCreateOption={onCreateComboOption}
-        onChange={onComboChange}
-        onSearchChange={onSearchComboChange}
-        fullWidth
-        data-test-subj="input"
-        {...euiFieldProps}
-      />
-    </EuiFormRow>
-  );
-};
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
index 8ad2f8f8cb737..7eb144f7702b6 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
@@ -6,17 +6,26 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 
 import { TagList } from './';
 import { getFormMock } from '../__mock__/form';
 import { TestProviders } from '../../../../mock';
 import { wait } from '../../../../lib/helpers';
 import { useForm } from '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks';
-import { act } from 'react-dom/test-utils';
+import { useGetTags } from '../../../../containers/case/use_get_tags';
 
 jest.mock(
   '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
+jest.mock('../../../../containers/case/use_get_tags');
+jest.mock(
+  '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider',
+  () => ({
+    FormDataProvider: ({ children }: { children: ({ tags }: { tags: string[] }) => void }) =>
+      children({ tags: ['rad', 'dude'] }),
+  })
+);
 const onSubmit = jest.fn();
 const defaultProps = {
   disabled: false,
@@ -26,11 +35,27 @@ const defaultProps = {
 };
 
 describe('TagList ', () => {
+  // Suppress warnings about "noSuggestions" prop
+  /* eslint-disable no-console */
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+  /* eslint-enable no-console */
   const sampleTags = ['coke', 'pepsi'];
+  const fetchTags = jest.fn();
   const formHookMock = getFormMock({ tags: sampleTags });
   beforeEach(() => {
     jest.resetAllMocks();
     (useForm as jest.Mock).mockImplementation(() => ({ form: formHookMock }));
+
+    (useGetTags as jest.Mock).mockImplementation(() => ({
+      tags: [...sampleTags],
+      fetchTags,
+    }));
   });
   it('Renders no tags, and then edit', () => {
     const wrapper = mount(
@@ -80,6 +105,23 @@ describe('TagList ', () => {
       expect(onSubmit).toBeCalledWith(sampleTags);
     });
   });
+  it('Tag options render with new tags added', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <TagList {...defaultProps} />
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="tag-list-edit-button"]`)
+      .last()
+      .simulate('click');
+    expect(
+      wrapper
+        .find(`[data-test-subj="caseTags"] [data-test-subj="input"]`)
+        .first()
+        .prop('options')
+    ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
+  });
   it('Cancels on cancel', async () => {
     const props = {
       ...defaultProps,
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
index 3f5a649f48f76..8b04402691cd9 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   EuiText,
   EuiHorizontalRule,
@@ -17,12 +17,12 @@ import {
   EuiLoadingSpinner,
 } from '@elastic/eui';
 import styled, { css } from 'styled-components';
+import { isEqual } from 'lodash/fp';
 import * as i18n from './translations';
-import { Form, useForm } from '../../../../shared_imports';
+import { Form, FormDataProvider, useForm } from '../../../../shared_imports';
 import { schema } from './schema';
 import { CommonUseField } from '../create';
 import { useGetTags } from '../../../../containers/case/use_get_tags';
-import { ComboBoxField } from './form';
 
 interface TagListProps {
   disabled?: boolean;
@@ -57,13 +57,22 @@ export const TagList = React.memo(
       }
     }, [form, onSubmit]);
     const { tags: tagOptions } = useGetTags();
-    const options = useMemo(
+    const [options, setOptions] = useState(
+      tagOptions.map(label => ({
+        label,
+      }))
+    );
+
+    useEffect(
       () =>
-        tagOptions.map(label => ({
-          label,
-        })),
-      [tagOptions]
+        setOptions(
+          tagOptions.map(label => ({
+            label,
+          }))
+        ),
+      [tagOptions.length]
     );
+
     return (
       <EuiText>
         <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
@@ -84,7 +93,7 @@ export const TagList = React.memo(
           )}
         </EuiFlexGroup>
         <EuiHorizontalRule margin="xs" />
-        <MyFlexGroup gutterSize="xs" data-test-subj="grr">
+        <MyFlexGroup gutterSize="xs" data-test-subj="grr" wrap>
           {tags.length === 0 && !isEditTags && <p data-test-subj="no-tags">{i18n.NO_TAGS}</p>}
           {tags.length > 0 &&
             !isEditTags &&
@@ -101,7 +110,6 @@ export const TagList = React.memo(
                 <Form form={form}>
                   <CommonUseField
                     path="tags"
-                    // component={ComboBoxField}
                     componentProps={{
                       idAria: 'caseTags',
                       'data-test-subj': 'caseTags',
@@ -113,6 +121,25 @@ export const TagList = React.memo(
                       },
                     }}
                   />
+                  <FormDataProvider pathsToWatch="tags">
+                    {({ tags: anotherTags }) => {
+                      const current: string[] = options.map(opt => opt.label);
+                      const newOptions = anotherTags.reduce((acc: string[], item: string) => {
+                        if (!acc.includes(item)) {
+                          return [...acc, item];
+                        }
+                        return acc;
+                      }, current);
+                      if (!isEqual(current, newOptions)) {
+                        setOptions(
+                          newOptions.map((label: string) => ({
+                            label,
+                          }))
+                        );
+                      }
+                      return null;
+                    }}
+                  </FormDataProvider>
                 </Form>
               </EuiFlexItem>
               <EuiFlexItem>
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/user_action_tree/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/user_action_tree/index.test.tsx
index 1c71260422d4b..ff402e8ea1c8b 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/user_action_tree/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/user_action_tree/index.test.tsx
@@ -8,17 +8,13 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
-import { getFormMock } from '../__mock__/form';
+import { getFormMock, useFormMock } from '../__mock__/form';
 import { useUpdateComment } from '../../../../containers/case/use_update_comment';
 import { basicCase, getUserAction } from '../../../../containers/case/mock';
 import { UserActionTree } from './';
 import { TestProviders } from '../../../../mock';
-import { useFormMock } from '../create/index.test';
 import { wait } from '../../../../lib/helpers';
 import { act } from 'react-dom/test-utils';
-jest.mock(
-  '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
-);
 
 const fetchUserActions = jest.fn();
 const onUpdateField = jest.fn();

From 967970e2f3d2d776333f343e43d67616e1fb3cb9 Mon Sep 17 00:00:00 2001
From: stephmilovic <stephanie.milovic@elastic.co>
Date: Fri, 17 Apr 2020 11:33:47 -0600
Subject: [PATCH 3/4] fix mistake in tests

---
 .../siem/public/pages/case/components/create/index.test.tsx     | 2 +-
 .../plugins/siem/public/pages/case/components/create/index.tsx  | 2 +-
 .../siem/public/pages/case/components/tag_list/index.test.tsx   | 2 +-
 .../siem/public/pages/case/components/tag_list/index.tsx        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx
index 470cd8e88160c..0897be6310fa2 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.test.tsx
@@ -83,7 +83,7 @@ describe('Create case', () => {
     useFormMock.mockImplementation(() => ({ form: formHookMock }));
     jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
     (useGetTags as jest.Mock).mockImplementation(() => ({
-      tags: [...sampleTags],
+      tags: sampleTags,
       fetchTags,
     }));
   });
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
index 975354fa5ed34..0f819f961b396 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
@@ -81,7 +81,7 @@ export const Create = React.memo(() => {
           label,
         }))
       ),
-    [tagOptions.length]
+    [tagOptions]
   );
   const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CasePostRequest>(
     form,
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
index 7eb144f7702b6..b5627376ac8aa 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
@@ -53,7 +53,7 @@ describe('TagList ', () => {
     (useForm as jest.Mock).mockImplementation(() => ({ form: formHookMock }));
 
     (useGetTags as jest.Mock).mockImplementation(() => ({
-      tags: [...sampleTags],
+      tags: sampleTags,
       fetchTags,
     }));
   });
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
index 8b04402691cd9..677f329a14c98 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
@@ -70,7 +70,7 @@ export const TagList = React.memo(
             label,
           }))
         ),
-      [tagOptions.length]
+      [tagOptions]
     );
 
     return (

From 69f9e82ce3320e461c7e9d6ff1a450d7bbd5d569 Mon Sep 17 00:00:00 2001
From: stephmilovic <stephanie.milovic@elastic.co>
Date: Fri, 17 Apr 2020 11:35:02 -0600
Subject: [PATCH 4/4] rm unused test subj

---
 .../siem/public/pages/case/components/tag_list/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
index 677f329a14c98..c96ae09706426 100644
--- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
@@ -93,7 +93,7 @@ export const TagList = React.memo(
           )}
         </EuiFlexGroup>
         <EuiHorizontalRule margin="xs" />
-        <MyFlexGroup gutterSize="xs" data-test-subj="grr" wrap>
+        <MyFlexGroup gutterSize="xs" wrap>
           {tags.length === 0 && !isEditTags && <p data-test-subj="no-tags">{i18n.NO_TAGS}</p>}
           {tags.length > 0 &&
             !isEditTags &&