From 9785a5349296091730b36e43c1a10cd46d92066a Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <ankertal@gmail.com>
Date: Fri, 12 Apr 2019 23:20:02 +0200
Subject: [PATCH] Fix broken layout of EuiModal by form tag (#34978)

* Fix broken layout of EuiModal by form tag

Adding a form tag to the saved object modal broke the layout of the
EuiModal because EuiModal's children  need to be
direct descendents of EuiModal in order for the overflow to behave properly.

Fixed by moving the form tag 1 level higher in the component tree

* Use EuiButtonEmpty for Cancel Button

* Migrate EuiFormRow's label of storeTimeWithDashboard to EuiSwitch

* Update snapshot tests
---
 .../__snapshots__/save_modal.test.js.snap     | 14 +++++------
 .../public/dashboard/top_nav/save_modal.js    | 10 ++++----
 .../saved_object_save_modal.test.tsx.snap     | 24 +++++++++----------
 .../components/saved_object_save_modal.tsx    | 21 ++++++++--------
 4 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
index c626fcd2b229..781407d63d83 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
@@ -40,18 +40,18 @@ exports[`renders DashboardSaveModal 1`] = `
             values={Object {}}
           />
         }
-        label={
-          <FormattedMessage
-            defaultMessage="Store time with dashboard"
-            id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowLabel"
-            values={Object {}}
-          />
-        }
         labelType="label"
       >
         <EuiSwitch
           checked={true}
           data-test-subj="storeTimeWithDashboard"
+          label={
+            <FormattedMessage
+              defaultMessage="Store time with dashboard"
+              id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowLabel"
+              values={Object {}}
+            />
+          }
           onChange={[Function]}
         />
       </EuiFormRow>
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/save_modal.js b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/save_modal.js
index de4b5d717191..8194518c44b4 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/save_modal.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/save_modal.js
@@ -59,7 +59,7 @@ class DashboardSaveModalUi extends React.Component {
     this.setState({
       timeRestore: event.target.checked,
     });
-  }
+  };
 
   renderDashboardSaveOptions() {
     return (
@@ -79,10 +79,6 @@ class DashboardSaveModalUi extends React.Component {
         </EuiFormRow>
 
         <EuiFormRow
-          label={<FormattedMessage
-            id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowLabel"
-            defaultMessage="Store time with dashboard"
-          />}
           helpText={<FormattedMessage
             id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowHelpText"
             defaultMessage="This changes the time filter to the currently selected time each time this dashboard is loaded."
@@ -92,6 +88,10 @@ class DashboardSaveModalUi extends React.Component {
             data-test-subj="storeTimeWithDashboard"
             checked={this.state.timeRestore}
             onChange={this.onTimeRestoreChange}
+            label={<FormattedMessage
+              id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowLabel"
+              defaultMessage="Store time with dashboard"
+            />}
           />
         </EuiFormRow>
       </Fragment>
diff --git a/src/legacy/ui/public/saved_objects/components/__snapshots__/saved_object_save_modal.test.tsx.snap b/src/legacy/ui/public/saved_objects/components/__snapshots__/saved_object_save_modal.test.tsx.snap
index b063d4fe0113..241391d692ef 100644
--- a/src/legacy/ui/public/saved_objects/components/__snapshots__/saved_object_save_modal.test.tsx.snap
+++ b/src/legacy/ui/public/saved_objects/components/__snapshots__/saved_object_save_modal.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
 <EuiOverlayMask>
-  <EuiModal
-    className="dshSaveModal"
-    data-test-subj="savedObjectSaveModal"
-    maxWidth={true}
-    onClose={[Function]}
+  <form
+    onSubmit={[Function]}
   >
-    <form
-      onSubmit={[Function]}
+    <EuiModal
+      className="dshSaveModal"
+      data-test-subj="savedObjectSaveModal"
+      maxWidth={true}
+      onClose={[Function]}
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle>
@@ -53,13 +53,11 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
         </EuiForm>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButton
+        <EuiButtonEmpty
           color="primary"
           data-test-subj="saveCancelButton"
-          fill={false}
           iconSide="left"
           onClick={[Function]}
-          size="m"
           type="button"
         >
           <FormattedMessage
@@ -67,7 +65,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
             id="common.ui.savedObjects.saveModal.cancelButtonLabel"
             values={Object {}}
           />
-        </EuiButton>
+        </EuiButtonEmpty>
         <EuiButton
           color="primary"
           data-test-subj="confirmSaveSavedObjectButton"
@@ -85,7 +83,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
           />
         </EuiButton>
       </EuiModalFooter>
-    </form>
-  </EuiModal>
+    </EuiModal>
+  </form>
 </EuiOverlayMask>
 `;
diff --git a/src/legacy/ui/public/saved_objects/components/saved_object_save_modal.tsx b/src/legacy/ui/public/saved_objects/components/saved_object_save_modal.tsx
index 6e9b3f8337b8..c79b0dca0d9b 100644
--- a/src/legacy/ui/public/saved_objects/components/saved_object_save_modal.tsx
+++ b/src/legacy/ui/public/saved_objects/components/saved_object_save_modal.tsx
@@ -18,6 +18,7 @@
  */
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiCallOut,
   EuiFieldText,
   EuiForm,
@@ -73,12 +74,12 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
 
     return (
       <EuiOverlayMask>
-        <EuiModal
-          data-test-subj="savedObjectSaveModal"
-          className="dshSaveModal"
-          onClose={this.props.onClose}
-        >
-          <form onSubmit={this.onFormSubmit}>
+        <form onSubmit={this.onFormSubmit}>
+          <EuiModal
+            data-test-subj="savedObjectSaveModal"
+            className="dshSaveModal"
+            onClose={this.props.onClose}
+          >
             <EuiModalHeader>
               <EuiModalHeaderTitle>
                 <FormattedMessage
@@ -119,12 +120,12 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
             </EuiModalBody>
 
             <EuiModalFooter>
-              <EuiButton data-test-subj="saveCancelButton" onClick={this.props.onClose}>
+              <EuiButtonEmpty data-test-subj="saveCancelButton" onClick={this.props.onClose}>
                 <FormattedMessage
                   id="common.ui.savedObjects.saveModal.cancelButtonLabel"
                   defaultMessage="Cancel"
                 />
-              </EuiButton>
+              </EuiButtonEmpty>
 
               <EuiButton
                 fill
@@ -143,8 +144,8 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
                 )}
               </EuiButton>
             </EuiModalFooter>
-          </form>
-        </EuiModal>
+          </EuiModal>
+        </form>
       </EuiOverlayMask>
     );
   }