feat: display required badge instead of diagnostic text when extra code = required (#18006)

jaaydenh · web-flow · commit 516fb4489e32 · 2025-05-23T10:43:17.000-04:00
The tooltip hover uses the summary text from the diagnostic <img width="562" alt="Screenshot 2025-05-23 at 12 51 51" src="https://github.com/user-attachments/assets/2246abc7-dc1c-4dc2-8303-bee62d152e21" />
diff --git a/site/src/index.css b/site/src/index.css
@@ -107,4 +107,9 @@
 		--removed-body-scroll-bar-size: 0 !important;
 		margin-right: 0 !important;
 	}
+
+	/* Prevent layout shift when modals open by maintaining scrollbar width */
+	html {
+		scrollbar-gutter: stable;
+	}
 }
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -89,9 +89,7 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
 					/>
 				)}
 			</div>
-			{parameter.diagnostics.length > 0 && (
-				<ParameterDiagnostics diagnostics={parameter.diagnostics} />
-			)}
+			<ParameterDiagnostics diagnostics={parameter.diagnostics} />
 		</div>
 	);
 };
@@ -112,6 +110,9 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 	const displayName = parameter.display_name
 		? parameter.display_name
 		: parameter.name;
+	const hasRequiredDiagnostic = parameter.diagnostics?.find(
+		(d) => d.extra?.code === "required",
+	);
 
 	return (
 		<div className="flex items-start gap-2">
@@ -186,6 +187,22 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 							</Tooltip>
 						</TooltipProvider>
 					)}
+					{hasRequiredDiagnostic && (
+						<TooltipProvider delayDuration={100}>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span className="flex items-center">
+										<Badge size="sm" variant="destructive" border="none">
+											Required
+										</Badge>
+									</span>
+								</TooltipTrigger>
+								<TooltipContent className="max-w-xs">
+									{hasRequiredDiagnostic.summary || "Required parameter"}
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					)}
 				</Label>
 
 				{Boolean(parameter.description) && (
@@ -558,21 +575,26 @@ const ParameterDiagnostics: FC<ParameterDiagnosticsProps> = ({
 	diagnostics,
 }) => {
 	return (
-		<div className="flex flex-col gap-2">
-			{diagnostics.map((diagnostic, index) => (
-				<div
-					key={`parameter-diagnostic-${diagnostic.summary}-${index}`}
-					className={`text-xs px-1 ${
-						diagnostic.severity === "error"
-							? "text-content-destructive"
-							: "text-content-warning"
-					}`}
-				>
-					<p className="font-medium">{diagnostic.summary}</p>
-					{diagnostic.detail && <p className="m-0">{diagnostic.detail}</p>}
-				</div>
-			))}
-		</div>
+		<>
+			{diagnostics.map((diagnostic, index) => {
+				if (diagnostic.extra?.code === "required") {
+					return null;
+				}
+				return (
+					<div
+						key={`parameter-diagnostic-${diagnostic.summary}-${index}`}
+						className={`text-xs px-1 ${
+							diagnostic.severity === "error"
+								? "text-content-destructive"
+								: "text-content-warning"
+						}`}
+					>
+						<p className="font-medium">{diagnostic.summary}</p>
+						{diagnostic.detail && <p className="m-0">{diagnostic.detail}</p>}
+					</div>
+				);
+			})}
+		</>
 	);
 };
 

Original file line number	Diff line number	Diff line change
`@@ -107,4 +107,9 @@`
`107`	`107`	`--removed-body-scroll-bar-size: 0 !important;`
`108`	`108`	`margin-right: 0 !important;`
`109`	`109`	`}`
	`110`	`+`
	`111`	`+ /* Prevent layout shift when modals open by maintaining scrollbar width */`
	`112`	`+ html {`
	`113`	`+ scrollbar-gutter: stable;`
	`114`	`+ }`
`110`	`115`	`}`