refactor snap reports (#5578)

Co-authored-by: Bartek Szopka <83575+bartaz@users.noreply.github.com>

Author: M7mdisk

.env

@@ -5,4 +5,4 @@ ENVIRONMENT=devel
 FLASK_DEBUG=true
 DEVEL=True
 SECRET_KEY=local_development_fake_key
-LP_API_USERNAME=test_lp_user
+LP_API_USERNAME=test_lp_user

konf/site.yaml

@@ -86,6 +86,11 @@ env: &env
       key: dns-verification-salt
       name: snapcraft-io
 
+  - name: REPORT_SHEET_URL
+    secretKeyRef:
+      key: report-sheet-url
+      name: snapcraft-io
+
 memoryLimit: 256Mi
 
 extraHosts:

static/js/public/snap-details/reportSnap.ts

@@ -48,13 +48,6 @@ export default function initReportSnap(
   const modal = document.querySelector(modalSelector) as HTMLElement;
   const reportForm = modal.querySelector("form") as HTMLFormElement;
 
-  const honeypotField = reportForm.querySelector(
-    "#report-snap-confirm",
-  ) as HTMLInputElement;
-  const commentField = reportForm.querySelector(
-    "#report-snap-comment",
-  ) as HTMLInputElement;
-
   toggle.addEventListener("click", (event) => {
     event.preventDefault();
     toggleModal(modal);
@@ -75,30 +68,22 @@ export default function initReportSnap(
       "Submitting…",
     );
 
-    if (
-      honeypotField.checked ||
-      (commentField.value && commentField.value.includes("http"))
-    ) {
-      showSuccess(modal);
-      return;
-    }
-
     try {
       const resp = await fetch(formURL, {
         method: "POST",
         body: new FormData(reportForm),
-        mode: "no-cors",
       });
 
+      if (!resp.ok) {
+        showError(modal);
+        return;
+      }
+
       if (reportForm.action.endsWith("/report")) {
         const data = await resp.json();
-        if (data.url) {
-          const formData = new FormData(reportForm);
-          fetch(data.url, {
-            method: "POST",
-            body: formData,
-            mode: "no-cors",
-          });
+        if (!data.ok) {
+          showError(modal);
+          return;
         }
       }
 

templates/store/snap-details/_report_snap_modal.html

@@ -6,11 +6,10 @@ <h2 class="p-modal__title" id="modal-title">Report {{snap_title}} for a Snap Sto
         <button class="p-modal__close js-modal-close" aria-label="Close dialog">Close</button>
       </header>
 
-      {# report snap form submits to a Google Forms #}
-      {# names of the inputs need to be consistend with the original form #}
+      {# report snap form submits to the app endpoint #}
       <form id="report-snap-form" action="/report" method="POST">
         <input name="csrf_token" type="hidden" value="{{csrf_token()}}" />
-        <input type="hidden" name="entry.718227286" value="{{package_name}}" />
+        <input type="hidden" name="snap_name" value="{{package_name}}" />
         <div class="p-notification--negative">
           <div class="p-notification__content">
             <h5 class="p-notification__title">
@@ -41,18 +40,16 @@ <h5 class="p-notification__title">
           </div>
         </div>
         <label for="report-snap-reason">Choose a reason for reporting this snap</label>
-        <select id="report-snap-reason" name="entry.340540050" required>
+        <select id="report-snap-reason" name="reason" required>
           <option value="" selected>Select an option</option>
           <option value="Copyright or trademark violation">Copyright or trademark violation</option>
           <option value="Snap Store terms of service violation">Snap Store terms of service violation</option>
         </select>
         <label for="report-snap-comment">Please provide more detailed reason to your report</label>
-        <textarea id="report-snap-comment" type="text" name="entry.1974584359" placeholder="Comment..." rows="5" maxlength="1000" required></textarea>
+        <textarea id="report-snap-comment" type="text" name="comment" placeholder="Comment..." rows="5" maxlength="1000" required></textarea>
 
         <label for="report-snap-email">Your email (optional)</label>
-        <input id="report-snap-email" type="email" name="entry.1624813972" placeholder="email@example.com" />
-        <label for="report-snap-confirm" style="position: absolute; top: -9999999px;">I agree</label>
-        <input id="report-snap-confirm" type="checkbox" name="entry.13371337" style="position: absolute; top: -9999999px;" />
+        <input id="report-snap-email" type="email" name="email" placeholder="email@example.com" />
         <p>In submitting this form, I confirm that I have read and agree to <a href="https://ubuntu.com/legal/data-privacy/contact">Canonical’s Privacy Notice</a> and <a href="https://ubuntu.com/legal/data-privacy">Privacy Policy</a>.</p>
         <div class="u-align--right">
           <button type="button" class="js-modal-close u-no-margin--bottom">Cancel</button>

webapp/config.py

@@ -49,3 +49,5 @@ class ConfigurationError(Exception):
 SEARCH_CUSTOM_ID = "009048213575199080868:i3zoqdwqk8o"
 
 APP_NAME = "snapcraft"
+
+REPORT_SHEET_URL = os.getenv("REPORT_SHEET_URL", "").strip()

webapp/store/snap_details_views.py

@@ -535,24 +535,30 @@ def snap_distro_install(snap_name, distro):
 
     @store.route("/report", methods=["POST"])
     def report_snap():
-        form_url = "/".join(
-            [
-                "https://docs.google.com",
-                "forms",
-                "d",
-                "e",
-                "1FAIpQLSc5w1Ow6hRGs-VvBXmDtPOZaadYHEpsqCl2RbKEenluBvaw3Q",
-                "formResponse",
-            ]
-        )
+        form_url = flask.current_app.config.get("REPORT_SHEET_URL")
+        if not form_url:
+            logger.warning("REPORT_SHEET_URL is not configured")
+            return flask.jsonify({"error": "report_url_missing"}), 503
 
         fields = flask.request.form
 
-        # If the honeypot is activated or a URL is included in the message,
-        # say "OK" to avoid spam
-        if (
-            "entry.13371337" in fields and fields["entry.13371337"] == "on"
-        ) or "http" in fields["entry.1974584359"]:
-            return "", 200
+        payload = {
+            "snap_name": fields.get("snap_name", ""),
+            "reason": fields.get("reason", ""),
+            "comment": fields.get("comment", ""),
+            "email": fields.get("email", ""),
+        }
 
-        return flask.jsonify({"url": form_url}), 200
+        try:
+            response = requests.post(form_url, data=payload)
+            if not response.ok:
+                logger.warning(
+                    "Report sheet webhook returned %s",
+                    response.status_code,
+                )
+                return flask.jsonify({"error": "report_failed"}), 502
+        except requests.RequestException:
+            logger.exception("Report sheet webhook request failed")
+            return flask.jsonify({"error": "report_failed"}), 502
+
+        return flask.jsonify({"ok": True}), 200