Skip to content

Commit ce2a7d4

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Refactor template resources (#4789)
1 parent 8282e46 commit ce2a7d4

18 files changed

+642
-504
lines changed

‎site/src/components/AppLink/AppLink.stories.tsx

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Story } from "@storybook/react"
2-
import { MockWorkspace } from "../../testHelpers/renderHelpers"
2+
import {
3+
MockWorkspace,
4+
MockWorkspaceAgent,
5+
MockWorkspaceApp,
6+
} from "testHelpers/renderHelpers"
37
import { AppLink, AppLinkProps } from "./AppLink"
48

59
export default {
@@ -11,44 +15,59 @@ const Template: Story<AppLinkProps> = (args) => <AppLink {...args} />
1115

1216
export const WithIcon = Template.bind({})
1317
WithIcon.args = {
14-
username: "developer",
15-
workspaceName: MockWorkspace.name,
16-
appName: "code-server",
17-
appIcon: "/icon/code.svg",
18-
appSharingLevel: "owner",
19-
health: "healthy",
18+
workspace: MockWorkspace,
19+
app: {
20+
...MockWorkspaceApp,
21+
name: "code-server",
22+
icon: "/icon/code.svg",
23+
sharing_level: "owner",
24+
health: "healthy",
25+
},
26+
agent: MockWorkspaceAgent,
2027
}
2128

2229
export const WithoutIcon = Template.bind({})
2330
WithoutIcon.args = {
24-
username: "developer",
25-
workspaceName: MockWorkspace.name,
26-
appName: "code-server",
27-
appSharingLevel: "owner",
28-
health: "healthy",
31+
workspace: MockWorkspace,
32+
app: {
33+
...MockWorkspaceApp,
34+
name: "code-server",
35+
sharing_level: "owner",
36+
health: "healthy",
37+
},
38+
agent: MockWorkspaceAgent,
2939
}
3040

3141
export const HealthDisabled = Template.bind({})
3242
HealthDisabled.args = {
33-
username: "developer",
34-
workspaceName: MockWorkspace.name,
35-
appName: "code-server",
36-
appSharingLevel: "owner",
37-
health: "disabled",
43+
workspace: MockWorkspace,
44+
app: {
45+
...MockWorkspaceApp,
46+
name: "code-server",
47+
sharing_level: "owner",
48+
health: "disabled",
49+
},
50+
agent: MockWorkspaceAgent,
3851
}
3952

4053
export const HealthInitializing = Template.bind({})
4154
HealthInitializing.args = {
42-
username: "developer",
43-
workspaceName: MockWorkspace.name,
44-
appName: "code-server",
45-
health: "initializing",
55+
workspace: MockWorkspace,
56+
app: {
57+
...MockWorkspaceApp,
58+
name: "code-server",
59+
health: "initializing",
60+
},
61+
agent: MockWorkspaceAgent,
4662
}
4763

4864
export const HealthUnhealthy = Template.bind({})
4965
HealthUnhealthy.args = {
50-
username: "developer",
51-
workspaceName: MockWorkspace.name,
52-
appName: "code-server",
53-
health: "unhealthy",
66+
workspace: MockWorkspace,
67+
app: {
68+
...MockWorkspaceApp,
69+
name: "code-server",
70+
health: "unhealthy",
71+
},
72+
agent: MockWorkspaceAgent,
5473
}

‎site/src/components/AppLink/AppLink.tsx

Lines changed: 27 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import CircularProgress from "@material-ui/core/CircularProgress"
33
import Link from "@material-ui/core/Link"
44
import { makeStyles } from "@material-ui/core/styles"
55
import Tooltip from "@material-ui/core/Tooltip"
6-
import ComputerIcon from "@material-ui/icons/Computer"
7-
import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
8-
import LockOutlinedIcon from "@material-ui/icons/LockOutlined"
9-
import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
106
import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
11-
import { FC, PropsWithChildren } from "react"
7+
import { FC } from "react"
128
import * as TypesGen from "../../api/typesGenerated"
139
import { generateRandomString } from "../../util/random"
10+
import { BaseIcon } from "./BaseIcon"
11+
import { ShareIcon } from "./ShareIcon"
1412

1513
export const Language = {
1614
appTitle: (appName: string, identifier: string): string =>
@@ -19,76 +17,50 @@ export const Language = {
1917

2018
export interface AppLinkProps {
2119
appsHost?: string
22-
username: TypesGen.User["username"]
23-
workspaceName: TypesGen.Workspace["name"]
24-
agentName: TypesGen.WorkspaceAgent["name"]
25-
appName: TypesGen.WorkspaceApp["name"]
26-
appIcon?: TypesGen.WorkspaceApp["icon"]
27-
appCommand?: TypesGen.WorkspaceApp["command"]
28-
appSubdomain: TypesGen.WorkspaceApp["subdomain"]
29-
appSharingLevel: TypesGen.WorkspaceApp["sharing_level"]
30-
health: TypesGen.WorkspaceApp["health"]
20+
workspace: TypesGen.Workspace
21+
app: TypesGen.WorkspaceApp
22+
agent: TypesGen.WorkspaceAgent
3123
}
3224

33-
export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
25+
export const AppLink: FC<AppLinkProps> = ({
3426
appsHost,
35-
username,
36-
workspaceName,
37-
agentName,
38-
appName,
39-
appIcon,
40-
appCommand,
41-
appSubdomain,
42-
appSharingLevel,
43-
health,
27+
app,
28+
workspace,
29+
agent,
4430
}) => {
4531
const styles = useStyles()
32+
const username = workspace.owner_name
4633

4734
// The backend redirects if the trailing slash isn't included, so we add it
4835
// here to avoid extra roundtrips.
49-
let href = `/@${username}/${workspaceName}.${agentName}/apps/${encodeURIComponent(
50-
appName,
51-
)}/`
52-
if (appCommand) {
53-
href = `/@${username}/${workspaceName}.${agentName}/terminal?command=${encodeURIComponent(
54-
appCommand,
55-
)}`
36+
let href = `/@${username}/${workspace.name}.${
37+
agent.name
38+
}/apps/${encodeURIComponent(app.name)}/`
39+
if (app.command) {
40+
href = `/@${username}/${workspace.name}.${
41+
agent.name
42+
}/terminal?command=${encodeURIComponent(app.command)}`
5643
}
57-
if (appsHost && appSubdomain) {
58-
const subdomain = `${appName}--${agentName}--${workspaceName}--${username}`
44+
if (appsHost && app.subdomain) {
45+
const subdomain = `${app.name}--${agent.name}--${workspace.name}--${username}`
5946
href = `${window.location.protocol}//${appsHost}/`.replace("*", subdomain)
6047
}
6148

6249
let canClick = true
63-
let icon = appIcon ? (
64-
<img alt={`${appName} Icon`} src={appIcon} />
65-
) : (
66-
<ComputerIcon />
67-
)
68-
69-
let shareIcon = <LockOutlinedIcon />
70-
let shareTooltip = "Private, only accessible by you"
71-
if (appSharingLevel === "authenticated") {
72-
shareIcon = <GroupOutlinedIcon />
73-
shareTooltip = "Shared with all authenticated users"
74-
}
75-
if (appSharingLevel === "public") {
76-
shareIcon = <PublicOutlinedIcon />
77-
shareTooltip = "Shared publicly"
78-
}
50+
let icon = <BaseIcon app={app} />
7951

8052
let primaryTooltip = ""
81-
if (health === "initializing") {
53+
if (app.health === "initializing") {
8254
canClick = false
8355
icon = <CircularProgress size={16} />
8456
primaryTooltip = "Initializing..."
8557
}
86-
if (health === "unhealthy") {
58+
if (app.health === "unhealthy") {
8759
canClick = false
8860
icon = <ErrorOutlineIcon className={styles.unhealthyIcon} />
8961
primaryTooltip = "Unhealthy"
9062
}
91-
if (!appsHost && appSubdomain) {
63+
if (!appsHost && app.subdomain) {
9264
canClick = false
9365
icon = <ErrorOutlineIcon className={styles.notConfiguredIcon} />
9466
primaryTooltip =
@@ -99,11 +71,11 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
9971
<Button
10072
size="small"
10173
startIcon={icon}
102-
endIcon={<Tooltip title={shareTooltip}>{shareIcon}</Tooltip>}
74+
endIcon={<ShareIcon app={app} />}
10375
className={styles.button}
10476
disabled={!canClick}
10577
>
106-
<span className={styles.appName}>{appName}</span>
78+
<span className={styles.appName}>{app.name}</span>
10779
</Button>
10880
)
10981

@@ -120,7 +92,7 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
12092
event.preventDefault()
12193
window.open(
12294
href,
123-
Language.appTitle(appName, generateRandomString(12)),
95+
Language.appTitle(app.name, generateRandomString(12)),
12496
"width=900,height=600",
12597
)
12698
}

‎site/src/components/AppLink/AppPreviewLink.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import { Stack } from "components/Stack/Stack"
3+
import { FC } from "react"
4+
import * as TypesGen from "api/typesGenerated"
5+
import { BaseIcon } from "./BaseIcon"
6+
import { ShareIcon } from "./ShareIcon"
7+
8+
export interface AppPreviewProps {
9+
app: TypesGen.WorkspaceApp
10+
}
11+
12+
export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
13+
const styles = useStyles()
14+
15+
return (
16+
<Stack
17+
className={styles.appPreviewLink}
18+
alignItems="center"
19+
direction="row"
20+
spacing={1}
21+
>
22+
<BaseIcon app={app} />
23+
{app.name}
24+
<ShareIcon app={app} />
25+
</Stack>
26+
)
27+
}
28+
29+
const useStyles = makeStyles((theme) => ({
30+
appPreviewLink: {
31+
padding: theme.spacing(0.25, 1.5),
32+
borderRadius: 9999,
33+
border: `1px solid ${theme.palette.divider}`,
34+
color: theme.palette.text.primary,
35+
background: theme.palette.background.paper,
36+
flexShrink: 0,
37+
width: "fit-content",
38+
39+
"& img, & svg": {
40+
width: 14,
41+
},
42+
},
43+
}))

‎site/src/components/AppLink/BaseIcon.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { WorkspaceApp } from "api/typesGenerated"
2+
import { FC } from "react"
3+
import ComputerIcon from "@material-ui/icons/Computer"
4+
5+
export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
6+
return app.icon ? (
7+
<img alt={`${app.name} Icon`} src={app.icon} />
8+
) : (
9+
<ComputerIcon />
10+
)
11+
}

‎site/src/components/AppLink/ShareIcon.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
2+
import LockOutlinedIcon from "@material-ui/icons/LockOutlined"
3+
import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
4+
import { FC } from "react"
5+
import * as TypesGen from "../../api/typesGenerated"
6+
import Tooltip from "@material-ui/core/Tooltip"
7+
import { useTranslation } from "react-i18next"
8+
9+
export interface ShareIconProps {
10+
app: TypesGen.WorkspaceApp
11+
}
12+
13+
export const ShareIcon: FC<ShareIconProps> = ({ app }) => {
14+
const { t } = useTranslation("agent")
15+
16+
let shareIcon = <LockOutlinedIcon />
17+
let shareTooltip = t("shareTooltip.private")
18+
if (app.sharing_level === "authenticated") {
19+
shareIcon = <GroupOutlinedIcon />
20+
shareTooltip = t("shareTooltip.authenticated")
21+
}
22+
if (app.sharing_level === "public") {
23+
shareIcon = <PublicOutlinedIcon />
24+
shareTooltip = t("shareTooltip.public")
25+
}
26+
27+
return <Tooltip title={shareTooltip}>{shareIcon}</Tooltip>
28+
}

‎site/src/components/BuildsTable/BuildsTable.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export const Language = {
2222

2323
export interface BuildsTableProps {
2424
builds?: TypesGen.WorkspaceBuild[]
25-
className?: string
2625
}
2726

2827
const groupBuildsByDate = (builds?: TypesGen.WorkspaceBuild[]) => {
@@ -48,13 +47,12 @@ const groupBuildsByDate = (builds?: TypesGen.WorkspaceBuild[]) => {
4847

4948
export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
5049
builds,
51-
className,
5250
}) => {
5351
const isLoading = !builds
5452
const buildsByDate = groupBuildsByDate(builds)
5553

5654
return (
57-
<TableContainer className={className}>
55+
<TableContainer>
5856
<Table data-testid="builds-table" aria-describedby="builds table">
5957
<TableBody>
6058
{isLoading && <TableLoader />}

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