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

Lines changed: 2 additions & 36 deletions
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 {
Lines changed: 35 additions & 0 deletions
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

Lines changed: 17 additions & 4 deletions
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>
Lines changed: 16 additions & 0 deletions
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

Lines changed: 2 additions & 5 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 27 additions & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 5 additions & 5 deletions
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

0 commit comments

Comments
 (0)
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