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 ( - +