From 3e095657c84b91692b01f0d572e00a5b4fedd069 Mon Sep 17 00:00:00 2001 From: Ksenia Berezina Date: Fri, 6 Oct 2023 13:50:18 -0400 Subject: [PATCH] Fixes #3785 - Prefill description from the new in-product reporter --- tests/functional/reporting-postMessage.js | 16 +++++++++++++++- webcompat/form.py | 2 +- .../lib/wizard/helpers/postMessageParser.js | 9 ++++++++- webcompat/static/js/lib/wizard/prefill.js | 3 ++- .../static/js/lib/wizard/steps/description.js | 19 ++++++++++++++++--- .../steps/upload-helper/image-upload.js | 5 ++++- webcompat/static/js/lib/wizard/wizard.js | 9 ++++++++- 7 files changed, 54 insertions(+), 9 deletions(-) diff --git a/tests/functional/reporting-postMessage.js b/tests/functional/reporting-postMessage.js index 8ac677ef3..af95349f3 100644 --- a/tests/functional/reporting-postMessage.js +++ b/tests/functional/reporting-postMessage.js @@ -12,13 +12,21 @@ const url = intern.config.functionalBaseUrl + "issues/new"; // This string is executed by calls to `execute()` in various tests // it postMessages a small green test square. const POSTMESSAGE_TEST = - 'postMessage({screenshot:{}, message: {"url":"http://example.com","utm_source":"desktop-reporter","utm_campaign":"report-site-issue-button","src":"desktop-reporter","details":{"gfx.webrender.all":false,"gfx.webrender.blob-images":true,"gfx.webrender.enabled":false,"image.mem.shared":true,"buildID":"20191016225400","channel":"default","consoleLog":[],"hasTouchScreen":false,"mixed active content blocked":false,"mixed passive content blocked":false,"tracking content blocked":"false","hasMarfeel":true},"extra_labels":["type-marfeel"]}}, "http://localhost:5000")'; + 'postMessage({screenshot:{}, message: {"url":"http://example.com","utm_source":"desktop-reporter","utm_campaign":"report-site-issue-button","src":"desktop-reporter","details":{"gfx.webrender.all":false,"gfx.webrender.blob-images":true,"gfx.webrender.enabled":false,"image.mem.shared":true,"buildID":"20191016225400","channel":"default","consoleLog":[],"hasTouchScreen":false,"mixed active content blocked":false,"mixed passive content blocked":false,"tracking content blocked":"false","hasMarfeel":true},"extra_labels":["type-marfeel"], "description": "site is broken, please fix"}}, "http://localhost:5000")'; registerSuite("Reporting through postMessage", { tests: { "postMessaged object"() { return ( FunctionalHelpers.openPage(this, url, "#js-ReportForm") + .execute(() => "wrtReady" in window) + .then((value) => + assert.equal( + value, + true, + "wrtReady variable exists in window object" + ) + ) // send data object through postMessage .execute(POSTMESSAGE_TEST) .sleep(1000) @@ -52,6 +60,12 @@ registerSuite("Reporting through postMessage", { assert.include(value, "type-marfeel"); }) .end() + .findByCssSelector("#steps_reproduce") + .getProperty("value") + .then(function (value) { + assert.include(value, "site is broken, please fix"); + }) + .end() .findByCssSelector("#desc-url") .getAttribute("class") .then((className) => { diff --git a/webcompat/form.py b/webcompat/form.py index a1bf2e0ea..c534a5371 100644 --- a/webcompat/form.py +++ b/webcompat/form.py @@ -157,7 +157,7 @@ browser_test_label = 'Did you test in another browser?' textarea_label = 'Please describe what happened, including any steps you took before you saw the problem' # noqa -other_problem_label = 'Briefly describe the issue:' +other_problem_label = 'Briefly summarize the issue:' other_browser_label = 'Browser tested' diff --git a/webcompat/static/js/lib/wizard/helpers/postMessageParser.js b/webcompat/static/js/lib/wizard/helpers/postMessageParser.js index 574a7d425..95604c437 100644 --- a/webcompat/static/js/lib/wizard/helpers/postMessageParser.js +++ b/webcompat/static/js/lib/wizard/helpers/postMessageParser.js @@ -9,17 +9,24 @@ import { sendAnalyticsCS } from "../analytics.js"; const updateStep = (id, data) => notify.publish("updateStep", { id, data }); const updateUrl = (url) => updateStep("url", { url }); +const updateDescription = (description) => + updateStep("description", { description }); const updateHidden = (data) => updateStep("hidden", { data }); const updateScreenshot = (dataURI) => updateStep("screenshot", { dataURI }); const handleMessage = (message) => { if (!message) return; - const { url, utm_campaign, utm_source, ...additional } = message; + const { url, description, utm_campaign, utm_source, ...additional } = message; sendAnalyticsCS(utm_campaign, utm_source); if (url) { updateUrl(url); } + + if (description && description.length) { + updateDescription(description); + } + updateHidden(additional); }; diff --git a/webcompat/static/js/lib/wizard/prefill.js b/webcompat/static/js/lib/wizard/prefill.js index 4f145592a..6a7b54e8a 100644 --- a/webcompat/static/js/lib/wizard/prefill.js +++ b/webcompat/static/js/lib/wizard/prefill.js @@ -6,9 +6,10 @@ import { parseGetParams } from "./helpers/getParamParser.js"; import { onMessageReceived } from "./helpers/postMessageParser.js"; export default { - init: () => { + init: (wrtResolve) => { // This module supports form prefilling with GET params or postMessage document.addEventListener("DOMContentLoaded", parseGetParams); window.addEventListener("message", onMessageReceived, false); + wrtResolve(); }, }; diff --git a/webcompat/static/js/lib/wizard/steps/description.js b/webcompat/static/js/lib/wizard/steps/description.js index ff2307c25..4d75960ff 100644 --- a/webcompat/static/js/lib/wizard/steps/description.js +++ b/webcompat/static/js/lib/wizard/steps/description.js @@ -50,7 +50,7 @@ const onChange = (value) => { create the markdown with the URL of a newly uploaded image and add it to the bug description */ -const updateDescription = (url) => { +const addScreenshotUrl = (url) => { const imageURL = `
View the screenshot Screenshot @@ -59,6 +59,11 @@ const updateDescription = (url) => { descriptionField.val((idx, value) => value + "\n" + imageURL); }; +const addDescription = (description) => { + descriptionField.val(description); + descriptionField.trigger("input"); +}; + const showProgress = () => { progress.removeClass("is-hidden"); $(".char-limit").text(`Minimum ${MIN_CHARACTERS} characters`); @@ -79,7 +84,15 @@ export default { show: () => { showContainer(container); }, - update: ({ url }) => { - updateDescription(url); + update: (data) => { + const { screenshotUrl, description } = data; + + if (description) { + addDescription(description); + } + + if (screenshotUrl) { + addScreenshotUrl(screenshotUrl); + } }, }; diff --git a/webcompat/static/js/lib/wizard/steps/upload-helper/image-upload.js b/webcompat/static/js/lib/wizard/steps/upload-helper/image-upload.js index 71de53006..1493c99cc 100644 --- a/webcompat/static/js/lib/wizard/steps/upload-helper/image-upload.js +++ b/webcompat/static/js/lib/wizard/steps/upload-helper/image-upload.js @@ -18,7 +18,10 @@ const previewEl = $(".js-image-upload"); const addImageURL = ({ url }) => { if (!url) return; - notify.publish("updateStep", { id: "description", data: { url } }); + notify.publish("updateStep", { + id: "description", + data: { screenshotUrl: url }, + }); }; const handleUploadError = function (response) { diff --git a/webcompat/static/js/lib/wizard/wizard.js b/webcompat/static/js/lib/wizard/wizard.js index 4997c3fec..b29ef522c 100644 --- a/webcompat/static/js/lib/wizard/wizard.js +++ b/webcompat/static/js/lib/wizard/wizard.js @@ -6,6 +6,13 @@ import stepper from "./stepper.js"; import prefill from "./prefill.js"; import progress from "./progress.js"; -prefill.init(); +// Set a window variable to let the in-browser reporting tool +// know that the site is ready for the postMessage +let wrtResolve; +window.wrtReady = new Promise((r) => { + wrtResolve = r; +}); + +prefill.init(wrtResolve); stepper.init(); progress.init();