Port currently-in-use prefilled Bugzilla links over.

After talking to our triage heroes, I decided against using the built-in Bugzilla filing mechanism - for now. The reasons are:

- They set the version tracking fields for the reports they file. This isn't impossible to add, but the current implementation that fetches the Bugzilla products and components ([0]) is already quite complicated. I could get the currently tracked versions over the API, but that'd be quite a bit of work.
- They sometimes also edit other fields, if there's a need. I could add all the fields to the built-in form, but at that point, I'd be kinda duplicating Bugzilla's UI.

However, this implementation is not perfect.

- The theoritical issue where the field lengths could exceed the available length for the URL is still there. We didn't run into that so far, so I think that's fine to ignore for now.
- We have one button to file a bug for the entire bucket, but we need some per-bug data. For now, I'm mirroring what the old file button did and just using the first shown report as the source. Ideally, we'd move the button into the table below, but this is already super cramped. I might have a UI+UX pass in the future, but that's more like a P2.
- This has no test coverage. That being said, the JS-side of things already has only ~44% of coverage, so this isn't a huge deal. We should fix that, eventually.

[0]: https://github.com/MozillaSecurity/WebCompatManager/blob/6093a404de2e9ab310a99e116bccf68eb7d64cd8/server/frontend/src/components/Bugs/ProductComponentSelect.vue#L130

Author: skyschub

server/frontend/src/components/Buckets/View.vue

@@ -38,9 +38,6 @@
               <br v-if="canEdit" /><br v-if="canEdit" />
               <div v-if="canEdit" class="btn-group">
                 <assignbutton :bucket="bucket.id" :providers="providers" />
-                <a :href="bucket.new_bug_url" class="btn btn-danger"
-                  >File a bug</a
-                >
                 <hidebucketbutton
                   v-if="!bucket.hide_until"
                   :bucket="bucket.id"
@@ -49,6 +46,21 @@
                   >Unmark triaged</a
                 >
               </div>
+              <br v-if="canEdit" /><br v-if="canEdit" />
+              <div v-if="canEdit" class="btn-group">
+                <a
+                  class="btn btn-success"
+                  v-on:click="prepareSiteReport(reports)"
+                >
+                  Prepare new Site Report bug
+                </a>
+                <a
+                  class="btn btn-success"
+                  v-on:click="prepareETPStrictReport(reports)"
+                >
+                  Prepare new ETP Strict bug
+                </a>
+              </div>
             </td>
           </tr>
           <tr>
@@ -209,6 +221,12 @@ import {
   jsonPretty,
   parseHash,
 } from "../../helpers";
+import {
+  etpStrictReportDescription,
+  newBugDefaultParams,
+  openPrefilledBugzillaBug,
+  siteReportDescription,
+} from "../../prefilled_bug_helpers";
 import * as api from "../../api";
 import PageNav from "../PageNav.vue";
 import ActivityGraph from "../ActivityGraph.vue";
@@ -435,6 +453,19 @@ export default {
       url.search = searchParams.toString();
       return url.toString();
     },
+    prepareSiteReport(reports) {
+      const searchParams = newBugDefaultParams(reports[0]);
+      searchParams.append("component", "Site Reports");
+      searchParams.append("comment", siteReportDescription(reports[0]));
+      openPrefilledBugzillaBug(searchParams);
+    },
+    prepareETPStrictReport(reports) {
+      const searchParams = newBugDefaultParams(reports[0]);
+      searchParams.append("component", "Privacy: Site Reports");
+      searchParams.append("comment", etpStrictReportDescription(reports[0]));
+      searchParams.append("dependson", "tp-breakage");
+      openPrefilledBugzillaBug(searchParams);
+    },
   },
   watch: {
     currentPage() {

server/frontend/src/prefilled_bug_helpers.js

@@ -0,0 +1,98 @@
+/**
+ * Used here only to un-indent multi-line strings, because I refuse to have
+ * the description templates strings in here with weird indentations.
+ */
+function trimStartAll(input) {
+  return input
+    .split("\n")
+    .map((l) => l.trimStart())
+    .join("\n");
+}
+
+/**
+ * Builds the default URLSearchParams used to file a new bug and returns it so
+ * it can be extended.
+ */
+export function newBugDefaultParams(report) {
+  return new URLSearchParams([
+    ["bug_file_loc", report.url],
+    ["keywords", "webcompat:site-report"],
+    ["op_sys", `${report.os}`],
+    ["product", "Web Compatibility"],
+    ["rep_platform", "Desktop"],
+    ["short_desc", `${new URL(report.url).hostname} - CHANGE_ME`],
+    ["status_whiteboard", "[webcompat-source:product]"],
+    ["version", `Firefox ${report.app_major_version}`],
+  ]);
+}
+
+/**
+ * Opens a new tab/window to Bugzilla with a prefilled bug form
+ */
+export function openPrefilledBugzillaBug(searchParams) {
+  const url = new URL("https://bugzilla.mozilla.org/enter_bug.cgi");
+  url.search = searchParams.toString();
+  window.open(url.toString(), "_blank");
+}
+
+/**
+ * Generates a pre-filled Bugzilla comment for a Site Report issue
+ */
+export function siteReportDescription(report) {
+  return trimStartAll(`**Environment:**
+    Operating system: ${report.os}
+    Firefox version: ${report.app_name} ${report.app_version} (${report.app_channel})
+
+    **Preconditions:**
+    - Clean profile
+
+    **Steps to reproduce:**
+    1. Navigate to: ${report.url}
+    2. Step 2
+
+    **Expected Behavior:**
+    text
+
+    **Actual Behavior:**
+    text
+
+    **Notes:**
+    - Reproducible on the latest Firefox Release and Nightly
+    - Reproducible regardless of the ETP setting
+    - Works as expected using Chrome
+
+    ---
+
+    Created from webcompat-user-report:${report.uuid}`);
+}
+
+/**
+ * Generates a pre-filled Bugzilla comment for a ETP Strict compat issue
+ */
+export function etpStrictReportDescription(report) {
+  return trimStartAll(`**Environment:**
+    Operating system: ${report.os}
+    Firefox version: ${report.app_name} ${report.app_version} (${report.app_channel})
+
+    **Preconditions:**
+    - ETP set to STRICT
+    - Clean profile
+
+    **Steps to reproduce:**
+    1. Navigate to: ${report.url}
+    2. Step 2
+
+    **Expected Behavior:**
+    text
+
+    **Actual Behavior:**
+    text
+
+    **Notes:**
+    - Not reproducible with ETP STANDARD/turned OFF (both Normal and Private Browsing)
+    - Reproducible on the latest Nightly
+
+    ---
+
+    Created from webcompat-user-report:${report.uuid}`);
+}