From f542eaace02904f1e44bbf93adbe26e1634a9426 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 14:13:14 +0000
Subject: [PATCH 01/13] Remove error logic from Resources

---
 .../components/BuildsTable/BuildsTable.tsx    |  4 +--
 site/src/components/Resources/Resources.tsx   |  8 +----
 site/src/components/Workspace/Workspace.tsx   | 35 ++++++++-----------
 3 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
index 483af405a5a60..6bf20ef3d2a92 100644
--- 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 />}
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index 8e7957d15b0f0..d87327b154f4c 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -11,7 +11,6 @@ import {
   WorkspaceResource,
 } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
-import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ResourceCard } from "./ResourceCard"
 
 const countAgents = (resource: WorkspaceResource) => {
@@ -20,7 +19,6 @@ const countAgents = (resource: WorkspaceResource) => {
 
 interface ResourcesProps {
   resources: WorkspaceResource[]
-  getResourcesError?: Error | unknown
   workspace: Workspace
   canUpdateWorkspace: boolean
   buildInfo?: BuildInfoResponse | undefined
@@ -30,7 +28,7 @@ interface ResourcesProps {
 
 export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   resources,
-  getResourcesError,
+
   workspace,
   canUpdateWorkspace,
   hideSSHButton,
@@ -49,10 +47,6 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
         .sort((a, b) => countAgents(b) - countAgents(a))
   const hasHideResources = resources.some((r) => r.hide)
 
-  if (getResourcesError) {
-    return <AlertBanner severity="error" error={getResourcesError} />
-  }
-
   return (
     <Stack direction="column" spacing={0}>
       {displayResources.map((resource) => {
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 2353e30d74689..f8a987564f603 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -16,7 +16,6 @@ import { WorkspaceActions } from "../WorkspaceActions/WorkspaceActions"
 import { WorkspaceDeletedBanner } from "../WorkspaceDeletedBanner/WorkspaceDeletedBanner"
 import { WorkspaceScheduleBanner } from "../WorkspaceScheduleBanner/WorkspaceScheduleBanner"
 import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceScheduleButton"
-import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
 import { AlertBanner } from "../AlertBanner/AlertBanner"
 import { useTranslation } from "react-i18next"
@@ -207,12 +206,16 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
           />
         )}
 
+        {Boolean(workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]) && (
+          <AlertBanner
+            severity="error"
+            error={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}
+          />
+        )}
+
         {typeof resources !== "undefined" && resources.length > 0 && (
           <Resources
             resources={resources}
-            getResourcesError={
-              workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]
-            }
             workspace={workspace}
             canUpdateWorkspace={canUpdateWorkspace}
             buildInfo={buildInfo}
@@ -221,18 +224,14 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
           />
         )}
 
-        <WorkspaceSection
-          contentsProps={{ className: styles.timelineContents }}
-        >
-          {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? (
-            <AlertBanner
-              severity="error"
-              error={workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR]}
-            />
-          ) : (
-            <BuildsTable builds={builds} className={styles.timelineTable} />
-          )}
-        </WorkspaceSection>
+        {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? (
+          <AlertBanner
+            severity="error"
+            error={workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR]}
+          />
+        ) : (
+          <BuildsTable builds={builds} />
+        )}
       </Stack>
     </Margins>
   )
@@ -276,9 +275,5 @@ export const useStyles = makeStyles((theme) => {
     timelineContents: {
       margin: 0,
     },
-
-    timelineTable: {
-      border: 0,
-    },
   }
 })

From 3f499e9150fdf884ee2f86cc08b0fb8e61269f5c Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 14:20:56 +0000
Subject: [PATCH 02/13] Accept different resource card

---
 site/src/components/Resources/Resources.tsx | 36 +++------------------
 site/src/components/Workspace/Workspace.tsx | 18 ++++++++---
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index d87327b154f4c..dba5dc744f5c4 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -5,13 +5,8 @@ import {
   OpenDropdown,
 } from "components/DropdownArrows/DropdownArrows"
 import { FC, useState } from "react"
