diff --git a/app/src/examples/example3/index.ts b/app/src/examples/example3/index.ts index 10a56a2b6..7da058d09 100644 --- a/app/src/examples/example3/index.ts +++ b/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, }) } diff --git a/packages/hawtio/src/core/core.ts b/packages/hawtio/src/core/core.ts index e3accaa2e..8c6bc000d 100644 --- a/packages/hawtio/src/core/core.ts +++ b/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[] + + // 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 - // eslint-disable-next-line @typescript-eslint/no-explicit-any - headerItems?: React.ComponentType[] + headerItems?: HeaderItems /** * Returns if this plugin should be activated. diff --git a/packages/hawtio/src/ui/page/HawtioHeader.tsx b/packages/hawtio/src/ui/page/HawtioHeader.tsx index 657a4068d..b90de40b2 100644 --- a/packages/hawtio/src/ui/page/HawtioHeader.tsx +++ b/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 ( - {plugin?.headerItems?.map((comp, index) => ( - {React.createElement(comp)} - ))} + {filteredPlugins.map( + plugin => + plugin.headerItems?.components.map((comp, index) => ( + + {React.createElement(comp)} + + )), + )}