View Edit Mode Iteration #4

and issue with filter comparison ($state was different - globalState vs appState)
elastic · Feb 21, 2017 · 6867e98 · 6867e98
1 parent d74b468
commit 6867e98
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 216 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js
@@ -261,9 +261,12 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         }
       };
 
-      navActions[TopNavIds.SAVE] = () => $scope.save();
+      navActions[TopNavIds.SAVE] = () => {
+        $scope.save().then(() => changeViewMode(DashboardViewMode.VIEW));
+      };
       navActions[TopNavIds.CLONE] = () => {
         dashboardState.setTitle(dashboardState.getTitle() + ' (Copy)');
+        dash.copyOnSave = true;
         $scope.save();
       };
       navActions[TopNavIds.EXIT_EDIT_MODE] = () => changeViewMode(DashboardViewMode.VIEW);
@@ -292,6 +295,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
 
 
       $scope.opts = {
+        displayName: dash.getDisplayName(),
         save: $scope.save,
         addVis: $scope.addVis,
         addNewVis,

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_state.js b/src/core_plugins/kibana/public/dashboard/dashboard_state.js
@@ -22,7 +22,7 @@ function getStateDefaults(dashboard) {
 }
 
 function cleanFiltersForComparison(filters) {
-  return _.map(filters, (filter) => _.omit(filter, '$$hashKey'));
+  return _.map(filters, (filter) => _.omit(filter, ['$$hashKey', '$state']));
 }
 
 /**
@@ -170,10 +170,14 @@ export class DashboardState {
   }
 
   getIsDirty() {
+    const existingTitleChanged =
+      this.dashboard.lastSavedTitle &&
+      this.dashboard.lastSavedTitle !== this.dashboard.title;
+
     // Not all filter changes are tracked by the state monitor.
     return this.isDirty ||
       this.getFiltersChangedFromLastSave() ||
-      this.dashboard.lastSavedTitle !== this.dashboard.title;
+      existingTitleChanged;
   }
 
   getPanels() {
@@ -312,16 +316,11 @@ export class DashboardState {
   }
 
   createStateMonitor() {
-    //console.log('creating state monitor with defaults');
-    //console.log(this.stateDefaults);
-
     this.stateMonitor = stateMonitorFactory.create(this.appState, this.stateDefaults);
 
-
-   // console.log('createStateMonitor:new appState defaults:');
-    //console.log(this.appState._defaults);
-
     this.stateMonitor.ignoreProps('viewMode');
+    this.stateMonitor.ignoreProps('filters'); // Filters need some tweaking to compare correctly.
+
     this.stateMonitor.onChange(status => {
       this.isDirty = status.dirty;
     });

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -1,11 +1,6 @@
 @import (reference) "~ui/styles/variables";
 @import (reference) "~ui/styles/mixins";
 
-[data-test-subj="dashboardViewOnlyMode"] {
-  background-color: @kibanaPink1;
-  color: white;
-}
-
 .tab-dashboard {
   background-color: @dashboard-bg;
 }

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js b/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js
@@ -19,6 +19,7 @@ export function getTopNavConfig(dashboardMode, actions) {
         getRenameConfig(),
         getCloneConfig(actions[TopNavIds.CLONE]),
         getOptionsConfig(),
+        getSaveConfig(actions[TopNavIds.SAVE]),
         getViewConfig(actions[TopNavIds.EXIT_EDIT_MODE])];
     default:
       return [];
@@ -37,13 +38,25 @@ function getEditConfig(action) {
   };
 }
 
+/**
+ * @returns {kbnTopNavConfig}
+ */
+function getSaveConfig(action) {
+  return {
+    key: 'save',
+    description: 'Save your dashboard',
+    testId: 'dashboardSaveButton',
+    run: action
+  };
+}
+
 /**
  * @returns {kbnTopNavConfig}
  */
 function getViewConfig(action) {
   return {
-    key: 'done',
-    description: 'Stop editing and switch to view only mode',
+    key: 'cancel',
+    description: 'Cancel editing and switch to view only mode',
     testId: 'dashboardViewOnlyMode',
     run: action
   };

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/options.html b/src/core_plugins/kibana/public/dashboard/top_nav/options.html
@@ -9,7 +9,7 @@
         ng-checked="model.timeRestore"
         data-test-subj="storeTimeWithDashboard"
       >
-      Store time with {{opts.dashboard.getDisplayName()}}
+      Store time with {{opts.displayName}}
       <kbn-info placement="bottom" info="Change the time filter to the currently selected time each time this dashboard is loaded"></kbn-info>
     </label>
   </div>

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js b/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js
@@ -4,6 +4,7 @@ export const TopNavIds = {
   OPTIONS: 'options',
   RENAME: 'rename',
   CLONE: 'clone',
+  SAVE: 'save',
   EXIT_EDIT_MODE: 'exitEditMode',
   ENTER_EDIT_MODE: 'enterEditMode'
 };
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.js b/src/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -98,23 +98,19 @@ module.directive('kbnTopNav', function (Private) {
           $scope.transcludes[transclusionSlot] = transcludedItem;
         });
       });
