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

app/azure/index.ts

@@ -47,6 +47,9 @@ function config($stateRegistryProvider: StateRegistry) {
         component: 'containerInstancesView',
       },
     },
+    data: {
+      docs: '/user/aci/containers',
+    },
   };
 
   const containerInstance = {
@@ -77,6 +80,9 @@ function config($stateRegistryProvider: StateRegistry) {
         component: 'dashboardView',
       },
     },
+    data: {
+      docs: '/user/aci/dashboard',
+    },
   };
 
   $stateRegistryProvider.register(azure);

app/docker/__module.js

@@ -78,6 +78,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controllerAs: 'ctrl',
         },
       },
+      data: {
+        docs: '/user/docker/configs',
+      },
     };
 
     var config = {
@@ -112,6 +115,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           component: 'customTemplatesView',
         },
       },
+      data: {
+        docs: '/user/docker/templates/custom',
+      },
     };
 
     const customTemplatesNew = {
@@ -149,6 +155,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'DashboardController',
         },
       },
+      data: {
+        docs: '/user/docker/dashboard',
+      },
     };
 
     var host = {
@@ -159,6 +168,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           component: 'hostView',
         },
       },
+      data: {
+        docs: '/user/docker/host',
+      },
     };
 
     var hostBrowser = {
@@ -180,6 +192,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'EventsController',
         },
       },
+      data: {
+        docs: '/user/docker/events',
+      },
     };
 
     var images = {
@@ -191,6 +206,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'ImagesController',
         },
       },
+      data: {
+        docs: '/user/docker/images',
+      },
     };
 
     var image = {
@@ -235,6 +253,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'NetworksController',
         },
       },
+      data: {
+        docs: '/user/docker/networks',
+      },
     };
 
     var network = {
@@ -262,6 +283,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
       name: 'docker.nodes',
       url: '/nodes',
       abstract: true,
+      data: {
+        docs: '/user/docker/swarm',
+      },
     };
 
     var node = {
@@ -293,6 +317,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'SecretsController',
         },
       },
+      data: {
+        docs: '/user/docker/secrets',
+      },
     };
 
     var secret = {
@@ -326,6 +353,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'ServicesController',
         },
       },
+      data: {
+        docs: '/user/docker/services',
+      },
     };
 
     var service = {
@@ -370,6 +400,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'StacksController',
         },
       },
+      data: {
+        docs: '/user/docker/stacks',
+      },
     };
 
     var stack = {
@@ -414,6 +447,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'SwarmController',
         },
       },
+      data: {
+        docs: '/user/docker/swarm',
+      },
     };
 
     var swarmVisualizer = {
@@ -425,6 +461,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'SwarmVisualizerController',
         },
       },
+      data: {
+        docs: '/user/docker/swarm/cluster-visualizer',
+      },
     };
 
     var tasks = {
@@ -464,6 +503,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'TemplatesController',
         },
       },
+      data: {
+        docs: '/user/docker/templates',
+      },
     };
 
     var volumes = {
@@ -475,6 +517,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           controller: 'VolumesController',
         },
       },
+      data: {
+        docs: '/user/docker/volumes',
+      },
     };
 
     var volume = {
@@ -518,6 +563,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           component: 'dockerFeaturesConfigurationView',
         },
       },
+      data: {
+        docs: '/user/docker/host/setup',
+      },
     };
 
     const swarmFeaturesConfiguration = {
@@ -528,6 +576,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           component: 'dockerFeaturesConfigurationView',
         },
       },
+      data: {
+        docs: '/user/docker/swarm/setup',
+      },
     };
 
     const dockerRegistries = {
@@ -538,6 +589,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           component: 'endpointRegistriesView',
         },
       },
+      data: {
+        docs: '/user/docker/host/registries',
+      },
     };
 
     const swarmRegistries = {
@@ -548,6 +602,9 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
           component: 'endpointRegistriesView',
         },
       },
+      data: {
+        docs: '/user/docker/swarm/registries',
+      },
     };
 
     const dockerRegistryAccess = {

app/docker/react/views/containers.ts

@@ -34,6 +34,9 @@ function config($stateRegistryProvider: StateRegistry) {
         component: 'containersView',
       },
     },
