opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-22 13:10:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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"
/>
This commit is contained in:
Jaayden Halko
2025-05-23 10:43:17 -04:00
committed by GitHub
parent 30a910ba32
commit 516fb4489e
2 changed files with 45 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/index.css
+5
View File
@@ -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;
}
}
site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+40 -18
View File
@@ -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>
);
})}
</>
);
};