From 242cecea0b0ada863f6fd38fa4e3d6acf0c898d6 Mon Sep 17 00:00:00 2001
From: Mike Fortman <michael.fortman@datastax.com>
Date: Thu, 24 Jul 2025 15:18:01 -0500
Subject: [PATCH] fix: Mcp composer tool header fix (#9161)

* fix header and button alignment

* color enhancement

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../components/ToolsComponent/index.tsx       | 67 ++++++++-----------
 .../homePage/components/McpServerTab.tsx      | 17 ++++-
 .../tests/core/features/filterSidebar.spec.ts |  4 +-
 3 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx
index bcd3fc343..92b4d7d4f 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx
@@ -61,47 +61,36 @@ export default function ToolsComponent({
         icon={icon}
       />
       <div
-        className="relative flex flex-col w-full gap-3"
+        className="relative flex items-center w-full gap-3"
         data-testid={"div-" + id}
       >
-        <div className="flex flex-row justify-between">
-          <div className="flex flex-row justify-between">
-            <ShadTooltip
-              content="Flows in this project can be exposed as callable MCP tools."
-              side="right"
-            >
-              <div
-                className={cn(
-                  "flex items-center hover:cursor-help",
-                  !ENABLE_MCP_COMPOSER && "text-mmd",
-                )}
-              >
-                Flows/Tools
-                <ForwardedIconComponent
-                  name="info"
-                  className="ml-1.5 h-4 w-4 text-muted-foreground"
-                  aria-hidden="true"
-                />
-              </div>
-            </ShadTooltip>
-          </div>
-          {(visibleActions.length > 0 || isAction) && (
-            <Button
-              variant={ENABLE_MCP_COMPOSER ? "outline" : "ghost"}
-              disabled={!value || disabled}
-              size="sm"
-              data-testid="button_open_actions"
-              onClick={() => setIsModalOpen(true)}
-            >
-              <ForwardedIconComponent
-                name={ENABLE_MCP_COMPOSER ? "wrench" : "Settings2"}
-                className="icon-size"
-                strokeWidth={ICON_STROKE_WIDTH}
-              />
-              {button_description}
-            </Button>
-          )}
-        </div>
+        {(visibleActions.length > 0 || isAction) && (
+          <Button
+            variant={
+              ENABLE_MCP_COMPOSER && button_description ? "outline" : "ghost"
+            }
+            disabled={!value || disabled}
+            size="sm"
+            data-testid="button_open_actions"
+            onClick={() => setIsModalOpen(true)}
+            className={cn(
+              "absolute -top-8 right-0 !text-mmd font-normal group-hover:text-primary",
+              !button_description ? "text-muted-foreground" : "",
+            )}
+          >
+            <ForwardedIconComponent
+              name={
+                ENABLE_MCP_COMPOSER && button_description
+                  ? "wrench"
+                  : "Settings2"
+              }
+              className="icon-size"
+              strokeWidth={ICON_STROKE_WIDTH}
+            />
+            {button_description}
+          </Button>
+        )}
+
         {!value ? (
           <div className="flex w-full flex-wrap gap-1 overflow-hidden py-1.5">
             {[...Array(4)].map((_, index) => (
diff --git a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
index c9732fa24..7343ca9d8 100644
--- a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
+++ b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
@@ -390,7 +390,22 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
       </div>
       <div className="flex flex-col justify-between gap-8 xl:flex-row">
         <div className="w-full xl:w-2/5">
-          <div className="flex flex-row flex-wrap gap-2">
+          <div className="flex flex-row justify-between pt-1">
+            <ShadTooltip
+              content="Flows in this project can be exposed as callable MCP tools."
+              side="right"
+            >
+              <div className="flex items-center text-mmd font-medium hover:cursor-help">
+                Flows/Tools
+                <ForwardedIconComponent
+                  name="info"
+                  className="ml-1.5 h-4 w-4 text-muted-foreground"
+                  aria-hidden="true"
+                />
+              </div>
+            </ShadTooltip>
+          </div>
+          <div className="flex flex-row flex-wrap gap-2 pt-2">
             <ToolsComponent
               value={flowsMCPData}
               title="MCP Server Tools"
diff --git a/src/frontend/tests/core/features/filterSidebar.spec.ts b/src/frontend/tests/core/features/filterSidebar.spec.ts
index 77580d251..7da117232 100644
--- a/src/frontend/tests/core/features/filterSidebar.spec.ts
+++ b/src/frontend/tests/core/features/filterSidebar.spec.ts
@@ -73,7 +73,9 @@ test(
     await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
     await expect(page.getByTestId("input_outputChat Output")).toBeVisible();
     await expect(page.getByTestId("processingPrompt Template")).toBeVisible();
-    await expect(page.getByTestId("langchain_utilitiesCSV Agent")).toBeVisible();
+    await expect(
+      page.getByTestId("langchain_utilitiesCSV Agent"),
+    ).toBeVisible();
     await expect(
       page.getByTestId("langchain_utilitiesConversationChain"),
     ).toBeVisible();