Skip to content

feat: Add resource type and restyle terminal link #1722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 25, 2022
Merged

feat: Add resource type and restyle terminal link #1722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf08efb
rfeat: Add resource type and restyle terminal link
BrunoQuaresma May 24, 2022
f3e53b4
Add terminal link style
BrunoQuaresma May 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion site/src/components/Resources/Resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand All @@ -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>
)}

Expand All @@ -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}
Expand Down Expand Up @@ -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),
},
},
}))
34 changes: 31 additions & 3 deletions site/src/components/TerminalLink/TerminalLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kylecarbs which makes more sense?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this to save some space 😆

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm impartial! I think it's fair to remove the in to save space, but up to you!

}

export interface TerminalLinkProps {
agentName?: TypesGen.WorkspaceAgent["name"]
userName?: TypesGen.User["username"]
workspaceName: TypesGen.Workspace["name"]
className?: string
}

/**
Expand All @@ -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),
},
}))