jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: refactor auth modal design for mcp composer (#9180)

Browse source 
* added biome config

* added classes on footer

* added new auth size

* changed auth modal design

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Lucas Oliveira 2025-07-24 18:53:28 -03:00 • committed by GitHub
commit e484e74803
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 123 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.cursor/settings.json Normal file
View file

@ -0,0 +1,3 @@
{
"biome.configurationPath": "src/frontend/biome.json"
}

199
src/frontend/src/modals/authModal/index.tsx
View file

@ -121,14 +121,26 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
}; };
return ( return (
<BaseModal open={open} setOpen={setOpen} size="small" className="p-4"> <BaseModal
<BaseModal.Header> open={open}
<div className="flex items-center gap-2 text-base">Authentication</div> setOpen={setOpen}
</BaseModal.Header> size="auth"
<BaseModal.Content className="h-full" overflowHidden> className="p-0 gap-0 flex flex-col"
<div className="flex gap-6 border rounded-md p-4 h-full min-h-[180px]"> >
<BaseModal.Content className="h-full " overflowHidden>
<div className="flex items-center w-full p-4 gap-2 text-sm font-medium">
<ForwardedIconComponent
name="Fingerprint"
className="h-4 w-4 shrink-0"
/>
Configure MCP Server Authentication
</div>
<div className="flex h-full p-0 border-t rounded-none">
{/* Left column - Radio buttons */} {/* Left column - Radio buttons */}
<div className="flex flex-col flex-1 items-start"> <div className="flex flex-col p-4 gap-2 flex-1 items-start min-h-[400px]">
<span className="text-mmd font-medium text-muted-foreground">
Auth type
</span>
<RadioGroup value={authType} onValueChange={handleAuthTypeChange}> <RadioGroup value={authType} onValueChange={handleAuthTypeChange}>
{AUTH_METHODS_ARRAY.map((option) => ( {AUTH_METHODS_ARRAY.map((option) => (
<div key={option.id} className="flex items-center space-x-2"> <div key={option.id} className="flex items-center space-x-2">
@ -153,11 +165,12 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
))} ))}
</RadioGroup> </RadioGroup>
</div> </div>
{authType !== "none" && <Separator orientation="vertical" />} <div>
{authType !== "none" && <Separator orientation="vertical" />}
</div>
{/* Right column - Input fields */} {/* Right column - Input fields */}
{authType !== "none" && ( {authType !== "none" && (
<div className="w-3/5 min-h-[136px]"> <div className="w-[70%] flex flex-col overflow-y-auto h-fit max-h-[400px] p-4">
{authType === "apikey" && ( {authType === "apikey" && (
<div className="flex flex-col items-start gap-2"> <div className="flex flex-col items-start gap-2">
<Label htmlFor="api-key" className="!text-mmd font-medium"> <Label htmlFor="api-key" className="!text-mmd font-medium">
@ -265,14 +278,17 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
)} )}
{authType === "oauth" && ( {authType === "oauth" && (
<div className="flex flex-col gap-3 h-full overflow-y-auto"> <div className="flex flex-col gap-4 h-full">
<span className="text-mmd font-medium text-muted-foreground">
OAuth settings
</span>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label <Label
htmlFor="oauth-host" htmlFor="oauth-host"
className="!text-mmd font-medium" className="!text-mmd font-medium"
> >
OAuth Host Host
</Label> </Label>
<Input <Input
id="oauth-host" id="oauth-host"
@ -289,7 +305,7 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
htmlFor="oauth-port" htmlFor="oauth-port"
className="!text-mmd font-medium" className="!text-mmd font-medium"
> >
OAuth Port Port
</Label> </Label>
<Input <Input
id="oauth-port" id="oauth-port"
@ -307,7 +323,7 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
htmlFor="oauth-server-url" htmlFor="oauth-server-url"
className="!text-mmd font-medium" className="!text-mmd font-medium"
> >
OAuth Server URL Server URL
</Label> </Label>
<Input <Input
id="oauth-server-url" id="oauth-server-url"
@ -324,7 +340,7 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
htmlFor="oauth-callback-path" htmlFor="oauth-callback-path"
className="!text-mmd font-medium" className="!text-mmd font-medium"
> >
OAuth Callback Path Callback Path
</Label> </Label>
<Input <Input
id="oauth-callback-path" id="oauth-callback-path"
@ -339,44 +355,42 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
} }
/> />
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="flex flex-col gap-2">
<div className="flex flex-col gap-2"> <Label
<Label htmlFor="oauth-client-id"
htmlFor="oauth-client-id" className="!text-mmd font-medium"
className="!text-mmd font-medium" >
> Client ID
Client ID </Label>
</Label> <Input
<Input id="oauth-client-id"
id="oauth-client-id" type="text"
type="text" placeholder="Enter Client ID"
placeholder="Enter Client ID" value={authFields.oauthClientId || ""}
value={authFields.oauthClientId || ""} onChange={(e) =>
onChange={(e) => handleAuthFieldChange("oauthClientId", e.target.value)
handleAuthFieldChange("oauthClientId", e.target.value) }
} />
/> </div>
</div> <div className="flex flex-col gap-2">
<div className="flex flex-col gap-2"> <Label
<Label htmlFor="oauth-client-secret"
htmlFor="oauth-client-secret" className="!text-mmd font-medium"
className="!text-mmd font-medium" >
> Client Secret
Client Secret </Label>
</Label> <Input
<Input id="oauth-client-secret"
id="oauth-client-secret" type="password"
type="password" placeholder="Enter Client Secret"
placeholder="Enter Client Secret" value={authFields.oauthClientSecret || ""}
value={authFields.oauthClientSecret || ""} onChange={(e) =>
onChange={(e) => handleAuthFieldChange(
handleAuthFieldChange( "oauthClientSecret",
"oauthClientSecret", e.target.value,
e.target.value, )
) }
} />
/>
</div>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label <Label
@ -389,6 +403,7 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
id="oauth-auth-url" id="oauth-auth-url"
type="text" type="text"
value={authFields.oauthAuthUrl || ""} value={authFields.oauthAuthUrl || ""}
placeholder="http://localhost:1234/auth/idaas/authorize"
onChange={(e) => onChange={(e) =>
handleAuthFieldChange("oauthAuthUrl", e.target.value) handleAuthFieldChange("oauthAuthUrl", e.target.value)
} }
@ -405,49 +420,48 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
id="oauth-token-url" id="oauth-token-url"
type="text" type="text"
value={authFields.oauthTokenUrl || ""} value={authFields.oauthTokenUrl || ""}
placeholder="http://localhost:1234/auth/idaas/token"
onChange={(e) => onChange={(e) =>
handleAuthFieldChange("oauthTokenUrl", e.target.value) handleAuthFieldChange("oauthTokenUrl", e.target.value)
} }
/> />
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="flex flex-col gap-2">
<div className="flex flex-col gap-2"> <Label
<Label htmlFor="oauth-mcp-scope"
htmlFor="oauth-mcp-scope" className="!text-mmd font-medium"
className="!text-mmd font-medium" >
> MCP Scope
MCP Scope </Label>
</Label> <Input
<Input id="oauth-mcp-scope"
id="oauth-mcp-scope" type="text"
type="text" placeholder="user"
placeholder="user" value={authFields.oauthMcpScope || ""}
value={authFields.oauthMcpScope || ""} onChange={(e) =>
onChange={(e) => handleAuthFieldChange("oauthMcpScope", e.target.value)
handleAuthFieldChange("oauthMcpScope", e.target.value) }
} />
/> </div>
</div> <div className="flex flex-col gap-2">
<div className="flex flex-col gap-2"> <Label
<Label htmlFor="oauth-provider-scope"
htmlFor="oauth-provider-scope" className="!text-mmd font-medium"
className="!text-mmd font-medium" >
> Provider Scope
Provider Scope </Label>
</Label> <Input
<Input id="oauth-provider-scope"
id="oauth-provider-scope" type="text"
type="text" placeholder="openid"
placeholder="openid" value={authFields.oauthProviderScope || ""}
value={authFields.oauthProviderScope || ""} onChange={(e) =>
onChange={(e) => handleAuthFieldChange(
handleAuthFieldChange( "oauthProviderScope",
"oauthProviderScope", e.target.value,
e.target.value, )
) }
} />
/>
</div>
</div> </div>
</div> </div>
)} )}
@ -457,9 +471,10 @@ const AuthModal = ({ open, setOpen, authSettings, onSave }: AuthModalProps) => {
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer <BaseModal.Footer
submit={{ submit={{
label: "Save Authentication", label: "Save",
onClick: handleSave, onClick: handleSave,
}} }}
className="p-4 border-t"
/> />
</BaseModal> </BaseModal>
); );

5
src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
View file

@ -93,6 +93,11 @@ export const switchCaseModalSize = (size: string) => {
height = "min-h-[232px]"; height = "min-h-[232px]";
break; break;
case "auth":
minWidth = "min-w-[600px]";
height = "";
break;
default: default:
minWidth = "min-w-[80vw]"; minWidth = "min-w-[80vw]";
height = "h-[90vh]"; height = "h-[90vh]";

13
src/frontend/src/modals/baseModal/index.tsx
View file

@ -105,14 +105,16 @@ const Footer: React.FC<{
}; };
close?: boolean; close?: boolean;
centered?: boolean; centered?: boolean;
}> = ({ children, submit, close, centered }) => { className?: string;
}> = ({ children, submit, close, centered, className }) => {
return ( return (
<div <div
className={ className={cn(
centered centered
? "flex flex-shrink-0 justify-center" ? "flex flex-shrink-0 justify-center"
: "flex flex-shrink-0 flex-row-reverse" : "flex flex-shrink-0 flex-row-reverse",
} className,
)}
> >
{submit ? ( {submit ? (
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
@ -185,7 +187,8 @@ interface BaseModalProps {
| "sm-thin" | "sm-thin"
| "smaller-h-full" | "smaller-h-full"
| "medium-log" | "medium-log"
| "x-large"; | "x-large"
| "auth";
className?: string; className?: string;
disable?: boolean; disable?: boolean;
onChangeOpenModal?: (open?: boolean) => void; onChangeOpenModal?: (open?: boolean) => void;