From 1718a3ee94598fb9111deb5116a20d7ed893676c Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 5 Nov 2024 14:19:29 +0100
Subject: [PATCH] fixed link to documentation (#34613)

fixes: #34519

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../components/help-enabler/HelpHeader.tsx    | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx b/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
index febfacecb1..cd53695e5b 100644
--- a/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
+++ b/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
@@ -1,3 +1,4 @@
+import { useHelp } from "@keycloak/keycloak-ui-shared";
 import {
   Divider,
   Dropdown,
@@ -7,14 +8,12 @@ import {
   Split,
   SplitItem,
   Switch,
-  TextContent,
 } from "@patternfly/react-core";
-import { ExternalLinkAltIcon, HelpIcon } from "@patternfly/react-icons";
+import { HelpIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-
 import helpUrls from "../../help-urls";
-import { useHelp } from "@keycloak/keycloak-ui-shared";
+import { FormattedLink } from "../external-link/FormattedLink";
 
 import "./help-header.css";
 
@@ -24,21 +23,14 @@ export const HelpHeader = () => {
   const { t } = useTranslation();
 
   const dropdownItems = [
-    <DropdownItem
-      key="link"
-      id="link"
-      href={helpUrls.documentationUrl}
-      target="_blank"
-    >
-      <Split>
-        <SplitItem isFilled>{t("documentation")}</SplitItem>
-        <SplitItem>
-          <ExternalLinkAltIcon />
-        </SplitItem>
-      </Split>
+    <DropdownItem key="link" id="link">
+      <FormattedLink
+        href={helpUrls.documentationUrl}
+        title={t("documentation")}
+      />
     </DropdownItem>,
     <Divider key="divide" />,
-    <DropdownItem key="enable" id="enable">
+    <DropdownItem key="enable" id="enable" description={t("helpToggleInfo")}>
       <Split>
         <SplitItem isFilled>{t("enableHelpMode")}</SplitItem>
         <SplitItem>
@@ -52,9 +44,6 @@ export const HelpHeader = () => {
           />
         </SplitItem>
       </Split>
-      <TextContent className="keycloak_help-header-description">
-        {t("helpToggleInfo")}
-      </TextContent>
     </DropdownItem>,
   ];
   return (