[ILM] Change "wait for snapshot" policy text field to EuiCombobox (#7…

…0627) (#71293) * [ILM] Change "Wait for snapshot policy" text field to a dropdown in Delete phase * [ILM] Change "wait for snapshot" field to a EuiCombobox and update jest tests * [ILM] Update jest tests to check callouts * [ILM] Implement PR review suggestions * Update x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/snapshot_policies/snapshot_policies.tsx Co-authored-by: Adam Locke <[email protected]> * Update x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/snapshot_policies/snapshot_policies.tsx Co-authored-by: Adam Locke <[email protected]> * Update x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/snapshot_policies/snapshot_policies.tsx Co-authored-by: Adam Locke <[email protected]> * [ILM] Fix copy * [ILM] Fix copy * [ILM] Fix build error * [ILM] Delete periods in callout titles Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Adam Locke <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Adam Locke <[email protected]>
elastic · Jul 10, 2020 · 0f6fd7f · 0f6fd7f
1 parent 659d2e0
commit 0f6fd7f
Show file tree

Hide file tree

Showing 13 changed files with 355 additions and 40 deletions.
diff --git a/...k/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/constants.ts b/...k/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/constants.ts
@@ -5,6 +5,8 @@
  */
 
 export const POLICY_NAME = 'my_policy';
+export const SNAPSHOT_POLICY_NAME = 'my_snapshot_policy';
+export const NEW_SNAPSHOT_POLICY_NAME = 'my_new_snapshot_policy';
 
 export const DELETE_PHASE_POLICY = {
   version: 1,
@@ -26,7 +28,7 @@ export const DELETE_PHASE_POLICY = {
         min_age: '0ms',
         actions: {
           wait_for_snapshot: {
-            policy: 'my_snapshot_policy',
+            policy: SNAPSHOT_POLICY_NAME,
           },
           delete: {
             delete_searchable_snapshot: true,

diff --git a/...ndex_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx b/...ndex_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { registerTestBed, TestBed, TestBedConfig } from '../../../../../test_utils';
@@ -14,6 +15,25 @@ import { TestSubjects } from '../helpers';
 import { EditPolicy } from '../../../public/application/sections/edit_policy';
 import { indexLifecycleManagementStore } from '../../../public/application/store';
 
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+    // which does not produce a valid component wrapper
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockComboBox'}
+        data-currentvalue={props.selectedOptions}
+        onChange={async (syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+  };
+});
+
 const testBedConfig: TestBedConfig = {
   store: () => indexLifecycleManagementStore(),
   memoryRouter: {
@@ -34,9 +54,11 @@ export interface EditPolicyTestBed extends TestBed<TestSubjects> {
 export const setup = async (): Promise<EditPolicyTestBed> => {
   const testBed = await initTestBed();
 
-  const setWaitForSnapshotPolicy = (snapshotPolicyName: string) => {
-    const { component, form } = testBed;
-    form.setInputValue('waitForSnapshotField', snapshotPolicyName, true);
+  const setWaitForSnapshotPolicy = async (snapshotPolicyName: string) => {
+    const { component } = testBed;
+    act(() => {
+      testBed.find('snapshotPolicyCombobox').simulate('change', [{ label: snapshotPolicyName }]);
+    });
     component.update();
   };
 

diff --git a/...ns/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts b/...ns/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts
@@ -7,11 +7,10 @@
 import { act } from 'react-dom/test-utils';
 
 import { setupEnvironment } from '../helpers/setup_environment';
-
 import { EditPolicyTestBed, setup } from './edit_policy.helpers';
-import { DELETE_PHASE_POLICY } from './constants';
 
 import { API_BASE_PATH } from '../../../common/constants';
+import { DELETE_PHASE_POLICY, NEW_SNAPSHOT_POLICY_NAME, SNAPSHOT_POLICY_NAME } from './constants';
 
 window.scrollTo = jest.fn();
 
@@ -25,6 +24,10 @@ describe('<EditPolicy />', () => {
   describe('delete phase', () => {
     beforeEach(async () => {
       httpRequestsMockHelpers.setLoadPolicies([DELETE_PHASE_POLICY]);
+      httpRequestsMockHelpers.setLoadSnapshotPolicies([
+        SNAPSHOT_POLICY_NAME,
+        NEW_SNAPSHOT_POLICY_NAME,
+      ]);
 
       await act(async () => {
         testBed = await setup();
@@ -35,16 +38,18 @@ describe('<EditPolicy />', () => {
     });
 
     test('wait for snapshot policy field should correctly display snapshot policy name', () => {
-      expect(testBed.find('waitForSnapshotField').props().value).toEqual(
-        DELETE_PHASE_POLICY.policy.phases.delete.actions.wait_for_snapshot.policy
-      );
+      expect(testBed.find('snapshotPolicyCombobox').prop('data-currentvalue')).toEqual([
+        {
+          label: DELETE_PHASE_POLICY.policy.phases.delete.actions.wait_for_snapshot.policy,
+          value: DELETE_PHASE_POLICY.policy.phases.delete.actions.wait_for_snapshot.policy,
+        },
+      ]);
     });
 
     test('wait for snapshot field should correctly update snapshot policy name', async () => {
       const { actions } = testBed;
 
-      const newPolicyName = 'my_new_snapshot_policy';
-      actions.setWaitForSnapshotPolicy(newPolicyName);
+      await actions.setWaitForSnapshotPolicy(NEW_SNAPSHOT_POLICY_NAME);
       await actions.savePolicy();
 
       const expected = {
@@ -56,7 +61,7 @@ describe('<EditPolicy />', () => {
             actions: {
               ...DELETE_PHASE_POLICY.policy.phases.delete.actions,
               wait_for_snapshot: {
-                policy: newPolicyName,
+                policy: NEW_SNAPSHOT_POLICY_NAME,
               },
             },
           },
@@ -69,6 +74,15 @@ describe('<EditPolicy />', () => {
       expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
     });
 
+    test('wait for snapshot field should display a callout when the input is not an existing policy', async () => {
+      const { actions } = testBed;
+
+      await actions.setWaitForSnapshotPolicy('my_custom_policy');
+      expect(testBed.find('noPoliciesCallout').exists()).toBeFalsy();
+      expect(testBed.find('policiesErrorCallout').exists()).toBeFalsy();
+      expect(testBed.find('customPolicyCallout').exists()).toBeTruthy();
+    });
+
     test('wait for snapshot field should delete action if field is empty', async () => {
       const { actions } = testBed;
 
@@ -92,5 +106,31 @@ describe('<EditPolicy />', () => {
       const latestRequest = server.requests[server.requests.length - 1];
       expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
     });
+
+    test('wait for snapshot field should display a callout when there are no snapshot policies', async () => {
+      // need to call setup on testBed again for it to use a newly defined snapshot policies response
+      httpRequestsMockHelpers.setLoadSnapshotPolicies([]);
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      testBed.component.update();
+      expect(testBed.find('customPolicyCallout').exists()).toBeFalsy();
+      expect(testBed.find('policiesErrorCallout').exists()).toBeFalsy();
+      expect(testBed.find('noPoliciesCallout').exists()).toBeTruthy();
+    });
+
+    test('wait for snapshot field should display a callout when there is an error loading snapshot policies', async () => {
+      // need to call setup on testBed again for it to use a newly defined snapshot policies response
+      httpRequestsMockHelpers.setLoadSnapshotPolicies([], { status: 500, body: 'error' });
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      testBed.component.update();
+      expect(testBed.find('customPolicyCallout').exists()).toBeFalsy();
+      expect(testBed.find('noPoliciesCallout').exists()).toBeFalsy();
+      expect(testBed.find('policiesErrorCallout').exists()).toBeTruthy();
+    });
   });
 });
diff --git a/...k/plugins/index_lifecycle_management/__jest__/client_integration/helpers/http_requests.ts b/...k/plugins/index_lifecycle_management/__jest__/client_integration/helpers/http_requests.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SinonFakeServer, fakeServer } from 'sinon';
+import { fakeServer, SinonFakeServer } from 'sinon';
 import { API_BASE_PATH } from '../../../common/constants';
 
 export const init = () => {
@@ -27,7 +27,19 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     ]);
   };
 
+  const setLoadSnapshotPolicies = (response: any = [], error?: { status: number; body: any }) => {
+    const status = error ? error.status : 200;
+    const body = error ? error.body : response;
+
+    server.respondWith('GET', `${API_BASE_PATH}/snapshot_policies`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(body),
+    ]);
+  };
+
   return {
     setLoadPolicies,
+    setLoadSnapshotPolicies,
   };
 };
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/index.ts
@@ -4,4 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export type TestSubjects = 'waitForSnapshotField' | 'savePolicyButton';
+export type TestSubjects =
+  | 'snapshotPolicyCombobox'
+  | 'savePolicyButton'
+  | 'customPolicyCallout'
+  | 'noPoliciesCallout'
+  | 'policiesErrorCallout';
diff --git a/...anagement/public/application/sections/edit_policy/components/delete_phase/delete_phase.js b/...anagement/public/application/sections/edit_policy/components/delete_phase/delete_phase.js
@@ -7,17 +7,12 @@
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  EuiDescribedFormGroup,
-  EuiSwitch,
-  EuiFieldText,
-  EuiTextColor,
-  EuiFormRow,
-} from '@elastic/eui';
+import { EuiDescribedFormGroup, EuiSwitch, EuiTextColor, EuiFormRow } from '@elastic/eui';
 
 import { PHASE_DELETE, PHASE_ENABLED, PHASE_WAIT_FOR_SNAPSHOT_POLICY } from '../../../../constants';
 import { ActiveBadge, LearnMoreLink, OptionalLabel, PhaseErrorMessage } from '../../../components';
 import { MinAgeInput } from '../min_age_input';
+import { SnapshotPolicies } from '../snapshot_policies';
 
 export class DeletePhase extends PureComponent {
   static propTypes = {
@@ -125,10 +120,9 @@ export class DeletePhase extends PureComponent {
                 </Fragment>
               }
             >
-              <EuiFieldText
-                data-test-subj="waitForSnapshotField"
+              <SnapshotPolicies
                 value={phaseData[PHASE_WAIT_FOR_SNAPSHOT_POLICY]}
-                onChange={(e) => setPhaseData(PHASE_WAIT_FOR_SNAPSHOT_POLICY, e.target.value)}
+                onChange={(value) => setPhaseData(PHASE_WAIT_FOR_SNAPSHOT_POLICY, value)}
               />
             </EuiFormRow>
           </EuiDescribedFormGroup>

diff --git a/..._management/public/application/sections/edit_policy/components/snapshot_policies/index.ts b/..._management/public/application/sections/edit_policy/components/snapshot_policies/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { SnapshotPolicies } from './snapshot_policies';