fixed link to documentation (#34613)

fixes: #34519

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

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"
+    <DropdownItem key="link" id="link">
+      <FormattedLink
         href={helpUrls.documentationUrl}
-      target="_blank"
-    >
-      <Split>
-        <SplitItem isFilled>{t("documentation")}</SplitItem>
-        <SplitItem>
-          <ExternalLinkAltIcon />
-        </SplitItem>
-      </Split>
+        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 (