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 ( - +
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy