Add tooltip to disabled upload button to specify what is blocking the upload

css/80_app.css

@@ -352,6 +352,8 @@ button.secondary-action:hover {
     background: #cccccc;
 }
 
+button.action.disabled,
+button.action.disabled:hover,
 button[disabled].action,
 button[disabled].action:hover {
     background: #cccccc;

data/core.yaml

@@ -330,6 +330,8 @@ en:
     modified: Modified
     deleted: Deleted
     created: Created
+    outstanding_errors_message: "Please resolve all errors first. {count} remaining."
+    comment_needed_message: Please add a changeset comment first.
     about_changeset_comments: About changeset comments
     about_changeset_comments_link: //wiki.openstreetmap.org/wiki/Good_changeset_comments
     google_warning: "You mentioned Google in this comment: remember that copying from Google Maps is strictly forbidden."

dist/locales/en.json

@@ -414,6 +414,8 @@
             "modified": "Modified",
             "deleted": "Deleted",
             "created": "Created",
+            "outstanding_errors_message": "Please resolve all errors first. {count} remaining.",
+            "comment_needed_message": "Please add a changeset comment first.",
             "about_changeset_comments": "About changeset comments",
             "about_changeset_comments_link": "//wiki.openstreetmap.org/wiki/Good_changeset_comments",
             "google_warning": "You mentioned Google in this comment: remember that copying from Google Maps is strictly forbidden.",

modules/ui/commit.js

@@ -14,6 +14,7 @@ import { uiCommitChanges } from './commit_changes';
 import { uiCommitWarnings } from './commit_warnings';
 import { uiRawTagEditor } from './raw_tag_editor';
 import { utilDetect } from '../util/detect';
+import { tooltip } from '../util/tooltip';
 import { utilRebind } from '../util';
 import { modeBrowse } from '../modes';
 import { svgIcon } from '../svg';
@@ -258,13 +259,16 @@ export function uiCommit(context) {
             .attr('class', 'label')
             .text(t('commit.cancel'));
 
-        buttonEnter
+        var uploadButton = buttonEnter
             .append('button')
-            .attr('class', 'action button save-button')
-            .append('span')
+            .attr('class', 'action button save-button');
+
+        uploadButton.append('span')
             .attr('class', 'label')
             .text(t('commit.save'));
 
+        var uploadBlockerTooltip = getUploadBlockerMessage();
+
         // update
         buttonSection = buttonSection
             .merge(buttonEnter);
@@ -276,15 +280,21 @@ export function uiCommit(context) {
             });
 
         buttonSection.selectAll('.save-button')
-            .attr('disabled', function() {
-                var n = d3_select('#preset-input-comment').node();
-                return (n && n.value.length) ? null : true;
-            })
+            .classed('disabled', uploadBlockerTooltip !== undefined)
             .on('click.save', function() {
-                this.blur();    // avoid keeping focus on the button - #4641
-                dispatch.call('save', this, _changeset);
+                if (!d3_select(this).classed('disabled')) {
+                    this.blur();    // avoid keeping focus on the button - #4641
+                    dispatch.call('save', this, _changeset);
+                }
             });
 
+        // remove any existing tooltip
+        buttonSection.selectAll('.save-button .tooltip').remove();
+
+        if (uploadBlockerTooltip) {
+            buttonSection.selectAll('.save-button')
+                .call(tooltip().title(uploadBlockerTooltip).placement('top'));
+        }
 
         // Raw Tag Editor
         var tagSection = body.selectAll('.tag-section.raw-tag-editor')
@@ -323,6 +333,22 @@ export function uiCommit(context) {
     }
 
 
+    function getUploadBlockerMessage() {
+        var errorCount = context.issueManager().getErrors().length;
+        if (errorCount > 0) {
+            return t('commit.outstanding_errors_message', { count: errorCount });
+
+        } else {
+            var n = d3_select('#preset-input-comment').node();
+            var hasChangesetComment = n && n.value.length > 0;
+            if (!hasChangesetComment) {
+                return t('commit.comment_needed_message');
+            }
+        }
+        return null;
+    }
+
+
     function changeTags(changed, onInput) {
         if (changed.hasOwnProperty('comment')) {
             if (changed.comment === undefined) {

modules/validations/issue_manager.js

@@ -30,6 +30,17 @@ export function IssueManager(context) {
         return issues;
     };
 
+    self.getWarnings = function() {
+        return issues.filter(function(issue) {
+            return issue.severity === 'warning';
+        });
+    };
+    self.getErrors = function() {
+        return issues.filter(function(issue) {
+            return issue.severity === 'error'; 
+        });
+    };
+
     self.getIssuesForEntityWithID = function(entityID) {
         if (!context.hasEntity(entityID)) {
             return [];