feat: Add page titles (#2070)

kylecarbs · kylecarbs · commit 77ad755c09f0 · 2022-06-10T17:02:41.000Z
diff --git a/site/htmlTemplates/index.html b/site/htmlTemplates/index.html
@@ -21,7 +21,6 @@
   <link rel="mask-icon" href="/static/favicon.svg" color="#000000" crossorigin="use-credentials" />
   <link rel="alternate icon" type="image/png" href="/favicon.png" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  <title>Coder</title>
 </head>
 
 <body>
diff --git a/site/package.json b/site/package.json
@@ -44,6 +44,7 @@
     "history": "5.3.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-helmet": "^6.1.0",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.3.0",
     "sourcemapped-stacktrace": "1.1.11",
@@ -73,6 +74,7 @@
     "@types/node": "14.18.16",
     "@types/react": "17.0.44",
     "@types/react-dom": "17.0.16",
+    "@types/react-helmet": "^6.1.5",
     "@types/superagent": "4.1.15",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "5.23.0",
diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx
@@ -1,6 +1,8 @@
 import Box from "@material-ui/core/Box"
 import { FC } from "react"
+import { Helmet } from "react-helmet"
 import { Outlet } from "react-router-dom"
+import { pageTitle } from "../../util/page"
 import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
 import { Margins } from "../Margins/Margins"
 import { TabPanel } from "../TabPanel/TabPanel"
@@ -22,6 +24,9 @@ export const SettingsLayout: FC = () => {
   return (
     <AuthAndFrame>
       <Box display="flex" flexDirection="column">
+        <Helmet>
+          <title>{pageTitle("Settings")}</title>
+        </Helmet>
         <Margins>
           <TabPanel title={Language.settingsLabel} menuItems={menuItems}>
             <Outlet />
diff --git a/site/src/pages/CliAuthPage/CliAuthPage.tsx b/site/src/pages/CliAuthPage/CliAuthPage.tsx
@@ -1,9 +1,11 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext, useEffect, useState } from "react"
+import { Helmet } from "react-helmet"
 import { getApiKey } from "../../api/api"
 import { CliAuthToken } from "../../components/CliAuthToken/CliAuthToken"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { pageTitle } from "../../util/page"
 import { XServiceContext } from "../../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {
@@ -29,6 +31,9 @@ export const CliAuthenticationPage: React.FC = () => {
 
   return (
     <div className={styles.root}>
+      <Helmet>
+        <title>{pageTitle("CLI Auth")}</title>
+      </Helmet>
       <CliAuthToken sessionToken={apiKey} />
     </div>
   )
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -1,8 +1,10 @@
 import { useMachine } from "@xstate/react"
 import { FC } from "react"
+import { Helmet } from "react-helmet"
 import { useNavigate, useSearchParams } from "react-router-dom"
 import { Template } from "../../api/typesGenerated"
 import { useOrganizationId } from "../../hooks/useOrganizationId"
+import { pageTitle } from "../../util/page"
 import { createWorkspaceMachine } from "../../xServices/createWorkspace/createWorkspaceXService"
 import { CreateWorkspacePageView } from "./CreateWorkspacePageView"
 
@@ -21,29 +23,34 @@ const CreateWorkspacePage: FC = () => {
   })
 
   return (
-    <CreateWorkspacePageView
-      loadingTemplates={createWorkspaceState.matches("gettingTemplates")}
-      loadingTemplateSchema={createWorkspaceState.matches("gettingTemplateSchema")}
-      creatingWorkspace={createWorkspaceState.matches("creatingWorkspace")}
-      templates={createWorkspaceState.context.templates}
-      selectedTemplate={createWorkspaceState.context.selectedTemplate}
-      templateSchema={createWorkspaceState.context.templateSchema}
-      onCancel={() => {
-        navigate(preSelectedTemplateName ? "/templates" : "/workspaces")
-      }}
-      onSubmit={(request) => {
-        send({
-          type: "CREATE_WORKSPACE",
-          request,
-        })
-      }}
-      onSelectTemplate={(template: Template) => {
-        send({
-          type: "SELECT_TEMPLATE",
-          template,
-        })
-      }}
-    />
+    <>
+      <Helmet>
+        <title>{pageTitle("Create Workspace")}</title>
+      </Helmet>
+      <CreateWorkspacePageView
+        loadingTemplates={createWorkspaceState.matches("gettingTemplates")}
+        loadingTemplateSchema={createWorkspaceState.matches("gettingTemplateSchema")}
+        creatingWorkspace={createWorkspaceState.matches("creatingWorkspace")}
+        templates={createWorkspaceState.context.templates}
+        selectedTemplate={createWorkspaceState.context.selectedTemplate}
+        templateSchema={createWorkspaceState.context.templateSchema}
+        onCancel={() => {
+          navigate(preSelectedTemplateName ? "/templates" : "/workspaces")
+        }}
+        onSubmit={(request) => {
+          send({
+            type: "CREATE_WORKSPACE",
+            request,
+          })
+        }}
+        onSelectTemplate={(template: Template) => {
+          send({
+            type: "SELECT_TEMPLATE",
+            template,
+          })
+        }}
+      />
+    </>
   )
 }
 
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -1,10 +1,12 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
+import { Helmet } from "react-helmet"
 import { Navigate, useLocation } from "react-router-dom"
 import { isApiError } from "../../api/errors"
 import { Footer } from "../../components/Footer/Footer"
 import { SignInForm } from "../../components/SignInForm/SignInForm"
+import { pageTitle } from "../../util/page"
 import { retrieveRedirect } from "../../util/redirect"
 import { XServiceContext } from "../../xServices/StateContext"
 
@@ -50,6 +52,9 @@ export const LoginPage: React.FC = () => {
   } else {
     return (
       <div className={styles.root}>
+        <Helmet>
+          <title>{pageTitle("Login")}</title>
+        </Helmet>
         <div className={styles.layout}>
           <div className={styles.container}>
             <SignInForm
diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -1,8 +1,10 @@
 import { useMachine } from "@xstate/react"
 import { FC } from "react"
+import { Helmet } from "react-helmet"
 import { useParams } from "react-router-dom"
 import { Loader } from "../../components/Loader/Loader"
 import { useOrganizationId } from "../../hooks/useOrganizationId"
+import { pageTitle } from "../../util/page"
 import { templateMachine } from "../../xServices/template/templateXService"
 import { TemplatePageView } from "./TemplatePageView"
 
@@ -33,10 +35,15 @@ export const TemplatePage: FC = () => {
   }
 
   return (
-    <TemplatePageView
-      template={template}
-      activeTemplateVersion={activeTemplateVersion}
-      templateResources={templateResources}
-    />
+    <>
+      <Helmet>
+        <title>{pageTitle(`${template.name} · Template`)}</title>
+      </Helmet>
+      <TemplatePageView
+        template={template}
+        activeTemplateVersion={activeTemplateVersion}
+        templateResources={templateResources}
+      />
+    </>
   )
 }
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -1,5 +1,7 @@
 import { useActor, useMachine } from "@xstate/react"
 import React, { useContext } from "react"
+import { Helmet } from "react-helmet"
+import { pageTitle } from "../../util/page"
 import { XServiceContext } from "../../xServices/StateContext"
 import { templatesMachine } from "../../xServices/templates/templatesXService"
 import { TemplatesPageView } from "./TemplatesPageView"
@@ -10,11 +12,16 @@ const TemplatesPage: React.FC = () => {
   const [templatesState] = useMachine(templatesMachine)
 
   return (
-    <TemplatesPageView
-      templates={templatesState.context.templates}
-      canCreateTemplate={authState.context.permissions?.createTemplates}
-      loading={templatesState.hasTag("loading")}
-    />
+    <>
+      <Helmet>
+        <title>{pageTitle("Templates")}</title>
+      </Helmet>
+      <TemplatesPageView
+        templates={templatesState.context.templates}
+        canCreateTemplate={authState.context.permissions?.createTemplates}
+        loading={templatesState.hasTag("loading")}
+      />
+    </>
   )
 }
 
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -1,13 +1,15 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useMachine } from "@xstate/react"
 import { FC, useEffect, useRef, useState } from "react"
+import { Helmet } from "react-helmet"
 import { useLocation, useNavigate, useParams } from "react-router-dom"
 import { v4 as uuidv4 } from "uuid"
 import * as XTerm from "xterm"
 import { FitAddon } from "xterm-addon-fit"
 import { WebLinksAddon } from "xterm-addon-web-links"
 import "xterm/css/xterm.css"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+import { pageTitle } from "../../util/page"
 import { terminalMachine } from "../../xServices/terminal/terminalXService"
 
 export const Language = {
@@ -179,6 +181,15 @@ const TerminalPage: FC<{
 
   return (
     <>
+      <Helmet>
+        <title>
+          {terminalState.context.workspace
+            ? pageTitle(
+                `Terminal · ${terminalState.context.workspace.owner_name}/${terminalState.context.workspace.name}`,
+              )
+            : ""}
+        </title>
+      </Helmet>
       {/* This overlay makes it more obvious that the terminal is disconnected. */}
       {/* It's nice for situations where Coder restarts, and they are temporarily disconnected. */}
       <div className={`${styles.overlay} ${isDisconnected ? "" : "connected"}`}>
diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
@@ -1,9 +1,11 @@
 import { useActor, useSelector } from "@xstate/react"
 import React, { useContext } from "react"
+import { Helmet } from "react-helmet"
 import { useNavigate } from "react-router"
 import * as TypesGen from "../../../api/typesGenerated"
 import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
 import { Margins } from "../../../components/Margins/Margins"
+import { pageTitle } from "../../../util/page"
 import { selectOrgId } from "../../../xServices/auth/authSelectors"
 import { XServiceContext } from "../../../xServices/StateContext"
 
@@ -23,6 +25,9 @@ export const CreateUserPage: React.FC = () => {
 
   return (
     <Margins>
+      <Helmet>
+        <title>{pageTitle("Create User")}</title>
+      </Helmet>
       <CreateUserForm
         formErrors={createUserFormErrors}
         onSubmit={(user: TypesGen.CreateUserRequest) => usersSend({ type: "CREATE", user })}
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -1,8 +1,10 @@
 import { useActor, useSelector } from "@xstate/react"
 import React, { useContext, useEffect } from "react"
+import { Helmet } from "react-helmet"
 import { useNavigate } from "react-router"
 import { ConfirmDialog } from "../../components/ConfirmDialog/ConfirmDialog"
 import { ResetPasswordDialog } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
+import { pageTitle } from "../../util/page"
 import { selectPermissions } from "../../xServices/auth/authSelectors"
 import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"
@@ -48,6 +50,9 @@ export const UsersPage: React.FC = () => {
 
   return (
     <>
+      <Helmet>
+        <title>{pageTitle("Users")}</title>
+      </Helmet>
       <UsersPageView
         roles={roles}
         users={users}
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
@@ -2,13 +2,15 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import { useMachine } from "@xstate/react"
 import { FC } from "react"
+import { Helmet } from "react-helmet"
 import { useParams } from "react-router-dom"
 import { ProvisionerJobLog } from "../../api/typesGenerated"
 import { Loader } from "../../components/Loader/Loader"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { WorkspaceBuildLogs } from "../../components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { WorkspaceBuildStats } from "../../components/WorkspaceBuildStats/WorkspaceBuildStats"
+import { pageTitle } from "../../util/page"
 import { workspaceBuildMachine } from "../../xServices/workspaceBuild/workspaceBuildXService"
 
 const sortLogsByCreatedAt = (logs: ProvisionerJobLog[]) => {
@@ -34,6 +36,9 @@ export const WorkspaceBuildPage: FC = () => {
 
   return (
     <Margins>
+      <Helmet>
+        <title>{build ? pageTitle(`Build #${build.build_number} · ${build.workspace_name}`) : ""}</title>
+      </Helmet>
       <Stack>
         <Typography variant="h4" className={styles.title}>
           Logs
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,5 +1,6 @@
 import { useMachine } from "@xstate/react"
 import React, { useEffect } from "react"
+import { Helmet } from "react-helmet"
 import { useNavigate, useParams } from "react-router-dom"
 import { DeleteWorkspaceDialog } from "../../components/DeleteWorkspaceDialog/DeleteWorkspaceDialog"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
@@ -8,6 +9,7 @@ import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { Workspace } from "../../components/Workspace/Workspace"
 import { firstOrItem } from "../../util/array"
+import { pageTitle } from "../../util/page"
 import { workspaceMachine } from "../../xServices/workspace/workspaceXService"
 import { workspaceScheduleBannerMachine } from "../../xServices/workspaceSchedule/workspaceScheduleBannerXService"
 
@@ -36,6 +38,9 @@ export const WorkspacePage: React.FC = () => {
   } else {
     return (
       <Margins>
+        <Helmet>
+          <title>{pageTitle(`${workspace.owner_name}/${workspace.name}`)}</title>
+        </Helmet>
         <Stack spacing={4}>
           <>
             <Workspace
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -11,11 +11,13 @@ import SearchIcon from "@material-ui/icons/Search"
 import { useMachine } from "@xstate/react"
 import { FormikErrors, useFormik } from "formik"
 import { FC, useState } from "react"
+import { Helmet } from "react-helmet"
 import { Link as RouterLink } from "react-router-dom"
 import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/DropdownArrows"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { pageTitle } from "../../util/page"
 import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView } from "./WorkspacesPageView"
 
@@ -74,6 +76,9 @@ const WorkspacesPage: FC = () => {
 
   return (
     <Margins>
+      <Helmet>
+        <title>{pageTitle("Workspaces")}</title>
+      </Helmet>
       <Stack direction="row" className={styles.workspacesHeaderContainer}>
         <Stack direction="column" className={styles.filterColumn}>
           <Stack direction="row" spacing={0} className={styles.filterContainer}>
diff --git a/site/src/util/page.ts b/site/src/util/page.ts
@@ -0,0 +1,3 @@
+export const pageTitle = (prefix: string): string => {
+  return `${prefix} – Coder`
+}
diff --git a/site/webpack.dev.ts b/site/webpack.dev.ts
@@ -63,7 +63,7 @@ const config: Configuration = {
     port: process.env.PORT || 8080,
     proxy: {
       "/api": {
-        target: "http://localhost:3000",
+        target: "https://dev.coder.com",
         ws: true,
         secure: false,
       },
diff --git a/site/yarn.lock b/site/yarn.lock
