Skip to content

Commit eab5c15

Browse files
author
Katie Horne
authored
chore: edit CLI/UI copy (#2247)
1 parent 2d7e6d6 commit eab5c15

File tree

11 files changed

+114
-60
lines changed

11 files changed

+114
-60
lines changed

‎site/src/components/Resources/Resources.tsx

+2-36
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,11 @@ import { FC } from "react"
99
import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
1010
import { getDisplayAgentStatus } from "../../util/workspace"
1111
import { AppLink } from "../AppLink/AppLink"
12-
import {
13-
HelpTooltip,
14-
HelpTooltipLink,
15-
HelpTooltipLinksGroup,
16-
HelpTooltipText,
17-
HelpTooltipTitle,
18-
} from "../HelpTooltip/HelpTooltip"
1912
import { Stack } from "../Stack/Stack"
2013
import { TableHeaderRow } from "../TableHeaders/TableHeaders"
2114
import { TerminalLink } from "../TerminalLink/TerminalLink"
15+
import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
16+
import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
2217
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
2318

2419
const Language = {
@@ -28,35 +23,6 @@ const Language = {
2823
agentLabel: "Agent",
2924
statusLabel: "Status",
3025
accessLabel: "Access",
31-
resourceTooltipTitle: "What is a resource?",
32-
resourceTooltipText: "A resource is an infrastructure object that is create when the workspace is provisioned.",
33-
resourceTooltipLink: "Persistent and ephemeral resources",
34-
agentTooltipTitle: "What is an agent?",
35-
agentTooltipText:
36-
"The Coder agent runs inside your resource and gives you direct access to the shell via the UI or CLI.",
37-
}
38-
39-
const ResourcesHelpTooltip: React.FC = () => {
40-
return (
41-
<HelpTooltip size="small">
42-
<HelpTooltipTitle>{Language.resourceTooltipTitle}</HelpTooltipTitle>
43-
<HelpTooltipText>{Language.resourceTooltipText}</HelpTooltipText>
44-
<HelpTooltipLinksGroup>
45-
<HelpTooltipLink href="https://github.com/coder/coder/blob/main/docs/templates.md#persistent-and-ephemeral-resources">
46-
{Language.resourceTooltipLink}
47-
</HelpTooltipLink>
48-
</HelpTooltipLinksGroup>
49-
</HelpTooltip>
50-
)
51-
}
52-
53-
const AgentHelpTooltip: React.FC = () => {
54-
return (
55-
<HelpTooltip size="small">
56-
<HelpTooltipTitle>{Language.agentTooltipTitle}</HelpTooltipTitle>
57-
<HelpTooltipText>{Language.agentTooltipText}</HelpTooltipText>
58-
</HelpTooltip>
59-
)
6026
}
6127

6228
interface ResourcesProps {

‎site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { fireEvent, render, screen } from "@testing-library/react"
2+
import { FC } from "react"
3+
import { WrapperComponent } from "../../testHelpers/renderHelpers"
4+
import { Language as AgentTooltipLanguage } from "../Tooltips/AgentHelpTooltip"
5+
import { Language as ResourceTooltipLanguage } from "../Tooltips/ResourcesHelpTooltip"
6+
import { TemplateResourcesProps, TemplateResourcesTable } from "./TemplateResourcesTable"
7+
8+
const Component: FC<TemplateResourcesProps> = (props) => (
9+
<WrapperComponent>
10+
<TemplateResourcesTable {...props} />
11+
</WrapperComponent>
12+
)
13+
14+
describe("TemplateResourcesTable", () => {
15+
it("displays resources tooltip", () => {
16+
const props: TemplateResourcesProps = {
17+
resources: [],
18+
}
19+
render(<Component {...props} />)
20+
const resourceTooltipButton = screen.getAllByRole("button")[0]
21+
fireEvent.click(resourceTooltipButton)
22+
const resourceTooltipTitle = screen.getByText(ResourceTooltipLanguage.resourceTooltipTitle)
23+
expect(resourceTooltipTitle).toBeDefined()
24+
})
25+
it("displays agent tooltip", () => {
26+
const props: TemplateResourcesProps = {
27+
resources: [],
28+
}
29+
render(<Component {...props} />)
30+
const agentTooltipButton = screen.getAllByRole("button")[1]
31+
fireEvent.click(agentTooltipButton)
32+
const agentTooltipTitle = screen.getByText(AgentTooltipLanguage.agentTooltipTitle)
33+
expect(agentTooltipTitle).toBeDefined()
34+
})
35+
})

‎site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx

+17-4
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@ import TableHead from "@material-ui/core/TableHead"
66
import TableRow from "@material-ui/core/TableRow"
77
import { FC } from "react"
88
import { WorkspaceResource } from "../../api/typesGenerated"
9+
import { Stack } from "../Stack/Stack"
910
import { TableHeaderRow } from "../TableHeaders/TableHeaders"
11+
import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
12+
import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
1013

11-
const Language = {
14+
export const Language = {
1215
resourceLabel: "Resource",
1316
agentLabel: "Agent",
1417
}
1518

16-
interface TemplateResourcesProps {
19+
export interface TemplateResourcesProps {
1720
resources: WorkspaceResource[]
1821
}
1922

@@ -24,8 +27,18 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
2427
<Table className={styles.table}>
2528
<TableHead>
2629
<TableHeaderRow>
27-
<TableCell>{Language.resourceLabel}</TableCell>
28-
<TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
30+
<TableCell>
31+
<Stack direction="row" spacing={0.5} alignItems="center">
32+
{Language.resourceLabel}
33+
<ResourcesHelpTooltip />
34+
</Stack>
35+
</TableCell>
36+
<TableCell className={styles.agentColumn}>
37+
<Stack direction="row" spacing={0.5} alignItems="center">
38+
{Language.agentLabel}
39+
<AgentHelpTooltip />
40+
</Stack>
41+
</TableCell>
2942
</TableHeaderRow>
3043
</TableHead>
3144
<TableBody>

‎site/src/components/Tooltips/AgentHelpTooltip.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "./HelpTooltip/HelpTooltip"
2+
3+
export const Language = {
4+
agentTooltipTitle: "What is an agent?",
5+
agentTooltipText:
6+
"The Coder agent runs inside your resource and gives you direct access to the shell via the UI or CLI.",
7+
}
8+
9+
export const AgentHelpTooltip: React.FC = () => {
10+
return (
11+
<HelpTooltip size="small">
12+
<HelpTooltipTitle>{Language.agentTooltipTitle}</HelpTooltipTitle>
13+
<HelpTooltipText>{Language.agentTooltipText}</HelpTooltipText>
14+
</HelpTooltip>
15+
)
16+
}

‎site/src/components/HelpTooltip/HelpTooltip.stories.tsx renamed to ‎site/src/components/Tooltips/HelpTooltip/HelpTooltip.stories.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,8 @@ export default {
1515

1616
const Template: Story<HelpTooltipProps> = (args) => (
1717
<HelpTooltip {...args}>
18-
<HelpTooltipTitle>What is template?</HelpTooltipTitle>
19-
<HelpTooltipText>
20-
With templates you can create a common configuration for your workspaces using Terraform. So, you and your team
21-
can use the same environment to deliver great software.
22-
</HelpTooltipText>
18+
<HelpTooltipTitle>What is a template?</HelpTooltipTitle>
19+
<HelpTooltipText>A template is a common configuration for your team`&apos;`s workspaces.</HelpTooltipText>
2320
<HelpTooltipLinksGroup>
2421
<HelpTooltipLink href="https://github.com/coder/coder/">Creating a template</HelpTooltipLink>
2522
<HelpTooltipLink href="https://github.com/coder/coder/">Updating a template</HelpTooltipLink>

‎site/src/components/HelpTooltip/HelpTooltip.tsx renamed to ‎site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
44
import HelpIcon from "@material-ui/icons/HelpOutline"
55
import OpenInNewIcon from "@material-ui/icons/OpenInNew"
66
import React, { createContext, useContext, useState } from "react"
7-
import { Stack } from "../Stack/Stack"
7+
import { Stack } from "../../Stack/Stack"
88

99
type Icon = typeof HelpIcon
1010

‎site/src/components/Tooltips/ResourcesHelpTooltip.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {
2+
HelpTooltip,
3+
HelpTooltipLink,
4+
HelpTooltipLinksGroup,
5+
HelpTooltipText,
6+
HelpTooltipTitle,
7+
} from "./HelpTooltip/HelpTooltip"
8+
9+
export const Language = {
10+
resourceTooltipTitle: "What is a resource?",
11+
resourceTooltipText: "A resource is an infrastructure object that is created when the workspace is provisioned.",
12+
resourceTooltipLink: "Persistent and ephemeral resources",
13+
}
14+
15+
export const ResourcesHelpTooltip: React.FC = () => {
16+
return (
17+
<HelpTooltip size="small">
18+
<HelpTooltipTitle>{Language.resourceTooltipTitle}</HelpTooltipTitle>
19+
<HelpTooltipText>{Language.resourceTooltipText}</HelpTooltipText>
20+
<HelpTooltipLinksGroup>
21+
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/templates#persistent-and-ephemeral-resources">
22+
{Language.resourceTooltipLink}
23+
</HelpTooltipLink>
24+
</HelpTooltipLinksGroup>
25+
</HelpTooltip>
26+
)
27+
}

‎site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
204204
]
205205

206206
return (
207-
<FullPageForm onCancel={onCancel} title="Workspace Schedule">
207+
<FullPageForm onCancel={onCancel} title="Workspace schedule">
208208
<form onSubmit={form.handleSubmit} className={styles.form}>
209209
<Stack>
210210
<TextField

‎site/src/pages/TemplatePage/TemplatePageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { WorkspaceSection } from "../../components/WorkspaceSection/WorkspaceSec
1616

1717
const Language = {
1818
createButton: "Create workspace",
19-
noDescription: "No description",
19+
noDescription: "",
2020
readmeTitle: "README",
2121
resourcesTitle: "Resources",
2222
}

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ import * as TypesGen from "../../api/typesGenerated"
1414
import { AvatarData } from "../../components/AvatarData/AvatarData"
1515
import { CodeExample } from "../../components/CodeExample/CodeExample"
1616
import { EmptyState } from "../../components/EmptyState/EmptyState"
17+
import { Margins } from "../../components/Margins/Margins"
18+
import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
19+
import { Stack } from "../../components/Stack/Stack"
20+
import { TableLoader } from "../../components/TableLoader/TableLoader"
1721
import {
1822
HelpTooltip,
1923
HelpTooltipLink,
2024
HelpTooltipLinksGroup,
2125
HelpTooltipText,
2226
HelpTooltipTitle,
23-
} from "../../components/HelpTooltip/HelpTooltip"
24-
import { Margins } from "../../components/Margins/Margins"
25-
import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
26-
import { Stack } from "../../components/Stack/Stack"
27-
import { TableLoader } from "../../components/TableLoader/TableLoader"
27+
} from "../../components/Tooltips/HelpTooltip/HelpTooltip"
2828

2929
dayjs.extend(relativeTime)
3030

‎site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,18 @@ import { Link as RouterLink, useNavigate } from "react-router-dom"
2525
import { AvatarData } from "../../components/AvatarData/AvatarData"
2626
import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/DropdownArrows"
2727
import { EmptyState } from "../../components/EmptyState/EmptyState"
28+
import { Margins } from "../../components/Margins/Margins"
29+
import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
30+
import { Stack } from "../../components/Stack/Stack"
31+
import { TableLoader } from "../../components/TableLoader/TableLoader"
2832
import {
2933
HelpTooltip,
3034
HelpTooltipAction,
3135
HelpTooltipLink,
3236
HelpTooltipLinksGroup,
3337
HelpTooltipText,
3438
HelpTooltipTitle,
35-
} from "../../components/HelpTooltip/HelpTooltip"
36-
import { Margins } from "../../components/Margins/Margins"
37-
import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
38-
import { Stack } from "../../components/Stack/Stack"
39-
import { TableLoader } from "../../components/TableLoader/TableLoader"
39+
} from "../../components/Tooltips/HelpTooltip/HelpTooltip"
4040
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
4141
import { getDisplayStatus, workspaceFilterQuery } from "../../util/workspace"
4242
import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
@@ -51,9 +51,9 @@ export const Language = {
5151
filterName: "Filters",
5252
yourWorkspacesButton: "Your workspaces",
5353
allWorkspacesButton: "All workspaces",
54-
workspaceTooltipTitle: "What is workspace?",
54+
workspaceTooltipTitle: "What is a workspace?",
5555
workspaceTooltipText:
56-
"It is your workstation. It is a workspace that will provide you the necessary compute and access to your development environment.",
56+
"A workspace is your development environment in the cloud. It includes the infrastructure and tools you need to work on your project.",
5757
workspaceTooltipLink1: "Create workspaces",
5858
workspaceTooltipLink2: "Connect with SSH",
5959
workspaceTooltipLink3: "Editors and IDEs",

0 commit comments

Comments
 (0)