opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(site): add minor workspace improvements (#11822)

Browse Source
This commit is contained in:
Bruno Quaresma
2024-01-25 21:05:29 -03:00
committed by GitHub
parent 73a6899f2c
commit e371716b38
8 changed files with 101 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/@types/mui.d.ts
Vendored
+2
View File
@@ -3,10 +3,12 @@ import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
declare module "@mui/material/styles" {
interface Palette {
neutral: PaletteColor;
dots: string;
}
interface PaletteOptions {
neutral?: PaletteColorOptions;
dots?: string;
}
}
site/src/components/Resources/AgentMetadata.tsx
+1 -1
View File
@@ -248,7 +248,7 @@ const styles = {
},
metadataValueSuccess: (theme) => ({
color: theme.experimental.roles.success.outline,
color: theme.experimental.roles.success.fill,
}),
metadataValueError: (theme) => ({
site/src/components/Resources/AgentRow.tsx
+7 -7
View File
@@ -509,6 +509,7 @@ const styles = {
border: `1px solid ${theme.palette.text.secondary}`,
backgroundColor: theme.palette.background.default,
borderRadius: 8,
boxShadow: theme.shadows[3],
}),
"agentRow-connected": (theme) => ({
@@ -562,14 +563,13 @@ const styles = {
}),
header: (theme) => ({
padding: "12px 24px",
padding: "16px 16px 0 32px",
display: "flex",
gap: 24,
alignItems: "center",
justifyContent: "space-between",
flexWrap: "wrap",
lineHeight: "1.5",
borderBottom: `1px solid ${theme.palette.divider}`,
[theme.breakpoints.down("md")]: {
gap: 16,
@@ -581,7 +581,7 @@ const styles = {
alignItems: "center",
gap: 24,
color: theme.palette.text.secondary,
fontSize: 13,
fontSize: 14,
}),
agentNameAndInfo: (theme) => ({
@@ -596,7 +596,7 @@ const styles = {
}),
content: {
padding: "32px 24px",
padding: 32,
display: "flex",
flexDirection: "column",
gap: 32,
@@ -637,7 +637,7 @@ const styles = {
agentNameAndStatus: (theme) => ({
display: "flex",
alignItems: "center",
gap: 12,
gap: 16,
[theme.breakpoints.down("md")]: {
width: "100%",
@@ -652,7 +652,7 @@ const styles = {
fontWeight: 600,
flexShrink: 0,
width: "fit-content",
fontSize: 14,
fontSize: 16,
color: theme.palette.text.primary,
[theme.breakpoints.down("md")]: {
@@ -682,7 +682,7 @@ const styles = {
background: "transparent",
border: 0,
fontFamily: "inherit",
padding: "12px 24px",
padding: "16px 32px",
color: theme.palette.text.secondary,
cursor: "pointer",
display: "flex",
site/src/pages/WorkspacePage/ResourceMetadata.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ const styles = {
rowGap: 24,
marginBottom: 24,
fontSize: 14,
background: `linear-gradient(180deg, ${theme.palette.background.default} 0%, rgba(0, 0, 0, 0) 100%)`,
background: `linear-gradient(180deg, ${theme.palette.background.default} 25%, rgba(0, 0, 0, 0) 100%)`,
}),
item: () => ({
site/src/pages/WorkspacePage/Workspace.tsx
+87 -93
View File
@@ -182,101 +182,97 @@ export const Workspace: FC<WorkspaceProps> = ({
<HistorySidebar workspace={workspace} />
)}
<div css={styles.content}>
<div css={styles.dotBackground}>
{selectedResource && (
<ResourceMetadata
resource={selectedResource}
css={{ margin: "-48px 0 24px -48px" }}
<div css={[styles.content, styles.dotsBackground]}>
{selectedResource && (
<ResourceMetadata
resource={selectedResource}
css={{ margin: "-32px -32px 0 -32px", marginBottom: 24 }}
/>
)}
<div
css={{
display: "flex",
flexDirection: "column",
gap: 24,
maxWidth: 24 * 50,
margin: "auto",
}}
>
{workspace.latest_build.status === "deleted" && (
<WorkspaceDeletedBanner
handleClick={() => navigate(`/templates`)}
/>
)}
<div
css={{
display: "flex",
flexDirection: "column",
gap: 24,
maxWidth: 24 * 50,
margin: "auto",
}}
>
{workspace.latest_build.status === "deleted" && (
<WorkspaceDeletedBanner
handleClick={() => navigate(`/templates`)}
/>
)}
{workspace.latest_build.job.error && (
<Alert
severity="error"
actions={
<Button
onClick={
canRetryDebugMode
? handleBuildRetryDebug
: handleBuildRetry
}
variant="text"
size="small"
>
Retry{canRetryDebugMode && " in debug mode"}
</Button>
}
>
<AlertTitle>Workspace build failed</AlertTitle>
<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
</Alert>
)}
{workspace.latest_build.job.error && (
<Alert
severity="error"
actions={
<Button
onClick={
canRetryDebugMode ? handleBuildRetryDebug : handleBuildRetry
}
variant="text"
size="small"
>
Retry{canRetryDebugMode && " in debug mode"}
</Button>
}
>
<AlertTitle>Workspace build failed</AlertTitle>
<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
</Alert>
)}
{transitionStats !== undefined && (
<WorkspaceBuildProgress
workspace={workspace}
transitionStats={transitionStats}
/>
)}
{transitionStats !== undefined && (
<WorkspaceBuildProgress
workspace={workspace}
transitionStats={transitionStats}
/>
)}
{buildLogs}
{buildLogs}
{selectedResource && (
<section
css={{ display: "flex", flexDirection: "column", gap: 24 }}
>
{selectedResource.agents?.map((agent) => (
<AgentRow
key={agent.id}
agent={agent}
workspace={workspace}
sshPrefix={sshPrefix}
showApps={permissions.updateWorkspace}
showBuiltinApps={permissions.updateWorkspace}
hideSSHButton={hideSSHButton}
hideVSCodeDesktopButton={hideVSCodeDesktopButton}
serverVersion={buildInfo?.version || ""}
serverAPIVersion={buildInfo?.agent_api_version || ""}
onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
/>
))}
{selectedResource && (
<section
css={{ display: "flex", flexDirection: "column", gap: 24 }}
>
{selectedResource.agents?.map((agent) => (
<AgentRow
key={agent.id}
agent={agent}
workspace={workspace}
sshPrefix={sshPrefix}
showApps={permissions.updateWorkspace}
showBuiltinApps={permissions.updateWorkspace}
hideSSHButton={hideSSHButton}
hideVSCodeDesktopButton={hideVSCodeDesktopButton}
serverVersion={buildInfo?.version || ""}
serverAPIVersion={buildInfo?.agent_api_version || ""}
onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
/>
))}
{(!selectedResource.agents ||
selectedResource.agents?.length === 0) && (
<div
css={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
}}
>
<div>
<h4 css={{ fontSize: 16, fontWeight: 500 }}>
No agents are currently assigned to this resource.
</h4>
</div>
{(!selectedResource.agents ||
selectedResource.agents?.length === 0) && (
<div
css={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
}}
>
<div>
<h4 css={{ fontSize: 16, fontWeight: 500 }}>
No agents are currently assigned to this resource.
</h4>
</div>
)}
</section>
)}
</div>
</div>
)}
</section>
)}
</div>
</div>
</div>
@@ -289,15 +285,13 @@ const countAgents = (resource: TypesGen.WorkspaceResource) => {
const styles = {
content: {
padding: 24,
padding: 32,
gridArea: "content",
overflowY: "auto",
position: "relative",
},
dotBackground: (theme) => ({
minHeight: "100%",
padding: 23,
dotsBackground: (theme) => ({
"--d": "1px",
background: `
radial-gradient(
@@ -305,10 +299,10 @@ const styles = {
var(--d)
var(--d),
${theme.palette.text.secondary} calc(var(--d) - 1px),
${theme.palette.dots} calc(var(--d) - 1px),
${theme.palette.background.default} var(--d)
)
0 0 / 24px 24px
-2px -2px / 16px 16px
`,
}),
site/src/theme/dark/mui.ts
+1
View File
@@ -54,6 +54,7 @@ const muiTheme = createTheme({
neutral: {
main: tw.zinc[50],
},
dots: tw.zinc[500],
},
typography: {
fontFamily: BODY_FONT_FAMILY,
site/src/theme/darkBlue/mui.ts
+1
View File
@@ -54,6 +54,7 @@ const muiTheme = createTheme({
neutral: {
main: tw.gray[50],
},
dots: tw.gray[500],
},
typography: {
fontFamily: BODY_FONT_FAMILY,
site/src/theme/light/mui.ts
+1
View File
@@ -56,6 +56,7 @@ const muiTheme = createTheme({
neutral: {
main: tw.zinc[950],
},
dots: tw.zinc[400],
},
typography: {
fontFamily: BODY_FONT_FAMILY,