coder · khorne3 · Jun 16, 2022 · Jun 10, 2022 · Jun 10, 2022 · Jun 10, 2022
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,11 +15,8 @@ export default {
 
 const Template: Story<HelpTooltipProps> = (args) => (
   <HelpTooltip {...args}>
-    <HelpTooltipTitle>What is 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.
-    </HelpTooltipText>
+    <HelpTooltipTitle>What is a template?</HelpTooltipTitle>
+    <HelpTooltipText>A template is a common configuration for your team`&apos;`s workspaces.</HelpTooltipText>
     <HelpTooltipLinksGroup>
       <HelpTooltipLink href="https://github.com/coder/coder/">Creating a template</HelpTooltipLink>
       <HelpTooltipLink href="https://github.com/coder/coder/">Updating 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 React, { createContext, useContext, useState } from "react"
-import { Stack } from "../Stack/Stack"
+import { Stack } from "../../Stack/Stack"
 
 type Icon = typeof HelpIcon
 

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 created 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://coder.com/docs/coder-oss/latest/templates#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
@@ -25,18 +25,18 @@ import { Link as RouterLink, useNavigate } from "react-router-dom"
 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,
   HelpTooltipAction,
   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"
 import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
@@ -51,9 +51,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 infrastructure and tools you need to work on your project.",
   workspaceTooltipLink1: "Create workspaces",
   workspaceTooltipLink2: "Connect with SSH",
   workspaceTooltipLink3: "Editors and IDEs",