From 41b79d062af3a244e7b710a33e678dc635a5221d Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 24 Oct 2022 20:01:11 +0000 Subject: [PATCH 1/9] feat: Redesign build logs --- .../components/BuildsTable/BuildAvatar.tsx | 71 +++++++++ .../components/BuildsTable/BuildDateRow.tsx | 45 ++++++ site/src/components/BuildsTable/BuildRow.tsx | 140 ++++++++++++++++++ .../components/BuildsTable/BuildsTable.tsx | 127 +++++----------- site/src/components/Workspace/Workspace.tsx | 3 +- site/src/i18n/en/workspacePage.json | 4 + site/src/util/workspace.ts | 28 ++-- 7 files changed, 310 insertions(+), 108 deletions(-) create mode 100644 site/src/components/BuildsTable/BuildAvatar.tsx create mode 100644 site/src/components/BuildsTable/BuildDateRow.tsx create mode 100644 site/src/components/BuildsTable/BuildRow.tsx diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx new file mode 100644 index 0000000000000..b4bb8aa71d4d5 --- /dev/null +++ b/site/src/components/BuildsTable/BuildAvatar.tsx @@ -0,0 +1,71 @@ +import Avatar from "@material-ui/core/Avatar" +import Badge from "@material-ui/core/Badge" +import { Theme, useTheme, withStyles } from "@material-ui/core/styles" +import { FC } from "react" +import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined" +import PauseOutlined from "@material-ui/icons/PauseOutlined" +import DeleteOutlined from "@material-ui/icons/DeleteOutlined" +import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated" +import { getDisplayWorkspaceBuildStatus } from "util/workspace" +import { PaletteIndex } from "theme/palettes" + +interface StylesBadgeProps { + type: PaletteIndex +} + +const StyledBadge = withStyles((theme) => ({ + badge: { + backgroundColor: ({ type }: StylesBadgeProps) => theme.palette[type].light, + borderRadius: "100%", + width: 8, + minWidth: 8, + height: 8, + display: "block", + padding: 0, + }, +}))(Badge) + +const StyledAvatar = withStyles((theme) => ({ + root: { + background: theme.palette.background.paperLight, + color: theme.palette.text.primary, + border: `2px solid ${theme.palette.divider}`, + + "& svg": { + width: 24, + height: 24, + }, + }, +}))(Avatar) + +export type BuildAvatarProps = { + build: WorkspaceBuild +} + +const iconByTransition: Record = { + start: , + stop: , + delete: , +} + +export const BuildAvatar: FC = ({ build }) => { + const theme = useTheme() + const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build) + + return ( + } + > + {iconByTransition[build.transition]} + + ) +} diff --git a/site/src/components/BuildsTable/BuildDateRow.tsx b/site/src/components/BuildsTable/BuildDateRow.tsx new file mode 100644 index 0000000000000..71c7d383c8e34 --- /dev/null +++ b/site/src/components/BuildsTable/BuildDateRow.tsx @@ -0,0 +1,45 @@ +import { makeStyles } from "@material-ui/core/styles" +import TableCell from "@material-ui/core/TableCell" +import TableRow from "@material-ui/core/TableRow" +import formatRelative from "date-fns/formatRelative" + +export interface BuildDateRow { + date: Date +} + +export const BuildDateRow: React.FC = ({ date }) => { + const styles = useStyles() + // We only want the message related to the date since the time is displayed + // inside of the build row + const displayDate = formatRelative(date, new Date()).split("at")[0] + + return ( + + + {displayDate} + + + ) +} + +const useStyles = makeStyles((theme) => ({ + buildDateRow: { + background: theme.palette.background.paper, + + "&:not(:first-child) td": { + borderTop: `1px solid ${theme.palette.divider}`, + }, + }, + + buildDateCell: { + padding: `${theme.spacing(1, 4)} !important`, + background: `${theme.palette.background.paperLight} !important`, + fontSize: 12, + position: "relative", + color: theme.palette.text.secondary, + textTransform: "capitalize", + }, +})) diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx new file mode 100644 index 0000000000000..276840363328e --- /dev/null +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -0,0 +1,140 @@ +import { makeStyles } from "@material-ui/core/styles" +import TableCell from "@material-ui/core/TableCell" +import TableRow from "@material-ui/core/TableRow" +import { WorkspaceBuild } from "api/typesGenerated" +import { Stack } from "components/Stack/Stack" +import { useTranslation } from "react-i18next" +import { MONOSPACE_FONT_FAMILY } from "theme/constants" +import { + displayWorkspaceBuildDuration, + getDisplayWorkspaceBuildInitiatedBy, +} from "util/workspace" +import { BuildAvatar } from "./BuildAvatar" + +export interface BuildRowProps { + build: WorkspaceBuild +} + +export const BuildRow: React.FC = ({ build }) => { + const styles = useStyles() + const { t } = useTranslation("workspacePage") + const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(build) + + return ( + + + + + + +
+ + + {initiatedBy}{" "} + {build.reason !== "initiator" ? "automatically " : " "} + + {t(`buildTransitionMessage.${build.transition}`)} + {" "} + the workspace + + + + {new Date(build.created_at).toLocaleTimeString()} + + + + + + Reason: {build.reason} + + + + Duration:{" "} + {displayWorkspaceBuildDuration(build)} + + +
+ + + + + + ) +} + +const useStyles = makeStyles((theme) => ({ + buildRow: { + padding: theme.spacing(2, 4), + cursor: "pointer", + + "&:not(:last-child) td:before": { + position: "absolute", + top: 20, + left: 50, + display: "block", + content: "''", + height: "100%", + width: 2, + background: theme.palette.divider, + }, + }, + + buildCell: { + padding: "0 !important", + position: "relative", + borderBottom: 0, + }, + + buildRowMain: { + flex: 1, + }, + + buildResume: { + ...theme.typography.body1, + fontFamily: "inherit", + }, + + buildInfo: { + ...theme.typography.body2, + fontSize: 12, + fontFamily: "inherit", + color: theme.palette.text.secondary, + display: "block", + }, + + buildTime: { + color: theme.palette.text.secondary, + fontSize: 12, + }, + + buildRight: { + width: "auto", + }, + + buildExtraInfo: { + ...theme.typography.body2, + fontFamily: MONOSPACE_FONT_FAMILY, + color: theme.palette.text.secondary, + whiteSpace: "nowrap", + }, +})) diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 25aeddbd7442c..5f14ed5179eb5 100644 --- a/site/src/components/BuildsTable/BuildsTable.tsx +++ b/site/src/components/BuildsTable/BuildsTable.tsx @@ -1,23 +1,15 @@ import Box from "@material-ui/core/Box" -import { 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 TableContainer from "@material-ui/core/TableContainer" -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, useParams } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" -import { - displayWorkspaceBuildDuration, - getDisplayWorkspaceBuildStatus, -} from "../../util/workspace" import { EmptyState } from "../EmptyState/EmptyState" -import { TableCellLink } from "../TableCellLink/TableCellLink" import { TableLoader } from "../TableLoader/TableLoader" +import { BuildDateRow } from "./BuildDateRow" +import { BuildRow } from "./BuildRow" export const Language = { emptyMessage: "No builds found", @@ -33,75 +25,51 @@ export interface BuildsTableProps { className?: string } +const groupBuildsByDate = (builds?: TypesGen.WorkspaceBuild[]) => { + const buildsByDate: Record = {} + + if (!builds) { + return + } + + builds.forEach((build) => { + const dateKey = new Date(build.created_at).toDateString() + + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (buildsByDate[dateKey]) { + buildsByDate[dateKey].push(build) + } else { + buildsByDate[dateKey] = [build] + } + }) + + return buildsByDate +} + export const BuildsTable: FC> = ({ builds, className, }) => { - const { username, workspace: workspaceName } = useParams() const isLoading = !builds - const theme: Theme = useTheme() - const navigate = useNavigate() - const styles = useStyles() + const buildsByDate = groupBuildsByDate(builds) return ( - - - {Language.actionLabel} - {Language.durationLabel} - {Language.startedAtLabel} - {Language.statusLabel} - - - {isLoading && } - {builds && - builds.map((build) => { - const status = getDisplayWorkspaceBuildStatus(theme, build) - const buildPageLink = `/@${username}/${workspaceName}/builds/${build.build_number}` + + {buildsByDate && + Object.keys(buildsByDate).map((dateStr) => { + const builds = buildsByDate[dateStr] return ( - { - if (event.key === "Enter") { - navigate(buildPageLink) - } - }} - className={styles.clickableTableRow} - > - - {build.transition} - - - - {displayWorkspaceBuildDuration(build)} - - - - - {new Date(build.created_at).toLocaleString()} - - - - - {status.status} - - - -
- -
- - + <> + + {builds.map((build) => ( + + ))} + ) })} @@ -119,30 +87,3 @@ export const BuildsTable: FC> = ({ ) } - -const useStyles = makeStyles((theme) => ({ - clickableTableRow: { - "&:hover td": { - backgroundColor: theme.palette.action.hover, - }, - - "&:focus": { - outline: `1px solid ${theme.palette.secondary.dark}`, - }, - - "& .MuiTableCell-root:last-child": { - paddingRight: theme.spacing(2), - }, - }, - arrowRight: { - color: theme.palette.text.secondary, - width: 20, - height: 20, - }, - arrowCell: { - display: "flex", - }, - status: { - whiteSpace: "nowrap", - }, -})) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index f2c22d3864c13..564c1c910cd75 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -179,7 +179,7 @@ export const Workspace: FC> = ({ {buildError} {cancellationError} @@ -220,7 +220,6 @@ export const Workspace: FC> = ({ )} {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? ( diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json index a0901d88bf857..0765771c6c554 100644 --- a/site/src/i18n/en/workspacePage.json +++ b/site/src/i18n/en/workspacePage.json @@ -38,5 +38,9 @@ "connected": "Connected", "connecting": "Connecting...", "disconnected": "Disconnected" + }, + "buildTransitionMessage": { + "start": "started", + "stop": "stopped" } } diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts index 1e23a1cfe3717..22d74d826f7f1 100644 --- a/site/src/util/workspace.ts +++ b/site/src/util/workspace.ts @@ -4,6 +4,7 @@ import duration from "dayjs/plugin/duration" import minMax from "dayjs/plugin/minMax" import utc from "dayjs/plugin/utc" import semver from "semver" +import { PaletteIndex } from "theme/palettes" import * as TypesGen from "../api/typesGenerated" dayjs.extend(duration) @@ -29,46 +30,48 @@ export const getDisplayWorkspaceBuildStatus = ( ): { color: string status: string + type: PaletteIndex } => { switch (build.job.status) { case "succeeded": return { + type: "success", color: theme.palette.success.main, - status: `⦿ ${DisplayWorkspaceBuildStatusLanguage.succeeded}`, + status: DisplayWorkspaceBuildStatusLanguage.succeeded, } case "pending": return { + type: "secondary", color: theme.palette.text.secondary, - status: `⦿ ${DisplayWorkspaceBuildStatusLanguage.pending}`, + status: DisplayWorkspaceBuildStatusLanguage.pending, } case "running": return { + type: "info", color: theme.palette.primary.main, - status: `⦿ ${DisplayWorkspaceBuildStatusLanguage.running}`, + status: DisplayWorkspaceBuildStatusLanguage.running, } case "failed": return { + type: "error", color: theme.palette.text.secondary, - status: `⦸ ${DisplayWorkspaceBuildStatusLanguage.failed}`, + status: DisplayWorkspaceBuildStatusLanguage.failed, } case "canceling": return { + type: "warning", color: theme.palette.warning.light, - status: `◍ ${DisplayWorkspaceBuildStatusLanguage.canceling}`, + status: DisplayWorkspaceBuildStatusLanguage.canceling, } case "canceled": return { + type: "secondary", color: theme.palette.text.secondary, - status: `◍ ${DisplayWorkspaceBuildStatusLanguage.canceled}`, + status: DisplayWorkspaceBuildStatusLanguage.canceled, } } } -export const DisplayWorkspaceBuildInitiatedByLanguage = { - autostart: "system/autostart", - autostop: "system/autostop", -} - export const getDisplayWorkspaceBuildInitiatedBy = ( build: TypesGen.WorkspaceBuild, ): string => { @@ -76,9 +79,8 @@ export const getDisplayWorkspaceBuildInitiatedBy = ( case "initiator": return build.initiator_name case "autostart": - return DisplayWorkspaceBuildInitiatedByLanguage.autostart case "autostop": - return DisplayWorkspaceBuildInitiatedByLanguage.autostop + return "Coder" } } From 7e97461beca1c20dbdb032fc6f18d9b7789734ea Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 24 Oct 2022 21:03:06 +0000 Subject: [PATCH 2/9] Fix tests --- site/src/components/BuildsTable/BuildRow.tsx | 1 - site/src/components/BuildsTable/BuildsTable.tsx | 6 +++--- site/src/pages/WorkspacePage/WorkspacePage.test.tsx | 3 ++- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx index 276840363328e..571bea3042f78 100644 --- a/site/src/components/BuildsTable/BuildRow.tsx +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -23,7 +23,6 @@ export const BuildRow: React.FC = ({ build }) => { return ( diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 5f14ed5179eb5..483af405a5a60 100644 --- a/site/src/components/BuildsTable/BuildsTable.tsx +++ b/site/src/components/BuildsTable/BuildsTable.tsx @@ -4,7 +4,7 @@ import TableBody from "@material-ui/core/TableBody" import TableCell from "@material-ui/core/TableCell" import TableContainer from "@material-ui/core/TableContainer" import TableRow from "@material-ui/core/TableRow" -import { FC } from "react" +import { FC, Fragment } from "react" import * as TypesGen from "../../api/typesGenerated" import { EmptyState } from "../EmptyState/EmptyState" import { TableLoader } from "../TableLoader/TableLoader" @@ -64,12 +64,12 @@ export const BuildsTable: FC> = ({ const builds = buildsByDate[dateStr] return ( - <> + {builds.map((build) => ( ))} - + ) })} diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx index 55c36b4042f76..9e74d519434b0 100644 --- a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx +++ b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx @@ -288,7 +288,8 @@ describe("WorkspacePage", () => { // Wait for the results to be loaded await waitFor(async () => { const rows = table.querySelectorAll("tbody > tr") - expect(rows).toHaveLength(MockBuilds.length) + // Added +1 because of the date row + expect(rows).toHaveLength(MockBuilds.length + 1) }) }) }) From 24ccec43f1a0ec6f1833795c25e2bc2b29d50ed5 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 24 Oct 2022 21:08:11 +0000 Subject: [PATCH 3/9] Fix tests --- site/src/util/workspace.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/util/workspace.test.ts b/site/src/util/workspace.test.ts index 8f2a6893d13f8..333eebfd13e3f 100644 --- a/site/src/util/workspace.test.ts +++ b/site/src/util/workspace.test.ts @@ -82,14 +82,14 @@ describe("util > workspace", () => { ...Mocks.MockWorkspaceBuild, reason: "autostart", }, - "system/autostart", + "Coder", ], [ { ...Mocks.MockWorkspaceBuild, reason: "autostop", }, - "system/autostop", + "Coder", ], ])( `getDisplayWorkspaceBuildInitiatedBy(%p) returns %p`, From 6dc9cd2ef99bd4075a0a864f05e0f8478090d841 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 24 Oct 2022 21:09:07 +0000 Subject: [PATCH 4/9] Fix test --- site/src/pages/WorkspacePage/WorkspacePage.test.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx index 9e74d519434b0..0c55b342f0684 100644 --- a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx +++ b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx @@ -92,16 +92,6 @@ afterAll(() => { }) describe("WorkspacePage", () => { - it("shows a workspace", async () => { - await renderWorkspacePage() - const workspaceName = await screen.findByText(MockWorkspace.name) - expect(workspaceName).toBeDefined() - const header = screen.getByTestId("header") - const status = await within(header).findByRole("status") - expect(status).toHaveTextContent("Running") - // wait for workspace page to finish loading - await screen.findByText("stop") - }) it("requests a stop job when the user presses Stop", async () => { const stopWorkspaceMock = jest .spyOn(api, "stopWorkspace") From 19eb0cb6159ada87c4b031974131de14d36f27f5 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 24 Oct 2022 21:49:32 -0300 Subject: [PATCH 5/9] Update site/src/components/BuildsTable/BuildDateRow.tsx Co-authored-by: Kira Pilot --- site/src/components/BuildsTable/BuildDateRow.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/src/components/BuildsTable/BuildDateRow.tsx b/site/src/components/BuildsTable/BuildDateRow.tsx index 71c7d383c8e34..de9b4b627d46b 100644 --- a/site/src/components/BuildsTable/BuildDateRow.tsx +++ b/site/src/components/BuildsTable/BuildDateRow.tsx @@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles" import TableCell from "@material-ui/core/TableCell" import TableRow from "@material-ui/core/TableRow" import formatRelative from "date-fns/formatRelative" +import { FC } from "react" export interface BuildDateRow { date: Date From ef080c3088b2bf293d43d9c2bccd27fdf09cfc28 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 24 Oct 2022 21:52:06 -0300 Subject: [PATCH 6/9] Apply suggestions from code review Co-authored-by: Kira Pilot --- site/src/components/BuildsTable/BuildDateRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/BuildsTable/BuildDateRow.tsx b/site/src/components/BuildsTable/BuildDateRow.tsx index de9b4b627d46b..c7675d16d3348 100644 --- a/site/src/components/BuildsTable/BuildDateRow.tsx +++ b/site/src/components/BuildsTable/BuildDateRow.tsx @@ -8,7 +8,7 @@ export interface BuildDateRow { date: Date } -export const BuildDateRow: React.FC = ({ date }) => { +export const BuildDateRow: FC = ({ date }) => { const styles = useStyles() // We only want the message related to the date since the time is displayed // inside of the build row From a9a7baf13c963f9f89f5e7dffa01e500fc1d1b86 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 25 Oct 2022 00:59:50 +0000 Subject: [PATCH 7/9] Fix navigable build log --- site/src/components/BuildsTable/BuildRow.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx index 571bea3042f78..826b16737632e 100644 --- a/site/src/components/BuildsTable/BuildRow.tsx +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -3,7 +3,9 @@ import TableCell from "@material-ui/core/TableCell" import TableRow from "@material-ui/core/TableRow" import { WorkspaceBuild } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" +import { useClickable } from "hooks/useClickable" import { useTranslation } from "react-i18next" +import { useNavigate } from "react-router-dom" import { MONOSPACE_FONT_FAMILY } from "theme/constants" import { displayWorkspaceBuildDuration, @@ -19,12 +21,15 @@ export const BuildRow: React.FC = ({ build }) => { const styles = useStyles() const { t } = useTranslation("workspacePage") const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(build) + const navigate = useNavigate() + const clickableProps = useClickable(() => navigate(`builds/${build.id}`)) return ( Date: Tue, 25 Oct 2022 01:37:28 +0000 Subject: [PATCH 8/9] Improve translation and table row focus --- site/src/components/BuildsTable/BuildRow.tsx | 98 ++++++++++---------- site/src/i18n/en/workspacePage.json | 10 +- 2 files changed, 57 insertions(+), 51 deletions(-) diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx index 826b16737632e..da9c63ed5cc9c 100644 --- a/site/src/components/BuildsTable/BuildRow.tsx +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -22,7 +22,9 @@ export const BuildRow: React.FC = ({ build }) => { const { t } = useTranslation("workspacePage") const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(build) const navigate = useNavigate() - const clickableProps = useClickable(() => navigate(`builds/${build.id}`)) + const clickableProps = useClickable(() => + navigate(`builds/${build.build_number}`), + ) return ( = ({ build }) => { - - - -
- - - {initiatedBy}{" "} - {build.reason !== "initiator" ? "automatically " : " "} - - {t(`buildTransitionMessage.${build.transition}`)} - {" "} - the workspace - - - - {new Date(build.created_at).toLocaleTimeString()} - - - - - - Reason: {build.reason} - - - - Duration:{" "} - {displayWorkspaceBuildDuration(build)} - - -
- + + +
+ + + {initiatedBy}{" "} + {build.reason !== "initiator" + ? t("buildMessage.automatically") + : ""} + {t(`buildMessage.${build.transition}`)}{" "} + {t("buildMessage.theWorkspace")} + + + + {new Date(build.created_at).toLocaleTimeString()} + + + + + + {t("buildData.reason")}: {build.reason} + + + + {t("buildData.duration")}:{" "} + {displayWorkspaceBuildDuration(build)} + + +
@@ -88,9 +82,15 @@ export const BuildRow: React.FC = ({ build }) => { const useStyles = makeStyles((theme) => ({ buildRow: { - padding: theme.spacing(2, 4), cursor: "pointer", + "&:focus": { + outlineStyle: "solid", + outlineOffset: -1, + outlineWidth: 2, + outlineColor: theme.palette.secondary.dark, + }, + "&:not(:last-child) td:before": { position: "absolute", top: 20, @@ -103,16 +103,16 @@ const useStyles = makeStyles((theme) => ({ }, }, + buildWrapper: { + padding: theme.spacing(2, 4), + }, + buildCell: { padding: "0 !important", position: "relative", borderBottom: 0, }, - buildRowMain: { - flex: 1, - }, - buildResume: { ...theme.typography.body1, fontFamily: "inherit", diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json index 0765771c6c554..373344a96106c 100644 --- a/site/src/i18n/en/workspacePage.json +++ b/site/src/i18n/en/workspacePage.json @@ -39,8 +39,14 @@ "connecting": "Connecting...", "disconnected": "Disconnected" }, - "buildTransitionMessage": { + "buildMessage": { "start": "started", - "stop": "stopped" + "stop": "stopped", + "theWorkspace": "the workspace", + "automatically": "automatically " + }, + "buildData": { + "reason": "Reason", + "duration": "Duration" } } From b947be1f07714665cbf504ab8ebad6048b8d9c2c Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 25 Oct 2022 02:52:02 +0000 Subject: [PATCH 9/9] Fix show more resources button --- site/src/components/Resources/Resources.tsx | 3 ++- site/src/i18n/en/workspacePage.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index 2351f6ccba68a..8e7957d15b0f0 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -93,11 +93,12 @@ export const Resources: FC> = ({ ) } -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme) => ({ buttonWrapper: { display: "flex", alignItems: "center", justifyContent: "center", + marginTop: theme.spacing(2), }, showMoreButton: { diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json index 373344a96106c..d6a911964c320 100644 --- a/site/src/i18n/en/workspacePage.json +++ b/site/src/i18n/en/workspacePage.json @@ -42,6 +42,7 @@ "buildMessage": { "start": "started", "stop": "stopped", + "delete": "deleted", "theWorkspace": "the workspace", "automatically": "automatically " },