refactor: Refactor template resources table

coder · BrunoQuaresma · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022
commit 00e4cfe979e8dad64f04bbed355ce201261b13cd
diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
@@ -1,5 +1,8 @@
 import { Story } from "@storybook/react"
-import { MockWorkspace } from "../../testHelpers/renderHelpers"
+import {
+  MockWorkspace,
+  MockWorkspaceApp,
+} from "../../testHelpers/renderHelpers"
 import { AppLink, AppLinkProps } from "./AppLink"
 
 export default {
@@ -11,44 +14,54 @@ const Template: Story<AppLinkProps> = (args) => <AppLink {...args} />
 
 export const WithIcon = Template.bind({})
 WithIcon.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appName: "code-server",
-  appIcon: "/icon/code.svg",
-  appSharingLevel: "owner",
-  health: "healthy",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    icon: "/icon/code.svg",
+    sharing_level: "owner",
+    health: "healthy",
+  },
 }
 
 export const WithoutIcon = Template.bind({})
 WithoutIcon.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appName: "code-server",
-  appSharingLevel: "owner",
-  health: "healthy",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    sharing_level: "owner",
+    health: "healthy",
+  },
 }
 
 export const HealthDisabled = Template.bind({})
 HealthDisabled.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appName: "code-server",
-  appSharingLevel: "owner",
-  health: "disabled",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    sharing_level: "owner",
+    health: "disabled",
+  },
 }
 
 export const HealthInitializing = Template.bind({})
 HealthInitializing.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appName: "code-server",
-  health: "initializing",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    health: "initializing",
+  },
 }
 
 export const HealthUnhealthy = Template.bind({})
 HealthUnhealthy.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appName: "code-server",
-  health: "unhealthy",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    health: "unhealthy",
+  },
 }
diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -3,14 +3,12 @@ import CircularProgress from "@material-ui/core/CircularProgress"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
-import ComputerIcon from "@material-ui/icons/Computer"
-import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
-import LockOutlinedIcon from "@material-ui/icons/LockOutlined"
-import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
-import { FC, PropsWithChildren } from "react"
+import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../util/random"
+import { BaseIcon } from "./BaseIcon"
+import { ShareIcon } from "./ShareIcon"
 
 export const Language = {
   appTitle: (appName: string, identifier: string): string =>
@@ -19,76 +17,50 @@ export const Language = {
 
 export interface AppLinkProps {
   appsHost?: string
-  username: TypesGen.User["username"]
-  workspaceName: TypesGen.Workspace["name"]
-  agentName: TypesGen.WorkspaceAgent["name"]
-  appName: TypesGen.WorkspaceApp["name"]
-  appIcon?: TypesGen.WorkspaceApp["icon"]
-  appCommand?: TypesGen.WorkspaceApp["command"]
-  appSubdomain: TypesGen.WorkspaceApp["subdomain"]
-  appSharingLevel: TypesGen.WorkspaceApp["sharing_level"]
-  health: TypesGen.WorkspaceApp["health"]
+  workspace: TypesGen.Workspace
+  app: TypesGen.WorkspaceApp
+  agent: TypesGen.WorkspaceAgent
 }
 
-export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
+export const AppLink: FC<AppLinkProps> = ({
   appsHost,
-  username,
-  workspaceName,
-  agentName,
-  appName,
-  appIcon,
-  appCommand,
-  appSubdomain,
-  appSharingLevel,
-  health,
+  app,
+  workspace,
+  agent,
 }) => {
   const styles = useStyles()
+  const username = workspace.owner_name
 
   // The backend redirects if the trailing slash isn't included, so we add it
   // here to avoid extra roundtrips.
-  let href = `/@${username}/${workspaceName}.${agentName}/apps/${encodeURIComponent(
-    appName,
-  )}/`
-  if (appCommand) {
-    href = `/@${username}/${workspaceName}.${agentName}/terminal?command=${encodeURIComponent(
-      appCommand,
-    )}`
+  let href = `/@${username}/${workspace.name}.${
+    agent.name
+  }/apps/${encodeURIComponent(app.name)}/`
+  if (app.command) {
+    href = `/@${username}/${workspace.name}.${
+      agent.name
+    }/terminal?command=${encodeURIComponent(app.command)}`
   }
-  if (appsHost && appSubdomain) {
-    const subdomain = `${appName}--${agentName}--${workspaceName}--${username}`
+  if (appsHost && app.subdomain) {
+    const subdomain = `${app.name}--${agent.name}--${workspace.name}--${username}`
     href = `${window.location.protocol}//${appsHost}/`.replace("*", subdomain)
   }
 
   let canClick = true
-  let icon = appIcon ? (
-    <img alt={`${appName} Icon`} src={appIcon} />
-  ) : (
-    <ComputerIcon />
-  )
-
-  let shareIcon = <LockOutlinedIcon />
-  let shareTooltip = "Private, only accessible by you"
-  if (appSharingLevel === "authenticated") {
-    shareIcon = <GroupOutlinedIcon />
-    shareTooltip = "Shared with all authenticated users"
-  }
-  if (appSharingLevel === "public") {
-    shareIcon = <PublicOutlinedIcon />
-    shareTooltip = "Shared publicly"
-  }
+  let icon = <BaseIcon app={app} />
 
   let primaryTooltip = ""
-  if (health === "initializing") {
+  if (app.health === "initializing") {
     canClick = false
     icon = <CircularProgress size={16} />
     primaryTooltip = "Initializing..."
   }
-  if (health === "unhealthy") {
+  if (app.health === "unhealthy") {
     canClick = false
     icon = <ErrorOutlineIcon className={styles.unhealthyIcon} />
     primaryTooltip = "Unhealthy"
   }
-  if (!appsHost && appSubdomain) {
+  if (!appsHost && app.subdomain) {
     canClick = false
     icon = <ErrorOutlineIcon className={styles.notConfiguredIcon} />
     primaryTooltip =
@@ -99,11 +71,11 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
     <Button
       size="small"
       startIcon={icon}
-      endIcon={<Tooltip title={shareTooltip}>{shareIcon}</Tooltip>}
+      endIcon={<ShareIcon app={app} />}
       className={styles.button}
       disabled={!canClick}
     >
-      <span className={styles.appName}>{appName}</span>
+      <span className={styles.appName}>{app.name}</span>
     </Button>
   )
 
@@ -120,7 +92,7 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
                   event.preventDefault()
                   window.open(
                     href,
-                    Language.appTitle(appName, generateRandomString(12)),
+                    Language.appTitle(app.name, generateRandomString(12)),
                     "width=900,height=600",
                   )
                 }

diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx
@@ -0,0 +1,36 @@
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
+import { FC } from "react"
+import * as TypesGen from "../../api/typesGenerated"
+import { BaseIcon } from "./BaseIcon"
+import { ShareIcon } from "./ShareIcon"
+
+export interface AppPreviewProps {
+  app: TypesGen.WorkspaceApp
+}
+
+export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
+  const styles = useStyles()
+
+  return (
+    <Button
+      size="small"
+      startIcon={<BaseIcon app={app} />}
+      endIcon={<ShareIcon app={app} />}
+      className={styles.button}
+    >
+      <span className={styles.appName}>{app.name}</span>
+    </Button>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    whiteSpace: "nowrap",
+    cursor: "default",
+  },
+
+  appName: {
+    marginRight: theme.spacing(1),
+  },
+}))
diff --git a/site/src/components/AppLink/BaseIcon.tsx b/site/src/components/AppLink/BaseIcon.tsx
@@ -0,0 +1,11 @@
+import { WorkspaceApp } from "api/typesGenerated"
+import { FC } from "react"
+import ComputerIcon from "@material-ui/icons/Computer"
+
+export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
+  return app.icon ? (
+    <img alt={`${app.name} Icon`} src={app.icon} />
+  ) : (
+    <ComputerIcon />
+  )
+}
diff --git a/site/src/components/AppLink/ShareIcon.tsx b/site/src/components/AppLink/ShareIcon.tsx
@@ -0,0 +1,25 @@
+import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined"
+import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
+import { FC } from "react"
+import * as TypesGen from "../../api/typesGenerated"
+import Tooltip from "@material-ui/core/Tooltip"
+
+export interface ShareIconProps {
+  app: TypesGen.WorkspaceApp
+}
+
+export const ShareIcon: FC<ShareIconProps> = ({ app }) => {
+  let shareIcon = <LockOutlinedIcon />
+  let shareTooltip = "Private, only accessible by you"
+  if (app.sharing_level === "authenticated") {
+    shareIcon = <GroupOutlinedIcon />
+    shareTooltip = "Shared with all authenticated users"
+  }
+  if (app.sharing_level === "public") {
+    shareIcon = <PublicOutlinedIcon />
+    shareTooltip = "Shared publicly"
+  }
+
+  return <Tooltip title={shareTooltip}>{shareIcon}</Tooltip>
+}
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -75,15 +75,9 @@ export const AgentRow: FC<AgentRowProps> = ({
               <AppLink
                 key={app.name}
                 appsHost={applicationsHost}
-                appIcon={app.icon}
-                appName={app.name}
-                appCommand={app.command}
-                appSubdomain={app.subdomain}
-                username={workspace.owner_name}
-                workspaceName={workspace.name}
-                agentName={agent.name}
-                health={app.health}
-                appSharingLevel={app.sharing_level}
+                app={app}
+                agent={agent}
+                workspace={workspace}
               />
             ))}