Skip to content

Commit 34f97e8

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add minor adjustments
1 parent b07a7ce commit 34f97e8

File tree

11 files changed

+182
-132
lines changed

11 files changed

+182
-132
lines changed

‎site/src/components/Form/Form.tsx

Lines changed: 54 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
useContext,
77
ReactNode,
88
ComponentProps,
9+
forwardRef,
910
} from "react";
1011
import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges";
1112
import { Stack } from "components/Stack/Stack";
@@ -81,59 +82,65 @@ interface FormSectionProps {
8182
deprecated?: boolean;
8283
}
8384

84-
export const FormSection: FC<FormSectionProps> = ({
85-
children,
86-
title,
87-
description,
88-
classes = {},
89-
alpha = false,
90-
deprecated = false,
91-
}) => {
92-
const { direction } = useContext(FormContext);
93-
const theme = useTheme();
94-
95-
return (
96-
<div
97-
css={{
98-
display: "flex",
99-
alignItems: "flex-start",
100-
flexDirection: direction === "horizontal" ? "row" : "column",
101-
gap: direction === "horizontal" ? 120 : 24,
102-
103-
[theme.breakpoints.down("md")]: {
104-
flexDirection: "column",
105-
gap: 16,
106-
},
107-
}}
108-
className={classes.root}
109-
>
110-
<div
85+
export const FormSection = forwardRef<HTMLDivElement, FormSectionProps>(
86+
(
87+
{
88+
children,
89+
title,
90+
description,
91+
classes = {},
92+
alpha = false,
93+
deprecated = false,
94+
},
95+
ref,
96+
) => {
97+
const { direction } = useContext(FormContext);
98+
const theme = useTheme();
99+
100+
return (
101+
<section
102+
ref={ref}
111103
css={{
112-
width: "100%",
113-
maxWidth: direction === "horizontal" ? 312 : undefined,
114-
flexShrink: 0,
115-
position: direction === "horizontal" ? "sticky" : undefined,
116-
top: 24,
104+
display: "flex",
105+
alignItems: "flex-start",
106+
flexDirection: direction === "horizontal" ? "row" : "column",
107+
gap: direction === "horizontal" ? 120 : 24,
117108

118109
[theme.breakpoints.down("md")]: {
119-
width: "100%",
120-
position: "initial" as const,
110+
flexDirection: "column",
111+
gap: 16,
121112
},
122113
}}
123-
className={classes.sectionInfo}
114+
className={classes.root}
124115
>
125-
<h2 css={styles.formSectionInfoTitle} className={classes.infoTitle}>
126-
{title}
127-
{alpha && <AlphaBadge />}
128-
{deprecated && <DeprecatedBadge />}
129-
</h2>
130-
<div css={styles.formSectionInfoDescription}>{description}</div>
131-
</div>
132-
133-
{children}
134-
</div>
135-
);
136-
};
116+
<div
117+
css={{
118+
width: "100%",
119+
maxWidth: direction === "horizontal" ? 312 : undefined,
120+
flexShrink: 0,
121+
position: direction === "horizontal" ? "sticky" : undefined,
122+
top: 24,
123+
124+
[theme.breakpoints.down("md")]: {
125+
width: "100%",
126+
position: "initial" as const,
127+
},
128+
}}
129+
className={classes.sectionInfo}
130+
>
131+
<h2 css={styles.formSectionInfoTitle} className={classes.infoTitle}>
132+
{title}
133+
{alpha && <AlphaBadge />}
134+
{deprecated && <DeprecatedBadge />}
135+
</h2>
136+
<div css={styles.formSectionInfoDescription}>{description}</div>
137+
</div>
138+
139+
{children}
140+
</section>
141+
);
142+
},
143+
);
137144

