Link to file an issue about the page you're viewing (#1361)

* Link to file an issue about the page you're viewing

Fixes #1342

* correct whitespace

* feedback about wording

* correction of new-issue title

* trim doc title if have to

* default labels as per Chris's request

* refactor OnGitHubLink code location

* content label for DevTools

* feedbacked

* schalk's feedback

* chris's feedback

* feedbacked

client/src/document/index.tsx

@@ -19,6 +19,7 @@ import { BrowserCompatibilityTable } from "./ingredients/browser-compatibility-t
 // Sub-components
 import LanguageMenu from "../header/language-menu";
 import { TOC } from "./toc";
+import { OnGitHubLink } from "./on-github";
 
 import "./index.scss";
 
@@ -93,8 +94,6 @@ export function Document(props /* TODO: define a TS interface for this */) {
 
   const translations = doc.other_translations || [];
 
-  const { github_url, folder } = doc.source;
-
   const isServer = typeof window === "undefined";
 
   return (
@@ -150,19 +149,8 @@ export function Document(props /* TODO: define a TS interface for this */) {
                     by MDN contributors
                   </a>
                 </li>
-                {!doc.isArchive && (
-                  <li className="edit-on-github">
-                    <a
-                      href={github_url}
-                      title={`Folder: ${folder}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Edit on <b>GitHub</b>
-                    </a>
-                  </li>
-                )}
               </ul>
+              {!doc.isArchive && <OnGitHubLink doc={doc} />}
             </section>
           </div>
         </div>
@@ -396,15 +384,6 @@ function RenderDocumentBody({ doc }) {
   });
 }
 
-// function Contributors({ contributors }) {
-//   return (
-//     <div>
-//       <b>Contributors to this page:</b>
-//       <span dangerouslySetInnerHTML={{ __html: contributors }} />
-//     </div>
-//   );
-// }
-
 function LoadingError({ error }) {
   return (
     <div className="loading-error">

client/src/document/on-github.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+
+import { Doc } from "./types";
+
+export function OnGitHubLink({ doc }: { doc: Doc }) {
+  return (
+    <div id="on-github" className="on-github">
+      <h4>Found a problem with this page?</h4>
+      <ul>
+        <li>
+          <SourceOnGitHubLink doc={doc} />
+        </li>
+        <li>
+          <NewIssueOnGitHubLink doc={doc} />
+        </li>
+        <li>
+          Want to fix the problem yourself? See{" "}
+          <a
+            href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            our Contribution guide
+          </a>
+          .
+        </li>
+      </ul>
+    </div>
+  );
+}
+function SourceOnGitHubLink({ doc }: { doc: Doc }) {
+  const { github_url, folder } = doc.source;
+  return (
+    <a
+      href={github_url}
+      title={`Folder: ${folder} (Opens in a new tab)`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Source on <b>GitHub</b>
+    </a>
+  );
+}
+
+const NEW_ISSUE_TEMPLATE = `
+  MDN URL: https://developer.mozilla.org$PATHNAME
+
+  #### What information was incorrect, unhelpful, or incomplete?
+
+
+  #### Specific section or headline?
+
+
+  #### What did you expect to see?
+
+
+  #### Did you test this? If so, how?
+
+
+  <!-- Do not make changes below this line -->
+  <details>
+  <summary>MDN Content page report details</summary>
+
+  * Folder: \`$FOLDER\`
+  * MDN URL: https://developer.mozilla.org$PATHNAME
+  * GitHub URL: $GITHUB_URL
+  * Report started: $DATE
+
+  </details>
+  `;
+
+// These are the hardcoded prefixes that get their own new-issue label in
+// in GitHub. The prefix is matched all in lower-case but the label itself
+// can have case.
+// The labels do not not needs to exist in advance on the GitHub repo.
+// If not matched to any of these labels, it will default to "Other" as the label.
+const CONTENT_LABELS_PREFIXES = [
+  ["web/javascript", "JavaScript"],
+  ["web/css", "CSS"],
+  ["web/html", "HTML"],
+  ["web/api", "WebAPI"],
+  ["web/http", "HTTP"],
+  ["mozilla/add-ons/webextensions", "WebExt"],
+  ["web/accessibility", "A11y"],
+  ["learn", "Learn"],
+  ["tools", "DevTools"],
+];
+
+function NewIssueOnGitHubLink({ doc }: { doc: Doc }) {
+  const baseURL = "https://github.com/mdn/content/issues/new";
+  const sp = new URLSearchParams();
+
+  const { github_url, folder } = doc.source;
+  const body = NEW_ISSUE_TEMPLATE.replace(/\$PATHNAME/g, doc.mdn_url)
+    .replace(/\$FOLDER/g, folder)
+    .replace(/\$GITHUB_URL/g, github_url)
+    .replace(/\$DATE/g, new Date().toISOString())
+    .trim();
+  sp.set("body", body);
+  const maxLength = 50;
+  const titleShort =
+    doc.title.length > maxLength
+      ? `${doc.title.slice(0, maxLength)}…`
+      : doc.title;
+  sp.set("title", `Issue with "${titleShort}": …`);
+  sp.append("labels", "needs triage");
+
+  const slug = doc.mdn_url.split("/docs/")[1].toLowerCase();
+  let contentLabel = "";
+  for (const [prefix, label] of CONTENT_LABELS_PREFIXES) {
+    if (slug.startsWith(prefix)) {
+      contentLabel = label;
+      break;
+    }
+  }
+  if (!contentLabel) {
+    contentLabel = "Other";
+  }
+  sp.append("labels", `Content: ${contentLabel}`);
+
+  const href = `${baseURL}?${sp.toString()}`;
+
+  return (
+    <a
+      href={href}
+      title="This will take you to https://github.com/mdn/content to file a new issue"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Report a problem with this content on <b>GitHub</b>
+    </a>
+  );
+}