-import {
-  BuildInfoResponse,
-  Workspace,
-  WorkspaceResource,
-} from "../../api/typesGenerated"
+import { WorkspaceResource } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
-import { ResourceCard } from "./ResourceCard"
 
 const countAgents = (resource: WorkspaceResource) => {
   return resource.agents ? resource.agents.length : 0
@@ -19,23 +14,13 @@ const countAgents = (resource: WorkspaceResource) => {
 
 interface ResourcesProps {
   resources: WorkspaceResource[]
-  workspace: Workspace
-  canUpdateWorkspace: boolean
-  buildInfo?: BuildInfoResponse | undefined
-  hideSSHButton?: boolean
-  applicationsHost?: string
+  resourceCard: (resource: WorkspaceResource) => JSX.Element
 }
 
 export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   resources,
-
-  workspace,
-  canUpdateWorkspace,
-  hideSSHButton,
-  applicationsHost,
-  buildInfo,
+  resourceCard,
 }) => {
-  const serverVersion = buildInfo?.version || ""
   const styles = useStyles()
   const [shouldDisplayHideResources, setShouldDisplayHideResources] =
     useState(false)
@@ -49,20 +34,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
 
   return (
     <Stack direction="column" spacing={0}>
-      {displayResources.map((resource) => {
-        return (
-          <ResourceCard
-            key={resource.id}
-            resource={resource}
-            workspace={workspace}
-            applicationsHost={applicationsHost}
-            showApps={canUpdateWorkspace}
-            hideSSHButton={hideSSHButton}
-            serverVersion={serverVersion}
-          />
-        )
-      })}
-
+      {displayResources.map(resourceCard)}
       {hasHideResources && (
         <div className={styles.buttonWrapper}>
           <Button
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index f8a987564f603..d288ac0d10651 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -23,6 +23,7 @@ import {
   EstimateTransitionTime,
   WorkspaceBuildProgress,
 } from "components/WorkspaceBuildProgress/WorkspaceBuildProgress"
+import { ResourceCard } from "components/Resources/ResourceCard"
 
 export enum WorkspaceErrors {
   GET_RESOURCES_ERROR = "getResourcesError",
@@ -86,6 +87,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   const { t } = useTranslation("workspacePage")
   const styles = useStyles()
   const navigate = useNavigate()
+  const serverVersion = buildInfo?.version || ""
   const hasTemplateIcon =
     workspace.template_icon && workspace.template_icon !== ""
 
@@ -216,11 +218,17 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
         {typeof resources !== "undefined" && resources.length > 0 && (
           <Resources
             resources={resources}
-            workspace={workspace}
-            canUpdateWorkspace={canUpdateWorkspace}
-            buildInfo={buildInfo}
-            hideSSHButton={hideSSHButton}
-            applicationsHost={applicationsHost}
+            resourceCard={(resource) => (
+              <ResourceCard
+                key={resource.id}
+                resource={resource}
+                workspace={workspace}
+                applicationsHost={applicationsHost}
+                showApps={canUpdateWorkspace}
+                hideSSHButton={hideSSHButton}
+                serverVersion={serverVersion}
+              />
+            )}
           />
         )}
 

From 046c43639c5983466ad6744c5f3d01dd9f9353e5 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 14:36:07 +0000
Subject: [PATCH 03/13] Extract agent row rendering

---
 site/src/components/Resources/AgentRow.tsx    | 153 ++++++++++++++++++
 .../src/components/Resources/ResourceCard.tsx | 152 +----------------
 site/src/components/Resources/Resources.tsx   |  15 +-
 site/src/components/Workspace/Workspace.tsx   |  10 +-
 4 files changed, 173 insertions(+), 157 deletions(-)
 create mode 100644 site/src/components/Resources/AgentRow.tsx

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
new file mode 100644
index 0000000000000..740c68681cacc
--- /dev/null
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -0,0 +1,153 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Skeleton } from "@material-ui/lab"
+import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
+import { FC } from "react"
+import { Workspace, WorkspaceAgent } from "../../api/typesGenerated"
+import { AppLink } from "../AppLink/AppLink"
+import { SSHButton } from "../SSHButton/SSHButton"
+import { Stack } from "../Stack/Stack"
+import { TerminalLink } from "../TerminalLink/TerminalLink"
+import { AgentLatency } from "./AgentLatency"
+import { AgentVersion } from "./AgentVersion"
+import { Maybe } from "components/Conditionals/Maybe"
+import { AgentStatus } from "./AgentStatus"
+
+export interface AgentRowProps {
+  agent: WorkspaceAgent
+  workspace: Workspace
+  applicationsHost: string | undefined
+  showApps: boolean
+  hideSSHButton?: boolean
+  serverVersion: string
+}
+
+export const AgentRow: FC<AgentRowProps> = ({
+  agent,
+  workspace,
+  applicationsHost,
+  showApps,
+  hideSSHButton,
+  serverVersion,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Stack
+      key={agent.id}
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      className={styles.agentRow}
+    >
+      <Stack direction="row" alignItems="baseline">
+        <div className={styles.agentStatusWrapper}>
+          <AgentStatus agent={agent} />
+        </div>
+        <div>
+          <div className={styles.agentName}>{agent.name}</div>
+          <Stack
+            direction="row"
+            alignItems="baseline"
+            className={styles.agentData}
+            spacing={1}
+          >
+            <span className={styles.agentOS}>{agent.operating_system}</span>
+
+            <Maybe condition={agent.status === "connected"}>
+              <AgentVersion agent={agent} serverVersion={serverVersion} />
+            </Maybe>
+
+            <AgentLatency agent={agent} />
+          </Stack>
+        </div>
+      </Stack>
+
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={0.5}
+        wrap="wrap"
+        maxWidth="750px"
+      >
+        {showApps && agent.status === "connected" && (
+          <>
+            {agent.apps.map((app) => (
+              <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}
+              />
+            ))}
+
+            <TerminalLink
+              workspaceName={workspace.name}
+              agentName={agent.name}
+              userName={workspace.owner_name}
+            />
+            {!hideSSHButton && (
+              <SSHButton
+                workspaceName={workspace.name}
+                agentName={agent.name}
+              />
+            )}
+            {applicationsHost !== undefined && (
+              <PortForwardButton
+                host={applicationsHost}
+                workspaceName={workspace.name}
+                agentId={agent.id}
+                agentName={agent.name}
+                username={workspace.owner_name}
+              />
+            )}
+          </>
+        )}
+        {showApps && agent.status === "connecting" && (
+          <>
+            <Skeleton width={80} height={36} variant="rect" />
+            <Skeleton width={120} height={36} variant="rect" />
+          </>
+        )}
+      </Stack>
+    </Stack>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  agentRow: {
+    padding: theme.spacing(3, 4),
+    backgroundColor: theme.palette.background.paperLight,
+    fontSize: 16,
+
+    "&:not(:last-child)": {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+    },
+  },
+
+  agentStatusWrapper: {
+    width: theme.spacing(4.5),
+    display: "flex",
+    justifyContent: "center",
+  },
+
+  agentName: {
+    fontWeight: 600,
+  },
+
+  agentOS: {
+    textTransform: "capitalize",
+  },
+
+  agentData: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    marginTop: theme.spacing(0.5),
+  },
+}))
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index d351822e21425..273a77c8ba2b6 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -1,16 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { Skeleton } from "@material-ui/lab"
-import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
 import { FC, useState } from "react"
-import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
-import { AppLink } from "../AppLink/AppLink"
-import { SSHButton } from "../SSHButton/SSHButton"
+import { WorkspaceAgent, WorkspaceResource } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
-import { TerminalLink } from "../TerminalLink/TerminalLink"
 import { ResourceAvatar } from "./ResourceAvatar"
 import { SensitiveValue } from "./SensitiveValue"
-import { AgentLatency } from "./AgentLatency"
-import { AgentVersion } from "./AgentVersion"
 import {
   OpenDropdown,
   CloseDropdown,
@@ -19,25 +12,13 @@ import IconButton from "@material-ui/core/IconButton"
 import Tooltip from "@material-ui/core/Tooltip"
 import { Maybe } from "components/Conditionals/Maybe"
 import { CopyableValue } from "components/CopyableValue/CopyableValue"
-import { AgentStatus } from "./AgentStatus"
 
 export interface ResourceCardProps {
   resource: WorkspaceResource
-  workspace: Workspace
-  applicationsHost: string | undefined
-  showApps: boolean
-  hideSSHButton?: boolean
-  serverVersion: string
+  agentRow: (agent: WorkspaceAgent) => JSX.Element
 }
 
-export const ResourceCard: FC<ResourceCardProps> = ({
-  resource,
-  workspace,
-  applicationsHost,
-  showApps,
-  hideSSHButton,
-  serverVersion,
-}) => {
+export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
   const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
     useState(false)
   const styles = useStyles()
@@ -113,102 +94,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({
       </Stack>
 
       {resource.agents && resource.agents.length > 0 && (
-        <div>
-          {resource.agents.map((agent) => {
-            return (
-              <Stack
-                key={agent.id}
-                direction="row"
-                alignItems="center"
-                justifyContent="space-between"
-                className={styles.agentRow}
-              >
-                <Stack direction="row" alignItems="baseline">
-                  <div className={styles.agentStatusWrapper}>
-                    <AgentStatus agent={agent} />
-                  </div>
-                  <div>
-                    <div className={styles.agentName}>{agent.name}</div>
-                    <Stack
-                      direction="row"
-                      alignItems="baseline"
-                      className={styles.agentData}
-                      spacing={1}
-                    >
-                      <span className={styles.agentOS}>
-                        {agent.operating_system}
-                      </span>
-
-                      <Maybe condition={agent.status === "connected"}>
-                        <AgentVersion
-                          agent={agent}
-                          serverVersion={serverVersion}
-                        />
-                      </Maybe>
-
-                      <AgentLatency agent={agent} />
-                    </Stack>
-                  </div>
-                </Stack>
-
-                <Stack
-                  direction="row"
-                  alignItems="center"
-                  spacing={0.5}
-                  wrap="wrap"
-                  maxWidth="750px"
-                >
-                  {showApps && agent.status === "connected" && (
-                    <>
-                      {agent.apps.map((app) => (
-                        <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}
-                        />
-                      ))}
-
-                      <TerminalLink
-                        workspaceName={workspace.name}
-                        agentName={agent.name}
-                        userName={workspace.owner_name}
-                      />
-                      {!hideSSHButton && (
-                        <SSHButton
-                          workspaceName={workspace.name}
-                          agentName={agent.name}
-                        />
-                      )}
-                      {applicationsHost !== undefined && (
-                        <PortForwardButton
-                          host={applicationsHost}
-                          workspaceName={workspace.name}
-                          agentId={agent.id}
-                          agentName={agent.name}
-                          username={workspace.owner_name}
-                        />
-                      )}
-                    </>
-                  )}
-                  {showApps && agent.status === "connecting" && (
-                    <>
-                      <Skeleton width={80} height={36} variant="rect" />
-                      <Skeleton width={120} height={36} variant="rect" />
-                    </>
-                  )}
-                </Stack>
-              </Stack>
-            )
-          })}
-        </div>
+        <div>{resource.agents.map(agentRow)}</div>
       )}
     </div>
   )
@@ -270,34 +156,4 @@ const useStyles = makeStyles((theme) => ({
     overflow: "hidden",
     whiteSpace: "nowrap",
   },
-
-  agentRow: {
-    padding: theme.spacing(3, 4),
-    backgroundColor: theme.palette.background.paperLight,
-    fontSize: 16,
-
-    "&:not(:last-child)": {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-  },
-
-  agentStatusWrapper: {
-    width: theme.spacing(4.5),
-    display: "flex",
-    justifyContent: "center",
-  },
-
-  agentName: {
-    fontWeight: 600,
-  },
-
-  agentOS: {
-    textTransform: "capitalize",
-  },
-
-  agentData: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.5),
-  },
 }))
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index dba5dc744f5c4..b1337ca728f65 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -5,8 +5,9 @@ import {
   OpenDropdown,
 } from "components/DropdownArrows/DropdownArrows"
 import { FC, useState } from "react"
-import { WorkspaceResource } from "../../api/typesGenerated"
+import { WorkspaceAgent, WorkspaceResource } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
+import { ResourceCard } from "./ResourceCard"
 
 const countAgents = (resource: WorkspaceResource) => {
   return resource.agents ? resource.agents.length : 0
@@ -14,12 +15,12 @@ const countAgents = (resource: WorkspaceResource) => {
 
 interface ResourcesProps {
   resources: WorkspaceResource[]
-  resourceCard: (resource: WorkspaceResource) => JSX.Element
+  agentRow: (agent: WorkspaceAgent) => JSX.Element
 }
 
 export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   resources,
-  resourceCard,
+  agentRow,
 }) => {
   const styles = useStyles()
   const [shouldDisplayHideResources, setShouldDisplayHideResources] =
@@ -34,7 +35,13 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
 
   return (
     <Stack direction="column" spacing={0}>
-      {displayResources.map(resourceCard)}
+      {displayResources.map((resource) => (
+        <ResourceCard
+          key={resource.id}
+          resource={resource}
+          agentRow={agentRow}
+        />
+      ))}
       {hasHideResources && (
         <div className={styles.buttonWrapper}>
           <Button
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index d288ac0d10651..1a560d14d4715 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -23,7 +23,7 @@ import {
   EstimateTransitionTime,
   WorkspaceBuildProgress,
 } from "components/WorkspaceBuildProgress/WorkspaceBuildProgress"
-import { ResourceCard } from "components/Resources/ResourceCard"
+import { AgentRow } from "components/Resources/AgentRow"
 
 export enum WorkspaceErrors {
   GET_RESOURCES_ERROR = "getResourcesError",
@@ -218,10 +218,10 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
         {typeof resources !== "undefined" && resources.length > 0 && (
           <Resources
             resources={resources}
-            resourceCard={(resource) => (
-              <ResourceCard
-                key={resource.id}
-                resource={resource}
+            agentRow={(agent) => (
+              <AgentRow
+                key={agent.id}
+                agent={agent}
                 workspace={workspace}
                 applicationsHost={applicationsHost}
                 showApps={canUpdateWorkspace}

From 00e4cfe979e8dad64f04bbed355ce201261b13cd Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 16:31:28 +0000
Subject: [PATCH 04/13] refactor: Refactor template resources table

---
 .../components/AppLink/AppLink.stories.tsx    |  63 +++++----
 site/src/components/AppLink/AppLink.tsx       |  82 ++++-------
 .../src/components/AppLink/AppPreviewLink.tsx |  36 +++++
 site/src/components/AppLink/BaseIcon.tsx      |  11 ++
 site/src/components/AppLink/ShareIcon.tsx     |  25 ++++
 site/src/components/Resources/AgentRow.tsx    |  12 +-
 .../components/Resources/AgentRowPreview.tsx  |  98 ++++++++++++++
 .../TemplateResourcesTable.tsx                | 127 +-----------------
 8 files changed, 244 insertions(+), 210 deletions(-)
 create mode 100644 site/src/components/AppLink/AppPreviewLink.tsx
 create mode 100644 site/src/components/AppLink/BaseIcon.tsx
 create mode 100644 site/src/components/AppLink/ShareIcon.tsx
 create mode 100644 site/src/components/Resources/AgentRowPreview.tsx

diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
index 845d1e350abc9..121520219680a 100644
--- 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
index 50477c08362ee..de8c4d485d939 100644
--- 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
new file mode 100644
index 0000000000000..0cbd8abff6f77
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..9343817e9c536
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..7bfbc91560446
--- /dev/null
+++ 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
index 740c68681cacc..80eb9b78c726b 100644
--- 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}
               />
             ))}
 
diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
new file mode 100644
index 0000000000000..b24b27a970bd1
--- /dev/null
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -0,0 +1,98 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { AppPreviewLink } from "components/AppLink/AppPreviewLink"
+import { FC } from "react"
+import { WorkspaceAgent } from "../../api/typesGenerated"
+import { Stack } from "../Stack/Stack"
+
+export interface AgentRowPreviewProps {
+  agent: WorkspaceAgent
+}
+
+export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
+  const styles = useStyles()
+
+  return (
+    <Stack
+      key={agent.id}
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      className={styles.agentRow}
+    >
+      <Stack direction="row" alignItems="baseline">
+        <div className={styles.agentStatusWrapper}>
+          <div className={styles.agentStatusPreview}></div>
+        </div>
+        <Stack alignItems="baseline" direction="row">
+          <div className={styles.agentName}>{agent.name}</div>
+          <span className={styles.agentOS}>{agent.operating_system}</span>
+        </Stack>
+      </Stack>
+
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={0.5}
+        wrap="wrap"
+        className={styles.appsColumn}
+      >
+        {agent.apps.map((app) => (
+          <AppPreviewLink key={app.name} app={app} />
+        ))}
+      </Stack>
+    </Stack>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  agentRow: {
+    padding: theme.spacing(2, 4),
+    backgroundColor: theme.palette.background.paperLight,
+    fontSize: 16,
+    position: "relative",
+
+    "&:not(:last-child)": {
+      paddingBottom: 0,
+    },
+
+    "&:after": {
+      content: "''",
+      height: "100%",
+      width: 2,
+      backgroundColor: theme.palette.divider,
+      position: "absolute",
+      top: 0,
+      left: 49,
+    },
+  },
+
+  agentStatusWrapper: {
+    width: theme.spacing(4.5),
+    display: "flex",
+    justifyContent: "center",
+  },
+
+  agentStatusPreview: {
+    width: 10,
+    height: 10,
+    border: `2px solid ${theme.palette.text.secondary}`,
+    borderRadius: "100%",
+    position: "relative",
+    zIndex: 1,
+    background: theme.palette.background.paper,
+  },
+
+  agentName: {
+    fontWeight: 600,
+  },
+
+  agentOS: {
+    textTransform: "capitalize",
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+  },
+
+  appsColumn: {
+    minWidth: "50%",
+  },
+}))
diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx
index 757bc7d2bc38d..99b9120e5a090 100644
--- a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx
+++ b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx
@@ -1,23 +1,7 @@
-import { makeStyles } from "@material-ui/core/styles"
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
-import { AvatarData } from "components/AvatarData/AvatarData"
-import { ResourceAvatar } from "components/Resources/ResourceAvatar"
+import { AgentRowPreview } from "components/Resources/AgentRowPreview"
+import { Resources } from "components/Resources/Resources"
 import { FC } from "react"
 import { WorkspaceResource } from "../../api/typesGenerated"
-import { Stack } from "../Stack/Stack"
-import { TableHeaderRow } from "../TableHeaders/TableHeaders"
-import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
-import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
-
-export const Language = {
-  resourceLabel: "Resource",
-  agentLabel: "Agent",
-}
 
 export interface TemplateResourcesProps {
   resources: WorkspaceResource[]
@@ -26,109 +10,10 @@ export interface TemplateResourcesProps {
 export const TemplateResourcesTable: FC<
   React.PropsWithChildren<TemplateResourcesProps>
 > = ({ resources }) => {
-  const styles = useStyles()
-
   return (
-    <TableContainer>
-      <Table>
-        <TableHead>
-          <TableHeaderRow>
-            <TableCell>
-              <Stack direction="row" spacing={0.5} alignItems="center">
-                {Language.resourceLabel}
-                <ResourcesHelpTooltip />
-              </Stack>
-            </TableCell>
-            <TableCell className={styles.agentColumn}>
-              <Stack direction="row" spacing={0.5} alignItems="center">
-                {Language.agentLabel}
-                <AgentHelpTooltip />
-              </Stack>
-            </TableCell>
-          </TableHeaderRow>
-        </TableHead>
-        <TableBody>
-          {resources.map((resource) => {
-            // We need to initialize the agents to display the resource
-            const agents = resource.agents ?? [null]
-            return agents.map((agent, agentIndex) => {
-              //  If there is no agent, just display the resource name
-              if (!agent) {
-                return (
-                  <TableRow key={resource.id}>
-                    <TableCell className={styles.resourceNameCell}>
-                      <AvatarData
-                        title={resource.name}
-                        subtitle={resource.type}
-                        highlightTitle
-                        avatar={<ResourceAvatar resource={resource} />}
-                      />
-                    </TableCell>
-                    <TableCell colSpan={3}></TableCell>
-                  </TableRow>
-                )
-              }
-
-              return (
-                <TableRow key={`${resource.id}-${agent.id}`}>
-                  {/* We only want to display the name in the first row because we are using rowSpan */}
-                  {/* The rowspan should be the same than the number of agents */}
-                  {agentIndex === 0 && (
-                    <TableCell
-                      className={styles.resourceNameCell}
-                      rowSpan={agents.length}
-                    >
-                      <AvatarData
-                        title={resource.name}
-                        subtitle={resource.type}
-                        highlightTitle
-                        avatar={<ResourceAvatar resource={resource} />}
-                      />
-                    </TableCell>
-                  )}
-
-                  <TableCell className={styles.agentColumn}>
-                    {agent.name}
-                    <span className={styles.operatingSystem}>
-                      {agent.operating_system}
-                    </span>
-                  </TableCell>
-                </TableRow>
-              )
-            })
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <Resources
+      resources={resources}
+      agentRow={(agent) => <AgentRowPreview key={agent.id} agent={agent} />}
+    />
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  sectionContents: {
-    margin: 0,
-  },
-
-  resourceNameCell: {
-    borderRight: `1px solid ${theme.palette.divider}`,
-  },
-
-  resourceType: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.5),
-    display: "block",
-  },
-
-  // Adds some left spacing
-  agentColumn: {
-    paddingLeft: `${theme.spacing(2)}px !important`,
-  },
-
-  operatingSystem: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.5),
-    display: "block",
-    textTransform: "capitalize",
-  },
-}))

From 49c3a4ef3bdc110fc4463374730170ae5b643ddb Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 17:04:03 +0000
Subject: [PATCH 05/13] Fix stories

---
 .../components/AppLink/AppLink.stories.tsx    |  6 ++++
 .../components/Resources/AgentRow.stories.tsx | 35 +++++++++++++++++++
 .../Resources/ResourceCard.stories.tsx        | 20 ++---------
 3 files changed, 43 insertions(+), 18 deletions(-)
 create mode 100644 site/src/components/Resources/AgentRow.stories.tsx

diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
index 121520219680a..12ac47e5b3341 100644
--- a/site/src/components/AppLink/AppLink.stories.tsx
+++ b/site/src/components/AppLink/AppLink.stories.tsx
@@ -1,6 +1,7 @@
 import { Story } from "@storybook/react"
 import {
   MockWorkspace,
+  MockWorkspaceAgent,
   MockWorkspaceApp,
 } from "../../testHelpers/renderHelpers"
 import { AppLink, AppLinkProps } from "./AppLink"
@@ -22,6 +23,7 @@ WithIcon.args = {
     sharing_level: "owner",
     health: "healthy",
   },
+  agent: MockWorkspaceAgent,
 }
 
 export const WithoutIcon = Template.bind({})
@@ -33,6 +35,7 @@ WithoutIcon.args = {
     sharing_level: "owner",
     health: "healthy",
   },
+  agent: MockWorkspaceAgent,
 }
 
 export const HealthDisabled = Template.bind({})
@@ -44,6 +47,7 @@ HealthDisabled.args = {
     sharing_level: "owner",
     health: "disabled",
   },
+  agent: MockWorkspaceAgent,
 }
 
 export const HealthInitializing = Template.bind({})
@@ -54,6 +58,7 @@ HealthInitializing.args = {
     name: "code-server",
     health: "initializing",
   },
+  agent: MockWorkspaceAgent,
 }
 
 export const HealthUnhealthy = Template.bind({})
@@ -64,4 +69,5 @@ HealthUnhealthy.args = {
     name: "code-server",
     health: "unhealthy",
   },
+  agent: MockWorkspaceAgent,
 }
diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
new file mode 100644
index 0000000000000..aaa5d322da261
--- /dev/null
+++ b/site/src/components/Resources/AgentRow.stories.tsx
@@ -0,0 +1,35 @@
+import { Story } from "@storybook/react"
+import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities"
+import { AgentRow, AgentRowProps } from "./AgentRow"
+
+export default {
+  title: "components/AgentRow",
+  component: AgentRow,
+}
+
+const Template: Story<AgentRowProps> = (args) => <AgentRow {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  agent: MockWorkspaceAgent,
+  workspace: MockWorkspace,
+  applicationsHost: "",
+  showApps: true,
+}
+
+export const HideSSHButton = Template.bind({})
+HideSSHButton.args = {
+  agent: MockWorkspaceAgent,
+  workspace: MockWorkspace,
+  applicationsHost: "",
+  showApps: true,
+  hideSSHButton: true,
+}
+
+export const NotShowingApps = Template.bind({})
+NotShowingApps.args = {
+  agent: MockWorkspaceAgent,
+  workspace: MockWorkspace,
+  applicationsHost: "",
+  showApps: false,
+}
diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx
index 25c47aaa21efe..f3b2aa076cfa2 100644
--- a/site/src/components/Resources/ResourceCard.stories.tsx
+++ b/site/src/components/Resources/ResourceCard.stories.tsx
@@ -1,10 +1,10 @@
 import { Story } from "@storybook/react"
 import {
-  MockWorkspace,
   MockWorkspaceAgent,
   MockWorkspaceApp,
   MockWorkspaceResource,
 } from "testHelpers/entities"
+import { AgentRowPreview } from "./AgentRowPreview"
 import { ResourceCard, ResourceCardProps } from "./ResourceCard"
 
 export default {
@@ -17,23 +17,7 @@ const Template: Story<ResourceCardProps> = (args) => <ResourceCard {...args} />
 export const Example = Template.bind({})
 Example.args = {
   resource: MockWorkspaceResource,
-  workspace: MockWorkspace,
-  applicationsHost: "https://dev.coder.com",
-  hideSSHButton: false,
-  showApps: true,
-  serverVersion: MockWorkspaceAgent.version,
-}
-
-export const NotShowingApps = Template.bind({})
-NotShowingApps.args = {
-  ...Example.args,
-  showApps: false,
-}
-
-export const HideSSHButton = Template.bind({})
-HideSSHButton.args = {
-  ...Example.args,
-  hideSSHButton: true,
+  agentRow: (agent) => <AgentRowPreview key={agent.id} agent={agent} />,
 }
 
 export const BunchOfApps = Template.bind({})

From 212c4efed668828de29a144dd6ab234e88959dda Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 17:42:47 +0000
Subject: [PATCH 06/13] Refactor

---
 .../src/components/AppLink/AppPreviewLink.tsx | 33 +++++-----
 .../components/Resources/AgentRowPreview.tsx  | 61 +++++++++++++------
 .../TemplateResourcesTable.test.tsx           | 44 -------------
 3 files changed, 63 insertions(+), 75 deletions(-)
 delete mode 100644 site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx

diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx
index 0cbd8abff6f77..8f342487eb256 100644
--- a/site/src/components/AppLink/AppPreviewLink.tsx
+++ b/site/src/components/AppLink/AppPreviewLink.tsx
@@ -1,5 +1,5 @@
-import Button from "@material-ui/core/Button"
 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"
@@ -13,24 +13,29 @@ export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
   const styles = useStyles()
 
   return (
-    <Button
-      size="small"
-      startIcon={<BaseIcon app={app} />}
-      endIcon={<ShareIcon app={app} />}
-      className={styles.button}
+    <Stack
+      className={styles.appPreviewLink}
+      alignItems="center"
+      direction="row"
+      spacing={1}
     >
-      <span className={styles.appName}>{app.name}</span>
-    </Button>
+      <BaseIcon app={app} />
+      {app.name}
+      <ShareIcon app={app} />
+    </Stack>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  button: {
-    whiteSpace: "nowrap",
-    cursor: "default",
-  },
+  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,
 
-  appName: {
-    marginRight: theme.spacing(1),
+    "& img, & svg": {
+      width: 14,
+    },
   },
 }))
diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
index b24b27a970bd1..7830d42447921 100644
--- a/site/src/components/Resources/AgentRowPreview.tsx
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { AppPreviewLink } from "components/AppLink/AppPreviewLink"
 import { FC } from "react"
+import { combineClasses } from "util/combineClasses"
 import { WorkspaceAgent } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
 
@@ -23,22 +24,43 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
         <div className={styles.agentStatusWrapper}>
           <div className={styles.agentStatusPreview}></div>
         </div>
-        <Stack alignItems="baseline" direction="row">
-          <div className={styles.agentName}>{agent.name}</div>
-          <span className={styles.agentOS}>{agent.operating_system}</span>
-        </Stack>
-      </Stack>
+        <Stack
+          alignItems="baseline"
+          direction="row"
+          spacing={4}
+          className={styles.agentData}
+        >
+          <Stack direction="row" alignItems="baseline" spacing={1}>
+            <span>Agent:</span>
+            <span className={styles.agentDataValue}>{agent.name}</span>
+          </Stack>
 
-      <Stack
-        direction="row"
-        alignItems="center"
-        spacing={0.5}
-        wrap="wrap"
-        className={styles.appsColumn}
-      >
-        {agent.apps.map((app) => (
-          <AppPreviewLink key={app.name} app={app} />
-        ))}
+          <Stack direction="row" alignItems="baseline" spacing={1}>
+            <span>OS:</span>
+            <span
+              className={combineClasses([
+                styles.agentDataValue,
+                styles.agentOS,
+              ])}
+            >
+              {agent.operating_system}
+            </span>
+          </Stack>
+
+          <Stack direction="row" alignItems="baseline" spacing={1}>
+            <span>Apps:</span>
+            <Stack
+              direction="row"
+              alignItems="center"
+              spacing={0.5}
+              wrap="wrap"
+            >
+              {agent.apps.map((app) => (
+                <AppPreviewLink key={app.name} app={app} />
+              ))}
+            </Stack>
+          </Stack>
+        </Stack>
       </Stack>
     </Stack>
   )
