From c82d4fdd7d368cd538cda58ac34900b2881ccc41 Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Fri, 3 Jun 2022 20:18:24 +0000 Subject: [PATCH 1/3] add right arrow to build table rows --- .../components/BuildsTable/BuildsTable.tsx | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 86158e4853776..5e2b925a6095d 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" @@ -77,7 +78,10 @@ export const BuildsTable: FC = ({ builds, className }) => { - {status.status} +
+ {status.status} + +
) @@ -102,11 +106,24 @@ 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, + }, + statusCell: { + display: "flex", + justifyContent: "space-between", }, })) From 9f3bd50a90d1772a922db5e58b527c4446a33838 Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Mon, 6 Jun 2022 22:18:32 +0000 Subject: [PATCH 2/3] Add clickable rows to template and workspace list --- .../components/BuildsTable/BuildsTable.tsx | 10 ++- .../pages/TemplatesPage/TemplatesPageView.tsx | 80 +++++++++++++++---- .../WorkspacesPage/WorkspacesPageView.tsx | 68 +++++++++++++--- 3 files changed, 124 insertions(+), 34 deletions(-) diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 5e2b925a6095d..2e924c8157f4f 100644 --- a/site/src/components/BuildsTable/BuildsTable.tsx +++ b/site/src/components/BuildsTable/BuildsTable.tsx @@ -42,6 +42,7 @@ export const BuildsTable: FC = ({ builds, className }) => { {Language.durationLabel} {Language.startedAtLabel} {Language.statusLabel} + @@ -78,8 +79,10 @@ export const BuildsTable: FC = ({ builds, className }) => { -
- {status.status} + {status.status} + + +
@@ -122,8 +125,7 @@ const useStyles = makeStyles((theme) => ({ width: 20, height: 20, }, - statusCell: { + arrowCell: { display: "flex", - justifyContent: "space-between", }, })) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index c78e09be89f43..70f23a06df4a9 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 ( @@ -85,9 +89,10 @@ export const TemplatesPageView: FC = (props) => { - {Language.nameLabel} - {Language.usedByLabel} - {Language.lastUpdatedLabel} + {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 53fb77512c251..a453389f1d917 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({ @@ -190,11 +192,12 @@ export const WorkspacesPageView: FC = ({ loading, works - Name - Template - Version - Last Built - Status + Name + Template + Version + Last Built + Status + @@ -217,14 +220,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} @@ -242,6 +256,11 @@ export const WorkspacesPageView: FC = ({ loading, works {status.status} + +
+ +
+ ) })} @@ -286,4 +305,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", + }, })) From 583475514ee8592458cce69f9907d1db7e95662d Mon Sep 17 00:00:00 2001 From: Abhineet Jain Date: Tue, 7 Jun 2022 02:33:25 +0000 Subject: [PATCH 3/3] Specify 1% width for chevron right --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 12 ++++++------ site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 70f23a06df4a9..6e942c9f396bd 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -89,10 +89,10 @@ export const TemplatesPageView: FC = (props) => {
- {Language.nameLabel} - {Language.usedByLabel} - {Language.lastUpdatedLabel} - + {Language.nameLabel} + {Language.usedByLabel} + {Language.lastUpdatedLabel} + @@ -140,8 +140,8 @@ export const TemplatesPageView: FC = (props) => { - ) - })} + ) + })}
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index a453389f1d917..e1cf1fa64ed81 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -192,12 +192,12 @@ export const WorkspacesPageView: FC = ({ loading, works - Name - Template - Version - Last Built - Status - + Name + Template + Version + Last Built + Status +