138145
export const FormFields: FC<ComponentProps<typeof Stack>> = (props) => {
139146
return (

‎site/src/components/FormFooter/FormFooter.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,12 @@ export interface FormFooterProps {
1919
styles?: FormFooterStyles;
2020
submitLabel?: string;
2121
submitDisabled?: boolean;
22+
extraActions?: React.ReactNode;
2223
}
2324

2425
export const FormFooter: FC<FormFooterProps> = ({
2526
onCancel,
27+
extraActions,
2628
isLoading,
2729
submitDisabled,
2830
submitLabel = Language.defaultSubmitLabel,
@@ -52,6 +54,7 @@ export const FormFooter: FC<FormFooterProps> = ({
5254
>
5355
{Language.cancelLabel}
5456
</Button>
57+
{extraActions}
5558
</div>
5659
);
5760
};

‎site/src/modules/templates/useVersionLogs.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const useVersionLogs = (
1515
const templateVersionStatus = templateVersion?.job.status;
1616

1717
useEffect(() => {
18+
setLogs([]);
1819
const enabledStatuses: ProvisionerJobStatus[] = ["running", "pending"];
1920

2021
if (!templateVersionId || !templateVersionStatus) {

‎site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
6262
}}
6363
{...attrs}
6464
>
65+
{stages.length === 0 && (
66+
<div css={styles.header(theme)}>Waiting for logs...</div>
67+
)}
6568
{stages.map((stage) => {
6669
const logs = groupedLogsByStage[stage];
6770
const isEmpty = logs.every((log) => log.output === "");

‎site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,52 @@ import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/Worksp
88
import { useTheme } from "@emotion/react";
99
import { navHeight } from "theme/constants";
1010
import { useVersionLogs } from "modules/templates/useVersionLogs";
11+
import { JobError } from "api/queries/templates";
12+
import AlertTitle from "@mui/material/AlertTitle";
13+
import { Alert, AlertDetail } from "components/Alert/Alert";
14+
import Button from "@mui/material/Button";
15+
import Collapse from "@mui/material/Collapse";
1116

1217
type BuildLogsDrawerProps = {
18+
error: unknown;
1319
open: boolean;
1420
onClose: () => void;
1521
templateVersion: TemplateVersion | undefined;
22+
variablesSectionRef: React.RefObject<HTMLDivElement>;
1623
};
1724

1825
export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
1926
templateVersion,
27+
error,
28+
variablesSectionRef,
2029
...drawerProps
2130
}) => {
2231
const theme = useTheme();
2332
const { logs } = useVersionLogs(templateVersion);
24-
25-
// Auto scroll
2633
const logsContainer = useRef<HTMLDivElement>(null);
34+
35+
const scrollToBottom = () => {
36+
setTimeout(() => {
37+
if (logsContainer.current) {
38+
logsContainer.current.scrollTop = logsContainer.current.scrollHeight;
39+
}
40+
}, 0);
41+
};
42+
2743
useEffect(() => {
28-
if (logsContainer.current) {
29-
logsContainer.current.scrollTop = logsContainer.current.scrollHeight;
30-
}
44+
scrollToBottom();
3145
}, [logs]);
3246

47+
useEffect(() => {
48+
if (drawerProps.open) {
49+
scrollToBottom();
50+
}
51+
}, [drawerProps.open]);
52+
53+
const isMissingVariables =
54+
error instanceof JobError &&
55+
error.job.error_code === "REQUIRED_TEMPLATE_VARIABLES";
56+
3357
return (
3458
<Drawer anchor="right" {...drawerProps}>
3559
<div
@@ -43,7 +67,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
4367
<header
4468
css={{
4569
height: navHeight,
46-
padding: "0 20px",
70+
padding: "0 24px",
4771
display: "flex",
4872
alignItems: "center",
4973
justifyContent: "space-between",
@@ -59,6 +83,39 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
5983
</IconButton>
6084
</header>
6185

86+
<Collapse in={isMissingVariables}>
87+
<Alert
88+
css={{
89+
borderTop: 0,
90+
borderRight: 0,
91+
backgroundColor: theme.palette.background.paper,
92+
borderRadius: 0,
93+
borderBottomColor: theme.palette.divider,
94+
paddingLeft: 24,
95+
}}
96+
severity="warning"
97+
actions={
98+
<Button
99+
size="small"
100+
variant="text"
101+
onClick={() => {
102+
variablesSectionRef.current?.scrollIntoView({
103+
behavior: "smooth",
104+
});
105+
const firstVariableInput =
106+
variablesSectionRef.current?.querySelector("input");
107+
setTimeout(() => firstVariableInput?.focus(), 0);
108+
drawerProps.onClose();
109+
}}
110+
>
111+
Add variables
112+
</Button>
113+
}
114+
>
115+
<AlertTitle>Failed to create template</AlertTitle>
116+
<AlertDetail>{isMissingVariables && error.message}</AlertDetail>
117+
</Alert>
118+
</Collapse>
62119
<section
63120
ref={logsContainer}
64121
css={{

0 commit comments

Comments
 (0)