disable save button if visualization is dirty (#11576) (#11816)

(backport: manual merge edits in test file)

src/core_plugins/kibana/public/visualize/editor/editor.js

@@ -113,6 +113,14 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb
     description: 'Save Visualization',
     template: require('plugins/kibana/visualize/editor/panels/save.html'),
     testId: 'visualizeSaveButton',
+    disableButton() {
+      return Boolean(editableVis.dirty);
+    },
+    tooltip() {
+      if (editableVis.dirty) {
+        return 'Apply or Discard your changes before saving';
+      }
+    }
   }, {
     key: 'share',
     description: 'Share Visualization',

test/functional/apps/visualize/_editor.js

@@ -0,0 +1,59 @@
+import expect from 'expect.js';
+
+export default function ({ getService, getPageObjects }) {
+  const log = getService('log');
+  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+
+  describe('visualize app', function describeIndexTests() {
+    beforeEach(async function () {
+      const fromTime = '2015-09-19 06:31:44.000';
+      const toTime = '2015-09-23 18:31:44.000';
+
+      log.debug('navigateToApp visualize');
+      await PageObjects.common.navigateToUrl('visualize', 'new');
+
+      log.debug('clickLineChart');
+      await PageObjects.visualize.clickLineChart();
+      await PageObjects.visualize.clickNewSearch();
+
+      log.debug(`Set absolute time range from "${fromTime}" to "${toTime}"`);
+      await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+
+      // make sure that changes in the test are what will make the visualization dirty
+      await PageObjects.visualize.clickGo();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+
+      const isEnabled = await PageObjects.visualize.isSaveButtonEnabled();
+      expect(isEnabled).to.be(true);
+    });
+
+    describe('editor', function indexPatternCreation() {
+      it('should disable the save button if visualization is dirty', async function () {
+        log.debug('Bucket = Split Chart');
+        await PageObjects.visualize.clickBucket('Split Chart');
+        log.debug('Aggregation = Terms');
+        await PageObjects.visualize.selectAggregation('Terms');
+        log.debug('Field = extension');
+        await PageObjects.visualize.selectField('extension.raw');
+
+        const isEnabled = await PageObjects.visualize.isSaveButtonEnabled();
+        expect(isEnabled).to.be(false);
+      });
+
+      it('should enable the save button if changes are applied', async function () {
+        log.debug('Bucket = Split Chart');
+        await PageObjects.visualize.clickBucket('Split Chart');
+        log.debug('Aggregation = Terms');
+        await PageObjects.visualize.selectAggregation('Terms');
+        log.debug('Field = extension');
+        await PageObjects.visualize.selectField('extension.raw');
+
+        await PageObjects.visualize.clickGo();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+
+        const isEnabled = await PageObjects.visualize.isSaveButtonEnabled();
+        expect(isEnabled).to.be(true);
+      });
+    });
+  });
+}

test/functional/apps/visualize/index.js

@@ -21,6 +21,8 @@ export default function ({ getService, loadTestFile }) {
         return logstash;
       });
     });
+
+    loadTestFile(require.resolve('./_editor'));
     loadTestFile(require.resolve('./_chart_types'));
     loadTestFile(require.resolve('./_area_chart'));
     loadTestFile(require.resolve('./_line_chart'));

test/functional/page_objects/visualize_page.js

@@ -340,6 +340,12 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
     }
 
 
+    async isSaveButtonEnabled() {
+      const saveButton = await testSubjects.find('visualizeSaveButton');
+      const clazz = await saveButton.getProperty('className');
+      return clazz.indexOf('kuiLocalMenuItem-isDisabled') === -1;
+    }
+
     saveVisualization(vizName) {
       return testSubjects.click('visualizeSaveButton')
       .then(() => {