+    data: {
+      docs: '/user/docker/containers',
+    },
   });
 
   $stateRegistryProvider.register({

app/edge/__module.js

@@ -22,6 +22,9 @@ angular
           component: 'edgeGroupsView',
         },
       },
+      data: {
+        docs: '/user/edge/groups',
+      },
     };
 
     const groupsNew = {
@@ -52,6 +55,9 @@ angular
           component: 'edgeStacksView',
         },
       },
+      data: {
+        docs: '/user/edge/stacks',
+      },
     };
 
     const stacksNew = {
@@ -87,6 +93,9 @@ angular
           component: 'edgeJobsView',
         },
       },
+      data: {
+        docs: '/user/edge/jobs',
+      },
     };
 
     const edgeJob = {
@@ -127,6 +136,9 @@ angular
             component: 'waitingRoomView',
           },
         },
+        data: {
+          docs: '/user/edge/devices',
+        },
       });
     }
 

app/kubernetes/__module.js

@@ -77,6 +77,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesHelmApplicationView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/helm',
+      },
     };
 
     const helmTemplates = {
@@ -97,6 +100,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesServicesView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/services',
+      },
     };
 
     const ingresses = {
@@ -107,6 +113,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesIngressesView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/ingresses',
+      },
     };
 
     const ingressesCreate = {
@@ -137,6 +146,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesApplicationsView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/applications',
+      },
     };
 
     const applicationCreation = {
@@ -232,11 +244,17 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
       params: {
         tab: null,
       },
+      data: {
+        docs: '/user/kubernetes/configurations',
+      },
     };
     const configmaps = {
       name: 'kubernetes.configmaps',
       url: '/configmaps',
       abstract: true,
+      data: {
+        docs: '/user/kubernetes/configurations',
+      },
     };
 
     const configMapCreation = {
@@ -263,6 +281,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
       name: 'kubernetes.secrets',
       url: '/secrets',
       abstract: true,
+      data: {
+        docs: '/user/kubernetes/configurations',
+      },
     };
 
     const secretCreation = {
@@ -293,6 +314,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesClusterView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/cluster',
+      },
     };
 
     const node = {
@@ -323,6 +347,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesDashboardView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/dashboard',
+      },
     };
 
     const deploy = {
@@ -343,6 +370,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesResourcePoolsView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/namespaces',
+      },
     };
 
     const resourcePoolCreation = {
@@ -383,6 +413,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesVolumesView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/volumes',
+      },
     };
 
     const volume = {
@@ -403,6 +436,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'endpointRegistriesView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/cluster/registries',
+      },
     };
 
     const registriesAccess = {
@@ -423,6 +459,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           component: 'kubernetesConfigureView',
         },
       },
+      data: {
+        docs: '/user/kubernetes/cluster/setup',
+      },
     };
 
     const endpointKubernetesSecurityConstraint = {
@@ -434,6 +473,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
           controller: 'KubernetesSecurityConstraintController',
         },
       },
+      data: {
+        docs: '/user/kubernetes/cluster/security',
+      },
     };
 
     $stateRegistryProvider.register(kubernetes);

app/kubernetes/custom-templates/index.js

@@ -27,6 +27,9 @@ function config($stateRegistryProvider) {
         component: 'kubeCustomTemplatesView',
       },
     },
+    data: {
+      docs: '/user/kubernetes/templates',
+    },
   };
 
   const customTemplatesNew = {

app/nomad/index.ts

@@ -81,6 +81,9 @@ function config($stateRegistryProvider: StateRegistry) {
         component: 'nomadDashboardView',
       },
     },
+    data: {
+      docs: '/user/nomad/dashboard',
+    },
   };
 
   const jobs = {
@@ -91,6 +94,9 @@ function config($stateRegistryProvider: StateRegistry) {
         component: 'nomadJobsView',
       },
     },
+    data: {
+      docs: '/user/nomad/jobs',
+    },
   };
 
   const events = {

app/portainer/__module.js

@@ -121,6 +121,9 @@ angular
             controller: 'AccountController',
           },
         },
+        data: {
+          docs: '/user/account-settings',
+        },
       };
 
       const tokenCreation = {
@@ -174,6 +177,9 @@ angular
             component: 'environmentsListView',
           },
         },
