coder · khorne3 · Jun 16, 2022 · Jun 10, 2022 · Jun 10, 2022 · Jun 10, 2022
diff --git a/cli/server.go b/cli/server.go
@@ -183,7 +183,9 @@ func server() *cobra.Command {
 					"Coder requires a URL accessible by workspaces you provision. "+
 						"A free tunnel can be created for simple setup. This will "+
 						"expose your Coder deployment to a publicly accessible URL. "+
-						cliui.Styles.Field.Render("--access-url")+" can be specified instead.\n",
+						"If you'd like to use your own domain, you can provide it "+
+						"with the "+
+						cliui.Styles.Field.Render("--access-url")+" flag.\n",
 				))
 
 				// This skips the prompt if the flag is explicitly specified.
@@ -277,8 +279,8 @@ func server() *cobra.Command {
 				}
 			}
 
-			_, _ = fmt.Fprintf(cmd.ErrOrStderr(), "access-url: %s\n", accessURL)
 			_, _ = fmt.Fprintf(cmd.ErrOrStderr(), "provisioner-daemons: %d\n", provisionerDaemonCount)
+			_, _ = fmt.Fprintf(cmd.ErrOrStderr(), "Access your Coder UI in a browser at: %s\n", accessURL)
 			_, _ = fmt.Fprintln(cmd.ErrOrStderr())
 
 			if !dev {

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -9,16 +9,11 @@ import { FC } from "react"
 import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { getDisplayAgentStatus } from "../../util/workspace"
 import { AppLink } from "../AppLink/AppLink"
-import {
-  HelpTooltip,
-  HelpTooltipLink,
-  HelpTooltipLinksGroup,
-  HelpTooltipText,
-  HelpTooltipTitle,
-} from "../HelpTooltip/HelpTooltip"
 import { Stack } from "../Stack/Stack"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TerminalLink } from "../TerminalLink/TerminalLink"
