feat: Add resource type and restyle terminal link (coder#1722)

BrunoQuaresma · web-flow · commit 5492ab75c277 · 2022-05-25T13:32:01.000Z
diff --git 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
@@ -1,15 +1,19 @@
 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 in terminal",
+  linkText: "Open terminal",
 }
 
 export interface TerminalLinkProps {
   agentName?: TypesGen.WorkspaceAgent["name"]
   userName?: TypesGen.User["username"]
   workspaceName: TypesGen.Workspace["name"]
+  className?: string
 }
 
 /**
@@ -19,10 +23,34 @@ 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 }) => {
+  const styles = useStyles()
+
   return (
-    <Link href={`/${userName}/${workspaceName}${agentName ? `.${agentName}` : ""}/terminal`} target="_blank">
+    <Link
+      href={`/${userName}/${workspaceName}${agentName ? `.${agentName}` : ""}/terminal`}
+      className={combineClasses([styles.link, className])}
+      target="_blank"
+    >
+      <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),
+  },
+}))