+        data: {
+          docs: '/admin/environments',
+        },
       };
 
       var endpoint = {
@@ -263,6 +269,9 @@ angular
             controller: 'GroupsController',
           },
         },
+        data: {
+          docs: '/admin/environments/groups',
+        },
       };
 
       var group = {
@@ -306,6 +315,9 @@ angular
             component: 'homeView',
           },
         },
+        data: {
+          docs: '/user/home',
+        },
       };
 
       var init = {
@@ -337,6 +349,9 @@ angular
             controller: 'RegistriesController',
           },
         },
+        data: {
+          docs: '/admin/registries',
+        },
       };
 
       var registry = {
@@ -367,6 +382,9 @@ angular
             component: 'settingsView',
           },
         },
+        data: {
+          docs: '/admin/settings',
+        },
       };
 
       var settingsAuthentication = {
@@ -378,6 +396,9 @@ angular
             controller: 'SettingsAuthenticationController',
           },
         },
+        data: {
+          docs: '/admin/settings/authentication',
+        },
       };
 
       var settingsEdgeCompute = {
@@ -388,6 +409,9 @@ angular
             component: 'settingsEdgeComputeView',
           },
         },
+        data: {
+          docs: '/admin/settings/edge',
+        },
       };
 
       var tags = {
@@ -399,6 +423,9 @@ angular
             controller: 'TagsController',
           },
         },
+        data: {
+          docs: '/admin/environments/tags',
+        },
       };
 
       var users = {
@@ -410,6 +437,9 @@ angular
             controller: 'UsersController',
           },
         },
+        data: {
+          docs: '/admin/users',
+        },
       };
 
       var user = {

app/portainer/rbac/index.js

@@ -27,6 +27,9 @@ function config($stateRegistryProvider) {
         component: 'rolesView',
       },
     },
+    data: {
+      docs: '/admin/users/roles',
+    },
   };
 
   $stateRegistryProvider.register(roles);

app/portainer/react/views/teams.ts

@@ -29,6 +29,9 @@ function config($stateRegistryProvider: StateRegistry) {
         component: 'teamsView',
       },
     },
+    data: {
+      docs: '/admin/users/teams',
+    },
   });
 
   $stateRegistryProvider.register({

app/portainer/react/views/wizard.ts

@@ -55,6 +55,9 @@ function config($stateRegistryProvider: StateRegistry) {
     params: {
       localEndpointId: 0,
     },
+    data: {
+      docs: '/admin/environments/add',
+    },
   });
 
   $stateRegistryProvider.register({

app/portainer/user-activity/index.js

@@ -16,6 +16,9 @@ function config($stateRegistryProvider) {
         component: 'authLogsView',
       },
     },
+    data: {
+      docs: '/admin/logs',
+    },
   });
 
   $stateRegistryProvider.register({
@@ -26,6 +29,9 @@ function config($stateRegistryProvider) {
         component: 'activityLogsView',
       },
     },
+    data: {
+      docs: '/admin/logs/activity',
+    },
   });
 
   $stateRegistryProvider.register({
@@ -39,5 +45,8 @@ function config($stateRegistryProvider) {
     params: {
       id: '',
     },
+    data: {
+      docs: '/admin/notifications',
+    },
   });
 }

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

@@ -1,20 +1,19 @@
 import { HelpCircle } from 'lucide-react';
 import clsx from 'clsx';
-
+import { useCurrentStateAndParams } from '@uirouter/react';
-import { getDocURL } from '@@/PageHeader/ContextHelp/docURLs';
 
 import headerStyles from '../HeaderTitle.module.css';
 import './ContextHelp.css';
 
 export function ContextHelp() {
-  function onHelpClick() {
+  const docsUrl = useDocsUrl();
-    const docURL = getDocURL();
-    window.open(docURL, '_blank');
-  }
 
   return (
-    <div className={clsx(headerStyles.menuButton)}>
+    <div className={headerStyles.menuButton}>
-      <div
+      <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} />
+        <HelpCircle className="lucide" />
-      </div>
+      </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 '';
+}

app/react/components/PageHeader/ContextHelp/docURLs.js

