feat: Further enhance the plugin header items extension point

* core.ts
 * Some plugins require their header items to remain displayed on the
   header navbar, even though the plugin is not displayed, eg. when
   click 'connect' in hawtio-online with the discover plugin, a new window
   displays hawtio-app showing the connection JMX data. This new window
   still benefits from having the discover plugin dropdown list present so
   that other pods or console can be accessed without returing to the
   discover plugin.
* Adds a 'universal' property to Plugin structure so that an individual
  plugin can state whether its header items should remain on the header
  toolbar even if the rest of the plugin is not the focused-on display

* HawtioHeader.tsx
 * Find all plugins with 'universal' header items as well as the current
   path plugin to build the customized toolbar

app/src/examples/example3/index.ts

@@ -8,7 +8,10 @@ export const registerExample3: HawtioPlugin = () => {
     title: 'Example 3',
     path: '/example3',
     component: Example3,
-    headerItems: [ToolbarItemComp1, ToolbarItemComp2],
+    headerItems: {
+      components: [ToolbarItemComp1, ToolbarItemComp2],
+      universal: false,
+    },
     isActive: async () => true,
   })
 }

packages/hawtio/src/core/core.ts

@@ -3,6 +3,17 @@ import $ from 'jquery'
 import { eventService } from './event-service'
 import { log } from './globals'
 
+export interface HeaderItems {
+  // The components that should be populated as
+  // dropdown items on the header bar
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  components: React.ComponentType<any>[]
+
+  // Should components remain visible on header even when
+  // the plugin is not being displayed.
+  universal: boolean
+}
+
 /**
  * Internal representation of a Hawtio plugin.
  */
@@ -13,8 +24,7 @@ export interface Plugin {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: React.ComponentType<any>
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  headerItems?: React.ComponentType<any>[]
+  headerItems?: HeaderItems
 
   /**
    * Returns if this plugin should be activated.

packages/hawtio/src/ui/page/HawtioHeader.tsx

@@ -109,20 +109,31 @@ const HawtioHeaderToolbar: React.FunctionComponent = () => {
    * Determine which plugin is currently displaying
    * based on the path of the current location
    */
-  const pluginFromLocation = (): Plugin | null => {
+  const filterPlugins = (): Plugin[] => {
     const path = location.pathname
-    return plugins.find(plugin => path.startsWith(plugin.path)) ?? null
+    return plugins.filter(plugin => {
+      if (path.startsWith(plugin.path)) return true
+
+      if (!plugin.headerItems) return false
+
+      return plugin.headerItems.universal === true
+    })
   }
 
-  const plugin = pluginFromLocation()
+  const filteredPlugins = filterPlugins()
 
   return (
     <Toolbar id='hawtio-header-toolbar'>
       <ToolbarContent>
         <ToolbarGroup>
-          {plugin?.headerItems?.map((comp, index) => (
-            <ToolbarItem key={`hawtio-header-toolbar-plugin-item-${index}`}>{React.createElement(comp)}</ToolbarItem>
-          ))}
+          {filteredPlugins.map(
+            plugin =>
+              plugin.headerItems?.components.map((comp, index) => (
+                <ToolbarItem key={`hawtio-header-toolbar-plugin-item-${index}`}>
+                  {React.createElement(comp)}
+                </ToolbarItem>
+              )),
+          )}
         </ToolbarGroup>
         <ToolbarGroup>
           <ToolbarItem>