Merge pull request #29 from Gkrumbach07/issue-tracker

added issue tracker

config/support.yaml

@@ -6,4 +6,6 @@
     - href: /support/faq/overview.mdx
       label: "Overview"
     - href: /support/faq/thoth_yaml.mdx
-      label: "Default .thoth.yaml"
+      label: "Default .thoth.yaml"
+- label: "Track your issue"
+  href: /support/issue_tracker.mdx

content/support/issue_tracker.mdx

@@ -0,0 +1,3 @@
+import IssueTracker from '../../src/components/IssueTracker/IssueTracker';
+
+<IssueTracker/>

package.json

@@ -12,6 +12,7 @@
     "@patternfly/react-core": "^4.206.2",
     "@patternfly/react-icons": "^4.57.2",
     "@patternfly/react-table": "^4.83.1",
+    "@reach/router": "^1.3.4",
     "axios": "^0.27.2",
     "gatsby": "^4.13.0",
     "gatsby-plugin-copy-files-enhanced": "^1.1.1",
@@ -37,12 +38,15 @@
     "gh-pages": "^3.2.3",
     "js-yaml": "^4.1.0",
     "nanoid": "^3.3.3",
+    "octokit": "^1.7.2",
     "prism-react-renderer": "^1.3.3",
     "prismjs": "^1.28.0",
     "prop-types": "^15.8.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "query-string": "^7.1.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
+    "react-markdown": "^8.0.3",
     "remark-gfm": "^3.0.1",
     "sass": "^1.51.0",
     "typeface-merriweather": "0.0.72",

src/components/IssueTracker/IssueEvent.js

@@ -0,0 +1,52 @@
+import { getDate } from "./getIssueStep";
+import { Label } from "@patternfly/react-core";
+import React, { useMemo } from "react";
+
+export const IssueEvent = ({ event, ...props }) => {
+  const statusLabel = useMemo(() => {
+    const status = (() => {
+      if (event?.source?.issue.state === "open") {
+        return ["green", "OPEN"];
+      } else if (event?.source?.issue?.pull_request) {
+        if (event?.source?.issue?.pull_request?.merged_at) {
+          return ["purple", "MERGED"];
+        } else {
+          return ["red", "CLOSED"];
+        }
+      } else {
+        return ["purple", "CLOSED"];
+      }
+    })();
+
+    return (
+      <Label style={{ marginRight: "1rem" }} color={status[0]}>
+        {status[1]}
+      </Label>
+    );
+  }, [event]);
+
+  return (
+    <div {...props} style={{ marginTop: ".5rem", marginBottom: ".5rem" }}>
+      <div style={{ fontSize: "small", color: "gray" }}>
+        <b>@{event?.source?.issue?.user?.login}</b>
+        {" mentioned this issue on "}
+        {getDate(event?.source?.issue?.created_at)}
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <a
+          style={{ color: "black" }}
+          href={event?.source?.issue?.html_url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >{`#${event?.source?.issue.number} ${event?.source?.issue.title}`}</a>
+        {statusLabel}
+      </div>
+    </div>
+  );
+};