@@ -1,389 +0,0 @@
-const docURLs = [
-  {
-    desc: 'Home',
-    docURL: 'https://docs.portainer.io/user/home',
-    locationRegex: /#!\/home/,
-    exmaples: ['#!/home'],
-  },
-  {
-    desc: 'Docker or Swarm / Dashboard',
-    docURL: 'https://docs.portainer.io/user/docker/dashboard',
-    locationRegex: /#!\/\d+\/docker\/dashboard/,
-    exmaples: ['#!/10/docker/dashboard'],
-  },
-  {
-    desc: 'Docker or Swarm / Custom Templates',
-    docURL: 'https://docs.portainer.io/user/docker/templates/custom',
-    locationRegex: /#!\/\d+\/docker\/templates\/custom/,
-    examples: ['#!/10/docker/templates/custom', '#!/10/docker/templates/custom/new?fileContent=&type=', '#!/10/docker/templates/custom/1'],
-  },
-  {
-    desc: 'Docker or Swarm / App Templates',
-    docURL: 'https://docs.portainer.io/user/docker/templates',
-    locationRegex: /#!\/\d+\/docker\/templates/,
-    examples: ['#!/10/docker/templates'],
-  },
-  {
-    desc: 'Docker or Swarm / Stacks',
-    docURL: 'https://docs.portainer.io/user/docker/stacks',
-    locationRegex: /#!\/\d+\/docker\/stacks/,
-    examples: ['#!/10/docker/stacks', '#!/10/docker/stacks/newstack', '#!/10/docker/stacks/s4?id=3&type=1&regular=true&external=false&orphaned=false'],
-  },
-  {
-    desc: 'Swarm / Services',
-    docURL: 'https://docs.portainer.io/user/docker/services',
-    locationRegex: /#!\/\d+\/docker\/(services|tasks)/,
-    examples: [
-      '#!/10/docker/services',
-      '#!/10/docker/services/zqp46vzoz5nnf39m6c518nlt8',
-      '#!/10/docker/services/zqp46vzoz5nnf39m6c518nlt8/logs',
-      '#!/10/docker/tasks/yyll0peo7ack4uaw2wom3nxso',
-      '#!/10/docker/tasks/yyll0peo7ack4uaw2wom3nxso/logs',
-    ],
-  },
-  {
-    desc: 'Docker or Swarm / Containers',
-    docURL: 'https://docs.portainer.io/user/docker/containers',
-    locationRegex: /#!\/\d+\/docker\/containers/,
-    examples: [
-      '#!/10/docker/containers',
-      '#!/10/docker/containers/new',
-      '#!/10/docker/containers/new?from=49ff4ae03d10c57fe375f6968c48a6169a9852a6bfbb5137cd30c615d58188c1',
-      '#!/10/docker/containers/49ff4ae03d10c57fe375f6968c48a6169a9852a6bfbb5137cd30c615d58188c1',
-      '#!/10/docker/containers/49ff4ae03d10c57fe375f6968c48a6169a9852a6bfbb5137cd30c615d58188c1/logs',
-      '#!/10/docker/containers/49ff4ae03d10c57fe375f6968c48a6169a9852a6bfbb5137cd30c615d58188c1/inspect',
-      '#!/10/docker/containers/49ff4ae03d10c57fe375f6968c48a6169a9852a6bfbb5137cd30c615d58188c1/stats',
-    ],
-  },
-  {
-    desc: 'Docker or Swarm / Images',
-    docURL: 'https://docs.portainer.io/user/docker/images',
-    locationRegex: /#!\/\d+\/docker\/images/,
-    examples: ['#!/10/docker/images', '#!/10/docker/images/build', '#!/10/docker/images/sha256:feb5d9fea6a5e9606aa995e879d862b825965ba48de054caab5ef356dc6b3412'],
-  },
-  {
-    desc: 'Docker or Swarm / Networks',
-    docURL: 'https://docs.portainer.io/user/docker/networks',
-    locationRegex: /#!\/\d+\/docker\/networks/,
-    examples: ['#!/10/docker/networks', '#!/10/docker/networks/new', '#!/10/docker/networks/db5732ff4a2c6df70a18530dba6abd8625f8e94c5fc5daabbcbab07377ee1044'],
-  },
-  {
-    desc: 'Docker or Swarm / Volumes',
-    docURL: 'https://docs.portainer.io/user/docker/volumes',
-    locationRegex: /#!\/\d+\/docker\/volumes/,
-    examples: ['#!/10/docker/volumes', '#!/10/docker/volumes/new', '#!/10/docker/volumes/153b46162f5bab9a7c9d2c8e1675115fcedd4c0ccdf5834159400750fa6b794c'],
-  },
-  {
-    desc: 'Swarm / Configs',
-    docURL: 'https://docs.portainer.io/user/docker/configs',
-    locationRegex: /#!\/\d+\/docker\/configs/,
-    examples: ['#!/10/docker/configs', '#!/10/docker/configs/new', '#!/10/docker/configs/azd0xc805l298jrgnadbnnzyv'],
-  },
-  {
-    desc: 'Swarm / Secrets',
-    docURL: 'https://docs.portainer.io/user/docker/secrets',
-    locationRegex: /#!\/\d+\/docker\/secrets/,
-    examples: ['#!/10/docker/secrets', '#!/10/docker/secrets/new', '#!/10/docker/secrets/tsoeeh7ln7g54g5qkk67eg4xe'],
-  },
-  {
-    desc: 'Docker or Swarm / Swarm / Cluster visualizer',
-    docURL: 'https://docs.portainer.io/user/docker/swarm/cluster-visualizer',
-    locationRegex: /#!\/\d+\/docker\/swarm\/visualizer/,
-    examples: ['#!/10/docker/swarm/visualizer'],
-  },
-  {
-    desc: 'Docker or Swarm / Swarm / Set up',
-    docURL: 'https://docs.portainer.io/user/docker/swarm/setup',
-    locationRegex: /#!\/\d+\/docker\/swarm\/feat-config/,
-    examples: ['#!/10/docker/feat-config'],
-  },
-  {
-    desc: 'Swarm / Swarm / Registries',
-    docURL: 'https://docs.portainer.io/user/docker/swarm/registries',
-    locationRegex: /#!\/\d+\/docker\/swarm\/registries/,
-    examples: ['#!/10/docker/registries'],
-  },
-  {
-    desc: 'Swarm / Swarm',
-    docURL: 'https://docs.portainer.io/user/docker/swarm',
-    locationRegex: /#!\/\d+\/docker\/(swarm|nodes)/,
-    examples: ['#!/10/docker/swarm', '#!/10/docker/nodes/nd694yepzgms1j8y7kv3lpcc3'],
-  },
-  {
-    desc: 'Docker / Events',
-    docURL: 'https://docs.portainer.io/user/docker/events',
-    locationRegex: /#!\/\d+\/docker\/events/,
-    examples: ['#!/10/docker/events'],
-  },
-  {
-    desc: 'Docker / Host / Registries',
-    docURL: 'https://docs.portainer.io/user/docker/host/registries',
-    locationRegex: /#!\/\d+\/docker\/host\/registries/,
-    examples: ['#!/10/docker/registries'],
-  },
-  {
-    desc: 'Docker / Host / Setup',
-    docURL: 'https://docs.portainer.io/user/docker/host/setup',
-    locationRegex: /#!\/\d+\/docker\/host\/feat-config/,
-    examples: ['#!/10/docker/feat-config'],
-  },
-  {
-    desc: 'Docker / Host',
-    docURL: 'https://docs.portainer.io/user/docker/host',
-    locationRegex: /#!\/\d+\/docker\/host/,
-    examples: ['#!/10/docker/host'],
-  },
-  {
-    desc: 'Kubernetes / Dashboard',
-    docURL: 'https://docs.portainer.io/user/kubernetes/dashboard',
-    locationRegex: /#!\/\d+\/kubernetes\/dashboard/,
-    examples: ['#!/1/kubernetes/dashboard'],
-  },
-  {
-    desc: 'Kubernetes / Custom Templates',
-    docURL: 'https://docs.portainer.io/user/kubernetes/templates',
-    locationRegex: /#!\/\d+\/kubernetes\/templates\/custom/,
-    examples: ['#!/1/kubernetes/templates/custom', '#!/1/kubernetes/templates/custom/new?fileContent='],
-  },
-  {
-    desc: 'Kubernetes / Namespaces',
-    docURL: 'https://docs.portainer.io/user/kubernetes/namespaces',
-    locationRegex: /#!\/\d+\/kubernetes\/pools/,
-    examples: ['#!/1/kubernetes/pools', '#!/1/kubernetes/pools/new', '#!/1/kubernetes/deploy?templateId=', '#!/1/kubernetes/pools/default'],
-  },
-  {
-    desc: 'Kubernetes / Helm',
-    docURL: 'https://docs.portainer.io/user/kubernetes/helm',
-    locationRegex: /#!\/\d+\/kubernetes\/templates\/helm/,
-    examples: ['#!/1/kubernetes/templates/helm'],
-  },
-  {
-    desc: 'Kubernetes / Applications',
-    docURL: 'https://docs.portainer.io/user/kubernetes/applications',
-    locationRegex: /#!\/\d+\/kubernetes\/applications/,
-    examples: ['#!/1/kubernetes/applications', '#!/1/kubernetes/applications/new', '#!/1/kubernetes/deploy?templateId=', '#!/1/kubernetes/applications/metallb-system/controller'],
-  },
-  {
-    desc: 'Kubernetes / Services',
-    docURL: 'https://docs.portainer.io/user/kubernetes/services',
-    locationRegex: /#!\/\d+\/kubernetes\/services/,
-    examples: ['#!/1/kubernetes/services'],
-  },
-  {
-    desc: 'Kubernetes / Ingresses',
-    docURL: 'https://docs.portainer.io/user/kubernetes/ingresses',
-    locationRegex: /#!\/\d+\/kubernetes\/ingresses/,
-    examples: ['#!/1/kubernetes/ingresses'],
-  },
-  {
-    desc: 'Kubernetes / ConfigMaps & Secrets',
-    docURL: 'https://docs.portainer.io/user/kubernetes/configurations',
-    locationRegex: /#!\/\d+\/kubernetes\/configurations/,
-    examples: ['#!/1/kubernetes/configurations', '#!/1/kubernetes/configurations/new', '#!/1/kubernetes/configurations/metallb-system/config'],
-  },
-  {
-    desc: 'Kubernetes / Volumes',
-    docURL: 'https://docs.portainer.io/user/kubernetes/volumes',
-    locationRegex: /#!\/\d+\/kubernetes\/volumes/,
-    examples: ['#!/1/kubernetes/volumes'],
-  },
-  {
-    desc: 'Kubernetes / Cluster / Set up',
-    docURL: 'https://docs.portainer.io/user/kubernetes/cluster/setup',
-    locationRegex: /#!\/\d+\/kubernetes\/cluster\/configure/,
-    examples: ['#!/1/kubernetes/cluster/configure'],
-  },
-  {
-    desc: 'Kubernetes / Cluster / Security constraints',
-    docURL: 'https://docs.portainer.io/user/kubernetes/cluster/security',
-    locationRegex: /#!\/\d+\/kubernetes\/cluster\/securityConstraint/,
-    examples: ['#!/1/kubernetes/cluster/securityConstraint'],
-  },
-  {
-    desc: 'Kubernetes / Cluster',
-    docURL: 'https://docs.portainer.io/user/kubernetes/cluster',
-    locationRegex: /#!\/\d+\/kubernetes\/cluster/,
-    examples: ['#!/1/kubernetes/cluster', '#!/1/kubernetes/cluster/ip-10-138-11-102', '#!/1/kubernetes/cluster/ip-10-138-11-102/stats'],
-  },
-  {
-    desc: 'Kubernetes / Cluster / Registries',
-    docURL: 'https://docs.portainer.io/user/kubernetes/cluster/registries',
-    locationRegex: /#!\/\d+\/kubernetes\/registries/,
-    examples: ['#!/1/kubernetes/registries'],
-  },
-  {
-    desc: 'Azure ACI / Dashboard',
-    docURL: 'https://docs.portainer.io/user/aci/dashboard',
-    locationRegex: /#!\/\d+\/azure\/dashboard/,
-    examples: ['#!/26/azure/dashboard'],
-  },
-  {
-    desc: 'Azure ACI / Container instances',
-    docURL: 'https://docs.portainer.io/user/aci/containers',
-    locationRegex: /#!\/\d+\/azure\/containerinstances/,
-    examples: ['#!/26/azure/containerinstances'],
-  },
-  {
-    desc: 'Edge Compute / Edge Devices',
-    docURL: 'https://docs.portainer.io/user/edge/devices',
-    locationRegex: /#!\/edge\/devices/,
-    examples: ['#!/edge/devices', '#!/edge/devices/waiting-room'],
-  },
-  {
-    desc: 'Edge Compute / Edge Groups',
-    docURL: 'https://docs.portainer.io/user/edge/groups',
-    locationRegex: /#!\/edge\/groups/,
-    examples: ['#!/edge/groups', '#!/edge/groups/new'],
-  },
-  {
-    desc: 'Edge Compute / Edge Stacks ',
-    docURL: 'https://docs.portainer.io/user/edge/stacks',
-    locationRegex: /#!\/edge\/stacks/,
-    examples: ['#!/edge/stacks', '#!/edge/stacks/new'],
-  },
-  {
-    desc: 'Edge Compute / Edge Jobs',
-    docURL: 'https://docs.portainer.io/user/edge/jobs',
-    locationRegex: /#!\/edge\/jobs/,
-    examples: ['#!/edge/jobs', '#!/edge/jobs/new'],
-  },
-  {
-    desc: 'Edge Compute / Edge Configurations',
-    docURL: 'https://docs.portainer.io/user/edge/configurations',
-    locationRegex: /#!\/edge\/configurations/,
-    examples: ['#!/edge/configurations', '#!/edge/configurations/new'],
-  },
-  {
-    desc: 'Nomad / Dashboard',
-    docURL: 'https://docs.portainer.io/user/nomad/dashboard',
-    locationRegex: /#!\/\d+\/nomad\/dashboard/,
-    examples: ['#!/2/nomad/dashboard'],
-  },
-  {
-    desc: 'Nomad / Nomad Jobs',
-    docURL: 'https://docs.portainer.io/user/nomad/jobs',
-    locationRegex: /#!\/\d+\/nomad\/jobs/,
-    examples: [
-      '#!/2/nomad/jobs',
-      '#!/2/nomad/jobs/portainer-agent/tasks/portainer-agent/allocations/acdbf08e-34af-9b8a-cc84-7dc202bf1fcf/events?namespace=default',
-      '#!/2/nomad/jobs/portainer-agent/tasks/portainer-agent/allocations/acdbf08e-34af-9b8a-cc84-7dc202bf1fcf/logs?namespace=default',
-    ],
-  },
-  {
-    desc: 'Account Settings',
-    docURL: 'https://docs.portainer.io/user/account-settings',
-    locationRegex: /#!\/account/,
-    examples: ['#!/account', '#!/account/tokens/new'],
-  },
-  {
-    desc: 'Settings / Users',
-    docURL: 'https://docs.portainer.io/admin/users',
-    locationRegex: /#!\/users/,
-    examples: ['#!/users', '#!/users/1'],
-  },
-  {
-    desc: 'Settings / Users / Teams',
-    docURL: 'https://docs.portainer.io/admin/users/teams',
-    locationRegex: /#!\/teams/,
-    examples: ['#!/teams', '#!/teams/1'],
-  },
-  {
-    desc: 'Settings / Users / Roles',
-    docURL: 'https://docs.portainer.io/admin/users/roles',
-    locationRegex: /#!\/roles/,
-    examples: ['#!/roles'],
-  },
-  {
-    desc: 'Settings / Environments',
-    docURL: 'https://docs.portainer.io/admin/environments',
-    locationRegex: /#!\/endpoints/,
-    examples: ['#!/endpoints', '#!/endpoints/10', '#!/endpoints/10/access'],
-  },
-  {
-    desc: 'Settings / Environments / Groups',
-    docURL: 'https://docs.portainer.io/admin/environments/groups',
-    locationRegex: /#!\/groups/,
-    examples: ['#!/groups', '#!/groups/new', '#!/groups/3', '#!/groups/3/access'],
-  },
-  {
-    desc: 'Settings / Environments / Tags',
-    docURL: 'https://docs.portainer.io/admin/environments/tags',
-    locationRegex: /#!\/tags/,
-    examples: ['#!/tags'],
-  },
-  {
-    desc: 'Settings / Registries',
-    docURL: 'https://docs.portainer.io/admin/registries',
-    locationRegex: /#!\/registries/,
-    examples: [
-      '#!/registries',
-      '#!/registries/new',
-      '#!/registries/1',
-      '#!/registries/1/repositories',
-      '#!/registries/1/configure',
-      '#!/registries/5/portainer.demo~2Fportainerregistrytesting~2Falpine',
-      '#!/registries/5/portainer.demo~2Fportainerregistrytesting~2Falpine/jfadelhaye',
-    ],
-  },
-  {
-    desc: 'Settings / Licenses',
-    docURL: 'https://docs.portainer.io/admin/licenses',
-    locationRegex: /#!\/licenses/,
-    examples: ['#!/licenses', '#!/licenses/licenses/new'],
-  },
-  {
-    desc: 'Settings / Authentication logs',
-    docURL: 'https://docs.portainer.io/admin/logs',
-    locationRegex: /#!\/auth-logs/,
-    examples: ['#!/auth-logs'],
-  },
-  {
-    desc: 'Settings / Authentication logs / Activity logs',
-    docURL: 'https://docs.portainer.io/admin/logs/activity',
-    locationRegex: /#!\/activity-logs/,
-    examples: ['#!/activity-logs'],
-  },
-  {
-    desc: 'Settings / Settings / Authentication',
-    docURL: 'https://docs.portainer.io/admin/settings/authentication',
-    locationRegex: /#!\/settings\/auth/,
-    examples: ['#!/settings/auth'],
-  },
-  {
-    desc: 'Settings / Settings / Notifications',
-    docURL: 'https://docs.portainer.io/admin/notifications',
-    locationRegex: /#!\/notifications/,
-    examples: ['#!/notifications'],
-  },
-  {
-    desc: 'Settings / Settings / Cloud settings',
-    docURL: 'https://docs.portainer.io/admin/settings/cloud',
-    locationRegex: /#!\/settings\/cloud/,
-    examples: ['#!/settings/cloud', '#!/settings/cloud/credentials/new', '#!/settings/cloud/credentials/1'],
-  },
-  {
-    desc: 'Settings / Settings / Edge Compute',
-    docURL: 'https://docs.portainer.io/admin/settings/edge',
-    locationRegex: /#!\/settings\/edge/,
-    examples: ['#!/settings/edge'],
-  },
-  {
-    desc: 'Settings / Settings',
-    docURL: 'https://docs.portainer.io/admin/settings',
-    locationRegex: /#!\/settings/,
-    examples: ['#!/settings'],
-  },
-];
-
-const DEFAULT_DOC_URL = 'https://docs.portainer.io';
-
-export function getDocURL() {
-  const hash = window.location.hash;
-  for (let i = 0; i < docURLs.length; i += 1) {
-    const docURL = docURLs[i];
-    if (hash.match(docURL.locationRegex)) {
-      return docURL.docURL;
-    }
-  }
-  return DEFAULT_DOC_URL;
-}

app/react/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from '@uirouter/react';
 import { RefreshCw } from 'lucide-react';
+import { PropsWithChildren } from 'react';
 
 import { Button } from '../buttons';
 
@@ -24,13 +25,10 @@ export function PageHeader({
   reload,
   loading,
   onReload,
-}: Props) {
+  children,
+}: PropsWithChildren<Props>) {
   const router = useRouter();
 
-  function onClickedRefresh() {
-    return onReload ? onReload() : router.stateService.reload();
-  }
-
   return (
     <HeaderContainer id={id}>
       <Breadcrumbs breadcrumbs={breadcrumbs} />
@@ -47,7 +45,12 @@ export function PageHeader({
             <RefreshCw className="icon" />
           </Button>
         )}
+        {children}
       </HeaderTitle>
     </HeaderContainer>
   );
+
+  function onClickedRefresh() {
+    return onReload ? onReload() : router.stateService.reload();
+  }
 }