From 48a4ea6f00256c9a83caf7c23ec98bb03c43a616 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 17 Feb 2023 16:28:04 +0000 Subject: [PATCH 1/7] Refactor editor header --- site/src/components/Pill/Pill.tsx | 4 ++- .../TemplateVersionEditor.tsx | 36 +++++++------------ .../TemplateVersionStatusBadge.tsx | 10 ++++-- site/src/theme/overrides.ts | 30 ++++++++++------ 4 files changed, 44 insertions(+), 36 deletions(-) diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx index fe27c49539828..b0e1041c0c9f6 100644 --- a/site/src/components/Pill/Pill.tsx +++ b/site/src/components/Pill/Pill.tsx @@ -9,15 +9,17 @@ export interface PillProps { text: string type?: PaletteIndex lightBorder?: boolean + title?: string } export const Pill: FC = (props) => { - const { className, icon, text = false } = props + const { className, icon, text = false, title } = props const styles = useStyles(props) return (
{icon &&
{icon}
} {text} diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx index 1f7990099ed32..03f9930d75066 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx @@ -2,9 +2,9 @@ import Button from "@material-ui/core/Button" import IconButton from "@material-ui/core/IconButton" import { makeStyles, Theme } from "@material-ui/core/styles" import Tooltip from "@material-ui/core/Tooltip" -import CreateIcon from "@material-ui/icons/AddBox" +import CreateIcon from "@material-ui/icons/AddBoxOutlined" import BuildIcon from "@material-ui/icons/BuildOutlined" -import PreviewIcon from "@material-ui/icons/Visibility" +import PreviewIcon from "@material-ui/icons/VisibilityOutlined" import { ProvisionerJobLog, Template, @@ -50,7 +50,7 @@ export interface TemplateVersionEditorProps { onUpdate: () => void } -const topbarHeight = navHeight +const topbarHeight = 80 const findInitialFile = (fileTree: FileTree): string | undefined => { let initialFile: string | undefined @@ -161,28 +161,26 @@ export const TemplateVersionEditor: FC = ({ ) } /> -
Used By: {template.active_user_count} developers
- Build Status:
- = ({ ? "Something" : "" } + size="small" + disabled={dirty || disableUpdate} + onClick={onUpdate} > - - - - + Publish version +
@@ -413,11 +402,12 @@ const useStyles = makeStyles< alignItems: "center", justifyContent: "space-between", height: topbarHeight, + background: theme.palette.background.paper, }, topbarSides: { display: "flex", alignItems: "center", - gap: 16, + gap: theme.spacing(2), }, buildStatus: { display: "flex", diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx index 5dc4c5872cb21..f336ee65ef529 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx @@ -1,7 +1,6 @@ import { TemplateVersion } from "api/typesGenerated" import { FC, ReactNode } from "react" import { PaletteIndex } from "theme/palettes" - import CircularProgress from "@material-ui/core/CircularProgress" import ErrorIcon from "@material-ui/icons/ErrorOutline" import CheckIcon from "@material-ui/icons/CheckOutlined" @@ -11,7 +10,14 @@ export const TemplateVersionStatusBadge: FC<{ version: TemplateVersion }> = ({ version }) => { const { text, icon, type } = getStatus(version) - return + return ( + + ) } const LoadingIcon: FC = () => { diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts index 561a798065b42..a971f61fde6f7 100644 --- a/site/src/theme/overrides.ts +++ b/site/src/theme/overrides.ts @@ -1,4 +1,4 @@ -import { lighten, Theme, StyleRules } from "@material-ui/core/styles" +import { Theme, StyleRules } from "@material-ui/core/styles" import { Overrides } from "@material-ui/core/styles/overrides" import { SkeletonClassKey } from "@material-ui/lab" import { colors } from "./colors" @@ -57,17 +57,20 @@ export const getOverrides = ({ contained: { boxShadow: "none", color: palette.text.primary, - backgroundColor: colors.gray[17], + backgroundColor: colors.gray[11], + borderColor: colors.gray[10], - "&:hover": { + "&:hover:not(:disabled)": { boxShadow: "none", - backgroundColor: colors.gray[17], - borderColor: lighten(palette.divider, 0.2), + backgroundColor: colors.gray[12], + borderColor: colors.gray[12], }, "&.Mui-disabled": { - backgroundColor: palette.background.paper, - color: palette.secondary.main, + color: colors.gray[9], + backgroundColor: colors.gray[14], + pointerEvents: "auto", + cursor: "not-allowed", }, }, sizeSmall: { @@ -89,10 +92,17 @@ export const getOverrides = ({ }, }, outlined: { - border: `1px solid ${palette.divider}`, + border: `1px solid ${colors.gray[11]}`, + + "&:hover:not(:disabled)": { + backgroundColor: colors.gray[14], + }, - "&:hover": { - backgroundColor: palette.action.hover, + "&.Mui-disabled": { + color: colors.gray[9], + border: `1px solid ${colors.gray[12]}`, + pointerEvents: "auto", + cursor: "not-allowed", }, }, }, From 9d02bc5d55402c004141d6c47b28e8ea7fb20d73 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 17 Feb 2023 17:35:12 +0000 Subject: [PATCH 2/7] Add sidebar styles --- .../TemplateVersionEditor/FileTreeView.tsx | 32 ++++++++++++------- .../TemplateVersionEditor.tsx | 16 ++++++---- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx index ba5b2236795c8..b0b7f41fb57b1 100644 --- a/site/src/components/TemplateVersionEditor/FileTreeView.tsx +++ b/site/src/components/TemplateVersionEditor/FileTreeView.tsx @@ -8,6 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem" import { FC, useState } from "react" import { FileTree } from "util/filetree" import { DockerIcon } from "components/Icons/DockerIcon" +import { colors } from "theme/colors" const sortFileTree = (fileTree: FileTree) => (a: string, b: string) => { const contentA = fileTree[a] @@ -98,7 +99,6 @@ export const FileTreeView: FC<{ defaultCollapseIcon={} defaultExpandIcon={} aria-label="Files" - className={styles.fileTree} > {Object.keys(fileTree) .sort(sortFileTree(fileTree)) @@ -156,23 +156,22 @@ export const FileTreeView: FC<{ } const useStyles = makeStyles((theme) => ({ - fileTree: {}, fileTreeItem: { overflow: "hidden", userSelect: "none", - "&:focus": { - "& > .MuiTreeItem-content": { - background: "rgba(255, 255, 255, 0.1)", - }, + "&:focus:not(.active) > .MuiTreeItem-content": { + background: theme.palette.action.hover, + color: theme.palette.text.primary, }, - "& > .MuiTreeItem-content:hover": { - background: theme.palette.background.paperLight, + + "&:not(:focus):not(.active) > .MuiTreeItem-content:hover": { + background: theme.palette.action.hover, color: theme.palette.text.primary, }, "& > .MuiTreeItem-content": { - padding: "1px 16px", + padding: theme.spacing(0.25, 2), color: theme.palette.text.secondary, "& svg": { @@ -182,16 +181,25 @@ const useStyles = makeStyles((theme) => ({ "& > .MuiTreeItem-label": { marginLeft: 4, - fontSize: 14, + fontSize: 13, color: "inherit", }, }, "&.active": { - background: theme.palette.background.paper, - "& > .MuiTreeItem-content": { color: theme.palette.text.primary, + background: colors.gray[13], + pointerEvents: "none", + }, + }, + + "& .MuiTreeItem-group": { + marginLeft: 0, + + // We need to find a better way to recursive padding here + "& .MuiTreeItem-content": { + paddingLeft: theme.spacing(5), }, }, }, diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx index 03f9930d75066..b07a9398dd064 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx @@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button" import IconButton from "@material-ui/core/IconButton" import { makeStyles, Theme } from "@material-ui/core/styles" import Tooltip from "@material-ui/core/Tooltip" -import CreateIcon from "@material-ui/icons/AddBoxOutlined" +import CreateIcon from "@material-ui/icons/AddOutlined" import BuildIcon from "@material-ui/icons/BuildOutlined" import PreviewIcon from "@material-ui/icons/VisibilityOutlined" import { @@ -200,7 +200,7 @@ export const TemplateVersionEditor: FC = ({
- Template Editor + Template files
Date: Fri, 17 Feb 2023 17:39:26 +0000 Subject: [PATCH 3/7] Add style to monaco editor --- site/src/components/TemplateVersionEditor/MonacoEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx index 405a71885c24c..a64b26b7112f4 100644 --- a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx +++ b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx @@ -122,7 +122,7 @@ export const MonacoEditor: FC<{ ], colors: { "editor.foreground": hslToHex(theme.palette.text.primary), - "editor.background": hslToHex(theme.palette.background.paper), + "editor.background": hslToHex(theme.palette.background.default), }, }) editor.updateOptions({ From f324355c6283e6030fc70f39530bbafddb4f2e99 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 17 Feb 2023 17:40:49 +0000 Subject: [PATCH 4/7] Adjust global fonts --- site/src/theme/globalFonts.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/site/src/theme/globalFonts.ts b/site/src/theme/globalFonts.ts index 9d17076521f23..7714377acaf72 100644 --- a/site/src/theme/globalFonts.ts +++ b/site/src/theme/globalFonts.ts @@ -4,4 +4,5 @@ import "@fontsource/ibm-plex-mono/600.css" // Main body copy font import "@fontsource/inter/300.css" import "@fontsource/inter/400.css" +import "@fontsource/inter/500.css" import "@fontsource/inter/600.css" From f97a4133af0ec412a7a80a4b2cb1f87f27c312f3 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 17 Feb 2023 18:04:14 +0000 Subject: [PATCH 5/7] Tab updates --- site/src/app.tsx | 1 + .../TemplateVersionEditor.tsx | 34 ++++++++++++++----- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/site/src/app.tsx b/site/src/app.tsx index 4b47895aa4bff..cd055cc7567ca 100644 --- a/site/src/app.tsx +++ b/site/src/app.tsx @@ -15,6 +15,7 @@ const queryClient = new QueryClient({ queries: { retry: false, cacheTime: 0, + refetchOnWindowFocus: false, }, }, }) diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx index b07a9398dd064..0ef80162ae375 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx @@ -443,7 +443,7 @@ const useStyles = makeStyles< display: "grid", width: "100%", gridTemplateColumns: (props) => - props.showBuildLogs ? "0.6fr 0.4fr" : "1fr 0fr", + props.showBuildLogs ? "1fr 1fr" : "1fr 0fr", height: `calc(100vh - ${navHeight + topbarHeight}px)`, overflow: "hidden", }, @@ -458,6 +458,8 @@ const useStyles = makeStyles< overflowY: "auto", }, panel: { + padding: theme.spacing(1), + "&.hidden": { display: "none", }, @@ -476,26 +478,42 @@ const useStyles = makeStyles< }, tab: { cursor: "pointer", - padding: "8px 12px", - fontSize: 14, + padding: theme.spacing(1.5), + fontSize: 10, + textTransform: "uppercase", + letterSpacing: "0.5px", + fontWeight: 600, background: "transparent", fontFamily: "inherit", border: 0, - color: theme.palette.text.hint, + color: theme.palette.text.secondary, transition: "150ms ease all", display: "flex", gap: 8, alignItems: "center", justifyContent: "center", + position: "relative", "& svg": { - maxWidth: 16, - maxHeight: 16, + maxWidth: 12, + maxHeight: 12, }, "&.active": { - color: "white", - background: theme.palette.background.paperLight, + color: theme.palette.text.primary, + "&:after": { + content: '""', + display: "block", + width: "100%", + height: 1, + backgroundColor: theme.palette.text.primary, + bottom: -1, + position: "absolute", + }, + }, + + "&:hover": { + color: theme.palette.text.primary, }, }, tabBar: { From e50689a8eab7bb68fb0d62d7f82568fb6c545d52 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 17 Feb 2023 18:51:36 +0000 Subject: [PATCH 6/7] Migrate a few buttons --- site/src/components/Dialogs/Dialog.tsx | 9 +++++++-- site/src/components/DropdownButton/ActionCtas.tsx | 6 +++++- .../components/DropdownButton/DropdownButton.tsx | 12 +++++++++--- .../FullPageForm/FullPageHorizontalForm.tsx | 2 +- .../SearchBarWithFilter/SearchBarWithFilter.tsx | 1 + .../TemplateLayout/TemplatePageHeader.tsx | 3 ++- site/src/components/UsersLayout/UsersLayout.tsx | 5 ++++- .../WorkspaceActionButton.tsx | 1 + .../WorkspaceScheduleButton.tsx | 1 + site/src/pages/GroupsPage/GroupPage.tsx | 5 ++++- .../StarterTemplatePageView.tsx | 1 + .../TemplateVersionPageView.tsx | 4 +++- .../src/pages/TemplatesPage/TemplatesPageView.tsx | 6 +++++- site/src/theme/overrides.ts | 15 +++++++++------ 14 files changed, 53 insertions(+), 18 deletions(-) diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx index f90868e5a2b61..cbdf4e5655159 100644 --- a/site/src/components/Dialogs/Dialog.tsx +++ b/site/src/components/Dialogs/Dialog.tsx @@ -89,11 +89,16 @@ const useButtonStyles = makeStyles((theme) => ({ backgroundColor: colors.red[10], borderColor: colors.red[9], color: theme.palette.text.primary, - "&:hover": { + + "&:hover:not(:disabled)": { backgroundColor: colors.red[9], + borderColor: colors.red[9], }, + "&.Mui-disabled": { - opacity: 0.5, + backgroundColor: colors.red[15], + borderColor: colors.red[15], + color: colors.red[9], }, }, }, diff --git a/site/src/components/DropdownButton/ActionCtas.tsx b/site/src/components/DropdownButton/ActionCtas.tsx index 8be23778a6a85..714c71bcd906a 100644 --- a/site/src/components/DropdownButton/ActionCtas.tsx +++ b/site/src/components/DropdownButton/ActionCtas.tsx @@ -26,6 +26,7 @@ export const UpdateButton: FC> = ({ return ( ) @@ -167,6 +170,7 @@ export const ActionLoadingButton: FC> = ({ return ( diff --git a/site/src/components/DropdownButton/DropdownButton.tsx b/site/src/components/DropdownButton/DropdownButton.tsx index c4067f9293ecc..11c54b0812bf4 100644 --- a/site/src/components/DropdownButton/DropdownButton.tsx +++ b/site/src/components/DropdownButton/DropdownButton.tsx @@ -41,6 +41,7 @@ export const DropdownButton: FC = ({ <> {/* popover toggle button */} } diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx index 31267a5e93245..4d73496ecf6c2 100644 --- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx +++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx @@ -77,6 +77,7 @@ export const SearchBarWithFilter: React.FC< {presetFilters && presetFilters.length > 0 && ( ) diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx index b7cd81aa5367e..7cf2f5d37f6d2 100644 --- a/site/src/components/UsersLayout/UsersLayout.tsx +++ b/site/src/components/UsersLayout/UsersLayout.tsx @@ -37,6 +37,7 @@ export const UsersLayout: FC = () => { {canCreateUser && authMethods.context.authMethods?.password.enabled && ( + )} diff --git a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx index 1cfbd0c17b482..594cd23b75adf 100644 --- a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx +++ b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx @@ -14,6 +14,7 @@ export const WorkspaceActionButton: FC< > = ({ label, icon, onClick, className, ariaLabel }) => { return ( + + ) : undefined } diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 762339ad5898c..d953dbe6119e0 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -151,7 +151,11 @@ export const TemplatesPageView: FC< -