+import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
+import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 
 const Language = {
@@ -28,35 +23,6 @@ const Language = {
   agentLabel: "Agent",
   statusLabel: "Status",
   accessLabel: "Access",
-  resourceTooltipTitle: "What is a resource?",
-  resourceTooltipText: "A resource is an infrastructure object that is create when the workspace is provisioned.",
-  resourceTooltipLink: "Persistent and ephemeral resources",
-  agentTooltipTitle: "What is an agent?",
-  agentTooltipText:
-    "The Coder agent runs inside your resource and gives you direct access to the shell via the UI or CLI.",
-}
-
-const ResourcesHelpTooltip: React.FC = () => {
-  return (
-    <HelpTooltip size="small">
-      <HelpTooltipTitle>{Language.resourceTooltipTitle}</HelpTooltipTitle>
-      <HelpTooltipText>{Language.resourceTooltipText}</HelpTooltipText>
-      <HelpTooltipLinksGroup>
-        <HelpTooltipLink href="https://github.com/coder/coder/blob/main/docs/templates.md#persistent-and-ephemeral-resources">
-          {Language.resourceTooltipLink}
-        </HelpTooltipLink>
-      </HelpTooltipLinksGroup>
-    </HelpTooltip>
-  )
-}
-
-const AgentHelpTooltip: React.FC = () => {
-  return (
-    <HelpTooltip size="small">
-      <HelpTooltipTitle>{Language.agentTooltipTitle}</HelpTooltipTitle>
-      <HelpTooltipText>{Language.agentTooltipText}</HelpTooltipText>
-    </HelpTooltip>
-  )
 }
 
 interface ResourcesProps {

diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx
@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import { FC } from "react"
+import { WrapperComponent } from "../../testHelpers/renderHelpers"
+import { Language as AgentTooltipLanguage } from "../Tooltips/AgentHelpTooltip"
+import { Language as ResourceTooltipLanguage } from "../Tooltips/ResourcesHelpTooltip"
+import { TemplateResourcesProps, TemplateResourcesTable } from "./TemplateResourcesTable"
+
+const Component: FC<TemplateResourcesProps> = (props) => (
+  <WrapperComponent>
+    <TemplateResourcesTable {...props} />
+  </WrapperComponent>
+)
+
+describe("TemplateResourcesTable", () => {
+  it("displays resources tooltip", () => {
+    const props: TemplateResourcesProps = {
+      resources: [],
+    }
+    render(<Component {...props} />)
+    const resourceTooltipButton = screen.getAllByRole("button")[0]
+    fireEvent.click(resourceTooltipButton)
+    const resourceTooltipTitle = screen.getByText(ResourceTooltipLanguage.resourceTooltipTitle)
+    expect(resourceTooltipTitle).toBeDefined()
+  })
+  it("displays agent tooltip", () => {
+    const props: TemplateResourcesProps = {
+      resources: [],
+    }
+    render(<Component {...props} />)
+    const agentTooltipButton = screen.getAllByRole("button")[1]
+    fireEvent.click(agentTooltipButton)
+    const agentTooltipTitle = screen.getByText(AgentTooltipLanguage.agentTooltipTitle)
+    expect(agentTooltipTitle).toBeDefined()
+  })
+})
diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx
@@ -6,14 +6,17 @@ import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import { FC } from "react"
 import { WorkspaceResource } from "../../api/typesGenerated"
+import { Stack } from "../Stack/Stack"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
+import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
+import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
 
-const Language = {
+export const Language = {
   resourceLabel: "Resource",
   agentLabel: "Agent",
 }
 
-interface TemplateResourcesProps {
+export interface TemplateResourcesProps {
   resources: WorkspaceResource[]
 }
 
@@ -24,8 +27,18 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
     <Table className={styles.table}>
       <TableHead>
         <TableHeaderRow>
-          <TableCell>{Language.resourceLabel}</TableCell>
-          <TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
+          <TableCell>
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              {Language.resourceLabel}
+              <ResourcesHelpTooltip />
+            </Stack>
+          </TableCell>
+          <TableCell className={styles.agentColumn}>
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              {Language.agentLabel}
+              <AgentHelpTooltip />
+            </Stack>
+          </TableCell>
         </TableHeaderRow>
       </TableHead>
       <TableBody>

diff --git a/site/src/components/Tooltips/AgentHelpTooltip.tsx b/site/src/components/Tooltips/AgentHelpTooltip.tsx
@@ -0,0 +1,16 @@
+import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "./HelpTooltip/HelpTooltip"
+
+export const Language = {
+  agentTooltipTitle: "What is an agent?",
+  agentTooltipText:
+    "The Coder agent runs inside your resource and gives you direct access to the shell via the UI or CLI.",
+}
+
+export const AgentHelpTooltip: React.FC = () => {
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>{Language.agentTooltipTitle}</HelpTooltipTitle>
+      <HelpTooltipText>{Language.agentTooltipText}</HelpTooltipText>
+    </HelpTooltip>
+  )
+}
diff --git a/...nents/HelpTooltip/HelpTooltip.stories.tsx → ...ltips/HelpTooltip/HelpTooltip.stories.tsx b/...nents/HelpTooltip/HelpTooltip.stories.tsx → ...ltips/HelpTooltip/HelpTooltip.stories.tsx
@@ -15,10 +15,10 @@ export default {
 
 const Template: Story<HelpTooltipProps> = (args) => (
   <HelpTooltip {...args}>
-    <HelpTooltipTitle>What is template?</HelpTooltipTitle>
+    <HelpTooltipTitle>What is a template?</HelpTooltipTitle>
     <HelpTooltipText>
-      With templates you can create a common configuration for your workspaces using Terraform. So, you and your team
-      can use the same environment to deliver great software.
+      With templates, you can create a common configuration for your team`&apos;`s workspaces using Terraform so that
+      everyone can use the same environment to deliver great software.
     </HelpTooltipText>
     <HelpTooltipLinksGroup>
       <HelpTooltipLink href="https://github.com/coder/coder/">Creating a template</HelpTooltipLink>

diff --git a/...rc/components/HelpTooltip/HelpTooltip.tsx → ...ents/Tooltips/HelpTooltip/HelpTooltip.tsx b/...rc/components/HelpTooltip/HelpTooltip.tsx → ...ents/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import HelpIcon from "@material-ui/icons/HelpOutline"
 import OpenInNewIcon from "@material-ui/icons/OpenInNew"
 import { useState } from "react"
-import { Stack } from "../Stack/Stack"
+import { Stack } from "../../Stack/Stack"
 
 type Size = "small" | "medium"
 export interface HelpTooltipProps {

diff --git a/site/src/components/Tooltips/ResourcesHelpTooltip.tsx b/site/src/components/Tooltips/ResourcesHelpTooltip.tsx
@@ -0,0 +1,27 @@
+import {
+  HelpTooltip,
+  HelpTooltipLink,
+  HelpTooltipLinksGroup,
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "./HelpTooltip/HelpTooltip"
+
+export const Language = {
+  resourceTooltipTitle: "What is a resource?",
+  resourceTooltipText: "A resource is an infrastructure object that is create when the workspace is provisioned.",
+  resourceTooltipLink: "Persistent and ephemeral resources",
+}
+
+export const ResourcesHelpTooltip: React.FC = () => {
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>{Language.resourceTooltipTitle}</HelpTooltipTitle>
+      <HelpTooltipText>{Language.resourceTooltipText}</HelpTooltipText>
+      <HelpTooltipLinksGroup>
+        <HelpTooltipLink href="https://github.com/coder/coder/blob/main/docs/templates.md#persistent-and-ephemeral-resources">
+          {Language.resourceTooltipLink}
+        </HelpTooltipLink>
+      </HelpTooltipLinksGroup>
+    </HelpTooltip>
+  )
+}
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -204,7 +204,7 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
   ]
 
   return (
-    <FullPageForm onCancel={onCancel} title="Workspace Schedule">
+    <FullPageForm onCancel={onCancel} title="Workspace schedule">
       <form onSubmit={form.handleSubmit} className={styles.form}>
         <Stack>
           <TextField

diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
@@ -16,7 +16,7 @@ import { WorkspaceSection } from "../../components/WorkspaceSection/WorkspaceSec
 
 const Language = {
   createButton: "Create workspace",
-  noDescription: "No description",
+  noDescription: "",
   readmeTitle: "README",
   resourcesTitle: "Resources",
 }

diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -14,17 +14,17 @@ import * as TypesGen from "../../api/typesGenerated"
 import { AvatarData } from "../../components/AvatarData/AvatarData"
 import { CodeExample } from "../../components/CodeExample/CodeExample"
 import { EmptyState } from "../../components/EmptyState/EmptyState"
+import { Margins } from "../../components/Margins/Margins"
+import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
+import { Stack } from "../../components/Stack/Stack"
+import { TableLoader } from "../../components/TableLoader/TableLoader"
 import {
   HelpTooltip,
   HelpTooltipLink,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
-} from "../../components/HelpTooltip/HelpTooltip"
-import { Margins } from "../../components/Margins/Margins"
-import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
-import { Stack } from "../../components/Stack/Stack"
-import { TableLoader } from "../../components/TableLoader/TableLoader"
+} from "../../components/Tooltips/HelpTooltip/HelpTooltip"
 
 dayjs.extend(relativeTime)
 

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -24,17 +24,17 @@ import * as TypesGen from "../../api/typesGenerated"
 import { AvatarData } from "../../components/AvatarData/AvatarData"
 import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/DropdownArrows"
 import { EmptyState } from "../../components/EmptyState/EmptyState"
+import { Margins } from "../../components/Margins/Margins"
+import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
+import { Stack } from "../../components/Stack/Stack"
+import { TableLoader } from "../../components/TableLoader/TableLoader"
 import {
   HelpTooltip,
   HelpTooltipLink,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
-} from "../../components/HelpTooltip/HelpTooltip"
-import { Margins } from "../../components/Margins/Margins"
-import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
-import { Stack } from "../../components/Stack/Stack"
-import { TableLoader } from "../../components/TableLoader/TableLoader"
+} from "../../components/Tooltips/HelpTooltip/HelpTooltip"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { getDisplayStatus, workspaceFilterQuery } from "../../util/workspace"
 
@@ -48,9 +48,9 @@ export const Language = {
   filterName: "Filters",
   yourWorkspacesButton: "Your workspaces",
   allWorkspacesButton: "All workspaces",
-  workspaceTooltipTitle: "What is workspace?",
+  workspaceTooltipTitle: "What is a workspace?",
   workspaceTooltipText:
-    "It is your workstation. It is a workspace that will provide you the necessary compute and access to your development environment.",
+    "A workspace is your development environment in the cloud. It includes the compute infrastructure and tools you need to work on your project",
   workspaceTooltipLink1: "Create workspaces",
   workspaceTooltipLink2: "Connect with SSH",
   workspaceTooltipLink3: "Editors and IDEs",