Skip to content

Commit 4796a32

Browse files
SasSwartSasSwart
committed
Copy updates
1 parent bec2913 commit 4796a32

File tree

7 files changed

+139
-118
lines changed

7 files changed

+139
-118
lines changed

‎site/src/modules/provisioners/ProvisionerAlert.stories.tsx

+8-35
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22
import { chromatic } from "testHelpers/chromatic";
3-
import { MockTemplateVersion } from "testHelpers/entities";
43
import { ProvisionerAlert } from "./ProvisionerAlert";
54

65
const meta: Meta<typeof ProvisionerAlert> = {
@@ -11,45 +10,19 @@ const meta: Meta<typeof ProvisionerAlert> = {
1110
},
1211
component: ProvisionerAlert,
1312
args: {
14-
matchingProvisioners: 0,
15-
availableProvisioners: 0,
16-
tags: MockTemplateVersion.job.tags,
13+
title: "Title",
14+
detail: "Detail",
15+
severity: "info",
16+
tags: {"tag": "tagValue"}
1717
},
1818
};
1919

2020
export default meta;
2121
type Story = StoryObj<typeof ProvisionerAlert>;
2222

23-
export const HealthyProvisioners: Story = {
23+
export const Info: Story = {};
24+
export const NullTags: Story = {
2425
args: {
25-
matchingProvisioners: 1,
26-
availableProvisioners: 1,
27-
},
28-
};
29-
30-
export const UndefinedMatchingProvisioners: Story = {
31-
args: {
32-
matchingProvisioners: undefined,
33-
availableProvisioners: undefined,
34-
},
35-
};
36-
37-
export const UndefinedAvailableProvisioners: Story = {
38-
args: {
39-
matchingProvisioners: 1,
40-
availableProvisioners: undefined,
41-
},
42-
};
43-
44-
export const NoMatchingProvisioners: Story = {
45-
args: {
46-
matchingProvisioners: 0,
47-
},
48-
};
49-
50-
export const NoAvailableProvisioners: Story = {
51-
args: {
52-
matchingProvisioners: 1,
53-
availableProvisioners: 0,
54-
},
26+
tags: undefined
27+
}
5528
};

‎site/src/modules/provisioners/ProvisionerAlert.tsx

+11-63
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,15 @@ import { Alert, type AlertColor } from "components/Alert/Alert";
33
import { AlertDetail } from "components/Alert/Alert";
44
import { Stack } from "components/Stack/Stack";
55
import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
6-
import type { FC } from "react";
7-
6+
import { FC } from "react";
87
interface ProvisionerAlertProps {
9-
matchingProvisioners: number | undefined;
10-
availableProvisioners: number | undefined;
11-
tags: Record<string, string>;
12-
}
13-
14-
export const ProvisionerAlert: FC<ProvisionerAlertProps> = ({
15-
matchingProvisioners,
16-
availableProvisioners,
17-
tags,
18-
}) => {
19-
let title: string;
20-
let detail: string;
21-
switch (true) {
22-
case matchingProvisioners === 0:
23-
title = "Provisioning Cannot Proceed";
24-
detail =
25-
"There are no provisioners that accept the required tags. Please contact your administrator. Once a compatible provisioner becomes available, provisioning will continue.";
26-
break;
27-
case availableProvisioners === 0:
28-
title = "Provisioning Delayed";
29-
detail =
30-
"Provisioners that accept the required tags are currently anavailable. This may delay your build. Please contact your administrator if your build does not complete.";
31-
break;
32-
default:
33-
return null;
34-
}
35-
36-
return (
37-
<Alert
38-
severity="warning"
39-
css={(theme) => ({
40-
borderRadius: 0,
41-
border: 0,
42-
borderBottom: `1px solid ${theme.palette.divider}`,
43-
borderLeft: `2px solid ${theme.palette.error.main}`,
44-
})}
45-
>
46-
<AlertTitle>{title}</AlertTitle>
47-
<AlertDetail>
48-
<div>{detail}</div>
49-
<Stack direction="row" spacing={1} wrap="wrap">
50-
{Object.entries(tags)
51-
.filter(([key]) => key !== "owner")
52-
.map(([key, value]) => (
53-
<ProvisionerTag key={key} tagName={key} tagValue={value} />
54-
))}
55-
</Stack>
56-
</AlertDetail>
57-
</Alert>
58-
);
59-
};
60-
61-
interface ProvisionerJobAlertProps {
628
title: string;
639
detail: string;
6410
severity: AlertColor;
6511
tags: Record<string, string>;
6612
}
6713

