From 2dee4a23bd8b0e186cb297ec8506baca71bada99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Barto=C5=A1?= <mabartos@redhat.com>
Date: Tue, 6 Oct 2026 11:44:45 +0200
Subject: [PATCH] Fix tooltips in Security defense tab in admin console
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #53142

Signed-off-by: Martin Bartoš <mabartos@redhat.com>
---
 .../security-defences/HelpLinkTextInput.tsx   | 19 ++++++++++-----
 .../realm-settings/security-defenses.spec.ts  | 24 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/js/apps/admin-ui/src/realm-settings/security-defences/HelpLinkTextInput.tsx b/js/apps/admin-ui/src/realm-settings/security-defences/HelpLinkTextInput.tsx
index c988dfbad724..77cfc581fde1 100644
--- a/js/apps/admin-ui/src/realm-settings/security-defences/HelpLinkTextInput.tsx
+++ b/js/apps/admin-ui/src/realm-settings/security-defences/HelpLinkTextInput.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from "react-i18next";
-import { TextControl } from "@keycloak/keycloak-ui-shared";
+import { HelpItem, TextControl } from "@keycloak/keycloak-ui-shared";
 import { FormattedLink } from "../../components/external-link/FormattedLink";
 
 type HelpLinkTextInputProps = {
@@ -18,11 +18,18 @@ export const HelpLinkTextInput = ({
       name={fieldName}
       label={t(name)}
       labelIcon={
-        <Trans
-          i18nKey={`${name}Help`}
-          components={{
-            formattedlink: <FormattedLink href={url} title={t("learnMore")} />,
-          }}
+        <HelpItem
+          fieldLabelId={fieldName}
+          helpText={
+            <Trans
+              i18nKey={`${name}Help`}
+              components={{
+                formattedlink: (
+                  <FormattedLink href={url} title={t("learnMore")} />
+                ),
+              }}
+            />
+          }
         />
       }
     />
diff --git a/js/apps/admin-ui/test/realm-settings/security-defenses.spec.ts b/js/apps/admin-ui/test/realm-settings/security-defenses.spec.ts
index 2f52720a6eb5..e8292836a9da 100644
--- a/js/apps/admin-ui/test/realm-settings/security-defenses.spec.ts
+++ b/js/apps/admin-ui/test/realm-settings/security-defenses.spec.ts
@@ -1,4 +1,4 @@
-import { test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { v4 as uuid } from "uuid";
 import adminClient from "../utils/AdminClient.ts";
 import { login } from "../utils/login.ts";
@@ -31,6 +31,28 @@ test.describe.serial("Security defenses", () => {
     await goToSecurityDefensesTab(page);
   });
 
+  test("Header help text is displayed in a popover", async ({ page }) => {
+    const helpIcon = page.getByTestId(
+      "help-label-browserSecurityHeaders.xFrameOptions",
+    );
+    const helpText = page.getByText(
+      "Default value prevents pages from being included by non-origin iframes.",
+    );
+
+    await expect(helpIcon).toBeVisible();
+    await expect(helpText).toBeHidden();
+    await helpIcon.click();
+    await expect(helpText).toBeVisible();
+    const documentationLink = page
+      .getByRole("dialog")
+      .getByRole("link", { name: "Learn more" });
+    await expect(documentationLink).toBeVisible();
+    await expect(documentationLink).toHaveAttribute(
+      "href",
+      "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
+    );
+  });
+
   test("Realm header settings", async ({ page }) => {
     await fillXFrameOptionsSecurityHeader(page, "DENY");
     await clickSaveSecurityDefenses(page);