Migrate save top nav in Discover and Visualize to EUI (elastic#23190)

* extract reusable save component from DashboardSaveModal * update discover search to use SavedObjectSaveModal * create generic show_save_model that works for both discover and dashboard * fix last bits of discover save * remove old save functionallity * migrate visualize save to EUI * fix functional tests * disable save button if title is empty * mark title input as invalid when title is not provided * fix funtional tests
nreese · Sep 20, 2018 · 55bc64c · 55bc64c
1 parent f750ab7
commit 55bc64c
Show file tree

Hide file tree

Showing 12 changed files with 449 additions and 422 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_app.js b/src/core_plugins/kibana/public/dashboard/dashboard_app.js
@@ -18,6 +18,7 @@
  */
 
 import _ from 'lodash';
+import React from 'react';
 import angular from 'angular';
 import { uiModules } from 'ui/modules';
 import chrome from 'ui/chrome';
@@ -40,7 +41,8 @@ import { VisualizeConstants } from '../visualize/visualize_constants';
 import { DashboardStateManager } from './dashboard_state_manager';
 import { saveDashboard } from './lib';
 import { showCloneModal } from './top_nav/show_clone_modal';
-import { showSaveModal } from './top_nav/show_save_modal';
+import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
+import { DashboardSaveModal } from './top_nav/save_modal';
 import { showAddPanel } from './top_nav/show_add_panel';
 import { showOptionsPopover } from './top_nav/show_options_popover';
 import { showShareContextMenu, ShareContextMenuExtensionsRegistryProvider } from 'ui/share';
@@ -271,7 +273,6 @@ app.directive('dashboardApp', function ($injector) {
       function save(saveOptions) {
         return saveDashboard(angular.toJson, timefilter, dashboardStateManager, saveOptions)
           .then(function (id) {
-            $scope.kbnTopNav.close('save');
             if (id) {
               toastNotifications.addSuccess({
                 title: `Dashboard '${dash.title}' was saved`,
@@ -335,13 +336,17 @@ app.directive('dashboardApp', function ($injector) {
           });
         };
 
-        showSaveModal({
-          onSave,
-          title: currentTitle,
-          description: currentDescription,
-          timeRestore: currentTimeRestore,
-          showCopyOnSave: dash.id ? true : false,
-        });
+        const dashboardSaveModal = (
+          <DashboardSaveModal
+            onSave={onSave}
+            onClose={() => {}}
+            title={currentTitle}
+            description={currentDescription}
+            timeRestore={currentTimeRestore}
+            showCopyOnSave={dash.id ? true : false}
+          />
+        );
+        showSaveModal(dashboardSaveModal);
       };
       navActions[TopNavIds.CLONE] = () => {
         const currentTitle = dashboardStateManager.getTitle();

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap b/src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
@@ -1,102 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders DashboardSaveModal 1`] = `
-<EuiOverlayMask>
-  <EuiModal
-    className="dshSaveModal"
-    data-test-subj="dashboardSaveModal"
-    maxWidth={true}
-    onClose={[Function]}
-  >
-    <EuiModalHeader>
-      <EuiModalHeaderTitle>
-        Save Dashboard
-      </EuiModalHeaderTitle>
-    </EuiModalHeader>
-    <EuiModalBody>
-      <EuiForm>
-        <EuiFormRow
-          describedByIds={Array []}
-          fullWidth={false}
-          hasEmptyLabelSpace={false}
-          label="Save as a new dashboard"
-        >
-          <EuiSwitch
-            checked={false}
-            data-test-subj="saveAsNewCheckbox"
-            onChange={[Function]}
-          />
-        </EuiFormRow>
-        <EuiFormRow
-          describedByIds={Array []}
-          fullWidth={false}
-          hasEmptyLabelSpace={false}
-          label="Title"
-        >
-          <EuiFieldText
-            autoFocus={true}
-            compressed={false}
-            data-test-subj="dashboardTitle"
-            fullWidth={false}
-            isInvalid={false}
-            isLoading={false}
-            onChange={[Function]}
-            value="dash title"
-          />
-        </EuiFormRow>
-        <EuiFormRow
-          describedByIds={Array []}
-          fullWidth={false}
-          hasEmptyLabelSpace={false}
-          label="Description"
-        >
-          <EuiTextArea
-            compressed={true}
-            data-test-subj="dashboardDescription"
-            fullWidth={false}
-            onChange={[Function]}
-            resize="vertical"
-            value="dash description"
-          />
-        </EuiFormRow>
-        <EuiFormRow
-          describedByIds={Array []}
-          fullWidth={false}
-          hasEmptyLabelSpace={false}
-          helpText="This changes the time filter to the currently selected time each time this dashboard is loaded."
-          label="Store time with dashboard"
-        >
-          <EuiSwitch
-            checked={true}
-            data-test-subj="storeTimeWithDashboard"
-            onChange={[Function]}
-          />
-        </EuiFormRow>
-      </EuiForm>
-    </EuiModalBody>
-    <EuiModalFooter>
-      <EuiButton
-        color="primary"
-        data-test-subj="saveCancelButton"
-        fill={false}
-        iconSide="left"
-        onClick={[Function]}
-        type="button"
+<SavedObjectSaveModal
+  objectType="dashboard"
+  onClose={[Function]}
+  onSave={[Function]}
+  options={
+    <React.Fragment>
+      <EuiFormRow
+        describedByIds={Array []}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+        label="Description"
       >
-        Cancel
-      </EuiButton>
-      <EuiButton
-        color="primary"
-        data-test-subj="confirmSaveDashboardButton"
-        fill={true}
-        iconSide="left"
-        isLoading={false}
-        onClick={[Function]}
-        type="button"
+        <EuiTextArea
+          compressed={true}
+          data-test-subj="dashboardDescription"
+          fullWidth={false}
+          onChange={[Function]}
+          resize="vertical"
+          value="dash description"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        describedByIds={Array []}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+        helpText="This changes the time filter to the currently selected time each time this dashboard is loaded."
+        label="Store time with dashboard"
       >
-        Confirm Save
-      </EuiButton>
-    </EuiModalFooter>
-  </EuiModal>
-</EuiOverlayMask>
+        <EuiSwitch
+          checked={true}
+          data-test-subj="storeTimeWithDashboard"
+          onChange={[Function]}
+        />
+      </EuiFormRow>
+    </React.Fragment>
+  }
+  showCopyOnSave={true}
+  title="dash title"
+/>
 `;