@@ -92,7 +114,12 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
   },
 
-  appsColumn: {
-    minWidth: "50%",
+  agentData: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+  },
+
+  agentDataValue: {
+    color: theme.palette.text.primary,
   },
 }))
diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx
deleted file mode 100644
index b96738d63cbfa..0000000000000
--- a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react"
-import { FC } from "react"
-import { WrapperComponent } from "../../testHelpers/renderHelpers"
-import { Language as AgentTooltipLanguage } from "../Tooltips/AgentHelpTooltip"
-import { Language as ResourceTooltipLanguage } from "../Tooltips/ResourcesHelpTooltip"
-import {
-  TemplateResourcesProps,
-  TemplateResourcesTable,
-} from "./TemplateResourcesTable"
-
-const Component: FC<React.PropsWithChildren<TemplateResourcesProps>> = (
-  props,
-) => (
-  <WrapperComponent>
-    <TemplateResourcesTable {...props} />
-  </WrapperComponent>
-)
-
-describe("TemplateResourcesTable", () => {
-  it("displays resources tooltip", () => {
-    const props: TemplateResourcesProps = {
-      resources: [],
-    }
-    render(<Component {...props} />)
-    const resourceTooltipButton = screen.getAllByRole("button")[0]
-    fireEvent.click(resourceTooltipButton)
-    const resourceTooltipTitle = screen.getByText(
-      ResourceTooltipLanguage.resourceTooltipTitle,
-    )
-    expect(resourceTooltipTitle).toBeDefined()
-  })
-  it("displays agent tooltip", () => {
-    const props: TemplateResourcesProps = {
-      resources: [],
-    }
-    render(<Component {...props} />)
-    const agentTooltipButton = screen.getAllByRole("button")[1]
-    fireEvent.click(agentTooltipButton)
-    const agentTooltipTitle = screen.getByText(
-      AgentTooltipLanguage.agentTooltipTitle,
-    )
-    expect(agentTooltipTitle).toBeDefined()
-  })
-})

