From cf08efb6f4760d7f91ad2656716a8e425d1e7d5e Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 24 May 2022 18:51:52 +0000
Subject: [PATCH 1/2] rfeat: Add resource type and restyle terminal link

---
 site/src/components/Resources/Resources.tsx   | 26 ++++++++++++++++++-
 .../components/TerminalLink/TerminalLink.tsx  | 13 +++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index 109020a002907..feb752e2e4113 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -58,7 +58,10 @@ export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesErr
                 if (!agent) {
                   return (
                     <TableRow>
-                      <TableCell className={styles.resourceNameCell}>{resource.name}</TableCell>
+                      <TableCell className={styles.resourceNameCell}>
+                        {resource.name}
+                        <span className={styles.resourceType}>{resource.type}</span>
+                      </TableCell>
                       <TableCell colSpan={3}></TableCell>
                     </TableRow>
                   )
@@ -71,6 +74,7 @@ export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesErr
                     {agentIndex === 0 && (
                       <TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
                         {resource.name}
+                        <span className={styles.resourceType}>{resource.type}</span>
                       </TableCell>
                     )}
 
@@ -85,6 +89,7 @@ export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesErr
                     <TableCell>
                       {agent.status === "connected" && (
                         <TerminalLink
+                          className={styles.accessLink}
                           workspaceName={workspace.name}
                           agentName={agent.name}
                           userName={workspace.owner_name}
@@ -115,8 +120,27 @@ const useStyles = makeStyles((theme) => ({
     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`,
   },
+
+  accessLink: {
+    color: theme.palette.text.secondary,
+    display: "flex",
+    alignItems: "center",
+
+    "& svg": {
+      width: 16,
+      height: 16,
+      marginRight: theme.spacing(1.5),
+    },
+  },
 }))
diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
index f8c93212103c7..0bd91004f25a5 100644
--- a/site/src/components/TerminalLink/TerminalLink.tsx
+++ b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -1,15 +1,17 @@
 import Link from "@material-ui/core/Link"
+import ComputerIcon from "@material-ui/icons/Computer"
 import React from "react"
 import * as TypesGen from "../../api/typesGenerated"
 
 export const Language = {
-  linkText: "Open in terminal",
+  linkText: "Open terminal",
 }
 
 export interface TerminalLinkProps {
   agentName?: TypesGen.WorkspaceAgent["name"]
   userName?: TypesGen.User["username"]
   workspaceName: TypesGen.Workspace["name"]
+  className?: string
 }
 
 /**
@@ -19,9 +21,14 @@ export interface TerminalLinkProps {
  * If no user name is provided "me" is used however it makes the link not
  * shareable.
  */
-export const TerminalLink: React.FC<TerminalLinkProps> = ({ agentName, userName = "me", workspaceName }) => {
+export const TerminalLink: React.FC<TerminalLinkProps> = ({ agentName, userName = "me", workspaceName, className }) => {
   return (
-    <Link href={`/${userName}/${workspaceName}${agentName ? `.${agentName}` : ""}/terminal`} target="_blank">
+    <Link
+      href={`/${userName}/${workspaceName}${agentName ? `.${agentName}` : ""}/terminal`}
+      className={className}
+      target="_blank"
+    >
+      <ComputerIcon />
       {Language.linkText}
     </Link>
   )

From f3e53b4fde813b554f7db94620835fc0b61d82d7 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Wed, 25 May 2022 13:21:49 +0000
Subject: [PATCH 2/2] Add terminal link style

---
 .../components/TerminalLink/TerminalLink.tsx  | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
index 0bd91004f25a5..0160e30910e58 100644
--- a/site/src/components/TerminalLink/TerminalLink.tsx
+++ b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -1,7 +1,9 @@
 import Link from "@material-ui/core/Link"
+import { makeStyles } from "@material-ui/core/styles"
 import ComputerIcon from "@material-ui/icons/Computer"
 import React from "react"
 import * as TypesGen from "../../api/typesGenerated"
+import { combineClasses } from "../../util/combineClasses"
 
 export const Language = {
   linkText: "Open terminal",
@@ -22,14 +24,33 @@ export interface TerminalLinkProps {
  * shareable.
  */
 export const TerminalLink: React.FC<TerminalLinkProps> = ({ agentName, userName = "me", workspaceName, className }) => {
+  const styles = useStyles()
+
   return (
     <Link
       href={`/${userName}/${workspaceName}${agentName ? `.${agentName}` : ""}/terminal`}
-      className={className}
+      className={combineClasses([styles.link, className])}
       target="_blank"
     >
-      <ComputerIcon />
+      <ComputerIcon className={styles.icon} />
       {Language.linkText}
     </Link>
   )
 }
+
+// Replicating these from accessLink style from Resources component until we
+// define if we want these styles coming from the parent or having a
+// ResourceLink component for that
+const useStyles = makeStyles((theme) => ({
+  link: {
+    color: theme.palette.text.secondary,
+    display: "flex",
+    alignItems: "center",
+  },
+
+  icon: {
+    width: 16,
+    height: 16,
+    marginRight: theme.spacing(1.5),
+  },
+}))