From a36cd0bd7b1e81c635929b72f2992ecd7efaab00 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Wed, 4 Jan 2023 12:36:25 -0600
Subject: [PATCH] refactor: move footer items into the user dropdown (#5562)

* refactor: move footer items into the user dropdown

The items at the bottom looked unprofessional. Users don't
always need to be prompted to join our Discord or see the
active version of Coder.

This moves the items in the user dropdown which looks better.

* Update site/src/components/UserDropdownContent/UserDropdownContent.tsx

Co-authored-by: Asher <ash@coder.com>

* Fix import order

Co-authored-by: Asher <ash@coder.com>
---
 .../components/AuthAndFrame/AuthAndFrame.tsx  |  3 -
 .../DeploySettingsLayout/Badges.tsx           | 22 +++++
 site/src/components/Footer/Footer.stories.tsx | 17 ----
 site/src/components/Footer/Footer.test.tsx    | 22 -----
 site/src/components/Footer/Footer.tsx         | 98 -------------------
 site/src/components/Navbar/Navbar.tsx         |  2 +
 site/src/components/NavbarView/NavbarView.tsx | 10 +-
 .../components/SignInLayout/SignInLayout.tsx  |  3 +-
 .../components/UserDropdown/UsersDropdown.tsx |  4 +-
 .../UserDropdownContent.test.tsx              |  7 +-
 .../UserDropdownContent.tsx                   | 82 ++++++++++++++--
 .../GeneralSettingsPage.tsx                   |  2 -
 12 files changed, 119 insertions(+), 153 deletions(-)
 delete mode 100644 site/src/components/Footer/Footer.stories.tsx
 delete mode 100644 site/src/components/Footer/Footer.test.tsx
 delete mode 100644 site/src/components/Footer/Footer.tsx

diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
index e0256915aa..c3a5a5ecc7 100644
--- 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
index 88a9bf1e72..14f3844ddf 100644
--- 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
deleted file mode 100644
index 97b3b80cb5..0000000000
--- a/site/src/components/Footer/Footer.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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.test.tsx b/site/src/components/Footer/Footer.test.tsx
deleted file mode 100644
index 87629a0556..0000000000
--- a/site/src/components/Footer/Footer.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { screen } from "@testing-library/react"
-import { MockBuildInfo, render } from "../../testHelpers/renderHelpers"
-import { Footer, Language } from "./Footer"
-
-describe("Footer", () => {
-  it("renders content", async () => {
-    // When
-    render(<Footer buildInfo={MockBuildInfo} />)
-
-    // Then
-    await screen.findByText("Copyright", { exact: false })
-    await screen.findByText(Language.buildInfoText(MockBuildInfo))
-    const reportBugLink = screen
-      .getByText(Language.reportBugLink, { exact: false })
-      .closest("a")
-    if (!reportBugLink) {
-      throw new Error("Bug report link not found in footer")
-    }
-
-    expect(reportBugLink.getAttribute("href")?.length).toBeGreaterThan(0)
-  })
-})
diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
deleted file mode 100644
index 13190bb98a..0000000000
--- a/site/src/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import Link from "@material-ui/core/Link"
-import { makeStyles } from "@material-ui/core/styles"
-import AccountTreeIcon from "@material-ui/icons/AccountTree"
-import AssistantIcon from "@material-ui/icons/Assistant"
-import ChatIcon from "@material-ui/icons/Chat"
-import { colors } from "theme/colors"
-import * as TypesGen from "../../api/typesGenerated"
-
-export const Language = {
-  buildInfoText: (buildInfo: TypesGen.BuildInfoResponse): string => {
-    return `Coder ${buildInfo.version}`
-  },
-  copyrightText: `Copyright \u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`,
-  reportBugLink: "Report an issue or share feedback",
-  discordLink: "Join Coder on Discord",
-}
-
-export interface FooterProps {
-  buildInfo?: TypesGen.BuildInfoResponse
-}
-
-export const Footer: React.FC<React.PropsWithChildren<FooterProps>> = ({
-  buildInfo,
-}) => {
-  const styles = useFooterStyles()
-
-  const githubUrl = `https://github.com/coder/coder/issues/new?labels=needs+grooming&body=${encodeURIComponent(`Version: [\`${buildInfo?.version}\`](${buildInfo?.external_url})
-
-<!--- Ask a question or leave feedback! -->`)}`
-  const discordUrl = `https://coder.com/chat?utm_source=coder&utm_medium=coder&utm_campaign=server-footer`
-
-  return (
-    <div className={styles.root}>
-      <div className={styles.copyRight}>{Language.copyrightText}</div>
-      {buildInfo && (
-        <div className={styles.buildInfo}>
-          <Link
-            className={styles.link}
-            variant="caption"
-            target="_blank"
-            href={buildInfo.external_url}
-          >
-            <AccountTreeIcon className={styles.icon} />{" "}
-            {Language.buildInfoText(buildInfo)}
-          </Link>
-          &nbsp;|&nbsp;
-          <Link
-            className={styles.link}
-            variant="caption"
-            target="_blank"
-            href={githubUrl}
-          >
-            <AssistantIcon className={styles.icon} /> {Language.reportBugLink}
-          </Link>
-          &nbsp;|&nbsp;
-          <Link
-            className={styles.link}
-            variant="caption"
-            target="_blank"
-            href={discordUrl}
-          >
-            <ChatIcon className={styles.icon} /> {Language.discordLink}
-          </Link>
-        </div>
-      )}
-    </div>
-  )
-}
-
-const useFooterStyles = makeStyles((theme) => ({
-  root: {
-    color: colors.gray[7],
-    textAlign: "center",
-    flex: "0",
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
-    marginTop: theme.spacing(8),
-  },
-  copyRight: {
-    margin: theme.spacing(0.25),
-  },
-  buildInfo: {
-    margin: theme.spacing(0.25),
-    display: "inline-flex",
-  },
-  link: {
-    color: theme.palette.text.secondary,
-    fontWeight: 600,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  icon: {
-    fontSize: 12,
-    color: theme.palette.secondary.dark,
-    marginRight: theme.spacing(0.5),
-  },
-}))
diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx
index ba88831219..31c48d0728 100644
--- 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
index c7d2260344..78ffe50e9c 100644
--- 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
index 2d200bce30..8122e798bf 100644
--- 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
index 8fb4effbbe..f6a9510b96 100644
--- 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
index c07d85c418..0e9442e20a 100644
--- 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,6 +20,7 @@ describe("UserDropdownContent", () => {
     render(
       <UserDropdownContent
         user={MockUser}
+        buildInfo={MockBuildInfo}
         onSignOut={jest.fn()}
         onPopoverClose={jest.fn()}
       />,
@@ -27,6 +28,10 @@ describe("UserDropdownContent", () => {
     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", () => {
diff --git a/site/src/components/UserDropdownContent/UserDropdownContent.tsx b/site/src/components/UserDropdownContent/UserDropdownContent.tsx
index 9e270362c3..c9fea956ec 100644
--- a/site/src/components/UserDropdownContent/UserDropdownContent.tsx
+++ b/site/src/components/UserDropdownContent/UserDropdownContent.tsx
@@ -3,8 +3,12 @@ import ListItemIcon from "@material-ui/core/ListItemIcon"
 import ListItemText from "@material-ui/core/ListItemText"
 import MenuItem from "@material-ui/core/MenuItem"
 import { makeStyles } from "@material-ui/core/styles"
+import Tooltip from "@material-ui/core/Tooltip"
 import Typography from "@material-ui/core/Typography"
 import AccountIcon from "@material-ui/icons/AccountCircleOutlined"
+import BugIcon from "@material-ui/icons/BugReportOutlined"
+import ChatIcon from "@material-ui/icons/Chat"
+import LaunchIcon from "@material-ui/icons/Launch"
 import { FC } from "react"
 import { Link } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
@@ -17,20 +21,29 @@ export const Language = {
   accountLabel: "Account",
   docsLabel: "Documentation",
   signOutLabel: "Sign Out",
+  bugLabel: "Report a Bug",
+  discordLabel: "Join the Coder Discord",
+  copyrightText: `\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`,
 }
 
 export interface UserDropdownContentProps {
   user: TypesGen.User
+  buildInfo?: TypesGen.BuildInfoResponse
   onPopoverClose: () => void
   onSignOut: () => void
 }
 
 export const UserDropdownContent: FC<UserDropdownContentProps> = ({
+  buildInfo,
   user,
   onPopoverClose,
   onSignOut,
 }) => {
   const styles = useStyles()
+  const githubUrl = `https://github.com/coder/coder/issues/new?labels=needs+grooming&body=${encodeURIComponent(`Version: [\`${buildInfo?.version}\`](${buildInfo?.external_url})
+
+  <!--- Ask a question or leave feedback! -->`)}`
+  const discordUrl = `https://coder.com/chat?utm_source=coder&utm_medium=coder&utm_campaign=server-footer`
 
   return (
     <div className={styles.userInfo}>
@@ -57,6 +70,13 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
         </MenuItem>
       </Link>
 
+      <MenuItem className={styles.menuItem} onClick={onSignOut}>
+        <ListItemIcon className={styles.icon}>
+          <LogoutIcon />
+        </ListItemIcon>
+        <ListItemText primary={Language.signOutLabel} />
+      </MenuItem>
+
       <Divider />
 
       <a
@@ -73,12 +93,48 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
         </MenuItem>
       </a>
 
-      <MenuItem className={styles.menuItem} onClick={onSignOut}>
-        <ListItemIcon className={styles.icon}>
-          <LogoutIcon />
-        </ListItemIcon>
-        <ListItemText primary={Language.signOutLabel} />
-      </MenuItem>
+      <a
+        href={githubUrl}
+        target="_blank"
+        rel="noreferrer"
+        className={styles.link}
+      >
+        <MenuItem className={styles.menuItem} onClick={onPopoverClose}>
+          <ListItemIcon className={styles.icon}>
+            <BugIcon />
+          </ListItemIcon>
+          <ListItemText primary={Language.bugLabel} />
+        </MenuItem>
+      </a>
+
+      <a
+        href={discordUrl}
+        target="_blank"
+        rel="noreferrer"
+        className={styles.link}
+      >
+        <MenuItem className={styles.menuItem} onClick={onPopoverClose}>
+          <ListItemIcon className={styles.icon}>
+            <ChatIcon />
+          </ListItemIcon>
+          <ListItemText primary={Language.discordLabel} />
+        </MenuItem>
+      </a>
+
+      <Divider />
+
+      <Tooltip title="Browse Source Code">
+        <a
+          className={styles.footerText}
+          href={buildInfo?.external_url}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {buildInfo?.version} <LaunchIcon />
+        </a>
+      </Tooltip>
+
+      <div className={styles.footerText}>{Language.copyrightText}</div>
     </div>
   )
 }
@@ -133,4 +189,18 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     color: theme.palette.text.secondary,
   },
+  footerText: {
+    textDecoration: "none",
+    color: theme.palette.text.secondary,
+    marginTop: theme.spacing(1.5),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+
+    "& svg": {
+      width: 14,
+      height: 14,
+      marginLeft: theme.spacing(0.5),
+    },
+  },
 }))
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx
index fcb2ed169f..26a39f4dbb 100644
--- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx
@@ -13,13 +13,11 @@ const GeneralSettingsPage: React.FC = () => {
       <Helmet>
         <title>{pageTitle("General Settings")}</title>
       </Helmet>
-
       <Header
         title="General"
         description="Information about your Coder deployment."
         docsHref="https://coder.com/docs/coder-oss/latest/admin/configure"
       />
-
       <OptionsTable
         options={{
           access_url: deploymentConfig.access_url,