added report link to footer

Kira-Pilot · Kira-Pilot · commit 3e0735ecc1a9 · 2022-06-16T22:53:25.000Z
resolves #1885
diff --git a/.github/ISSUE_TEMPLATE/external_bug_report.md b/.github/ISSUE_TEMPLATE/external_bug_report.md
@@ -0,0 +1,9 @@
+<!--- Provide a general summary of the issue in the Title above -->
+
+## Expected Behavior
+
+<!--- Tell us what should happen -->
+
+## Current Behavior
+
+<!--- Tell us what happens instead of the expected behavior -->
diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -1,3 +1,4 @@
+import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
@@ -10,12 +11,27 @@ interface AuthAndFrameProps {
 /**
  * Wraps page in RequireAuth and renders it between Navbar and Footer
  */
-export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => (
-  <RequireAuth>
-    <>
-      <Navbar />
-      {children}
-      <Footer />
-    </>
-  </RequireAuth>
-)
+export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
+  const styles = useStyles()
+
+  return (
+    <RequireAuth>
+      <div className={styles.site}>
+        <Navbar />
+        <div className={styles.siteContent}>{children}</div>
+        <Footer />
+      </div>
+    </RequireAuth>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  site: {
+    display: "flex",
+    minHeight: "100vh",
+    flexDirection: "column",
+  },
+  siteContent: {
+    flex: 1,
+  },
+}))
diff --git a/site/src/components/Footer/Footer.stories.tsx b/site/src/components/Footer/Footer.stories.tsx
@@ -0,0 +1,12 @@
+import { Story } from "@storybook/react"
+import { Footer } from "./Footer"
+
+export default {
+  title: "components/Footer",
+  component: Footer,
+}
+
+const Template: Story = () => <Footer />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
@@ -1,6 +1,5 @@
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import Typography from "@material-ui/core/Typography"
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import * as TypesGen from "../../api/typesGenerated"
@@ -10,21 +9,23 @@ export const Language = {
   buildInfoText: (buildInfo: TypesGen.BuildInfoResponse): string => {
     return `Coder ${buildInfo.version}`
   },
+  copyrightText: `Copyright \u00a9 ${new Date().getFullYear()} Coder Technologies, Inc. All rights reserved.`,
+  reportBugLink: "Report an issue ->",
 }
 
 export const Footer: React.FC = ({ children }) => {
   const styles = useFooterStyles()
   const xServices = useContext(XServiceContext)
   const [buildInfoState] = useActor(xServices.buildInfoXService)
+  const githubUrl = `https://github.com/coder/coder/issues/new?labels=bug,needs+grooming&title=Bug+in+${buildInfoState.context.buildInfo?.version}:&template=external_bug_report.md`
 
   return (
     <div className={styles.root}>
       {children}
-      <div className={styles.copyRight}>
-        <Typography color="textSecondary" variant="caption">
-          {`Copyright \u00a9 ${new Date().getFullYear()} Coder Technologies, Inc. All rights reserved.`}
-        </Typography>
-      </div>
+      <Link className={styles.link} variant="caption" target="_blank" href={githubUrl}>
+        &#129714;&nbsp;{Language.reportBugLink}
+      </Link>
+      <div className={styles.copyRight}>{Language.copyrightText}</div>
       {buildInfoState.context.buildInfo && (
         <div className={styles.buildInfo}>
           <Link
