fix(help): add versioned doc links to support LTS/STS docs [EE-6780] (#11282)

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

@@ -2,6 +2,8 @@ import { HelpCircle } from 'lucide-react';
 import clsx from 'clsx';
 import { useCurrentStateAndParams } from '@uirouter/react';
 
+import { useSystemVersion } from '@/react/portainer/system/useSystemVersion';
+
 import headerStyles from '../HeaderTitle.module.css';
 import './ContextHelp.css';
 
@@ -11,7 +13,7 @@ export function ContextHelp() {
   return (
     <div className={headerStyles.menuButton}>
       <a
-        href={`https://docs.portainer.io${docsUrl}`}
+        href={docsUrl}
         target="_blank"
         color="none"
         className={clsx(
@@ -32,11 +34,26 @@ export function ContextHelp() {
 
 function useDocsUrl(): string {
   const { state } = useCurrentStateAndParams();
+  const versionQuery = useSystemVersion();
 
   if (!state) {
     return '';
   }
 
+  let url = 'https://docs.portainer.io/';
+  if (versionQuery.data) {
+    let { ServerVersion } = versionQuery.data;
+    if (ServerVersion[0] === 'v') {
+      ServerVersion = ServerVersion.substring(1);
+    }
+
+    const parts = ServerVersion.split('.');
+    if (parts.length >= 2) {
+      const version = parts.slice(0, 2).join('.');
+      url += `v/${version}/`;
+    }
+  }
+
   const { data } = state;
   if (
     data &&
@@ -44,8 +61,8 @@ function useDocsUrl(): string {
     'docs' in data &&
     typeof data.docs === 'string'
   ) {
-    return data.docs;
+    return url + data.docs;
   }
 
-  return '';
+  return url;
 }

app/react/components/PageHeader/HeaderTitle.test.tsx

@@ -1,3 +1,5 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+
 import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
 import { render } from '@/react-tools/test-utils';
@@ -23,14 +25,17 @@ test('should not render without a wrapping HeaderContainer', async () => {
 test('should display a HeaderTitle', async () => {
   const username = 'username';
   const user = new UserViewModel({ Username: username });
+  const queryClient = new QueryClient();
 
   const title = 'title';
   const { queryByText } = render(
-    <UserContext.Provider value={{ user }}>
-      <HeaderContainer>
-        <HeaderTitle title={title} />
-      </HeaderContainer>
-    </UserContext.Provider>
+    <QueryClientProvider client={queryClient}>
+      <UserContext.Provider value={{ user }}>
+        <HeaderContainer>
+          <HeaderTitle title={title} />
+        </HeaderContainer>
+      </UserContext.Provider>
+    </QueryClientProvider>
   );
 
   const heading = queryByText(title);

app/react/components/PageHeader/PageHeader.test.tsx

@@ -1,6 +1,6 @@
 import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
-import { render } from '@/react-tools/test-utils';
+import { renderWithQueryClient } from '@/react-tools/test-utils';
 
 import { PageHeader } from './PageHeader';
 
@@ -9,7 +9,7 @@ test('should display a PageHeader', async () => {
   const user = new UserViewModel({ Username: username });
 
   const title = 'title';
-  const { queryByText } = render(
+  const { queryByText } = renderWithQueryClient(
     <UserContext.Provider value={{ user }}>
       <PageHeader title={title} />
     </UserContext.Provider>