Skip to content

Commit 00e4cfe

Browse files
BrunoQuaresmaBrunoQuaresma
committed
refactor: Refactor template resources table
1 parent 046c436 commit 00e4cfe

File tree

8 files changed

+244
-210
lines changed

8 files changed

+244
-210
lines changed

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

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { Story } from "@storybook/react"
2-
import { MockWorkspace } from "../../testHelpers/renderHelpers"
2+
import {
3+
MockWorkspace,
4+
MockWorkspaceApp,
5+
} from "../../testHelpers/renderHelpers"
36
import { AppLink, AppLinkProps } from "./AppLink"
47

58
export default {
@@ -11,44 +14,54 @@ const Template: Story<AppLinkProps> = (args) => <AppLink {...args} />
1114

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

2227
export const WithoutIcon = Template.bind({})
2328
WithoutIcon.args = {
24-
username: "developer",
25-
workspaceName: MockWorkspace.name,
26-
appName: "code-server",
27-
appSharingLevel: "owner",
28-
health: "healthy",
29+
workspace: MockWorkspace,
30+
app: {
31+
...MockWorkspaceApp,
32+
name: "code-server",
33+
sharing_level: "owner",
34+
health: "healthy",
35+
},
2936
}
3037

3138
export const HealthDisabled = Template.bind({})
3239
HealthDisabled.args = {
33-
username: "developer",
34-
workspaceName: MockWorkspace.name,
35-
appName: "code-server",
36-
appSharingLevel: "owner",
37-
health: "disabled",
40+
workspace: MockWorkspace,
41+
app: {
42+
...MockWorkspaceApp,
43+
name: "code-server",
44+
sharing_level: "owner",
45+
health: "disabled",
46+
},
3847
}
3948

4049
export const HealthInitializing = Template.bind({})
4150
HealthInitializing.args = {
42-
username: "developer",
43-
workspaceName: MockWorkspace.name,
44-
appName: "code-server",
45-
health: "initializing",
51+
workspace: MockWorkspace,
52+
app: {
53+
...MockWorkspaceApp,
54+
name: "code-server",
55+
health: "initializing",
56+
},
4657
}
4758

4859
export const HealthUnhealthy = Template.bind({})
4960
HealthUnhealthy.args = {
50-
username: "developer",
51-
workspaceName: MockWorkspace.name,
52-
appName: "code-server",
53-
health: "unhealthy",
61+
workspace: MockWorkspace,
62+
app: {
63+
...MockWorkspaceApp,
64+
name: "code-server",
65+
health: "unhealthy",
66+
},
5467
}

‎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: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Button from "@material-ui/core/Button"
2+
import { makeStyles } from "@material-ui/core/styles"
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+
<Button
17+
size="small"
18+
startIcon={<BaseIcon app={app} />}
19+
endIcon={<ShareIcon app={app} />}
20+
className={styles.button}
21+
>
22+
<span className={styles.appName}>{app.name}</span>
23+
</Button>
24+
)
25+
}
26+
27+
const useStyles = makeStyles((theme) => ({
28+
button: {
29+
whiteSpace: "nowrap",
30+
cursor: "default",
31+
},
32+
33+
appName: {
34+
marginRight: theme.spacing(1),
35+
},
36+
}))

‎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: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
8+
export interface ShareIconProps {
9+
app: TypesGen.WorkspaceApp
10+
}
11+
12+
export const ShareIcon: FC<ShareIconProps> = ({ app }) => {
13+
let shareIcon = <LockOutlinedIcon />
14+
let shareTooltip = "Private, only accessible by you"
15+
if (app.sharing_level === "authenticated") {
16+
shareIcon = <GroupOutlinedIcon />
17+
shareTooltip = "Shared with all authenticated users"
18+
}
19+
if (app.sharing_level === "public") {
20+
shareIcon = <PublicOutlinedIcon />
21+
shareTooltip = "Shared publicly"
22+
}
23+
24+
return <Tooltip title={shareTooltip}>{shareIcon}</Tooltip>
25+
}

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,9 @@ export const AgentRow: FC<AgentRowProps> = ({
7575
<AppLink
7676
key={app.name}
7777
appsHost={applicationsHost}
78-
appIcon={app.icon}
79-
appName={app.name}
80-
appCommand={app.command}
81-
appSubdomain={app.subdomain}
82-
username={workspace.owner_name}
83-
workspaceName={workspace.name}
84-
agentName={agent.name}
85-
health={app.health}
86-
appSharingLevel={app.sharing_level}
78+
app={app}
79+
agent={agent}
80+
workspace={workspace}
8781
/>
8882
))}
8983

0 commit comments

Comments
 (0)