From 38ea896dfa633d58f6fa4f9e406026c5f39ccd1f Mon Sep 17 00:00:00 2001
From: Ksenia Berezina <kberezina@mozilla.com>
Date: Fri, 31 Jul 2020 19:02:12 -0400
Subject: [PATCH] Fixes #3427 - Remove min char requirement from description
 field

---
 tests/functional/reporting-auth.js            |  4 ++--
 .../reporting-issue-wizard-non-auth.js        |  8 +++----
 .../static/css/src/issue-wizard-textarea.css  |  3 +--
 .../static/js/lib/wizard/steps/description.js | 22 +++++++++++++++++--
 webcompat/templates/issue-wizard-form.html    | 13 +++++------
 5 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/tests/functional/reporting-auth.js b/tests/functional/reporting-auth.js
index 3cc927e20..1b8ff6830 100755
--- a/tests/functional/reporting-auth.js
+++ b/tests/functional/reporting-auth.js
@@ -66,8 +66,8 @@ registerSuite("Reporting (auth)", {
           .findDisplayedByCssSelector(".next-description")
           .getAttribute("disabled")
           .then(function (attribute) {
-            // Make sure "Continue" is disabled if there are not enough characters
-            assert.isNotNull(attribute);
+            // Make sure "Continue" is enabled by default
+            assert.isNull(attribute);
           })
           .end()
           .findById("steps_reproduce")
diff --git a/tests/functional/reporting-issue-wizard-non-auth.js b/tests/functional/reporting-issue-wizard-non-auth.js
index e8a8b60b9..c0f14d834 100644
--- a/tests/functional/reporting-issue-wizard-non-auth.js
+++ b/tests/functional/reporting-issue-wizard-non-auth.js
@@ -167,8 +167,8 @@ registerSuite("Reporting with wizard", {
           .findDisplayedByCssSelector(".next-description")
           .getAttribute("disabled")
           .then(function (attribute) {
-            // Make sure "Continue" is disabled if there are not enough characters
-            assert.isNotNull(attribute);
+            // Make sure "Continue" is enabled by default
+            assert.isNull(attribute);
           })
           .end()
           .findById("steps_reproduce")
@@ -498,8 +498,8 @@ registerSuite("Reporting with wizard", {
           .findDisplayedByCssSelector(".next-description")
           .getAttribute("disabled")
           .then(function (attribute) {
-            // Make sure "Continue" is disabled if there are not enough characters
-            assert.isNotNull(attribute);
+            // Make sure "Continue" is enabled by default
+            assert.isNull(attribute);
           })
           .end()
           // Enter more than 30 characters in the description field
diff --git a/webcompat/static/css/src/issue-wizard-textarea.css b/webcompat/static/css/src/issue-wizard-textarea.css
index 332c17fa9..5bc10de20 100644
--- a/webcompat/static/css/src/issue-wizard-textarea.css
+++ b/webcompat/static/css/src/issue-wizard-textarea.css
@@ -13,8 +13,7 @@
   font-size: 14px;
   font-weight: 200;
   line-height: 1.86;
-  margin-bottom: 30px;
-  min-height: 150px;
+  min-height: 170px;
   padding: 10px;
   resize: none;
   width: 100%;
diff --git a/webcompat/static/js/lib/wizard/steps/description.js b/webcompat/static/js/lib/wizard/steps/description.js
index fe8e44f20..a2cde6569 100644
--- a/webcompat/static/js/lib/wizard/steps/description.js
+++ b/webcompat/static/js/lib/wizard/steps/description.js
@@ -12,6 +12,7 @@ import { showContainer } from "../ui-utils.js";
 const MIN_CHARACTERS = 30;
 
 const container = $(".step-container.step-description");
+const MIN_CHAR_MODE = container.data("min-char");
 const descriptionField = container.find("#steps_reproduce");
 const progress = container.find(".problem-description .progress");
 const bar = progress.find(".bar");
@@ -22,6 +23,10 @@ const handleNext = (event) => {
   notify.publish("showStep", { id: "screenshot" });
 };
 
+const setButtonState = (isDisabled) => {
+  nextStepButton.prop("disabled", isDisabled);
+};
+
 const updateProgress = (percent) => {
   const isReady = percent === 100;
 
@@ -33,7 +38,7 @@ const updateProgress = (percent) => {
     progress.removeClass("complete");
   }
 
-  nextStepButton.prop("disabled", !isReady);
+  setButtonState(!isReady);
 };
 
 const onChange = (value) => {
@@ -54,8 +59,21 @@ const updateDescription = (url) => {
   descriptionField.val((idx, value) => value + "\n" + imageURL);
 };
 
-descriptionField.on("blur input", (event) => onChange(event.target.value));
+const showProgress = () => {
+  progress.removeClass("is-hidden");
+  $(".char-limit").text("Minimum 30 characters");
+};
+
+const initMinCharMode = () => {
+  descriptionField.on("blur input", (event) => onChange(event.target.value));
+  setButtonState(true);
+  showProgress();
+};
+
 nextStepButton.on("click", handleNext);
+if (MIN_CHAR_MODE) {
+  initMinCharMode();
+}
 
 export default {
   show: () => {
diff --git a/webcompat/templates/issue-wizard-form.html b/webcompat/templates/issue-wizard-form.html
index 32ee64c70..a6febf0ad 100644
--- a/webcompat/templates/issue-wizard-form.html
+++ b/webcompat/templates/issue-wizard-form.html
@@ -230,32 +230,31 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
     </div>
   </div>
 
-  <div class="step-container step-description col">
+  <div class="step-container step-description col" data-min-char="false">
     <div class="row mobile-col">
       <div class="input-control device-data-hero half">
         <img class="protruding-img" src="{{ url_for('static', filename='img/svg/describe-issue.svg') }}" title="Describe issue" alt="Describe issue" />
         <div class="description-text">
-          OK, now the vital part! <br>
-          Please <strong>describe what happened</strong>,
-          including any steps you took before you saw the problem.
+          Any <strong>additional information</strong> you would like to specify? <br/>
+          That would help us diagnose the problem faster.
         </div>
       </div>
       <div class="input-control half col">
         <div class="form-text form-element js-Form-group problem-description progress-textarea bordered-container">
           {{ form.steps_reproduce(class_='form-field text-field js-autogrow-field',
               rows=3, placeholder="Describe what happened") }}
-          <div class="progress">
+          <div class="progress is-hidden">
             <img class="tick" src="{{ url_for('static', filename='img/svg/icons/svg-check-issue.svg') }}" title="Valid message" alt="Valid message" />
             <div class="bar"></div>
           </div>
         </div>
-        <div class="text-right char-limit">Minimum 30 characters</div>
+        <div class="text-right char-limit">(optional)</div>
       </div>
     </div>
     <div class="button-control row">
       <div class="input-control">
         <div class="col center">
-          <button class="button next-description issue-btn" disabled>Continue</button>
+          <button class="button next-description issue-btn">Continue</button>
         </div>
       </div>
     </div>