From 0dd3b3f84a43ad9863311f4c82d2b2eded6122c2 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 29 Nov 2022 17:08:05 +0000 Subject: [PATCH 1/5] Add version link on workspace --- site/src/components/Stats/Stats.tsx | 3 +- .../Tooltips/HelpTooltip/HelpTooltip.tsx | 17 ++- .../Tooltips/OutdatedHelpTooltip.tsx | 26 +++- .../WorkspaceStats/WorkspaceStats.tsx | 134 +++++------------- 4 files changed, 80 insertions(+), 100 deletions(-) diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx index 1cb05d554bc8d..e06a28497c67c 100644 --- a/site/src/components/Stats/Stats.tsx +++ b/site/src/components/Stats/Stats.tsx @@ -50,9 +50,10 @@ const useStyles = makeStyles((theme) => ({ statsValue: { marginTop: theme.spacing(0.25), - display: "block", + display: "flex", wordWrap: "break-word", color: theme.palette.text.primary, + alignItems: "center", "& a": { color: theme.palette.text.primary, diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx index 9b992e6bca431..72f4721f407a2 100644 --- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx @@ -4,6 +4,7 @@ import { makeStyles } from "@material-ui/core/styles" import HelpIcon from "@material-ui/icons/HelpOutline" import OpenInNewIcon from "@material-ui/icons/OpenInNew" import React, { createContext, useContext, useRef, useState } from "react" +import { combineClasses } from "util/combineClasses" import { Stack } from "../../Stack/Stack" type Icon = typeof HelpIcon @@ -13,6 +14,9 @@ export interface HelpTooltipProps { // Useful to test on storybook open?: boolean size?: Size + icon?: Icon + iconClassName?: string + buttonClassName?: string } export const Language = { @@ -66,7 +70,14 @@ export const HelpPopover: React.FC< export const HelpTooltip: React.FC< React.PropsWithChildren -> = ({ children, open, size = "medium" }) => { +> = ({ + children, + open, + size = "medium", + icon: Icon = HelpIcon, + iconClassName, + buttonClassName, +}) => { const styles = useStyles({ size }) const anchorRef = useRef(null) const [isOpen, setIsOpen] = useState(Boolean(open)) @@ -81,7 +92,7 @@ export const HelpTooltip: React.FC< > = ({ onUpdateVersion, ariaLabel, }) => { + const styles = useStyles() + return ( - + {Language.outdatedLabel} {Language.versionTooltipText} @@ -40,3 +50,17 @@ export const OutdatedHelpTooltip: FC> = ({ ) } + +const useStyles = makeStyles(() => ({ + icon: { + color: colors.yellow[5], + }, + + button: { + opacity: 1, + + "&:hover": { + opacity: 1, + }, + }, +})) diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx index 9f62d628829c3..0bb4730c66146 100644 --- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx +++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx @@ -1,15 +1,14 @@ import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" import { OutdatedHelpTooltip } from "components/Tooltips" import { FC } from "react" import { Link as RouterLink } from "react-router-dom" -import { combineClasses } from "util/combineClasses" import { createDayString } from "util/createDayString" import { getDisplayWorkspaceBuildInitiatedBy, getDisplayWorkspaceTemplateName, } from "util/workspace" import { Workspace } from "../../api/typesGenerated" +import { Stats, StatsItem } from "components/Stats/Stats" const Language = { workspaceDetails: "Workspace Details", @@ -34,110 +33,55 @@ export const WorkspaceStats: FC = ({ quota_budget, handleUpdate, }) => { - const styles = useStyles() const initiatedBy = getDisplayWorkspaceBuildInitiatedBy( workspace.latest_build, ) const displayTemplateName = getDisplayWorkspaceTemplateName(workspace) return ( -
-
- {Language.templateLabel}: - - {displayTemplateName} - -
-
- {Language.versionLabel}: - - {workspace.outdated ? ( - - {Language.outdated} + + + {displayTemplateName} + + } + /> + + + {workspace.latest_build.template_version_name} + + + {workspace.outdated && ( - - ) : ( - Language.upToDate - )} - -
-
- {Language.lastBuiltLabel}: - - {createDayString(workspace.latest_build.created_at)} - -
-
- {Language.byLabel}: - {initiatedBy} -
+ )} + + } + /> + + {workspace.latest_build.daily_cost > 0 && ( -
- {Language.costLabel}: - - {workspace.latest_build.daily_cost} / {quota_budget} - -
+ )} -
+ ) } - -const useStyles = makeStyles((theme) => ({ - stats: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - display: "flex", - alignItems: "center", - color: theme.palette.text.secondary, - margin: "0px", - [theme.breakpoints.down("sm")]: { - display: "block", - }, - }, - - statItem: { - padding: theme.spacing(2), - paddingTop: theme.spacing(1.75), - display: "flex", - alignItems: "baseline", - gap: theme.spacing(1), - }, - - statsLabel: { - display: "block", - wordWrap: "break-word", - }, - - statsValue: { - marginTop: theme.spacing(0.25), - display: "block", - wordWrap: "break-word", - color: theme.palette.text.primary, - }, - - capitalize: { - textTransform: "capitalize", - }, - - link: { - color: theme.palette.text.primary, - fontWeight: 600, - }, - - outdatedLabel: { - color: theme.palette.error.main, - display: "flex", - alignItems: "center", - gap: theme.spacing(0.5), - }, -})) From fffcecbc3d10799c610be80ff72272d59cfaef86 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 29 Nov 2022 17:26:32 +0000 Subject: [PATCH 2/5] Display version on workspaces table --- .../WorkspacesTable/WorkspacesRow.tsx | 107 +++++++----------- .../WorkspacesTable/WorkspacesTable.tsx | 6 +- 2 files changed, 44 insertions(+), 69 deletions(-) diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx index 07beb72528337..366f1f64f1e77 100644 --- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx @@ -1,53 +1,41 @@ -import { makeStyles, Theme } from "@material-ui/core/styles" +import TableCell from "@material-ui/core/TableCell" +import { makeStyles } from "@material-ui/core/styles" import TableRow from "@material-ui/core/TableRow" import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" -import useTheme from "@material-ui/styles/useTheme" import { useActor } from "@xstate/react" import { AvatarData } from "components/AvatarData/AvatarData" import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge" +import { useClickable } from "hooks/useClickable" import { FC } from "react" import { useNavigate } from "react-router-dom" import { getDisplayWorkspaceTemplateName } from "util/workspace" import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService" import { LastUsed } from "../LastUsed/LastUsed" -import { - TableCellData, - TableCellDataPrimary, -} from "../TableCellData/TableCellData" -import { TableCellLink } from "../TableCellLink/TableCellLink" import { OutdatedHelpTooltip } from "../Tooltips" -const Language = { - upToDateLabel: "Up to date", - outdatedLabel: "Outdated", -} - -export const WorkspacesRow: FC< - React.PropsWithChildren<{ workspaceRef: WorkspaceItemMachineRef }> -> = ({ workspaceRef }) => { +export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ + workspaceRef, +}) => { const styles = useStyles() const navigate = useNavigate() - const theme: Theme = useTheme() const [workspaceState, send] = useActor(workspaceRef) const { data: workspace } = workspaceState.context const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}` const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== "" const displayTemplateName = getDisplayWorkspaceTemplateName(workspace) + const clickable = useClickable(() => { + navigate(workspacePageLink) + }) return ( { - if (event.key === "Enter") { - navigate(workspacePageLink) - } - }} - className={styles.clickableTableRow} + {...clickable} > - + - + - - {displayTemplateName} - - - - - - + {displayTemplateName} - - {workspace.outdated ? ( - - {Language.outdatedLabel} + +
+ {workspace.latest_build.template_version_name} + {workspace.outdated && ( { send("UPDATE_VERSION") }} /> - - ) : ( - - {Language.upToDateLabel} - - )} - + )} +
+ - + + + + + - - + + +
- + ) } const useStyles = makeStyles((theme) => ({ - clickableTableRow: { - "&:hover td": { - backgroundColor: theme.palette.action.hover, - }, + row: { + cursor: "pointer", "&:focus": { outline: `1px solid ${theme.palette.secondary.dark}`, - }, - - "& .MuiTableCell-root:last-child": { - paddingRight: theme.spacing(2), + outlineOffset: -1, }, }, + arrowRight: { color: theme.palette.text.secondary, width: 20, height: 20, }, + arrowCell: { display: "flex", + paddingLeft: theme.spacing(2), }, - outdatedLabel: { - color: theme.palette.error.main, - display: "flex", - alignItems: "center", - gap: theme.spacing(0.5), - }, - buildTime: { - color: theme.palette.text.secondary, - fontSize: 12, - }, + templateIconWrapper: { // Same size then the avatar component width: 36, @@ -142,4 +113,8 @@ const useStyles = makeStyles((theme) => ({ width: "100%", }, }, + + version: { + display: "flex", + }, })) diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx index 07b0e91de2c20..b20ef63b7b46f 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTable.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTable.tsx @@ -32,10 +32,10 @@ export const WorkspacesTable: FC< - {Language.name} - {Language.template} + {Language.name} + {Language.template} + {Language.version} {Language.lastUsed} - {Language.version} {Language.status} From 40c7c6969dfa9e57810080f5bb91757317431a61 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 29 Nov 2022 17:36:41 +0000 Subject: [PATCH 3/5] Add version into build logs --- site/src/components/BuildsTable/BuildRow.tsx | 24 +++++++++++++++++--- site/src/i18n/en/workspacePage.json | 3 ++- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx index 1e349f68371c2..263e88968f733 100644 --- a/site/src/components/BuildsTable/BuildRow.tsx +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -34,9 +34,18 @@ export const BuildRow: React.FC = ({ build }) => { alignItems="center" className={styles.buildWrapper} > - + -
+ = ({ build }) => { {t("buildData.duration")}:{" "} {displayWorkspaceBuildDuration(build)} + + + {t("buildData.version")}:{" "} + {build.template_version_name} + -
+ @@ -114,4 +128,8 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.text.secondary, whiteSpace: "nowrap", }, + + fullWidth: { + width: "100%", + }, })) diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json index 2ee997dccb439..2a8820daf5188 100644 --- a/site/src/i18n/en/workspacePage.json +++ b/site/src/i18n/en/workspacePage.json @@ -50,6 +50,7 @@ }, "buildData": { "reason": "Reason", - "duration": "Duration" + "duration": "Duration", + "version": "Version" } } From e19a0d3385216507554409abeb6ddcc6f04c5576 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 29 Nov 2022 17:51:22 +0000 Subject: [PATCH 4/5] Mobile adjustment --- site/src/components/Stats/Stats.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx index e06a28497c67c..fadcd302e7edd 100644 --- a/site/src/components/Stats/Stats.tsx +++ b/site/src/components/Stats/Stats.tsx @@ -30,17 +30,24 @@ const useStyles = makeStyles((theme) => ({ alignItems: "center", color: theme.palette.text.secondary, margin: "0px", + [theme.breakpoints.down("sm")]: { display: "block", + padding: theme.spacing(2), }, }, statItem: { - padding: theme.spacing(2), - paddingTop: theme.spacing(1.75), + padding: theme.spacing(1.75), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), display: "flex", alignItems: "baseline", gap: theme.spacing(1), + + [theme.breakpoints.down("sm")]: { + padding: theme.spacing(1), + }, }, statsLabel: { From 7741346bcf5ad2eb9fdf2932081c9dfa7f5698fc Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 29 Nov 2022 18:15:52 +0000 Subject: [PATCH 5/5] Fix quota budget --- site/src/components/WorkspaceStats/WorkspaceStats.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx index 0bb4730c66146..d23f007b80d83 100644 --- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx +++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx @@ -79,7 +79,9 @@ export const WorkspaceStats: FC = ({ {workspace.latest_build.daily_cost > 0 && ( )}