feat: enable top level diagnostics display

jaaydenh · jaaydenh · commit 8c5be29721f2 · 2025-04-16T14:41:20.000Z
diff --git a/site/src/index.css b/site/src/index.css
@@ -30,6 +30,7 @@
 		--surface-sky: 201 94% 86%;
 		--border-default: 240 6% 90%;
 		--border-success: 142 76% 36%;
+		--border-warning: 30.66, 97.16%, 72.35%;
 		--border-destructive: 0 84% 60%;
 		--border-hover: 240, 5%, 34%;
 		--overlay-default: 240 5% 84% / 80%;
@@ -67,6 +68,7 @@
 		--surface-sky: 204 80% 16%;
 		--border-default: 240 4% 16%;
 		--border-success: 142 76% 36%;
+		--border-warning: 30.66, 97.16%, 72.35%;
 		--border-destructive: 0 91% 71%;
 		--border-hover: 240, 5%, 34%;
 		--overlay-default: 240 10% 4% / 80%;
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -247,10 +247,13 @@ const ParameterField: FC<ParameterFieldProps> = ({
 							className="flex items-center space-x-2"
 						>
 							<RadioGroupItem
-								id={option.value.value}
+								id={`${id}-${option.value.value}`}
 								value={option.value.value}
 							/>
-							<Label htmlFor={option.value.value} className="cursor-pointer">
+							<Label
+								htmlFor={`${id}-${option.value.value}`}
+								className="cursor-pointer"
+							>
 								<OptionDisplay option={option} />
 							</Label>
 						</div>
@@ -350,15 +353,15 @@ const ParameterDiagnostics: FC<ParameterDiagnosticsProps> = ({
 		<div className="flex flex-col gap-2">
 			{diagnostics.map((diagnostic, index) => (
 				<div
-					key={`diagnostic-${diagnostic.summary}-${index}`}
+					key={`parameter-diagnostic-${diagnostic.summary}-${index}`}
 					className={`text-xs px-1 ${
 						diagnostic.severity === "error"
 							? "text-content-destructive"
 							: "text-content-warning"
 					}`}
 				>
-					<div className="font-medium">{diagnostic.summary}</div>
-					{diagnostic.detail && <div>{diagnostic.detail}</div>}
+					<p className="font-medium">{diagnostic.summary}</p>
+					{diagnostic.detail && <p className="m-0">{diagnostic.detail}</p>}
 				</div>
 			))}
 		</div>
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -409,6 +409,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 									parameters cannot be modified once the workspace is created.
 								</p>
 							</hgroup>
+							<Diagnostics diagnostics={diagnostics} />
 							{presets.length > 0 && (
 								<Stack direction="column" spacing={2}>
 									<div className="flex flex-col gap-2">
@@ -498,3 +499,44 @@ export const CreateWorkspacePageViewExperimental: FC<
 		</>
 	);
 };
+
+interface DiagnosticsProps {
+	diagnostics: PreviewParameter["diagnostics"];
+}
+
+export const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
+	return (
+		<div className="flex flex-col gap-4">
+			{diagnostics.map((diagnostic, index) => (
+				<div
+					key={`diagnostic-${diagnostic.summary}-${index}`}
+					className={`text-xs flex flex-col rounded-md border px-4 pb-3 border-solid
+                        ${
+													diagnostic.severity === "error"
+														? " text-content-destructive border-border-destructive"
+														: " text-content-warning border-border-warning"
+												}`}
+				>
+					<div className="flex items-center m-0">
+						{diagnostic.severity === "error" && (
+							<CircleAlert
+								className="me-2 -mt-0.5 inline-flex opacity-80"
+								size={16}
+								aria-hidden="true"
+							/>
+						)}
+						{diagnostic.severity === "warning" && (
+							<TriangleAlert
+								className="me-2 -mt-0.5 inline-flex opacity-80"
+								size={16}
+								aria-hidden="true"
+							/>
+						)}
+						<p className="font-medium">{diagnostic.summary}</p>
+					</div>
+					{diagnostic.detail && <p className="m-0 pb-0">{diagnostic.detail}</p>}
+				</div>
+			))}
+		</div>
+	);
+};
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -52,6 +52,7 @@ module.exports = {
 				},
 				border: {
 					DEFAULT: "hsl(var(--border-default))",
+					warning: "hsl(var(--border-warning))",
 					destructive: "hsl(var(--border-destructive))",
 					success: "hsl(var(--border-success))",
 					hover: "hsl(var(--border-hover))",
