Footer story

coder · Kira-Pilot · Jun 17, 2022 · Jun 14, 2022 · Jun 15, 2022 · Jun 15, 2022
commit a181dd5e88e3f1dfb68b846e9169e8151f1088a1
diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -1,5 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { FC } from "react"
+import { useActor } from "@xstate/react"
+import { FC, useContext } from "react"
+import { XServiceContext } from "../../xServices/StateContext"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
 import { RequireAuth } from "../RequireAuth/RequireAuth"
@@ -13,13 +15,16 @@ interface AuthAndFrameProps {
  */
 export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
   const styles = useStyles()
+  const xServices = useContext(XServiceContext)
+
+  const [buildInfoState] = useActor(xServices.buildInfoXService)
 
   return (
     <RequireAuth>
       <div className={styles.site}>
         <Navbar />
         <div className={styles.siteContent}>{children}</div>
-        <Footer />
+        <Footer buildInfo={buildInfoState.context.buildInfo} />
       </div>
     </RequireAuth>
   )

diff --git a/site/src/components/Footer/Footer.stories.tsx b/site/src/components/Footer/Footer.stories.tsx
@@ -0,0 +1,17 @@
+import { Story } from "@storybook/react"
+import { Footer, FooterProps } from "./Footer"
+
+export default {
+  title: "components/Footer",
+  component: Footer,
+}
+
+const Template: Story<FooterProps> = (args) => <Footer {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  buildInfo: {
+    external_url: "",
+    version: "test-1.2.3",
+  },
+}
diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
@@ -1,9 +1,6 @@
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import { useActor } from "@xstate/react"
-import React, { useContext } from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { XServiceContext } from "../../xServices/StateContext"
 
 export const Language = {
   buildInfoText: (buildInfo: TypesGen.BuildInfoResponse): string => {
@@ -13,28 +10,25 @@ export const Language = {
   reportBugLink: "Report an issue",
 }
 
-export const Footer: React.FC = ({ children }) => {
+export interface FooterProps {
+  buildInfo?: TypesGen.BuildInfoResponse
+}
+
+export const Footer: React.FC<FooterProps> = ({ buildInfo }) => {
   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`
+
+  const githubUrl = `https://github.com/coder/coder/issues/new?labels=bug,needs+grooming&title=Bug+in+${buildInfo?.version}:&template=external_bug_report.md`
 
   return (
     <div className={styles.root}>
-      {children}
       <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 && (
+      {buildInfo && (
         <div className={styles.buildInfo}>
-          <Link
-            className={styles.link}
-            variant="caption"
-            target="_blank"
-            href={buildInfoState.context.buildInfo.external_url}
-          >
-            {Language.buildInfoText(buildInfoState.context.buildInfo)}
+          <Link className={styles.link} variant="caption" target="_blank" href={buildInfo.external_url}>
+            {Language.buildInfoText(buildInfo)}
           </Link>
         </div>
       )}