Merge "Disable save button until content changes"

polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html

@@ -48,7 +48,7 @@ limitations under the License.
       <div class="editButtons">
         <gr-button primary
             on-tap="_handleSave"
-            disabled="[[disabled]]">Save</gr-button>
+            disabled="[[_saveDisabled]]">Save</gr-button>
         <gr-button
             on-tap="_handleCancel"
             disabled="[[disabled]]">Cancel</gr-button>

polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.js

@@ -31,19 +31,24 @@
 
     properties: {
       content: {
-        type: String,
         notify: true,
+        type: String,
       },
       disabled: {
-        type: Boolean,
         reflectToAttribute: true,
-      },
-      editing: {
         type: Boolean,
         value: false,
-        observer: '_editingChanged',
       },
-
+      editing: {
+        observer: '_editingChanged',
+        type: Boolean,
+        value: false,
+      },
+      _saveDisabled: {
+        computed: '_computeSaveDisabled(disabled, content, _newContent)',
+        type: Boolean,
+        value: true,
+      },
       _newContent: String,
     },
 
@@ -56,6 +61,10 @@
       this._newContent = this.content;
     },
 
+    _computeSaveDisabled: function(disabled, content, newContent) {
+      return disabled || (content === newContent);
+    },
+
     _handleSave: function(e) {
       e.preventDefault();
       this.fire('editable-content-save', {content: this._newContent});

polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content_test.html

@@ -54,11 +54,35 @@ limitations under the License.
       MockInteractions.tap(element.$$('gr-button:not([primary])'));
     });
 
-    test('editing content updates', function() {
+    test('enabling editing updates edit field contents', function() {
       element.content = 'current content';
       element._newContent = 'stale content';
       element.editing = true;
       assert.equal(element._newContent, 'current content');
     });
+
+    test('disabling editing does not update edit field contents', function() {
+      element.content = 'current content';
+      element.editing = true;
+      element._newContent = 'stale content';
+      element.editing = false;
+      assert.equal(element._newContent, 'stale content');
+    });
+
+    suite('editing', function() {
+      setup(function() {
+        element.content = 'current content';
+        element.editing = true;
+      });
+
+      test('save button is disabled initially', function() {
+        assert.isTrue(element.$$('gr-button[primary]').disabled);
+      });
+
+      test('save button is enabled when content changes', function() {
+        element._newContent = 'new content';
+        assert.isFalse(element.$$('gr-button[primary]').disabled);
+      });
+    });
   });
 </script>