coder · BrunoQuaresma · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022
diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
@@ -1,5 +1,9 @@
 import { Story } from "@storybook/react"
-import { MockWorkspace } from "../../testHelpers/renderHelpers"
+import {
+  MockWorkspace,
+  MockWorkspaceAgent,
+  MockWorkspaceApp,
+} from "testHelpers/renderHelpers"
 import { AppLink, AppLinkProps } from "./AppLink"
 
 export default {
@@ -11,44 +15,59 @@ 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",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 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",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 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",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 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",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 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",
+  },
+  agent: MockWorkspaceAgent,
 }
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,43 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Stack } from "components/Stack/Stack"
+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 (
+    <Stack
+      className={styles.appPreviewLink}
+      alignItems="center"
+      direction="row"
+      spacing={1}
+    >
+      <BaseIcon app={app} />
+      {app.name}
+      <ShareIcon app={app} />
+    </Stack>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  appPreviewLink: {
+    padding: theme.spacing(0.25, 1.5),
+    borderRadius: 9999,
+    border: `1px solid ${theme.palette.divider}`,
+    color: theme.palette.text.primary,
+    background: theme.palette.background.paper,
+    flexShrink: 0,
+    width: "fit-content",
+
+    "& img, & svg": {
+      width: 14,
+    },
+  },
+}))
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,28 @@
+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"
+import { useTranslation } from "react-i18next"
+
+export interface ShareIconProps {
+  app: TypesGen.WorkspaceApp
+}
+
+export const ShareIcon: FC<ShareIconProps> = ({ app }) => {
+  const { t } = useTranslation("agent")
+
+  let shareIcon = <LockOutlinedIcon />
+  let shareTooltip = t("shareTooltip.private")
+  if (app.sharing_level === "authenticated") {
+    shareIcon = <GroupOutlinedIcon />
+    shareTooltip = t("shareTooltip.authenticated")
+  }
+  if (app.sharing_level === "public") {
+    shareIcon = <PublicOutlinedIcon />
+    shareTooltip = t("shareTooltip.public")
+  }
+
+  return <Tooltip title={shareTooltip}>{shareIcon}</Tooltip>
+}
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -22,7 +22,6 @@ export const Language = {
 
 export interface BuildsTableProps {
   builds?: TypesGen.WorkspaceBuild[]
-  className?: string
 }
 
 const groupBuildsByDate = (builds?: TypesGen.WorkspaceBuild[]) => {
@@ -48,13 +47,12 @@ const groupBuildsByDate = (builds?: TypesGen.WorkspaceBuild[]) => {
 
 export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
   builds,
-  className,
 }) => {
   const isLoading = !builds
   const buildsByDate = groupBuildsByDate(builds)
 
   return (
-    <TableContainer className={className}>
+    <TableContainer>
       <Table data-testid="builds-table" aria-describedby="builds table">
         <TableBody>
           {isLoading && <TableLoader />}