refactor(ui/page-header): make docs url explicit [EE-5966] (#10411)

app/react/components/PageHeader/ContextHelp/ContextHelp.tsx

@@ -1,20 +1,19 @@
 import { HelpCircle } from 'lucide-react';
 import clsx from 'clsx';
-
-import { getDocURL } from '@@/PageHeader/ContextHelp/docURLs';
+import { useCurrentStateAndParams } from '@uirouter/react';
 
 import headerStyles from '../HeaderTitle.module.css';
 import './ContextHelp.css';
 
 export function ContextHelp() {
-  function onHelpClick() {
-    const docURL = getDocURL();
-    window.open(docURL, '_blank');
-  }
+  const docsUrl = useDocsUrl();
 
   return (
-    <div className={clsx(headerStyles.menuButton)}>
-      <div
+    <div className={headerStyles.menuButton}>
+      <a
+        href={`https://docs.portainer.io${docsUrl}`}
+        target="_blank"
+        color="none"
         className={clsx(
           headerStyles.menuIcon,
           'menu-icon',
@@ -23,9 +22,30 @@ export function ContextHelp() {
           'th-dark:text-gray-warm-7'
         )}
         title="Help"
+        rel="noreferrer"
       >
-        <HelpCircle className="lucide" onClick={onHelpClick} />
-      </div>
+        <HelpCircle className="lucide" />
+      </a>
     </div>
   );
 }
+
+function useDocsUrl(): string {
+  const { state } = useCurrentStateAndParams();
+
+  if (!state) {
+    return '';
+  }
+
+  const { data } = state;
+  if (
+    data &&
+    typeof data === 'object' &&
+    'docs' in data &&
+    typeof data.docs === 'string'
+  ) {
+    return data.docs;
+  }
+
+  return '';
+}