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>

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">
+        {(visibleActions.length > 0 || isAction) && (
-          <div className="flex flex-row justify-between">
+          <Button
-            <ShadTooltip
+            variant={
-              content="Flows in this project can be exposed as callable MCP tools."
+              ENABLE_MCP_COMPOSER && button_description ? "outline" : "ghost"
-              side="right"
+            }
-            >
+            disabled={!value || disabled}
-              <div
+            size="sm"
-                className={cn(
+            data-testid="button_open_actions"
-                  "flex items-center hover:cursor-help",
+            onClick={() => setIsModalOpen(true)}
-                  !ENABLE_MCP_COMPOSER && "text-mmd",
+            className={cn(
-                )}
+              "absolute -top-8 right-0 !text-mmd font-normal group-hover:text-primary",
-              >
+              !button_description ? "text-muted-foreground" : "",
-                Flows/Tools
+            )}
-                <ForwardedIconComponent
+          >
-                  name="info"
+            <ForwardedIconComponent
-                  className="ml-1.5 h-4 w-4 text-muted-foreground"
+              name={
-                  aria-hidden="true"
+                ENABLE_MCP_COMPOSER && button_description
-                />
+                  ? "wrench"
-              </div>
+                  : "Settings2"
-            </ShadTooltip>
+              }
-          </div>
+              className="icon-size"
-          {(visibleActions.length > 0 || isAction) && (
+              strokeWidth={ICON_STROKE_WIDTH}
-            <Button
+            />
-              variant={ENABLE_MCP_COMPOSER ? "outline" : "ghost"}
+            {button_description}
-              disabled={!value || disabled}
+          </Button>
-              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>
         {!value ? (
           <div className="flex w-full flex-wrap gap-1 overflow-hidden py-1.5">
             {[...Array(4)].map((_, index) => (

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"

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();