From f7300f419c338132f03b0ae031878b3b1673ad19 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 18:20:55 +0000
Subject: [PATCH 07/13] Fix tests and fix mobile

---
 .../src/components/AppLink/AppPreviewLink.tsx |  2 +
 .../components/Resources/AgentRow.stories.tsx | 27 +++++++++-
 site/src/components/Resources/AgentRow.tsx    |  1 +
 .../Resources/AgentRowPreview.stories.tsx     | 35 +++++++++++++
 .../components/Resources/AgentRowPreview.tsx  | 40 ++++++++++++--
 .../Resources/ResourceCard.stories.tsx        | 52 ++++++++-----------
 6 files changed, 123 insertions(+), 34 deletions(-)
 create mode 100644 site/src/components/Resources/AgentRowPreview.stories.tsx

diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx
index 8f342487eb256..2a1415df9770d 100644
--- a/site/src/components/AppLink/AppPreviewLink.tsx
+++ b/site/src/components/AppLink/AppPreviewLink.tsx
@@ -33,6 +33,8 @@ const useStyles = makeStyles((theme) => ({
     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/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
index aaa5d322da261..f5c6b8246c0d0 100644
--- a/site/src/components/Resources/AgentRow.stories.tsx
+++ b/site/src/components/Resources/AgentRow.stories.tsx
@@ -1,5 +1,9 @@
 import { Story } from "@storybook/react"
-import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities"
+import {
+  MockWorkspace,
+  MockWorkspaceAgent,
+  MockWorkspaceApp,
+} from "testHelpers/entities"
 import { AgentRow, AgentRowProps } from "./AgentRow"
 
 export default {
@@ -33,3 +37,24 @@ NotShowingApps.args = {
   applicationsHost: "",
   showApps: false,
 }
+
+export const BunchOfApps = Template.bind({})
+BunchOfApps.args = {
+  ...Example.args,
+  agent: {
+    ...MockWorkspaceAgent,
+    apps: [
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+    ],
+  },
+  workspace: MockWorkspace,
+  applicationsHost: "",
+  showApps: true,
+}
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 80eb9b78c726b..40acef8e737e0 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -38,6 +38,7 @@ export const AgentRow: FC<AgentRowProps> = ({
       alignItems="center"
       justifyContent="space-between"
       className={styles.agentRow}
+      spacing={4}
     >
       <Stack direction="row" alignItems="baseline">
         <div className={styles.agentStatusWrapper}>
diff --git a/site/src/components/Resources/AgentRowPreview.stories.tsx b/site/src/components/Resources/AgentRowPreview.stories.tsx
new file mode 100644
index 0000000000000..86a92319e737e
--- /dev/null
+++ b/site/src/components/Resources/AgentRowPreview.stories.tsx
@@ -0,0 +1,35 @@
+import { Story } from "@storybook/react"
+import { MockWorkspaceAgent, MockWorkspaceApp } from "testHelpers/entities"
+import { AgentRowPreview, AgentRowPreviewProps } from "./AgentRowPreview"
+
+export default {
+  title: "components/AgentRowPreview",
+  component: AgentRowPreview,
+}
+
+const Template: Story<AgentRowPreviewProps> = (args) => (
+  <AgentRowPreview {...args} />
+)
+
+export const Example = Template.bind({})
+Example.args = {
+  agent: MockWorkspaceAgent,
+}
+
+export const BunchOfApps = Template.bind({})
+BunchOfApps.args = {
+  ...Example.args,
+  agent: {
+    ...MockWorkspaceAgent,
+    apps: [
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+      MockWorkspaceApp,
+    ],
+  },
+}
diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
index 7830d42447921..fb5e0671d6c10 100644
--- a/site/src/components/Resources/AgentRowPreview.tsx
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -30,12 +30,22 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
           spacing={4}
           className={styles.agentData}
         >
-          <Stack direction="row" alignItems="baseline" spacing={1}>
+          <Stack
+            direction="row"
+            alignItems="baseline"
+            spacing={1}
+            className={combineClasses([styles.noShrink, styles.agentDataItem])}
+          >
             <span>Agent:</span>
             <span className={styles.agentDataValue}>{agent.name}</span>
           </Stack>
 
-          <Stack direction="row" alignItems="baseline" spacing={1}>
+          <Stack
+            direction="row"
+            alignItems="baseline"
+            spacing={1}
+            className={combineClasses([styles.noShrink, styles.agentDataItem])}
+          >
             <span>OS:</span>
             <span
               className={combineClasses([
@@ -47,7 +57,12 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             </span>
           </Stack>
 
-          <Stack direction="row" alignItems="baseline" spacing={1}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            spacing={1}
+            className={styles.agentDataItem}
+          >
             <span>Apps:</span>
             <Stack
               direction="row"
@@ -92,6 +107,7 @@ const useStyles = makeStyles((theme) => ({
     width: theme.spacing(4.5),
     display: "flex",
     justifyContent: "center",
+    flexShrink: 0,
   },
 
   agentStatusPreview: {
@@ -117,9 +133,27 @@ const useStyles = makeStyles((theme) => ({
   agentData: {
     fontSize: 14,
     color: theme.palette.text.secondary,
+
+    [theme.breakpoints.down("md")]: {
+      gap: theme.spacing(2),
+      flexWrap: "wrap",
+    },
   },
 
   agentDataValue: {
     color: theme.palette.text.primary,
   },
+
+  noShrink: {
+    flexShrink: 0,
+  },
+
+  agentDataItem: {
+    [theme.breakpoints.down("md")]: {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: theme.spacing(1),
+      width: "fit-content",
+    },
+  },
 }))
diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx
index f3b2aa076cfa2..d131db78f1a3e 100644
--- a/site/src/components/Resources/ResourceCard.stories.tsx
+++ b/site/src/components/Resources/ResourceCard.stories.tsx
@@ -1,10 +1,6 @@
 import { Story } from "@storybook/react"
-import {
-  MockWorkspaceAgent,
-  MockWorkspaceApp,
-  MockWorkspaceResource,
-} from "testHelpers/entities"
-import { AgentRowPreview } from "./AgentRowPreview"
+import { MockWorkspace, MockWorkspaceResource } from "testHelpers/entities"
+import { AgentRow } from "./AgentRow"
 import { ResourceCard, ResourceCardProps } from "./ResourceCard"
 
 export default {
@@ -17,30 +13,16 @@ const Template: Story<ResourceCardProps> = (args) => <ResourceCard {...args} />
 export const Example = Template.bind({})
 Example.args = {
   resource: MockWorkspaceResource,
-  agentRow: (agent) => <AgentRowPreview key={agent.id} agent={agent} />,
-}
-
-export const BunchOfApps = Template.bind({})
-BunchOfApps.args = {
-  ...Example.args,
-  resource: {
-    ...MockWorkspaceResource,
-    agents: [
-      {
-        ...MockWorkspaceAgent,
-        apps: [
-          MockWorkspaceApp,
-          MockWorkspaceApp,
-          MockWorkspaceApp,
-          MockWorkspaceApp,
-          MockWorkspaceApp,
-          MockWorkspaceApp,
-          MockWorkspaceApp,
-          MockWorkspaceApp,
-        ],
-      },
-    ],
-  },
+  agentRow: (agent) => (
+    <AgentRow
+      showApps
+      key={agent.id}
+      agent={agent}
+      workspace={MockWorkspace}
+      applicationsHost=""
+      serverVersion=""
+    />
+  ),
 }
 
 export const BunchOfMetadata = Template.bind({})
@@ -86,4 +68,14 @@ BunchOfMetadata.args = {
       },
     ],
   },
+  agentRow: (agent) => (
+    <AgentRow
+      showApps
+      key={agent.id}
+      agent={agent}
+      workspace={MockWorkspace}
+      applicationsHost=""
+      serverVersion=""
+    />
+  ),
 }

From 6197cf77078a46634a6a9960d283bf7a0ee04714 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 19:26:21 +0000
Subject: [PATCH 08/13] Fix mobile breakpoints

---
 site/src/components/Resources/AgentRowPreview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
index fb5e0671d6c10..c7e528aff1196 100644
--- a/site/src/components/Resources/AgentRowPreview.tsx
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -134,7 +134,7 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 14,
     color: theme.palette.text.secondary,
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       gap: theme.spacing(2),
       flexWrap: "wrap",
     },
@@ -149,7 +149,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   agentDataItem: {
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       flexDirection: "column",
       alignItems: "flex-start",
       gap: theme.spacing(1),

From 927a68e46e666030221b1b0eb611b410b82840b0 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 16:55:58 -0300
Subject: [PATCH 09/13] Apply suggestions from code review

Co-authored-by: Kira Pilot <kira@coder.com>
---
 site/src/components/AppLink/AppPreviewLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx
index 2a1415df9770d..4d434f8963a9e 100644
--- a/site/src/components/AppLink/AppPreviewLink.tsx
+++ b/site/src/components/AppLink/AppPreviewLink.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
-import * as TypesGen from "../../api/typesGenerated"
+import * as TypesGen from "api/typesGenerated"
 import { BaseIcon } from "./BaseIcon"
 import { ShareIcon } from "./ShareIcon"
 

From 6c5cfd555154df540aab5a1abaeb346decdcd786 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 20:03:41 +0000
Subject: [PATCH 10/13] Add translation

---
 site/src/components/AppLink/ShareIcon.tsx | 9 ++++++---
 site/src/i18n/en/agent.json               | 7 +++++++
 site/src/i18n/en/index.ts                 | 2 ++
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 site/src/i18n/en/agent.json

diff --git a/site/src/components/AppLink/ShareIcon.tsx b/site/src/components/AppLink/ShareIcon.tsx
index 7bfbc91560446..64e657b3a2420 100644
--- a/site/src/components/AppLink/ShareIcon.tsx
+++ b/site/src/components/AppLink/ShareIcon.tsx
@@ -4,21 +4,24 @@ 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 = "Private, only accessible by you"
+  let shareTooltip = t("shareTooltip.private")
   if (app.sharing_level === "authenticated") {
     shareIcon = <GroupOutlinedIcon />
-    shareTooltip = "Shared with all authenticated users"
+    shareTooltip = t("shareTooltip.authenticated")
   }
   if (app.sharing_level === "public") {
     shareIcon = <PublicOutlinedIcon />
-    shareTooltip = "Shared publicly"
+    shareTooltip = t("shareTooltip.public")
   }
 
   return <Tooltip title={shareTooltip}>{shareIcon}</Tooltip>
diff --git a/site/src/i18n/en/agent.json b/site/src/i18n/en/agent.json
new file mode 100644
index 0000000000000..189837945bd74
--- /dev/null
+++ b/site/src/i18n/en/agent.json
@@ -0,0 +1,7 @@
+{
+  "shareTooltip": {
+    "private": "Private, only accessible by you",
+    "authenticated": "Shared with all authenticated users",
+    "public": "Shared publicly"
+  }
+}
diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts
index 7fd2c233630fb..f5a8efe7f2be2 100644
--- a/site/src/i18n/en/index.ts
+++ b/site/src/i18n/en/index.ts
@@ -4,6 +4,7 @@ import createWorkspacePage from "./createWorkspacePage.json"
 import templatePage from "./templatePage.json"
 import templatesPage from "./templatesPage.json"
 import workspacePage from "./workspacePage.json"
+import agent from "./agent.json"
 
 export const en = {
   common,
@@ -12,4 +13,5 @@ export const en = {
   templatePage,
   templatesPage,
   createWorkspacePage,
+  agent,
 }

From e1b3b9181c5b677fbc0e4518e3e5d4ff27327947 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 17:04:41 -0300
Subject: [PATCH 11/13] Update site/src/components/AppLink/AppLink.stories.tsx

Co-authored-by: Kira Pilot <kira@coder.com>
---
 site/src/components/AppLink/AppLink.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
index 12ac47e5b3341..a95732b521728 100644
--- a/site/src/components/AppLink/AppLink.stories.tsx
+++ b/site/src/components/AppLink/AppLink.stories.tsx
@@ -3,7 +3,7 @@ import {
   MockWorkspace,
   MockWorkspaceAgent,
   MockWorkspaceApp,
-} from "../../testHelpers/renderHelpers"
+} from "testHelpers/renderHelpers"
 import { AppLink, AppLinkProps } from "./AppLink"
 
 export default {

From ecb41a9bd4da666fd2b5900faaf7cfff648a3104 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 20:12:49 +0000
Subject: [PATCH 12/13] Add translations to preview card

---
 site/src/components/Resources/AgentRowPreview.tsx | 8 +++++---
 site/src/i18n/en/agent.json                       | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
index c7e528aff1196..d6ca1a550a1d3 100644
--- a/site/src/components/Resources/AgentRowPreview.tsx
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { AppPreviewLink } from "components/AppLink/AppPreviewLink"
 import { FC } from "react"
+import { useTranslation } from "react-i18next"
 import { combineClasses } from "util/combineClasses"
 import { WorkspaceAgent } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
@@ -11,6 +12,7 @@ export interface AgentRowPreviewProps {
 
 export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
   const styles = useStyles()
+  const { t } = useTranslation("agent")
 
   return (
     <Stack
@@ -36,7 +38,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             spacing={1}
             className={combineClasses([styles.noShrink, styles.agentDataItem])}
           >
-            <span>Agent:</span>
+            <span>{t("label.agent").toString()}:</span>
             <span className={styles.agentDataValue}>{agent.name}</span>
           </Stack>
 
@@ -46,7 +48,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             spacing={1}
             className={combineClasses([styles.noShrink, styles.agentDataItem])}
           >
-            <span>OS:</span>
+            <span>{t("label.os").toString()}:</span>
             <span
               className={combineClasses([
                 styles.agentDataValue,
@@ -63,7 +65,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             spacing={1}
             className={styles.agentDataItem}
           >
-            <span>Apps:</span>
+            <span>{t("label.apps").toString()}:</span>
             <Stack
               direction="row"
               alignItems="center"
diff --git a/site/src/i18n/en/agent.json b/site/src/i18n/en/agent.json
index 189837945bd74..cd4203bb5f368 100644
--- a/site/src/i18n/en/agent.json
+++ b/site/src/i18n/en/agent.json
@@ -3,5 +3,10 @@
     "private": "Private, only accessible by you",
     "authenticated": "Shared with all authenticated users",
     "public": "Shared publicly"
+  },
+  "labels": {
+    "agent": "Agent",
+    "os": "OS",
+    "apps": "Apps"
   }
 }

From 528bc427afd2e87d5cc71eefab2074d47556c145 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Oct 2022 20:14:19 +0000
Subject: [PATCH 13/13] Fix translations

---
 site/src/components/Resources/AgentRowPreview.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
index d6ca1a550a1d3..53e6ce0a139b4 100644
--- a/site/src/components/Resources/AgentRowPreview.tsx
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -38,7 +38,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             spacing={1}
             className={combineClasses([styles.noShrink, styles.agentDataItem])}
           >
-            <span>{t("label.agent").toString()}:</span>
+            <span>{t("labels.agent").toString()}:</span>
             <span className={styles.agentDataValue}>{agent.name}</span>
           </Stack>
 
@@ -48,7 +48,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             spacing={1}
             className={combineClasses([styles.noShrink, styles.agentDataItem])}
           >
-            <span>{t("label.os").toString()}:</span>
+            <span>{t("labels.os").toString()}:</span>
             <span
               className={combineClasses([
                 styles.agentDataValue,
@@ -65,7 +65,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             spacing={1}
             className={styles.agentDataItem}
           >
-            <span>{t("label.apps").toString()}:</span>
+            <span>{t("labels.apps").toString()}:</span>
             <Stack
               direction="row"
               alignItems="center"

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>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.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4789.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4789.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4789.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4789.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>