adding cancel button to change policy (#919)

* adding cancel button to change policy Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com> * updated ChangePolicy snapshot to incl Cancel's div Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com> * auto fixing the ChangePolicy.test snapshot Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com> --------- Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com> Co-authored-by: bowenlan-amzn <bowenlan23@gmail.com>
opensearch-project · Nov 11, 2023 · 1c8f0c6 · 1c8f0c6
1 parent ce4b43c
commit 1c8f0c6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
@@ -5,7 +5,7 @@
 
 import React, { Component } from "react";
 import { RouteComponentProps } from "react-router-dom";
-import { EuiSpacer, EuiTitle, EuiButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiTitle, EuiButton, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from "@elastic/eui";
 import { IndexService, ManagedIndexService } from "../../../../services";
 import ChangeManagedIndices from "../../components/ChangeManagedIndices";
 import NewPolicy from "../../components/NewPolicy";
@@ -115,6 +115,8 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
     }
   };
 
+  onCancel = () => this.props.history.goBack();
+
   onSubmit = async () => {
     const { selectedPolicies, selectedManagedIndices } = this.state;
 
@@ -175,6 +177,11 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
         <EuiSpacer />
 
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
+              Cancel
+            </EuiButtonEmpty>
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
               Change

diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -428,6 +428,25 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--primary"
+        data-test-subj="changePolicyCancelButton"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonEmpty__text"
+          >
+            Cancel
+          </span>
+        </span>
+      </button>
+    </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >