From 4b825099222a012d0f34d29f931830397423ad3e Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Tue, 7 Jun 2022 15:11:56 -0400 Subject: [PATCH] feat: Make workspaces, timeline, templates rows obviously clickable (#2047) * add right arrow to build table rows * Add clickable rows to template and workspace list * Specify 1% width for chevron right --- .../components/BuildsTable/BuildsTable.tsx | 23 +++++- .../pages/TemplatesPage/TemplatesPageView.tsx | 74 +++++++++++++++---- .../WorkspacesPage/WorkspacesPageView.tsx | 58 +++++++++++++-- 3 files changed, 131 insertions(+), 24 deletions(-) diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 86158e4853776..2e924c8157f4f 100644 --- a/site/src/components/BuildsTable/BuildsTable.tsx +++ b/site/src/components/BuildsTable/BuildsTable.tsx @@ -1,10 +1,11 @@ import Box from "@material-ui/core/Box" -import { makeStyles, Theme } from "@material-ui/core/styles" +import { fade, makeStyles, Theme } 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 TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" +import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import useTheme from "@material-ui/styles/useTheme" import { FC } from "react" import { useNavigate } from "react-router-dom" @@ -41,6 +42,7 @@ export const BuildsTable: FC = ({ builds, className }) => { {Language.durationLabel} {Language.startedAtLabel} {Language.statusLabel} + @@ -79,6 +81,11 @@ export const BuildsTable: FC = ({ builds, className }) => { {status.status} + +
+ +
+ ) })} @@ -102,11 +109,23 @@ const useStyles = makeStyles((theme) => ({ cursor: "pointer", "&:hover td": { - backgroundColor: theme.palette.background.default, + backgroundColor: fade(theme.palette.primary.light, 0.1), }, "&:focus": { outline: `1px solid ${theme.palette.secondary.dark}`, }, + + "& .MuiTableCell-root:last-child": { + paddingRight: theme.spacing(2), + }, + }, + arrowRight: { + color: fade(theme.palette.primary.contrastText, 0.7), + width: 20, + height: 20, + }, + arrowCell: { + display: "flex", }, })) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index c78e09be89f43..6e942c9f396bd 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -1,13 +1,15 @@ import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" +import { fade, 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 TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" +import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import { FC } from "react" +import { useNavigate } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { AvatarData } from "../../components/AvatarData/AvatarData" import { CodeExample } from "../../components/CodeExample/CodeExample" @@ -71,6 +73,8 @@ export interface TemplatesPageViewProps { export const TemplatesPageView: FC = (props) => { const styles = useStyles() + const navigate = useNavigate() + return ( @@ -88,6 +92,7 @@ export const TemplatesPageView: FC = (props) => { {Language.nameLabel} {Language.usedByLabel} {Language.lastUpdatedLabel} + @@ -104,21 +109,39 @@ export const TemplatesPageView: FC = (props) => { )} - {props.templates?.map((template) => ( - - - - + {props.templates?.map((template) => { + const navigateToTemplatePage = () => { + navigate(`/templates/${template.name}`) + } + return ( + { + if (event.key === "Enter") { + navigateToTemplatePage() + } + }} + className={styles.clickableTableRow} + > + + + - {Language.developerCount(template.workspace_owner_count)} + {Language.developerCount(template.workspace_owner_count)} - {dayjs().to(dayjs(template.updated_at))} - - ))} + {dayjs().to(dayjs(template.updated_at))} + +
+ +
+ + + ) + })} @@ -129,4 +152,27 @@ const useStyles = makeStyles((theme) => ({ emptyDescription: { maxWidth: theme.spacing(62), }, + clickableTableRow: { + cursor: "pointer", + + "&:hover td": { + backgroundColor: fade(theme.palette.primary.light, 0.1), + }, + + "&:focus": { + outline: `1px solid ${theme.palette.secondary.dark}`, + }, + + "& .MuiTableCell-root:last-child": { + paddingRight: theme.spacing(2), + }, + }, + arrowRight: { + color: fade(theme.palette.primary.contrastText, 0.7), + width: 20, + height: 20, + }, + arrowCell: { + display: "flex", + }, })) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 02d38604736a8..3d189179a48ff 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -4,7 +4,7 @@ import InputAdornment from "@material-ui/core/InputAdornment" import Link from "@material-ui/core/Link" import Menu from "@material-ui/core/Menu" import MenuItem from "@material-ui/core/MenuItem" -import { makeStyles, Theme } from "@material-ui/core/styles" +import { fade, makeStyles, Theme } 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" @@ -12,13 +12,14 @@ import TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" import TextField from "@material-ui/core/TextField" import AddCircleOutline from "@material-ui/icons/AddCircleOutline" +import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import SearchIcon from "@material-ui/icons/Search" import useTheme from "@material-ui/styles/useTheme" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import { FormikErrors, useFormik } from "formik" import { FC, useState } from "react" -import { Link as RouterLink } from "react-router-dom" +import { Link as RouterLink, useNavigate } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { AvatarData } from "../../components/AvatarData/AvatarData" import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/DropdownArrows" @@ -90,6 +91,7 @@ export interface WorkspacesPageViewProps { export const WorkspacesPageView: FC = ({ loading, workspaces, filter, onFilter }) => { const styles = useStyles() + const navigate = useNavigate() const theme: Theme = useTheme() const form = useFormik({ @@ -196,6 +198,7 @@ export const WorkspacesPageView: FC = ({ loading, works Version Last Built Status + @@ -228,14 +231,25 @@ export const WorkspacesPageView: FC = ({ loading, works {workspaces && workspaces.map((workspace) => { const status = getDisplayStatus(theme, workspace.latest_build) + const navigateToWorkspacePage = () => { + navigate(`/@${workspace.owner_name}/${workspace.name}`) + } return ( - + { + if (event.key === "Enter") { + navigateToWorkspacePage() + } + }} + className={styles.clickableTableRow} + > - + {workspace.template_name} @@ -253,6 +267,11 @@ export const WorkspacesPageView: FC = ({ loading, works {status.status} + +
+ +
+ ) })} @@ -297,4 +316,27 @@ const useStyles = makeStyles((theme) => ({ border: "none", }, }, + clickableTableRow: { + cursor: "pointer", + + "&:hover td": { + backgroundColor: fade(theme.palette.primary.light, 0.1), + }, + + "&:focus": { + outline: `1px solid ${theme.palette.secondary.dark}`, + }, + + "& .MuiTableCell-root:last-child": { + paddingRight: theme.spacing(2), + }, + }, + arrowRight: { + color: fade(theme.palette.primary.contrastText, 0.7), + width: 20, + height: 20, + }, + arrowCell: { + display: "flex", + }, }))