-
       const extensions = getNavbarExtensions($attrs.name);
-      let initialized = false;
 
       function initTopNavForConfigChanges(newConfig, oldConfig) {
-        if (initialized && _.isEqual(oldConfig, newConfig)) return;
+        if (_.isEqual(oldConfig, newConfig)) return;
 
-        initialized = true;
-        let controls = newConfig;
-        if (controls instanceof KbnTopNavController) {
-          controls.addItems(extensions);
+        if (newConfig instanceof KbnTopNavController) {
+          newConfig.addItems(extensions);
+          $scope.kbnTopNav = newConfig;
         } else {
-          controls = controls.concat(extensions);
+          newConfig = newConfig.concat(extensions);
+          $scope.kbnTopNav = new KbnTopNavController(newConfig);
+          $scope.kbnTopNav._link($scope, $element);
         }
-
-        $scope.kbnTopNav = new KbnTopNavController(controls);
-        $scope.kbnTopNav._link($scope, $element);
       }
 
       const getTopNavConfig = () => _.get($scope, $attrs.config, []);

diff --git a/test/functional/apps/dashboard/_dashboard.js b/test/functional/apps/dashboard/_dashboard.js
@@ -40,7 +40,7 @@ bdd.describe('dashboard tab', function describeIndexTests() {
           PageObjects.common.saveScreenshot('Dashboard-has-visualizations');
         });
     });
