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

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>

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>

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>
 `;

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>
     );
   }