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

fix: added error width limitation, truncation and tooltip on MCP dialog (#8858)

Browse source 
* Added error width limitation, truncation and tooltip

* Updated width to occupy more space from STDIO and SSE

* Update src/frontend/src/modals/addMcpServerModal/index.tsx

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>

---------

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
This commit is contained in:
Lucas Oliveira 2025-07-03 14:55:11 -03:00 • committed by GitHub
commit 89dd39b5ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/frontend/src/modals/addMcpServerModal/index.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ForwardedIconComponent } from "@/components/common/genericIconComponent"; import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
import ShadTooltip from "@/components/common/shadTooltipComponent";
import InputListComponent from "@/components/core/parameterRenderComponent/components/inputListComponent"; import InputListComponent from "@/components/core/parameterRenderComponent/components/inputListComponent";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -21,6 +22,7 @@ import IOKeyPairInput from "@/modals/IOModal/components/IOFieldView/components/k
import { MCPServerType } from "@/types/mcp"; import { MCPServerType } from "@/types/mcp";
import { extractMcpServersFromJson } from "@/utils/mcpUtils"; import { extractMcpServersFromJson } from "@/utils/mcpUtils";
import { parseString } from "@/utils/stringManipulation"; import { parseString } from "@/utils/stringManipulation";
import { cn } from "@/utils/utils";
import { import {
useIsFetching, useIsFetching,
usePrefetchQuery, usePrefetchQuery,
@ -51,7 +53,9 @@ export default function AddMcpServerModal({
initialData ? (initialData.command ? "STDIO" : "SSE") : "JSON", initialData ? (initialData.command ? "STDIO" : "SSE") : "JSON",
); );
const [jsonValue, setJsonValue] = useState(""); const [jsonValue, setJsonValue] = useState("");
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(
"Error downloading file: File _mcp_servers.json not found in flow 7e93e2c5-b979-49c0-b01b-4f4111d9230d",
);
const { mutateAsync: addMCPServer, isPending: isAddPending } = const { mutateAsync: addMCPServer, isPending: isAddPending } =
useAddMCPServer(); useAddMCPServer();
const { mutateAsync: patchMCPServer, isPending: isPatchPending } = const { mutateAsync: patchMCPServer, isPending: isPatchPending } =
@ -295,9 +299,16 @@ export default function AddMcpServerModal({
id="global-variable-modal-inputs" id="global-variable-modal-inputs"
> >
{error && ( {error && (
<div className="absolute right-4 top-2.5 text-xs font-medium text-red-500"> <ShadTooltip content={error}>
{error} <div
</div> className={cn(
"absolute right-4 top-4 truncate text-xs font-medium text-red-500",
type === "JSON" ? "w-3/5" : "w-4/5",
)}
>
{error}
</div>
</ShadTooltip>
)} )}
<TabsContent value="JSON"> <TabsContent value="JSON">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">