coder · kylecarbs · Jan 4, 2023 · Jan 3, 2023 · Jan 4, 2023 · Jan 4, 2023
diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -3,7 +3,6 @@ import { useActor } from "@xstate/react"
 import { Loader } from "components/Loader/Loader"
 import { FC, Suspense, useContext, useEffect } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
-import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
 import { RequireAuth } from "../RequireAuth/RequireAuth"
 import { UpdateCheckBanner } from "components/UpdateCheckBanner/UpdateCheckBanner"
@@ -20,7 +19,6 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
   const styles = useStyles()
   const xServices = useContext(XServiceContext)
   const [authState] = useActor(xServices.authXService)
-  const [buildInfoState] = useActor(xServices.buildInfoXService)
   const [updateCheckState, updateCheckSend] = useActor(
     xServices.updateCheckXService,
   )
@@ -51,7 +49,6 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
         <div className={styles.siteContent}>
           <Suspense fallback={<Loader />}>{children}</Suspense>
         </div>
-        <Footer buildInfo={buildInfoState.context.buildInfo} />
       </div>
     </RequireAuth>
   )

diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { Stack } from "components/Stack/Stack"
 import React, { PropsWithChildren } from "react"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { combineClasses } from "util/combineClasses"
 
 export const EnabledBadge: React.FC = () => {
@@ -39,6 +40,17 @@ export const EnterpriseBadge: React.FC = () => {
   )
 }
 
+export const VersionBadge: React.FC<{
+  version: string
+}> = ({ version }) => {
+  const styles = useStyles()
+  return (
+    <span className={combineClasses([styles.badge, styles.versionBadge])}>
+      Version: {version}
+    </span>
+  )
+}
+
 export const Badges: React.FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
   return (
@@ -76,6 +88,16 @@ const useStyles = makeStyles((theme) => ({
     border: `1px solid ${theme.palette.info.light}`,
   },
 
+  versionBadge: {
+    border: `1px solid ${theme.palette.success.light}`,
+    backgroundColor: theme.palette.success.dark,
+    textTransform: "none",
+    color: "white",
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    textDecoration: "none",
+    fontSize: 12,
+  },
+
   enabledBadge: {
     border: `1px solid ${theme.palette.success.light}`,
     backgroundColor: theme.palette.success.dark,

diff --git a/site/src/components/Footer/Footer.stories.tsx b/site/src/components/Footer/Footer.stories.tsx
diff --git a/site/src/components/Footer/Footer.test.tsx b/site/src/components/Footer/Footer.test.tsx
diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx
@@ -8,6 +8,7 @@ import { NavbarView } from "../NavbarView/NavbarView"
 export const Navbar: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
+  const [buildInfoState] = useActor(xServices.buildInfoXService)
   const { me, permissions } = authState.context
   const featureVisibility = useSelector(
     xServices.entitlementsXService,
@@ -23,6 +24,7 @@ export const Navbar: React.FC = () => {
   return (
     <NavbarView
       user={me}
+      buildInfo={buildInfoState.context.buildInfo}
       onSignOut={onSignOut}
       canViewAuditLog={canViewAuditLog}
       canViewDeployment={canViewDeployment}

diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -15,6 +15,7 @@ import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export interface NavbarViewProps {
   user?: TypesGen.User
+  buildInfo?: TypesGen.BuildInfoResponse
   onSignOut: () => void
   canViewAuditLog: boolean
   canViewDeployment: boolean
@@ -83,6 +84,7 @@ const NavItems: React.FC<
 }
 export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
   user,
+  buildInfo,
   onSignOut,
   canViewAuditLog,
   canViewDeployment,
@@ -130,7 +132,13 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
         />
 
         <div className={styles.profileButton}>
-          {user && <UserDropdown user={user} onSignOut={onSignOut} />}
+          {user && (
+            <UserDropdown
+              user={user}
+              buildInfo={buildInfo}
+              onSignOut={onSignOut}
+            />
+          )}
         </div>
       </div>
     </nav>

diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
@@ -1,6 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { FC, ReactNode } from "react"
-import { Footer } from "../../components/Footer/Footer"
 
 export const useStyles = makeStyles((theme) => ({
   root: {
@@ -28,7 +27,7 @@ export const SignInLayout: FC<{ children: ReactNode }> = ({ children }) => {
     <div className={styles.root}>
       <div className={styles.layout}>
         <div className={styles.container}>{children}</div>
-        <Footer />
+        {`\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`}
       </div>
     </div>
   )

diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx
@@ -12,12 +12,13 @@ import { UserDropdownContent } from "../UserDropdownContent/UserDropdownContent"
 
 export interface UserDropdownProps {
   user: TypesGen.User
+  buildInfo?: TypesGen.BuildInfoResponse
   onSignOut: () => void
 }
 
 export const UserDropdown: React.FC<
   React.PropsWithChildren<UserDropdownProps>
-> = ({ user, onSignOut }: UserDropdownProps) => {
+> = ({ buildInfo, user, onSignOut }: UserDropdownProps) => {
   const styles = useStyles()
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>()
 
@@ -65,6 +66,7 @@ export const UserDropdown: React.FC<
       >
         <UserDropdownContent
           user={user}
+          buildInfo={buildInfo}
           onPopoverClose={onPopoverClose}
           onSignOut={onSignOut}
         />

diff --git a/site/src/components/UserDropdownContent/UserDropdownContent.test.tsx b/site/src/components/UserDropdownContent/UserDropdownContent.test.tsx
@@ -1,5 +1,5 @@
 import { screen } from "@testing-library/react"
-import { MockUser } from "../../testHelpers/entities"
+import { MockBuildInfo, MockUser } from "../../testHelpers/entities"
 import { render } from "../../testHelpers/renderHelpers"
 import { Language, UserDropdownContent } from "./UserDropdownContent"
 
@@ -20,13 +20,18 @@ describe("UserDropdownContent", () => {
     render(
       <UserDropdownContent
         user={MockUser}
+        buildInfo={MockBuildInfo}
         onSignOut={jest.fn()}
         onPopoverClose={jest.fn()}
       />,
     )
     expect(screen.getByText(Language.accountLabel)).toBeDefined()
     expect(screen.getByText(Language.docsLabel)).toBeDefined()
     expect(screen.getByText(Language.signOutLabel)).toBeDefined()
+    expect(screen.getByText(Language.bugLabel)).toBeDefined()
+    expect(screen.getByText(Language.discordLabel)).toBeDefined()
+    expect(screen.getByText(Language.copyrightText)).toBeDefined()
+    expect(screen.getByText(MockBuildInfo.version)).toBeDefined()
   })
 
   it("has the correct link for the account item", () => {