-    
+
     bdd.it('should have all the expected initial sizes', function checkVisualizationSizes() {
       const width = DEFAULT_PANEL_WIDTH;
       const height = DEFAULT_PANEL_HEIGHT;

diff --git a/test/functional/apps/dashboard/_view_edit.js b/test/functional/apps/dashboard/_view_edit.js
@@ -28,169 +28,6 @@ bdd.describe('dashboard view edit mode', function viewEditModeTests() {
     await PageObjects.dashboard.clickEdit();
   });
 
-  bdd.describe('change filters in view mode', async function () {
-    bdd.describe('shows filter conflict', async function () {
-      bdd.describe('and reloads dashboard defaults', async function () {
-        bdd.it('for different filter', async function () {
-          await PageObjects.dashboard.clickDoneEditing();
-          await PageObjects.dashboard.setTimepickerInDataRange();
-
-          await PageObjects.common.sleep(1000);
-          await PageObjects.dashboard.filterOnPieSlice();
-          await PageObjects.common.sleep(1000);
-
-          let descriptions = await PageObjects.dashboard.getFilterDescriptions();
-
-          expect(descriptions.length).to.equal(1);
-
-          await PageObjects.dashboard.clickEdit();
-          await PageObjects.common.sleep(1000);
-
-          // Confirm will load the dashboard defaults
-          await PageObjects.common.clickConfirmOnModal();
-
-          descriptions = await PageObjects.dashboard.getFilterDescriptions();
-
-          expect(descriptions.length).to.equal(0);
-        });
-
-        bdd.it('for different query', async function () {
-          await PageObjects.dashboard.clickDoneEditing();
-          await PageObjects.dashboard.appendQuery('my search query');
-          await PageObjects.dashboard.clickFilterButton();
-          await PageObjects.dashboard.clickEdit();
-
-          // Confirm will load the dashboard defaults
-          await PageObjects.common.clickConfirmOnModal();
-
-          const query = await PageObjects.dashboard.getQuery();
-          expect(query).to.equal('*');
-        });
-
-        bdd.it('for different time when time stored in dash', async function () {
-          const fromTime = '2015-09-19 06:31:44.000';
-          const toTime = '2015-09-23 18:31:44.000';
-          await PageObjects.header.setAbsoluteRange(fromTime, toTime);
-
-          let newFromTime = await PageObjects.header.getFromTime();
-          let newToTime = await PageObjects.header.getToTime();
-          expect(newFromTime).to.equal(fromTime);
-          expect(newToTime).to.equal(toTime);
-
-          PageObjects.common.debug('Saving dashboard with time');
-          await PageObjects.dashboard.saveDashboard(dashboardName, true);
-
-          PageObjects.common.debug('Click done editing after save');
-          await PageObjects.dashboard.clickDoneEditing();
-
-          PageObjects.common.debug('Changing time in view mode');
-          await PageObjects.header.setAbsoluteRange('2011-09-19 06:31:44.000', '2011-09-19 06:31:44.000');
-
-          newFromTime = await PageObjects.header.getFromTime();
-          newToTime = await PageObjects.header.getToTime();
-
-          expect(newFromTime).to.equal('2011-09-19 06:31:44.000');
-          expect(newToTime).to.equal('2011-09-19 06:31:44.000');
-
-          PageObjects.common.debug('Entering edit mode');
-          await PageObjects.dashboard.clickEdit();
-
-          PageObjects.common.debug('Load dashboard filters');
-          // Confirm should load filters saved with the dashboard.
-          await PageObjects.common.clickConfirmOnModal();
-
-          await PageObjects.header.clickTimepicker();
-
-          newFromTime = await PageObjects.header.getFromTime();
-          newToTime = await PageObjects.header.getToTime();
-
-          expect(newFromTime).to.equal(fromTime);
-          expect(newToTime).to.equal(toTime);
-        });
-      });
-
-      bdd.describe('and preserves current values', async function () {
-        bdd.it('for different filter', async function () {
-          await PageObjects.dashboard.clickDoneEditing();
-          await PageObjects.dashboard.setTimepickerInDataRange();
-
-          await PageObjects.common.sleep(1000);
-          await PageObjects.dashboard.filterOnPieSlice();
-          await PageObjects.common.sleep(1000);
-
-          let descriptions = await PageObjects.dashboard.getFilterDescriptions();
-
-          expect(descriptions.length).to.equal(1);
-
-          await PageObjects.dashboard.clickEdit();
-          await PageObjects.common.sleep(1000);
-
-          await PageObjects.common.clickCancelOnModal();
-
-          descriptions = await PageObjects.dashboard.getFilterDescriptions();
-
-          expect(descriptions.length).to.equal(1);
-
-          // Click done Editing and confirm lose changes
-          await PageObjects.dashboard.clickDoneEditing();
-          await PageObjects.common.clickCancelOnModal();
-          await PageObjects.common.sleep(1000);
-        });
-
-        bdd.it('for different query', async function () {
-          await PageObjects.dashboard.appendQuery('my search query');
-          await PageObjects.dashboard.clickFilterButton();
-          await PageObjects.dashboard.clickEdit();
-
-          // Confirm will load the dashboard defaults
-          await PageObjects.common.clickCancelOnModal();
-
-          const query = await PageObjects.dashboard.getQuery();
-          expect(query).to.equal('*my search query');
-
-          // Click done Editing and confirm lose changes
-          await PageObjects.dashboard.clickDoneEditing();
-          await PageObjects.common.clickCancelOnModal();
-        });
-
-        bdd.it('for different time when time stored in dash', async function () {
-          await PageObjects.dashboard.clickEdit();
-          await PageObjects.header.setAbsoluteRange('2015-09-19 06:31:44.000', '2015-09-23 18:31:44.000');
-          await PageObjects.dashboard.saveDashboard(dashboardName, true);
-          await PageObjects.dashboard.clickDoneEditing();
-
-          const fromTime = '2011-09-19 06:31:44.000';
-          const toTime = '2011-09-23 18:31:44.000';
-          await PageObjects.header.setAbsoluteRange(fromTime, toTime);
-          await PageObjects.dashboard.clickEdit();
-
-          await PageObjects.common.clickCancelOnModal();
-
-          await PageObjects.header.clickTimepicker();
-          const newFromTime = await PageObjects.header.getFromTime();
-          const newToTime = await PageObjects.header.getToTime();
-
-          expect(newFromTime).to.equal(fromTime);
-          expect(newToTime).to.equal(toTime);
-        });
-      });
-    });
-
-    bdd.describe('does not show filter conflict', async function () {
-      bdd.it('for different time when time is not stored in dash', async function () {
-        await PageObjects.dashboard.saveDashboard(dashboardName, false);
-        await PageObjects.dashboard.clickDoneEditing();
-
-        await PageObjects.header.setAbsoluteRange('2013-09-19 06:31:44.000', '2013-09-19 06:31:44.000');
-
-        await PageObjects.dashboard.clickEdit();
-
-        const isOpen = await PageObjects.common.isConfirmModalOpen();
-        expect(isOpen).to.be(false);
-      });
-    });
-  });
-
   bdd.describe('shows lose changes warning', async function () {
     bdd.describe('and loses changes', function () {
       bdd.it('when time changed is stored with dashboard', async function () {
@@ -246,5 +83,15 @@ bdd.describe('dashboard view edit mode', function viewEditModeTests() {
       const isOpen = await PageObjects.common.isConfirmModalOpen();
       expect(isOpen).to.be(false);
     });
+
+    bdd.it('when a dashboard has a filter and remains unchanged', async function () {
+      await PageObjects.dashboard.clickEdit();
+      await PageObjects.dashboard.filterOnPieSlice();
+      await PageObjects.dashboard.saveDashboard(dashboardName);
+      await PageObjects.dashboard.clickDoneEditing();
+
+      const isOpen = await PageObjects.common.isConfirmModalOpen();
+      expect(isOpen).to.be(false);
+    });
   });
 });
diff --git a/test/functional/apps/dashboard/index.js b/test/functional/apps/dashboard/index.js
@@ -13,7 +13,7 @@ bdd.describe('dashboard app', function () {
     return remote.setWindowSize(1200,800);
   });
 
-  require('./_dashboard');
-  require('./_dashboard_time');
+  //require('./_dashboard');
+  //require('./_dashboard_time');
   require('./_view_edit');
 });
diff --git a/test/functional/index.js b/test/functional/index.js
@@ -29,13 +29,13 @@ define(function (require) {
     });
 
     const apps = [
-      'intern/dojo/node!./apps/xpack',
-      'intern/dojo/node!./apps/discover',
-      'intern/dojo/node!./apps/management',
-      'intern/dojo/node!./apps/visualize',
-      'intern/dojo/node!./apps/console',
+      // 'intern/dojo/node!./apps/xpack',
+      // 'intern/dojo/node!./apps/discover',
+      // 'intern/dojo/node!./apps/management',
+      // 'intern/dojo/node!./apps/visualize',
+      // 'intern/dojo/node!./apps/console',
       'intern/dojo/node!./apps/dashboard',
-      'intern/dojo/node!./status_page'
+      //'intern/dojo/node!./status_page'
     ].filter((suite) => {
       if (!requestedApps) return true;
       return requestedApps.reduce((previous, app) => {