[7.x] Allow add alert Flyout initial values like name, tags (#76906) (#…

…77042)
elastic · Sep 10, 2020 · 9f04a1c · 9f04a1c
1 parent a1b7deb
commit 9f04a1c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx
@@ -11,7 +11,7 @@ import { EuiFormLabel } from '@elastic/eui';
 import { coreMock } from '../../../../../../../src/core/public/mocks';
 import AlertAdd from './alert_add';
 import { actionTypeRegistryMock } from '../../action_type_registry.mock';
-import { ValidationResult } from '../../../types';
+import { Alert, ValidationResult } from '../../../types';
 import { AlertsContextProvider, useAlertsContext } from '../../context/alerts_context';
 import { alertTypeRegistryMock } from '../../alert_type_registry.mock';
 import { chartPluginMock } from '../../../../../../../src/plugins/charts/public/mocks';
@@ -46,7 +46,7 @@ describe('alert_add', () => {
   let deps: any;
   let wrapper: ReactWrapper<any>;
 
-  async function setup() {
+  async function setup(initialValues?: Partial<Alert>) {
     const mocks = coreMock.createSetup();
     const { loadAlertTypes } = jest.requireMock('../../lib/alert_api');
     const alertTypes = [
@@ -155,6 +155,7 @@ describe('alert_add', () => {
             consumer={ALERTS_FEATURE_ID}
             addFlyoutVisible={true}
             setAddFlyoutVisibility={() => {}}
+            initialValues={initialValues}
           />
         </AlertsContextProvider>
       </AppContextProvider>
@@ -180,5 +181,31 @@ describe('alert_add', () => {
     wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
 
     expect(wrapper.contains('Metadata: some value. Fields: test.')).toBeTruthy();
+
+    expect(wrapper.find('input#alertName').props().value).toBe('');
+
+    expect(wrapper.find('[data-test-subj="tagsComboBox"]').first().text()).toBe('');
+
+    expect(wrapper.find('.euiSelect').first().props().value).toBe('m');
+  });
+
+  it('renders alert add flyout with initial values', async () => {
+    await setup({
+      name: 'Simple status alert',
+      tags: ['uptime', 'logs'],
+      schedule: {
+        interval: '1h',
+      },
+    });
+
+    await new Promise((resolve) => {
+      setTimeout(resolve, 1000);
+    });
+
+    expect(wrapper.find('input#alertName').props().value).toBe('Simple status alert');
+
+    expect(wrapper.find('[data-test-subj="tagsComboBox"]').first().text()).toBe('uptimelogs');
+
+    expect(wrapper.find('.euiSelect').first().props().value).toBe('h');
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx
@@ -34,6 +34,7 @@ interface AlertAddProps {
   setAddFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
   alertTypeId?: string;
   canChangeTrigger?: boolean;
+  initialValues?: Partial<Alert>;
 }
 
 export const AlertAdd = ({
@@ -42,6 +43,7 @@ export const AlertAdd = ({
   setAddFlyoutVisibility,
   canChangeTrigger,
   alertTypeId,
+  initialValues,
 }: AlertAddProps) => {
   const initialAlert = ({
     params: {},
@@ -52,6 +54,7 @@ export const AlertAdd = ({
     },
     actions: [],
     tags: [],
+    ...(initialValues ? initialValues : {}),
   } as unknown) as Alert;
 
   const [{ alert }, dispatch] = useReducer(alertReducer, { alert: initialAlert });