Merge pull request #3424 from webcompat/issue/3395/1

Fixes #3395 - Change copy after filing an issue with "Report site issue" reporter

Author: Mike Taylor

tests/functional/reporting-direct.js

@@ -0,0 +1,30 @@
+"use strict";
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+const intern = require("intern").default;
+const { assert } = intern.getPlugin("chai");
+const { registerSuite } = intern.getInterface("object");
+const FunctionalHelpers = require("./lib/helpers.js");
+
+const url = intern.config.functionalBaseUrl + "issues/new";
+
+registerSuite("Reporting directly", {
+  tests: {
+    "Ask for url in the description"() {
+      return FunctionalHelpers.openPage(this, url, "#js-ReportForm")
+        .findByCssSelector("#desc-url")
+        .getAttribute("class")
+        .then((className) => {
+          assert.include(className, "is-hidden");
+        })
+        .end()
+        .findByCssSelector("#desc-no-url")
+        .getAttribute("class")
+        .then((className) => {
+          assert.isNull(className);
+        })
+        .end();
+    },
+  },
+});

tests/functional/reporting-get-params.js

@@ -32,6 +32,18 @@ registerSuite("Reporting through passing GET params", {
         .then(function (value) {
           assert.equal(value, true);
         })
+        .end()
+        .findByCssSelector("#desc-url")
+        .getAttribute("class")
+        .then((className) => {
+          assert.notInclude(className, "is-hidden");
+        })
+        .end()
+        .findByCssSelector("#desc-no-url")
+        .getAttribute("class")
+        .then((className) => {
+          assert.include(className, "is-hidden");
+        })
         .end();
     },
   },

tests/functional/reporting-postMessage.js

@@ -46,6 +46,18 @@ registerSuite("Reporting through postMessage", {
             assert.include(value, "type-marfeel");
           })
           .end()
+          .findByCssSelector("#desc-url")
+          .getAttribute("class")
+          .then((className) => {
+            assert.notInclude(className, "is-hidden");
+          })
+          .end()
+          .findByCssSelector("#desc-no-url")
+          .getAttribute("class")
+          .then((className) => {
+            assert.include(className, "is-hidden");
+          })
+          .end()
       );
     },
   },

webcompat/static/js/lib/wizard/steps/submit.js

@@ -53,15 +53,14 @@ const submitForm = function () {
   const dfd = $.Deferred();
   const formEl = form.get(0);
 
-  sendAnalyticsEvent("success", "end");
-
   formEl.submit();
   dfd.resolve();
   return dfd.promise();
 };
 
 const onFormSubmit = (event) => {
   event.preventDefault();
+  sendAnalyticsEvent("success", "end");
   disableSubmits();
   showLoadingIndicator();
   uploadConsoleLogs().always(() => uploadImage().then(submitForm));

webcompat/static/js/lib/wizard/steps/url.js

@@ -7,13 +7,15 @@
 import $ from "jquery";
 
 import notify from "../notify.js";
-import { isUrlValid } from "../validation.js";
+import { isUrlValid, isEmpty } from "../validation.js";
 import { extractPrettyUrl } from "../utils.js";
 import { showError, showSuccess, hideSuccess } from "../ui-utils.js";
 import { sendAnalyticsEvent } from "../analytics.js";
 
 const urlField = $("#url");
 const nextStepButton = $(".next-url");
+const urlDesc = $("#desc-url");
+const noUrlDesc = $("#desc-no-url");
 
 const showNextStep = (id, data) => notify.publish("showStep", { id, data });
 
@@ -43,11 +45,19 @@ const onBlur = (value) => {
   handleEvent(value, () => showError(urlField, "A valid URL is required."));
 };
 
+const updateDescription = (val) => {
+  if (!isEmpty(val)) {
+    urlDesc.removeClass("is-hidden");
+    noUrlDesc.addClass("is-hidden");
+  }
+};
+
 const initListeners = () => {
   urlField.on("input", (event) => onChange(event.target.value));
   urlField.on("blur", (event) => onBlur(event.target.value));
   nextStepButton.on("click", onClick);
   urlField.trigger("input");
+  updateDescription(urlField.val());
 };
 
 initListeners();
@@ -57,5 +67,6 @@ export default {
   update: ({ url }) => {
     if (!url) return;
     urlField.val(url).trigger("input");
+    updateDescription(url);
   },
 };

webcompat/templates/issue-wizard-form.html

@@ -15,15 +15,16 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
       <div class="input-control half">
         <div class="col">
           <div class="input-description">
-            {% if request.args.get('url') %}
+            <div id="desc-url" class="is-hidden">
               Thank you for filing a web compatibility issue.
               <a href="#" class="popup-trigger mobile-only" data-popup-trigger="what-is-webcompat">Learn more</a>
               <br>
               Do we have the <strong>correct site?</strong>
-            {% else %}
+            </div>
+            <div id="desc-no-url">
               <strong>Please enter the URL</strong> where you encountered the web compatibility issue.
               <a href="#" class="popup-trigger mobile-only" data-popup-trigger="what-is-webcompat">Learn more</a>
-            {% endif %}
+            </div>
           </div>
           <div class="form-text form-element js-Form-group form-label-message with-validation-icons">
             {{ form.url.label(class_='form-label is-hidden') }}