Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #3427 - Remove min char requirement from description field #3428

Merged
merged 1 commit into from
Aug 3, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions tests/functional/reporting-auth.js
Original file line number Diff line number Diff line change
@@ -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")
8 changes: 4 additions & 4 deletions tests/functional/reporting-issue-wizard-non-auth.js
Original file line number Diff line number Diff line change
@@ -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
3 changes: 1 addition & 2 deletions webcompat/static/css/src/issue-wizard-textarea.css
Original file line number Diff line number Diff line change
@@ -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%;
22 changes: 20 additions & 2 deletions webcompat/static/js/lib/wizard/steps/description.js
Original file line number Diff line number Diff line change
@@ -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: () => {
13 changes: 6 additions & 7 deletions webcompat/templates/issue-wizard-form.html
Original file line number Diff line number Diff line change
@@ -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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, so we can toggle it on or off based on this.

I assumed we were going to do some A/B testing based on the existing AB test stuff we have, this approach would be compatible with that -- you set the value in the template based on active experiment.

<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>