ports goon station bug report system

code/datums/bug_report.dm

@@ -0,0 +1,84 @@
+// Datum for handling bug reports, giving Harry the motivation to set up the config to get this functional.
+
+/datum/tgui_bug_report_form
+	// contains all the body text for the bug report.
+	var/list/bug_report_data = null
+
+	// user making the bug report
+	var/mob/user = null
+
+/datum/tgui_bug_report_form/New(mob/user)
+	// we should also test if the api is functional here, once the maintainers get the api is token.
+	if(!user.client) // nope.
+		external_link_prompt()
+		qdel(src)
+	src.user = user
+
+/datum/tgui_bug_report_form/proc/external_link_prompt()
+	tgui_alert(user, "Unable to create a bug report at this time, please create the issue directly through our github repository instead")
+
+	if(tgui_alert(user, "This will open the GitHub in your browser. Are you sure?", "Confirm", list("Yes", "No")) == "Yes")
+		user << link(CONFIG_GET(string/githuburl))
+
+/datum/tgui_bug_report_form/ui_state()
+	return GLOB.always_state
+
+/datum/tgui_bug_report_form/tgui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "BugReportForm")
+		ui.open()
+
+/datum/tgui_bug_report_form/ui_close(mob/user)
+	. = ..()
+	qdel(src)
+
+/datum/tgui_bug_report_form/proc/submit_form()
+	return TRUE
+	/*var/desc = {"
+
+		### Testmerges
+		blah blah
+
+		### Round ID
+		[GLOB.round_id]
+
+		### Description of the bug
+		[bug_report_data["description"]]
+
+		### What's the difference with what should have happened?
+		[bug_report_data["expected_behavior"]]
+
+		### How do we reproduce this bug?
+		[bug_report_data["steps"]]
+
+	"}
+
+	// rustg export, copy pasta from goon
+	var/api_response = some_proc("issue", list(
+		"title" = data["title"],
+		"body" = desc,
+	))
+	//
+	if(api_message != some_success_response)
+		tgui_alert(user, "There has been an issue with reporting your bug, please try again later!", "Issue not reported!")
+		return FALSE
+	return TRUE
+	*/
+/datum/tgui_bug_report_form/ui_act(action, list/params, datum/tgui/ui, list/params)
+	. = ..()
+	if (.)
+		return
+	var/mob/user = ui.user
+	switch(action)
+		if("confirm")
+			bug_report_data = params
+			ui_close(src)
+			if(!submit_form())
+				message_admins("[user.key] has attempted to submit a bug report at [worldtime2text()].")
+				external_link_prompt()
+			to_chat(user, SPAN_WARNING("Bug report has successfully been submitted, thank you!"))
+			message_admins("[user.key] has submitted a bug report at [worldtime2text()].")
+		if("cancel")
+			ui_close(src)
+	. = TRUE

colonialmarines.dme

@@ -332,6 +332,7 @@
 #include "code\datums\ASRS.dm"
 #include "code\datums\beam.dm"
 #include "code\datums\browser.dm"
+#include "code\datums\bug_report.dm"
 #include "code\datums\callback.dm"
 #include "code\datums\changelog.dm"
 #include "code\datums\combat_personalized.dm"

interface/interface.dm

@@ -62,14 +62,8 @@
 	set name = "Submit Bug"
 	set desc = "Submit a bug."
 	set hidden = TRUE
-
-	if(tgui_alert(src, "Please search for the bug first to make sure you aren't posting a duplicate.", "No dupe bugs please", list("OK", "Cancel")) != "OK")
-		return
-
-	if(tgui_alert(src, "This will open the GitHub in your browser. Are you sure?", "Confirm", list("Yes", "No")) != "Yes")
-		return
-
-	src << link(CONFIG_GET(string/githuburl))
+	var/datum/tgui_bug_report_form/report = new(usr)
+	report.tgui_interact(usr)
 	return
 
 /client/verb/set_fps()

tgui/packages/tgui/interfaces/BugReportForm.tsx

