diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index 4e36fc17e2fad..7944323eb4738 100644
--- 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 (
-
- {Language.resourceTooltipTitle}
- {Language.resourceTooltipText}
-
-
- {Language.resourceTooltipLink}
-
-
-
- )
-}
-
-const AgentHelpTooltip: React.FC = () => {
- return (
-
- {Language.agentTooltipTitle}
- {Language.agentTooltipText}
-
- )
}
interface ResourcesProps {
diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx
new file mode 100644
index 0000000000000..96bfa15acd4f1
--- /dev/null
+++ 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 = (props) => (
+
+
+
+)
+
+describe("TemplateResourcesTable", () => {
+ it("displays resources tooltip", () => {
+ const props: TemplateResourcesProps = {
+ resources: [],
+ }
+ render()
+ 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()
+ 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
index cb8b7ce22f37e..005c473ccdbbb 100644
--- 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 = ({ resources }
- {Language.resourceLabel}
- {Language.agentLabel}
+
+
+ {Language.resourceLabel}
+
+
+
+
+
+ {Language.agentLabel}
+
+
+
diff --git a/site/src/components/Tooltips/AgentHelpTooltip.tsx b/site/src/components/Tooltips/AgentHelpTooltip.tsx
new file mode 100644
index 0000000000000..ce250caaf4bb9
--- /dev/null
+++ 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 (
+
+ {Language.agentTooltipTitle}
+ {Language.agentTooltipText}
+
+ )
+}
diff --git a/site/src/components/HelpTooltip/HelpTooltip.stories.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.stories.tsx
similarity index 73%
rename from site/src/components/HelpTooltip/HelpTooltip.stories.tsx
rename to site/src/components/Tooltips/HelpTooltip/HelpTooltip.stories.tsx
index 6780a5700a6d0..8d2d3ad802cd7 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.stories.tsx
+++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.stories.tsx
@@ -15,11 +15,8 @@ export default {
const Template: Story = (args) => (
- What is template?
-
- 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.
-
+ What is a template?
+ A template is a common configuration for your team`'`s workspaces.
Creating a template
Updating a template
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
similarity index 99%
rename from site/src/components/HelpTooltip/HelpTooltip.tsx
rename to site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
index 1ed96af999871..66629943c0961 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/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
new file mode 100644
index 0000000000000..cb1b6894000e7
--- /dev/null
+++ 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 (
+
+ {Language.resourceTooltipTitle}
+ {Language.resourceTooltipText}
+
+
+ {Language.resourceTooltipLink}
+
+
+
+ )
+}
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
index cab7356e168ac..51c12e3062328 100644
--- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
+++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -204,7 +204,7 @@ export const WorkspaceScheduleForm: FC = ({
]
return (
-
+