From ac847daf8bfbbdbce9fa3c872a21bba0582ffe1f Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Wed, 4 Mar 2020 13:24:22 +0100
Subject: [PATCH] Feature: Change up the report a bug stuff.

---
 source/html/options.html  | 16 ++++++++-----
 source/scss/_options.scss |  4 ++++
 source/ts/options.ts      | 50 +++++++++++++++++++++++++++++----------
 source/ts/utilities.ts    |  9 +++++++
 4 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/source/html/options.html b/source/html/options.html
index 9c3f5ce..590c1c5 100644
--- a/source/html/options.html
+++ b/source/html/options.html
@@ -213,9 +213,10 @@
               through the link at the bottom of this page or by
               <a href="https://tildes.net/user/Bauke/new_message">private
                 messaging Bauke</a>
-              on Tildes. If you're reporting a bug through a private message,
-              please use the "Copy Bug Template" button below and fill out
-              the template in your message.
+              on Tildes. If you're reporting a bug through, please use the links
+              available in the footer. They will prefill a bug report
+              template with some system information and instructions that can help
+              tremendously with determining the problem.
             </p>
             <form id="import-export">
               <input class="trx-hidden" accept="application/json" type="file"
@@ -243,9 +244,12 @@
       </div>
     </main>
     <footer id="footer">
-      <a id="report-a-bug" target="_blank" rel="noopener">
-        Report A Bug
-      </a>
+      <p>
+        Report a bug through
+        <a class="report-a-bug-gitlab" target="_blank" rel="noopener">GitLab</a>
+        or
+        <a class="report-a-bug-tildes" target="_blank" rel="noopener">Tildes</a>.
+      </p>
     </footer>
   </div>
   <script src="../ts/options.ts"></script>
diff --git a/source/scss/_options.scss b/source/scss/_options.scss
index 72292e0..66af032 100644
--- a/source/scss/_options.scss
+++ b/source/scss/_options.scss
@@ -237,6 +237,10 @@ p > .red-re {
   display: flex;
   justify-content: center;
   padding: 2rem 0;
+
+  p {
+    margin: 0;
+  }
 }
 
 #copy-bug-template-button,
diff --git a/source/ts/options.ts b/source/ts/options.ts
index 0909ab4..f88341d 100644
--- a/source/ts/options.ts
+++ b/source/ts/options.ts
@@ -14,7 +14,8 @@ import {
   querySelector,
   setSettings,
   createElementFromString,
-  flashMessage
+  flashMessage,
+  querySelectorAll
 } from './utilities';
 
 window.addEventListener(
@@ -30,14 +31,32 @@ window.addEventListener(
     );
     versionSpan.textContent = `v${version}`;
 
-    // Grab the "Report A Bug" anchor and add a prefilled GitLab issue URL to it.
-    const reportAnchor: HTMLAnchorElement = querySelector('#report-a-bug');
-    reportAnchor.setAttribute(
-      'href',
-      encodeURI(
-        `https://gitlab.com/tildes-community/tildes-reextended/issues/new?issue[description]=${createReportTemplate()}`
-      )
+    const gitlabReportTemplate: string = createReportTemplate('gitlab');
+    const tildesReportTemplate: string = createReportTemplate('tildes');
+    // Grab the "Report A Bug" anchors and add a prefilled template for them.
+    const gitlabReportAnchors: HTMLAnchorElement[] = querySelectorAll(
+      '.report-a-bug-gitlab'
     );
+    for (const element of gitlabReportAnchors) {
+      element.setAttribute(
+        'href',
+        encodeURI(
+          `https://gitlab.com/tildes-community/tildes-reextended/issues/new?issue[description]=${gitlabReportTemplate}`
+        )
+      );
+    }
+
+    const tildesReportAnchors: HTMLAnchorElement[] = querySelectorAll(
+      '.report-a-bug-tildes'
+    );
+    for (const element of tildesReportAnchors) {
+      element.setAttribute(
+        'href',
+        encodeURI(
+          `https://tildes.net/user/Bauke/new_message?subject=Tildes ReExtended Bug&message=${tildesReportTemplate}`
+        )
+      );
+    }
 
     ['comments', 'topics', 'own-comments', 'own-topics'].forEach(
       (val: string): void => {
@@ -217,7 +236,7 @@ async function listItemClickHandler(event: MouseEvent): Promise<void> {
 function copyBugTemplateHandler(event: MouseEvent): void {
   event.preventDefault();
   const temporaryElement: HTMLTextAreaElement = createElementFromString(
-    `<textarea>${createReportTemplate()}</textarea>`
+    `<textarea>${createReportTemplate('tildes')}</textarea>`
   );
   temporaryElement.classList.add('trx-offscreen');
   document.body.append(temporaryElement);
@@ -262,14 +281,21 @@ async function removeAllDataHandler(event: MouseEvent): Promise<void> {
   }, 2500);
 }
 
-function createReportTemplate(): string {
+function createReportTemplate(location: 'gitlab' | 'tildes'): string {
+  let introText =
+    "Thank you for taking the time to report a bug! Don't forget to fill in an\n  appropriate title above, and make sure the information below is correct.";
+
+  if (location === 'tildes') {
+    introText =
+      'Thank you for taking the time to report a bug! Please make sure the\n  information below is correct.';
+  }
+
   // Set the headers using HTML tags, these can't be with #-style Markdown
   // headers as they'll be interpreted as an ID instead of Markdown content
   // and so GitLab won't add it to the description.
   let reportTemplate = `<h2>Bug Report</h2>
 <!--
-  Thank you for taking the time to report a bug! Don't forget to fill in an
-  appropriate title above, and make sure the information below is correct.
+  ${introText}
 -->
 <h3>Info</h3>\n
 | Type | Value |
diff --git a/source/ts/utilities.ts b/source/ts/utilities.ts
index dc50859..6de74ef 100644
--- a/source/ts/utilities.ts
+++ b/source/ts/utilities.ts
@@ -147,6 +147,15 @@ export function querySelector<T extends Element>(selector: string): T {
   return document.querySelector<T>(selector)!;
 }
 
+export function querySelectorAll<T extends Element>(selector: string): T[] {
+  const elements: T[] = [];
+  for (const element of document.querySelectorAll<T>(selector)) {
+    elements.push(element);
+  }
+
+  return elements;
+}
+
 export function createElementFromString<T extends Element>(input: string): T {
   const template: HTMLTemplateElement = document.createElement('template');
   template.innerHTML = input.trim();