@@ -0,0 +1,140 @@
+import React, { createRef, useState } from 'react';
+
+import { useBackend } from '../backend';
+import { Flex, Section } from '../components';
+import { ButtonCheckbox } from '../components/Button';
+import { Window } from '../layouts';
+
+type ReportForm = {
+  steps: string;
+  title: string;
+  description: string;
+  expected_behavior: string;
+};
+
+const InputTitle = (props) => {
+  return (
+    <h2>
+      {props.children}
+      {props.required && <span className="input-title-required">{' *'}</span>}
+    </h2>
+  );
+};
+
+export const BugReportForm = (props) => {
+  const { act } = useBackend<ReportForm>();
+  const [checkBox, setCheckbox] = useState(false);
+
+  const titleRef = createRef<HTMLInputElement>();
+  const stepsRef = createRef<HTMLTextAreaElement>();
+  const descriptionRef = createRef<HTMLInputElement>();
+  const expectedBehaviorRef = createRef<HTMLInputElement>();
+
+  const submit = () => {
+    const data: ReportForm = {
+      steps: stepsRef.current ? stepsRef.current.value : '',
+      title: titleRef.current ? titleRef.current.value : '',
+      description: descriptionRef.current ? descriptionRef.current.value : '',
+      expected_behavior: expectedBehaviorRef.current
+        ? expectedBehaviorRef.current.value
+        : '',
+    };
+
+    if (
+      !data.title ||
+      !data.description ||
+      !data.expected_behavior ||
+      !data.steps ||
+      !checkBox
+    ) {
+      alert('Please fill out all required fields!');
+      return;
+    }
+    act('confirm', data);
+  };
+
+  return (
+    <Window title={'Bug Report Form'} width={600} height={700}>
+      <Window.Content>
+        <Section fill scrollable>
+          <Flex direction="column" height="100%">
+            <Flex.Item className="text-center">
+              <a
+                href="https://github.com/cmss13-devs/cmss13/issues"
+                target="_blank"
+                rel="noreferrer"
+                className="link"
+              >
+                Github Repository
+              </a>
+            </Flex.Item>
+            <Flex.Item>
+              <InputTitle required>{'Title'}</InputTitle>
+              <input width="100%" ref={titleRef} className="textarea" />
+            </Flex.Item>
+            <Flex.Item my={2}>
+              <InputTitle required>{'Description'}</InputTitle>
+              {'Give a short description of the bug'}
+              <input width="100%" ref={descriptionRef} className="textarea" />
+            </Flex.Item>
+            <Flex.Item my={2}>
+              <InputTitle required>
+                {"What's the difference with what should have happened?"}
+              </InputTitle>
+              {'Give a short description of what you expected to happen'}
+              <input
+                width="100%"
+                ref={expectedBehaviorRef}
+                className="textarea"
+              />
+            </Flex.Item>
+            <Flex.Item my={2}>
+              <InputTitle required>
+                {'How do we reproduce this bug?'}
+              </InputTitle>
+              {'Give a list of steps to reproduce this issue'}
+              <textarea
+                rows={4}
+                className="textarea"
+                onInput={(e) => {
+                  const target = e.target as HTMLTextAreaElement;
+                  target.style.height = 'auto';
+                  target.style.height = `${target.scrollHeight}px`;
+                }}
+                ref={stepsRef}
+                placeholder="1.\n2.\n3."
+              />
+            </Flex.Item>
+            <Flex.Item my={2} className={'text-center'}>
+              <ButtonCheckbox
+                checked={checkBox}
+                onClick={() => {
+                  setCheckbox(!checkBox);
+                }}
+              >
+                {"I couldn't find an existing issue about this on Github"}
+                {!checkBox && (
+                  <span className="input-title-required">{' *'}</span>
+                )}
+              </ButtonCheckbox>
+            </Flex.Item>
+            <Flex.Item my={2}>
+              <Flex className="flex-center">
+                <Flex.Item mx={1}>
+                  <div className="button-default" onClick={submit}>
+                    {'Submit'}
+                  </div>
+                </Flex.Item>
+                <Flex.Item mx={1}>
+                  <div className="button-default" onClick={() => act('cancel')}>
+                    {'Cancel'}
+                  </div>
+                </Flex.Item>
+              </Flex>
+            </Flex.Item>
+          </Flex>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};

tgui/packages/tgui/styles/interfaces/BugReportForm.scss

@@ -0,0 +1,41 @@
+@use '../base.scss';
+
+.textarea {
+  overflow-y: hidden;
+  width: 100%;
+  background-color: black;
+  border: solid 1px #6992c2;
+  color: white;
+  font-size: 20px;
+  font-family: 'Times New Roman', Times, serif;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.link {
+  color: #6992c2;
+}
+
+.input-title-required {
+  color: red;
+}
+
+.button-default {
+  display: inline-block;
+  padding: 10px 20px;
+  border: 1px solid #6992c2;
+  background-color: #2a2a2a;
+  color: white;
+  cursor: pointer;
+  text-align: center;
+}
+
+.button-default:hover {
+  background-color: #3a3a3a;
+}
+
+.flex-center {
+  justify-content: center;
+}

tgui/packages/tgui/styles/main.scss

@@ -56,6 +56,7 @@
 @include meta.load-css('./interfaces/CrtPanel.scss');
 @include meta.load-css('./interfaces/ChooseResin.scss');
 @include meta.load-css('./interfaces/CameraConsole.scss');
+@include meta.load-css('./interfaces/BugReportForm.scss');
 @include meta.load-css('./interfaces/DropshipWeapons.scss');
 @include meta.load-css('./interfaces/ElevatorControl.scss');
 @include meta.load-css('./interfaces/ExperimentConfigure.scss');