Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 23, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0457ba
fix: prevent layout shift when Select component dropdown appears
jaaydenh May 22, 2025
178ccca
feat: show required badge instead of diagnostic
jaaydenh May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions site/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
58 changes: 40 additions & 18 deletions site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,7 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
/>
)}
</div>
{parameter.diagnostics.length > 0 && (
<ParameterDiagnostics diagnostics={parameter.diagnostics} />
)}
<ParameterDiagnostics diagnostics={parameter.diagnostics} />
</div>
);
};
Expand All @@ -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">
Expand Down Expand Up @@ -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) && (
Expand Down Expand Up @@ -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>
);
})}
</>
);
};

Expand Down
Loading