From cf08efb6f4760d7f91ad2656716a8e425d1e7d5e Mon Sep 17 00:00:00 2001 From: Bruno 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 = ({ resources, getResourcesErr if (!agent) { return ( - {resource.name} + + {resource.name} + {resource.type} + ) @@ -71,6 +74,7 @@ export const Resources: React.FC = ({ resources, getResourcesErr {agentIndex === 0 && ( {resource.name} + {resource.type} )} @@ -85,6 +89,7 @@ export const Resources: React.FC = ({ resources, getResourcesErr {agent.status === "connected" && ( ({ 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 = ({ agentName, userName = "me", workspaceName }) => { +export const TerminalLink: React.FC = ({ agentName, userName = "me", workspaceName, className }) => { return ( - + + {Language.linkText} ) From f3e53b4fde813b554f7db94620835fc0b61d82d7 Mon Sep 17 00:00:00 2001 From: Bruno 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 = ({ agentName, userName = "me", workspaceName, className }) => { + const styles = useStyles() + return ( - + {Language.linkText} ) } + +// 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), + }, +}))