68-
export const ProvisionerJobAlert: FC<ProvisionerJobAlertProps> = ({
14+
export const ProvisionerAlert: FC<ProvisionerAlertProps> = ({
6915
title,
7016
detail,
7117
severity,
@@ -74,18 +20,20 @@ export const ProvisionerJobAlert: FC<ProvisionerJobAlertProps> = ({
7420
return (
7521
<Alert
7622
severity={severity}
77-
css={(theme) => ({
78-
borderRadius: 0,
79-
border: 0,
80-
borderBottom: `1px solid ${theme.palette.divider}`,
81-
borderLeft: `2px solid ${theme.palette.error.main}`,
82-
})}
23+
css={(theme) => {
24+
return {
25+
borderRadius: 0,
26+
border: 0,
27+
borderBottom: `1px solid ${theme.palette.divider}`,
28+
borderLeft: `2px solid ${theme.palette[severity].main}`,
29+
};
30+
}}
8331
>
8432
<AlertTitle>{title}</AlertTitle>
8533
<AlertDetail>
8634
<div>{detail}</div>
8735
<Stack direction="row" spacing={1} wrap="wrap">
88-
{Object.entries(tags)
36+
{Object.entries(tags ?? {})
8937
.filter(([key]) => key !== "owner")
9038
.map(([key, value]) => (
9139
<ProvisionerTag key={key} tagName={key} tagValue={value} />

‎site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { chromatic } from "testHelpers/chromatic";
3+
import { MockTemplateVersion } from "testHelpers/entities";
4+
import { ProvisionerStatusAlert } from "./ProvisionerStatusAlert";
5+
6+
const meta: Meta<typeof ProvisionerStatusAlert> = {
7+
title: "modules/provisioners/ProvisionerStatusAlert",
8+
parameters: {
9+
chromatic,
10+
layout: "centered",
11+
},
12+
component: ProvisionerStatusAlert,
13+
args: {
14+
matchingProvisioners: 0,
15+
availableProvisioners: 0,
16+
tags: MockTemplateVersion.job.tags,
17+
},
18+
};
19+
20+
export default meta;
21+
type Story = StoryObj<typeof ProvisionerStatusAlert>;
22+
23+
export const HealthyProvisioners: Story = {
24+
args: {
25+
matchingProvisioners: 1,
26+
availableProvisioners: 1,
27+
},
28+
};
29+
30+
export const UndefinedMatchingProvisioners: Story = {
31+
args: {
32+
matchingProvisioners: undefined,
33+
availableProvisioners: undefined,
34+
},
35+
};
36+
37+
export const UndefinedAvailableProvisioners: Story = {
38+
args: {
39+
matchingProvisioners: 1,
40+
availableProvisioners: undefined,
41+
},
42+
};
43+
44+
export const NoMatchingProvisioners: Story = {
45+
args: {
46+
matchingProvisioners: 0,
47+
},
48+
};
49+
50+
export const NoAvailableProvisioners: Story = {
51+
args: {
52+
matchingProvisioners: 1,
53+
availableProvisioners: 0,
54+
},
55+
};

‎site/src/modules/provisioners/ProvisionerStatusAlert.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { AlertColor } from "components/Alert/Alert";
2+
import type { FC } from "react";
3+
import { ProvisionerAlert } from "./ProvisionerAlert";
4+
5+
interface ProvisionerStatusAlertProps {
6+
matchingProvisioners: number | undefined;
7+
availableProvisioners: number | undefined;
8+
tags: Record<string, string>;
9+
}
10+
11+
export const ProvisionerStatusAlert: FC<ProvisionerStatusAlertProps> = ({
12+
matchingProvisioners,
13+
availableProvisioners,
14+
tags,
15+
}) => {
16+
let title: string;
17+
let detail: string;
18+
let severity: AlertColor;
19+
switch (true) {
20+
case matchingProvisioners === 0:
21+
title = "Build pending provisioner deployment";
22+
detail =
23+
"Your build has been enqueued, but there are no provisioners that accept the required tags. Once a compatible provisioner becomes available, your build will continue. Please contact your administrator.";
24+
severity = "warning";
25+
break;
26+
case availableProvisioners === 0:
27+
title = "Build delayed";
28+
detail =
29+
"Provisioners that accept the required tags have not responded for longer than expected. This may delay your build. Please contact your administrator if your build does not complete.";
30+
severity = "warning";
31+
break;
32+
default:
33+
title = "Build enqueued";
34+
detail =
35+
"Your build has been enqueued and will begin once a provisioner becomes available to process it.";
36+
severity = "info";
37+
}
38+
39+
return (
40+
<ProvisionerAlert
41+
title={title}
42+
detail={detail}
43+
severity={severity}
44+
tags={tags}
45+
/>
46+
);
47+
};
48+

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

-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ export const ProvisionersHealthy: Story = {
6262
args: {
6363
templateVersion: {
6464
...MockTemplateVersion,
65-
organization_id: "org-id",
6665
matched_provisioners: {
6766
count: 1,
6867
available: 1,

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { visuallyHidden } from "@mui/utils";
88
import { JobError } from "api/queries/templates";
99
import type { TemplateVersion } from "api/typesGenerated";
1010
import { Loader } from "components/Loader/Loader";
11-
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
11+
import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
1212
import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
1313
import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
1414
import { type FC, useLayoutEffect, useRef } from "react";
@@ -70,13 +70,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
7070
</IconButton>
7171
</header>
7272

73-
{!logs && (
74-
<ProvisionerAlert
75-
matchingProvisioners={matchingProvisioners}
76-
availableProvisioners={availableProvisioners}
77-
tags={templateVersion?.job.tags ?? {}}
78-
/>
79-
)}
73+
{}
8074

8175
{isMissingVariables ? (
8276
<MissingVariablesBanner
@@ -90,6 +84,12 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
9084
drawerProps.onClose();
9185
}}
9286
/>
87+
) : !logs ? (
88+
<ProvisionerStatusAlert
89+
matchingProvisioners={matchingProvisioners}
90+
availableProvisioners={availableProvisioners}
91+
tags={templateVersion?.job.tags ?? {}}
92+
/>
9393
) : logs ? (
9494
<section ref={logsContainer} css={styles.logs}>
9595
<WorkspaceBuildLogs logs={logs} css={{ border: 0 }} />

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

+9-11
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,6 @@ import {
2828
} from "components/FullPageLayout/Topbar";
2929
import { Loader } from "components/Loader/Loader";
3030
import { linkToTemplate, useLinks } from "modules/navigation";
31-
import {
32-
ProvisionerAlert,
33-
ProvisionerJobAlert,
34-
} from "modules/provisioners/ProvisionerAlert";
3531
import { TemplateFileTree } from "modules/templates/TemplateFiles/TemplateFileTree";
3632
import { isBinaryData } from "modules/templates/TemplateFiles/isBinaryData";
3733
import { TemplateResourcesTable } from "modules/templates/TemplateResourcesTable/TemplateResourcesTable";
@@ -63,6 +59,8 @@ import { MonacoEditor } from "./MonacoEditor";
6359
import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover";
6460
import { PublishTemplateVersionDialog } from "./PublishTemplateVersionDialog";
6561
import { TemplateVersionStatusBadge } from "./TemplateVersionStatusBadge";
62+
import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
63+
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
6664

6765
type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
6866

@@ -588,22 +586,22 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
588586
css={[styles.logs, styles.tabContent]}
589587
ref={logsContentRef}
590588
>
591-
{templateVersion.job.error && (
592-
<ProvisionerJobAlert
593-
severity="error"
589+
<div>
590+
{templateVersion.job.error ? (
591+
<ProvisionerAlert
594592
title="Error during the build"
595593
detail={templateVersion.job.error}
594+
severity="error"
596595
tags={templateVersion.job.tags}
597596
/>
598-
)}
599-
600-
{!gotBuildLogs && (
601-
<ProvisionerAlert
597+
) : !gotBuildLogs && (
598+
<ProvisionerStatusAlert
602599
matchingProvisioners={matchingProvisioners}
603600
availableProvisioners={availableProvisioners}
604601
tags={templateVersion.job.tags}
605602
/>
606603
)}
604+
</div>
607605

608606
{buildLogs && buildLogs.length > 0 ? (
609607
<WorkspaceBuildLogs

0 commit comments

Comments
 (0)