diff --git a/workspaces/global-header/.changeset/promote-global-header-nfs-stable.md b/workspaces/global-header/.changeset/promote-global-header-nfs-stable.md new file mode 100644 index 00000000000..bc0302c422b --- /dev/null +++ b/workspaces/global-header/.changeset/promote-global-header-nfs-stable.md @@ -0,0 +1,7 @@ +--- +'@red-hat-developer-hub/backstage-plugin-global-header': minor +--- + +Promote global-header NFS plugin from `/alpha` to stable. NFS APIs are now exported from the main package entry point. OFS APIs move to `/legacy` (deprecated). Translations remain at `/alpha`. + +Restructures the source layout: NFS code moves from `src/alpha/` up to `src/` (extensions, defaults, components, utils, plugin, types), OFS-only code moves into `src/legacy/`, and shared components remain in place. diff --git a/workspaces/global-header/packages/app-legacy/src/App.tsx b/workspaces/global-header/packages/app-legacy/src/App.tsx index 20af4f401a3..c009a3e7d2a 100644 --- a/workspaces/global-header/packages/app-legacy/src/App.tsx +++ b/workspaces/global-header/packages/app-legacy/src/App.tsx @@ -58,7 +58,7 @@ import { NotificationsPage } from '@backstage/plugin-notifications'; import { githubAuthApiRef } from '@backstage/core-plugin-api'; import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme'; -import { globalHeaderTranslations } from '@red-hat-developer-hub/backstage-plugin-global-header'; +import { globalHeaderTranslations } from '@red-hat-developer-hub/backstage-plugin-global-header/legacy'; import ManageAccounts from '@mui/icons-material/ManageAccountsOutlined'; import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined'; import Logout from '@mui/icons-material/LogoutOutlined'; diff --git a/workspaces/global-header/packages/app-legacy/src/components/Root/Root.tsx b/workspaces/global-header/packages/app-legacy/src/components/Root/Root.tsx index 1979c0a71ed..a34ff64c535 100644 --- a/workspaces/global-header/packages/app-legacy/src/components/Root/Root.tsx +++ b/workspaces/global-header/packages/app-legacy/src/components/Root/Root.tsx @@ -35,7 +35,7 @@ import { MyGroupsSidebarItem } from '@backstage/plugin-org'; import { GlobalHeaderComponent, defaultGlobalHeaderComponentsMountPoints, -} from '@red-hat-developer-hub/backstage-plugin-global-header'; +} from '@red-hat-developer-hub/backstage-plugin-global-header/legacy'; import { NotificationsSidebarItem } from '@backstage/plugin-notifications'; /** This component is copy pasted from RHDH and should be kept in sync. */ diff --git a/workspaces/global-header/packages/app/src/App.tsx b/workspaces/global-header/packages/app/src/App.tsx index 3083ac37109..3be9e4b28d9 100644 --- a/workspaces/global-header/packages/app/src/App.tsx +++ b/workspaces/global-header/packages/app/src/App.tsx @@ -28,7 +28,7 @@ import { globalHeaderTranslationsModule, GlobalHeaderMenuItemBlueprint, GlobalHeaderMenuItem, -} from '@red-hat-developer-hub/backstage-plugin-global-header/alpha'; +} from '@red-hat-developer-hub/backstage-plugin-global-header'; import { navModule } from './modules/nav'; const signInModule = createFrontendModule({ diff --git a/workspaces/global-header/plugins/global-header/app-config.dynamic.yaml b/workspaces/global-header/plugins/global-header/app-config.dynamic.yaml index 0ca5331d261..477d29d007a 100644 --- a/workspaces/global-header/plugins/global-header/app-config.dynamic.yaml +++ b/workspaces/global-header/plugins/global-header/app-config.dynamic.yaml @@ -2,32 +2,53 @@ dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-global-header: + # NFS (New Frontend System) deployment requires these extensions in app-config.yaml: + # app: + # extensions: + # - app-root-wrapper:app/global-header + # - translation:app/global-header-translations + # - api:app/app-language: + # config: + # availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja'] + # defaultLanguage: 'en' + # ------------------------------------------------------------ + + # OFS (Old Frontend System) deployment configuration: + + # Note: Legacy/OFS exports are only available from `module: Legacy`. + # The default module (PluginRoot) is NFS-only. translationResources: - importName: globalHeaderTranslations + module: Legacy ref: globalHeaderTranslationRef mountPoints: - mountPoint: application/header importName: GlobalHeader + module: Legacy config: position: above-sidebar # above-main-content | above-sidebar - mountPoint: global.header/component importName: CompanyLogo + module: Legacy config: priority: 200 props: to: '/' - mountPoint: global.header/component importName: SearchComponent + module: Legacy config: priority: 100 - mountPoint: global.header/component importName: Spacer + module: Legacy config: priority: 99 props: growFactor: 0 - mountPoint: global.header/component importName: HeaderIconButton + module: Legacy config: priority: 90 props: @@ -37,16 +58,19 @@ dynamicPlugins: to: create - mountPoint: global.header/component importName: StarredDropdown + module: Legacy config: priority: 85 - mountPoint: global.header/component importName: ApplicationLauncherDropdown + module: Legacy config: priority: 82 - mountPoint: global.header/application-launcher importName: MenuItemLink + module: Legacy config: section: Documentation priority: 150 @@ -58,6 +82,7 @@ dynamicPlugins: - mountPoint: global.header/application-launcher importName: MenuItemLink + module: Legacy config: section: Developer Tools priority: 100 @@ -69,28 +94,34 @@ dynamicPlugins: - mountPoint: global.header/component importName: HelpDropdown + module: Legacy config: priority: 80 - mountPoint: global.header/help importName: SupportButton + module: Legacy config: priority: 10 - mountPoint: global.header/component importName: NotificationButton + module: Legacy config: priority: 70 - mountPoint: global.header/component importName: Divider + module: Legacy config: priority: 50 - mountPoint: global.header/component importName: ProfileDropdown + module: Legacy config: priority: 10 - mountPoint: global.header/profile importName: MenuItemLink + module: Legacy config: priority: 100 props: @@ -100,6 +131,7 @@ dynamicPlugins: icon: manageAccounts - mountPoint: global.header/profile importName: MenuItemLink + module: Legacy config: priority: 90 props: @@ -109,5 +141,6 @@ dynamicPlugins: icon: account - mountPoint: global.header/profile importName: LogoutButton + module: Legacy config: priority: 10 diff --git a/workspaces/global-header/plugins/global-header/dev/index.tsx b/workspaces/global-header/plugins/global-header/dev/index.tsx index 00a0aabfea7..b0ff4d24df4 100644 --- a/workspaces/global-header/plugins/global-header/dev/index.tsx +++ b/workspaces/global-header/plugins/global-header/dev/index.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { useMemo } from 'react'; import type { PropsWithChildren } from 'react'; import { createDevApp } from '@backstage/dev-utils'; @@ -37,29 +36,34 @@ import '@backstage/ui/css/styles.css'; import Button from '@mui/material/Button'; -import { ScalprumContext, ScalprumState } from '@scalprum/react-core'; -import { PluginStore } from '@openshift/dynamic-plugin-sdk'; - import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme'; -import { - GlobalHeader, - globalHeaderPlugin, - NotificationBanner, - Spacer, -} from '../src/plugin'; +import { GlobalHeader } from '../src/components/GlobalHeader'; +import { GlobalHeaderProvider } from '../src/extensions/GlobalHeaderContext'; +import { NotificationBanner } from '../src/components/NotificationBanner'; -import { globalHeaderTranslations } from '../src/translations'; +import { SearchComponent } from '../src/components/SearchComponent/SearchComponent'; +import { Spacer } from '../src/components/Spacer/Spacer'; +import { StarredDropdown } from '../src/components/HeaderDropdownComponent/StarredDropdown'; +import { NotificationButton } from '../src/components/NotificationButton/NotificationButton'; +import { Divider } from '../src/components/Divider/Divider'; +import { CompanyLogo } from '../src/components/CompanyLogo/CompanyLogo'; +import { HeaderIconButton } from '../src/components/HeaderIconButton/HeaderIconButton'; +import { HeaderButton } from '../src/components/HeaderButton/HeaderButton'; +import { ProfileDropdown } from '../src/components/ProfileDropdown'; +import { HelpDropdown } from '../src/components/HelpDropdown'; +import { ApplicationLauncherDropdown } from '../src/components/ApplicationLauncherDropdown'; +import { LogoutButton } from '../src/components/LogoutButton/LogoutButton'; +import { SupportButton } from '../src/components/SupportButton/SupportButton'; +import { MyProfileMenuItem } from '../src/components/MyProfileMenuItem'; +import { rhdhLogo } from '../src/defaults/rhdhLogo'; -import { - defaultApplicationLauncherDropdownMountPoints, - defaultCreateDropdownMountPoints, - defaultGlobalHeaderComponentsMountPoints, - defaultHelpDropdownMountPoints, - defaultProfileDropdownMountPoints, -} from '../src/defaultMountPoints/defaultMountPoints'; +import { globalHeaderTranslations } from '../src/translations'; -import { HeaderButton } from '../src/components/HeaderButton/HeaderButton'; +import type { + GlobalHeaderComponentData, + GlobalHeaderMenuItemData, +} from '../src/types'; const mockSearchApi = new MockSearchApi({ results: [ @@ -135,22 +139,84 @@ const discoveryApi = { getBaseUrl: async () => mockBaseUrl }; const fetchApi = new MockFetchApi(); const client = new NotificationsClient({ discoveryApi, fetchApi }); +const CompanyLogoWrapper = () => ; + +const SelfServiceButton = () => ( + +); + +const defaultComponents: GlobalHeaderComponentData[] = [ + { component: CompanyLogoWrapper, priority: 200 }, + { component: SearchComponent, priority: 100, layout: { flexGrow: 1 } }, + { component: Spacer, priority: 99, layout: { flexGrow: 0 } }, + { component: SelfServiceButton, priority: 90 }, + { component: StarredDropdown, priority: 85 }, + { component: ApplicationLauncherDropdown, priority: 82 }, + { component: HelpDropdown, priority: 80 }, + { component: NotificationButton, priority: 70 }, + { component: Divider, priority: 50 }, + { component: ProfileDropdown, priority: 10 }, +]; + +const defaultMenuItems: GlobalHeaderMenuItemData[] = [ + { + target: 'profile', + title: 'Settings', + titleKey: 'profile.settings', + link: '/settings', + icon: 'manage_accounts', + priority: 100, + }, + { + target: 'profile', + component: MyProfileMenuItem, + type: 'component', + priority: 90, + }, + { + target: 'profile', + component: LogoutButton, + type: 'component', + priority: 10, + }, + { + target: 'help', + component: SupportButton, + type: 'component', + priority: 10, + }, + { + target: 'app-launcher', + title: 'Developer Hub', + titleKey: 'applicationLauncher.developerHub', + link: 'https://docs.redhat.com/en/documentation/red_hat_developer_hub', + icon: 'hub', + sectionLabel: 'applicationLauncher.sections.documentation', + priority: 150, + }, + { + target: 'app-launcher', + title: 'RHDH Local', + titleKey: 'applicationLauncher.rhdhLocal', + link: 'https://github.com/redhat-developer/rhdh-local', + icon: 'hub', + sectionLabel: 'applicationLauncher.sections.developerTools', + priority: 100, + }, +]; + const Providers = ({ - mountPoints, -}: PropsWithChildren<{ mountPoints: Record }>) => { - const scalprumState = useMemo( - () => ({ - initialized: true, - api: { - dynamicRootConfig: { - mountPoints, - }, - }, - config: {}, - pluginStore: new PluginStore(), - }), - [mountPoints], - ); + components, + menuItems = defaultMenuItems, +}: PropsWithChildren<{ + components: GlobalHeaderComponentData[]; + menuItems?: GlobalHeaderMenuItemData[]; +}>) => { starredEntitiesApi.toggleStarred('template:default/mock-starred-template'); return ( @@ -163,60 +229,31 @@ const Providers = ({ [notificationsApiRef, client], ]} > - + - + ); }; createDevApp() - .registerPlugin(globalHeaderPlugin) .addThemes(getAllThemes()) .addTranslationResource(globalHeaderTranslations) .setAvailableLanguages(['en', 'de', 'es', 'fr', 'it']) .setDefaultLanguage('en') .addPage({ - element: ( - - - - ), + element: , title: 'Default header', path: '/default-header', }) .addPage({ element: ( index > 0, - ), - { - Component: Spacer, - config: { - priority: 100, // the greater the number, the more to the left it will be - }, - }, - ], - 'global.header/create': defaultCreateDropdownMountPoints, - 'global.header/profile': defaultProfileDropdownMountPoints, - 'global.header/application-launcher': - defaultApplicationLauncherDropdownMountPoints, - }} - > - - + components={[ + ...defaultComponents.filter(c => c.component !== SearchComponent), + { component: Spacer, priority: 100 }, + ]} + /> ), title: 'Header without search', path: '/header-without-search', @@ -224,62 +261,39 @@ createDevApp() .addPage({ element: ( - - + components={[ + { + component: () => ( + + ), + }, + { + component: () => ( + + ), + }, + { + component: () => ( + + ), + }, + { + component: () => ( + + ), + }, + { + component: () => ( + + ), + }, + ]} + menuItems={[]} + /> ), title: 'Header buttons', path: '/header-buttons', diff --git a/workspaces/global-header/plugins/global-header/dev/legacy.tsx b/workspaces/global-header/plugins/global-header/dev/legacy.tsx new file mode 100644 index 00000000000..821d37803e8 --- /dev/null +++ b/workspaces/global-header/plugins/global-header/dev/legacy.tsx @@ -0,0 +1,330 @@ +/* + * Copyright Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useMemo } from 'react'; +import type { PropsWithChildren } from 'react'; + +import { createDevApp } from '@backstage/dev-utils'; +import { mockApis, MockFetchApi, TestApiProvider } from '@backstage/test-utils'; +import { MockSearchApi, searchApiRef } from '@backstage/plugin-search-react'; +import { + catalogApiRef, + MockStarredEntitiesApi, + starredEntitiesApiRef, +} from '@backstage/plugin-catalog-react'; +import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; +import { configApiRef } from '@backstage/core-plugin-api'; +import { + notificationsApiRef, + NotificationsClient, +} from '@backstage/plugin-notifications'; + +// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend +import '@backstage/ui/css/styles.css'; + +import Button from '@mui/material/Button'; + +import { ScalprumContext, ScalprumState } from '@scalprum/react-core'; +import { PluginStore } from '@openshift/dynamic-plugin-sdk'; + +import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme'; + +import { + GlobalHeader, + globalHeaderPlugin, + NotificationBanner, + Spacer, +} from '../src/legacy/plugin'; + +import { globalHeaderTranslations } from '../src/translations'; + +import { + defaultApplicationLauncherDropdownMountPoints, + defaultCreateDropdownMountPoints, + defaultGlobalHeaderComponentsMountPoints, + defaultHelpDropdownMountPoints, + defaultProfileDropdownMountPoints, +} from '../src/legacy/defaultMountPoints/defaultMountPoints'; + +import { HeaderButton } from '../src/components/HeaderButton/HeaderButton'; + +const mockSearchApi = new MockSearchApi({ + results: [ + { + type: 'software-catalog', + document: { + title: 'example search result', + text: 'this is an example search result', + location: 'https://example.com', + }, + }, + ], +}); + +const mockConfigApi = mockApis.config({ + data: { + app: { + support: { + url: 'https://access.redhat.com/products/red-hat-developer-hub', + }, + }, + dynamicPlugins: { + frontend: { + 'backstage.plugin-notifications': { + dynamicRoutes: [{ path: '/notifications' }], + }, + }, + }, + }, +}); + +const entities = [ + { + apiVersion: '1', + kind: 'Template', + metadata: { + name: 'mock-starred-template', + title: 'Mock Starred Template!', + }, + }, + { + apiVersion: '1', + kind: 'Template', + metadata: { + name: 'mock-starred-template-2', + title: 'Mock Starred Template 2!', + }, + }, + { + apiVersion: '1', + kind: 'Template', + metadata: { + name: 'mock-starred-template-3', + title: 'Mock Starred Template 3!', + }, + }, + { + apiVersion: '1', + kind: 'Template', + metadata: { + name: 'mock-starred-template-4', + title: 'Mock Starred Template 4!', + }, + }, +]; + +const catalogApi = catalogApiMock({ entities }); + +const starredEntitiesApi = new MockStarredEntitiesApi(); + +const mockBaseUrl = 'https://backstage/api/notifications'; +const discoveryApi = { getBaseUrl: async () => mockBaseUrl }; +const fetchApi = new MockFetchApi(); +const client = new NotificationsClient({ discoveryApi, fetchApi }); + +const Providers = ({ + mountPoints, +}: PropsWithChildren<{ mountPoints: Record }>) => { + const scalprumState = useMemo( + () => ({ + initialized: true, + api: { + dynamicRootConfig: { + mountPoints, + }, + }, + config: {}, + pluginStore: new PluginStore(), + }), + [mountPoints], + ); + starredEntitiesApi.toggleStarred('template:default/mock-starred-template'); + + return ( + + + + + + ); +}; + +createDevApp() + .registerPlugin(globalHeaderPlugin) + .addThemes(getAllThemes()) + .addTranslationResource(globalHeaderTranslations) + .setAvailableLanguages(['en', 'de', 'es', 'fr', 'it']) + .setDefaultLanguage('en') + .addPage({ + element: ( + + + + ), + title: 'Default header', + path: '/default-header', + }) + .addPage({ + element: ( + index > 0, + ), + { + Component: Spacer, + config: { + priority: 100, // the greater the number, the more to the left it will be + }, + }, + ], + 'global.header/create': defaultCreateDropdownMountPoints, + 'global.header/profile': defaultProfileDropdownMountPoints, + 'global.header/application-launcher': + defaultApplicationLauncherDropdownMountPoints, + }} + > + + + ), + title: 'Header without search', + path: '/header-without-search', + }) + .addPage({ + element: ( + + + + ), + title: 'Header buttons', + path: '/header-buttons', + }) + .addPage({ + element: ( +
+ + + + + + {/* + + + */} + + + + + + +
+ ), + title: 'Notifications', + path: '/notifications', + }) + .render(); diff --git a/workspaces/global-header/plugins/global-header/package.json b/workspaces/global-header/plugins/global-header/package.json index 50c66d8fe99..180f20b3d35 100644 --- a/workspaces/global-header/plugins/global-header/package.json +++ b/workspaces/global-header/plugins/global-header/package.json @@ -6,6 +6,9 @@ "exports": { ".": "./src/index.ts", "./alpha": "./src/alpha/index.ts", + "./legacy": "./src/legacy.ts", + "./global-header-module": "./src/globalHeaderModuleExport.ts", + "./global-header-translations-module": "./src/globalHeaderTranslationsModuleExport.ts", "./package.json": "./package.json" }, "typesVersions": { @@ -13,6 +16,15 @@ "alpha": [ "src/alpha/index.ts" ], + "legacy": [ + "src/legacy.ts" + ], + "global-header-module": [ + "src/globalHeaderModuleExport.ts" + ], + "global-header-translations-module": [ + "src/globalHeaderTranslationsModuleExport.ts" + ], "package.json": [ "package.json" ] @@ -37,6 +49,7 @@ "sideEffects": false, "scripts": { "start": "backstage-cli package start", + "start:legacy": "backstage-cli package start --entry dev/legacy.tsx", "build": "backstage-cli package build", "lint": "backstage-cli package lint", "lint:fix": "backstage-cli package lint --fix", @@ -101,5 +114,15 @@ "dist", "config.d.ts" ], - "configSchema": "config.d.ts" + "configSchema": "config.d.ts", + "scalprum": { + "name": "red-hat-developer-hub.backstage-plugin-global-header", + "exposedModules": { + "PluginRoot": "./src/index.ts", + "Alpha": "./src/alpha/index.ts", + "Legacy": "./src/legacy.ts", + "GlobalHeaderModule": "./src/globalHeaderModuleExport.ts", + "GlobalHeaderTranslationsModule": "./src/globalHeaderTranslationsModuleExport.ts" + } + } } diff --git a/workspaces/global-header/plugins/global-header/report-alpha.api.md b/workspaces/global-header/plugins/global-header/report-alpha.api.md index e9032f907a0..6b0b631af19 100644 --- a/workspaces/global-header/plugins/global-header/report-alpha.api.md +++ b/workspaces/global-header/plugins/global-header/report-alpha.api.md @@ -3,1020 +3,9 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import type Button from '@mui/material/Button'; -import type { ComponentProps } from 'react'; -import type { ComponentType } from 'react'; -import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; -import { ExtensionBlueprint } from '@backstage/frontend-plugin-api'; -import { ExtensionDataRef } from '@backstage/frontend-plugin-api'; -import { FrontendModule } from '@backstage/frontend-plugin-api'; -import { JSX as JSX_2 } from 'react/jsx-runtime'; -import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api'; -import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api'; -import type { ReactNode } from 'react'; import { TranslationRef } from '@backstage/frontend-plugin-api'; import { TranslationResource } from '@backstage/frontend-plugin-api'; -// @alpha (undocumented) -export const appLauncherDevHubMenuItemExtension: OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'app-launcher-devhub'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; -}>; - -// @alpha (undocumented) -export const appLauncherRhdhLocalMenuItemExtension: OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'app-launcher-rhdh-local'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; -}>; - -// @alpha (undocumented) -export const applicationLauncherDropdownExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'app-launcher-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const companyLogoExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'company-logo'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha -export const defaultMenuItemExtensions: ( - | OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'settings'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'my-profile'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'logout'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'support-button'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'app-launcher-devhub'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'app-launcher-rhdh-local'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }> -)[]; - -// @alpha -export const defaultToolbarExtensions: ( - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'company-logo'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'search'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'spacer'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'self-service-button'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'starred-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'app-launcher-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'help-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'notification-button'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'divider'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> - | OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'profile-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }> -)[]; - -// @alpha (undocumented) -export const dividerExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'divider'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha -export const GlobalHeaderComponentBlueprint: ExtensionBlueprint<{ - kind: 'gh-component'; - params: ToolbarComponentParams; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - dataRefs: { - componentData: ConfigurableExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - }; -}>; - -// @alpha -export interface GlobalHeaderComponentData { - // (undocumented) - component: ComponentType; - layout?: Record; - // (undocumented) - priority?: number; -} - -// @alpha -export const globalHeaderComponentDataRef: ConfigurableExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} ->; - -// @alpha -export const GlobalHeaderDropdown: ( - input: GlobalHeaderDropdownProps, -) => JSX_2.Element | null; - -// @alpha -export interface GlobalHeaderDropdownProps { - buttonContent: ReactNode; - buttonProps?: ComponentProps; - emptyState?: ReactNode; - isIconButton?: boolean; - target: string; - tooltip?: string; - trackValidity?: boolean; -} - -// @public (undocumented) -export const GlobalHeaderIconButton: ( - input: HeaderIconButtonProps, -) => JSX_2.Element; - -// @alpha -export const GlobalHeaderMenuItem: ( - input: GlobalHeaderMenuItemProps, -) => JSX_2.Element; - -// @alpha -export const GlobalHeaderMenuItemBlueprint: ExtensionBlueprint<{ - kind: 'gh-menu-item'; - params: MenuItemParams; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - dataRefs: { - menuItemData: ConfigurableExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - }; -}>; - -// @alpha -export interface GlobalHeaderMenuItemData { - component?: ComponentType; - icon?: string; - link?: string; - onClick?: () => void; - // (undocumented) - priority?: number; - sectionLabel?: string; - sectionLink?: string; - sectionLinkLabel?: string; - subTitle?: string; - subTitleKey?: string; - // (undocumented) - target: string; - title?: string; - titleKey?: string; - type?: 'component' | 'data'; -} - -// @alpha -export const globalHeaderMenuItemDataRef: ConfigurableExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} ->; - -// @alpha -export interface GlobalHeaderMenuItemProps { - icon?: string; - onClick?: () => void; - subTitle?: string; - subTitleKey?: string; - title?: string; - titleKey?: string; - to?: string; - tooltip?: string; -} - -// @alpha -export const globalHeaderModule: FrontendModule; - -// @alpha -const globalHeaderPlugin: OverridableFrontendPlugin< - {}, - {}, - { - 'gh-component:global-header/app-launcher-dropdown': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'app-launcher-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/company-logo': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'company-logo'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/divider': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'divider'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/help-dropdown': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'help-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/notification-button': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'notification-button'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/profile-dropdown': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'profile-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/search': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'search'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/self-service-button': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'self-service-button'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/spacer': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'spacer'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-component:global-header/starred-dropdown': OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'starred-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; - }>; - 'gh-menu-item:global-header/app-launcher-devhub': OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'app-launcher-devhub'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }>; - 'gh-menu-item:global-header/app-launcher-rhdh-local': OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'app-launcher-rhdh-local'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }>; - 'gh-menu-item:global-header/logout': OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'logout'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }>; - 'gh-menu-item:global-header/my-profile': OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'my-profile'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }>; - 'gh-menu-item:global-header/settings': OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'settings'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }>; - 'gh-menu-item:global-header/support-button': OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'support-button'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; - }>; - } ->; -export default globalHeaderPlugin; - // @public export const globalHeaderTranslationRef: TranslationRef< 'plugin.global-header', @@ -1060,350 +49,4 @@ export const globalHeaderTranslationRef: TranslationRef< // @public export const globalHeaderTranslations: TranslationResource<'plugin.global-header'>; - -// @alpha -export const globalHeaderTranslationsModule: FrontendModule; - -// @public (undocumented) -export interface HeaderIconButtonProps { - // (undocumented) - ariaLabel?: string; - // (undocumented) - color?: 'inherit' | 'primary' | 'secondary' | 'default'; - // (undocumented) - icon: string; - // (undocumented) - size?: 'small' | 'medium' | 'large'; - // (undocumented) - title: string; - // (undocumented) - titleKey?: string; - // (undocumented) - to: string; - // (undocumented) - tooltip?: string; -} - -// @alpha (undocumented) -export const helpDropdownExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'help-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const logoutMenuItemExtension: OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'logout'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; -}>; - -// @alpha -export interface MenuItemParams { - // (undocumented) - component?: ComponentType; - // (undocumented) - icon?: string; - // (undocumented) - link?: string; - // (undocumented) - onClick?: () => void; - // (undocumented) - priority?: number; - sectionLabel?: string; - sectionLink?: string; - sectionLinkLabel?: string; - // (undocumented) - subTitle?: string; - // (undocumented) - subTitleKey?: string; - // (undocumented) - target: string; - // (undocumented) - title?: string; - // (undocumented) - titleKey?: string; -} - -// @alpha (undocumented) -export const myProfileMenuItemExtension: OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'my-profile'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; -}>; - -// @alpha (undocumented) -export const notificationButtonExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'notification-button'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const profileDropdownExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'profile-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const searchExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'search'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const selfServiceButtonExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'self-service-button'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const settingsMenuItemExtension: OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'settings'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; -}>; - -// @alpha (undocumented) -export const spacerExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'spacer'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const starredDropdownExtension: OverridableExtensionDefinition<{ - kind: 'gh-component'; - name: 'starred-dropdown'; - config: { - priority: number | undefined; - }; - configInput: { - priority?: number | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderComponentData, - 'global-header.component', - {} - >; - inputs: {}; - params: ToolbarComponentParams; -}>; - -// @alpha (undocumented) -export const supportButtonMenuItemExtension: OverridableExtensionDefinition<{ - kind: 'gh-menu-item'; - name: 'support-button'; - config: { - priority: number | undefined; - title: string | undefined; - titleKey: string | undefined; - icon: string | undefined; - link: string | undefined; - sectionLabel: string | undefined; - sectionLink: string | undefined; - sectionLinkLabel: string | undefined; - }; - configInput: { - link?: string | undefined; - title?: string | undefined; - icon?: string | undefined; - titleKey?: string | undefined; - priority?: number | undefined; - sectionLabel?: string | undefined; - sectionLink?: string | undefined; - sectionLinkLabel?: string | undefined; - }; - output: ExtensionDataRef< - GlobalHeaderMenuItemData, - 'global-header.menu-item', - {} - >; - inputs: {}; - params: MenuItemParams; -}>; - -// @alpha -export interface ToolbarComponentParams { - // (undocumented) - component?: ComponentType; - // (undocumented) - icon?: string; - layout?: Record; - // (undocumented) - link?: string; - // (undocumented) - onClick?: () => void; - // (undocumented) - priority?: number; - // (undocumented) - title?: string; - // (undocumented) - titleKey?: string; - // (undocumented) - tooltip?: string; -} - -// @alpha -export function useGlobalHeaderComponents(): GlobalHeaderComponentData[]; - -// @alpha -export function useGlobalHeaderMenuItems( - target: string, -): GlobalHeaderMenuItemData[]; - -// (No @packageDocumentation comment for this package) ``` diff --git a/workspaces/global-header/plugins/global-header/report-global-header-module.api.md b/workspaces/global-header/plugins/global-header/report-global-header-module.api.md new file mode 100644 index 00000000000..f007721f095 --- /dev/null +++ b/workspaces/global-header/plugins/global-header/report-global-header-module.api.md @@ -0,0 +1,13 @@ +## API Report File for "@red-hat-developer-hub/backstage-plugin-global-header" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts +import { FrontendModule } from '@backstage/frontend-plugin-api'; + +// @public +const globalHeaderModule: FrontendModule; +export default globalHeaderModule; + +// (No @packageDocumentation comment for this package) +``` diff --git a/workspaces/global-header/plugins/global-header/report-global-header-translations-module.api.md b/workspaces/global-header/plugins/global-header/report-global-header-translations-module.api.md new file mode 100644 index 00000000000..a19e5c1f3fe --- /dev/null +++ b/workspaces/global-header/plugins/global-header/report-global-header-translations-module.api.md @@ -0,0 +1,13 @@ +## API Report File for "@red-hat-developer-hub/backstage-plugin-global-header" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts +import { FrontendModule } from '@backstage/frontend-plugin-api'; + +// @public +const globalHeaderTranslationsModule: FrontendModule; +export default globalHeaderTranslationsModule; + +// (No @packageDocumentation comment for this package) +``` diff --git a/workspaces/global-header/plugins/global-header/report-legacy.api.md b/workspaces/global-header/plugins/global-header/report-legacy.api.md new file mode 100644 index 00000000000..33f80a84ce5 --- /dev/null +++ b/workspaces/global-header/plugins/global-header/report-legacy.api.md @@ -0,0 +1,391 @@ +## API Report File for "@red-hat-developer-hub/backstage-plugin-global-header" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts +import { BackstagePlugin } from '@backstage/core-plugin-api'; +import type { ComponentType } from 'react'; +import { CSSProperties } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; +import { MenuItemProps } from '@mui/material/MenuItem'; +import { TranslationRef } from '@backstage/frontend-plugin-api'; +import { TranslationResource } from '@backstage/frontend-plugin-api'; + +// @public +export const ApplicationLauncherDropdown: () => JSX_2.Element; + +// @public +export const CompanyLogo: (input: CompanyLogoProps) => JSX_2.Element; + +// @public (undocumented) +export interface CompanyLogoProps { + height?: string | number; + layout?: CSSProperties; + logo?: LogoURLs; + to?: string; + width?: string | number; +} + +// @public +export const CreateDropdown: ComponentType; + +// @public +export interface CreateDropdownProps { + // (undocumented) + layout?: CSSProperties; +} + +// @public +export const defaultGlobalHeaderComponentsMountPoints: GlobalHeaderComponentMountPoint[]; + +// @public (undocumented) +export const Divider: (input: DividerProps) => JSX_2.Element; + +// @public (undocumented) +export interface DividerProps { + // (undocumented) + layout?: CSSProperties; +} + +// @public +export const GlobalHeader: () => JSX_2.Element; + +// @public +export const GlobalHeaderComponent: ComponentType; + +// @public +export interface GlobalHeaderComponentMountPoint { + // (undocumented) + Component: ComponentType<{ + layout?: CSSProperties; + }>; + // (undocumented) + config?: GlobalHeaderComponentMountPointConfig & { + props?: Record; + layout?: CSSProperties; + }; +} + +// @public +export interface GlobalHeaderComponentMountPointConfig { + // (undocumented) + priority?: number; +} + +// @public +export interface GlobalHeaderComponentProps { + // (undocumented) + globalHeaderMountPoints: GlobalHeaderComponentMountPoint[]; +} + +// @public +export const globalHeaderPlugin: BackstagePlugin<{}, {}, {}>; + +// @public +export const globalHeaderTranslationRef: TranslationRef< + 'plugin.global-header', + { + readonly 'search.placeholder': string; + readonly 'search.noResults': string; + readonly 'search.errorFetching': string; + readonly 'search.allResults': string; + readonly 'search.clear': string; + readonly 'help.tooltip': string; + readonly 'help.noSupportLinks': string; + readonly 'help.noSupportLinksSubtitle': string; + readonly 'help.quickStart': string; + readonly 'help.supportTitle': string; + readonly 'profile.picture': string; + readonly 'profile.settings': string; + readonly 'profile.myProfile': string; + readonly 'profile.signOut': string; + readonly 'applicationLauncher.tooltip': string; + readonly 'applicationLauncher.noLinksTitle': string; + readonly 'applicationLauncher.noLinksSubtitle': string; + readonly 'applicationLauncher.developerHub': string; + readonly 'applicationLauncher.rhdhLocal': string; + readonly 'applicationLauncher.sections.documentation': string; + readonly 'applicationLauncher.sections.developerTools': string; + readonly 'starred.title': string; + readonly 'starred.removeTooltip': string; + readonly 'starred.noItemsTitle': string; + readonly 'starred.noItemsSubtitle': string; + readonly 'notifications.title': string; + readonly 'notifications.unsupportedDismissOption': string; + readonly 'create.title': string; + readonly 'create.registerComponent.title': string; + readonly 'create.registerComponent.subtitle': string; + readonly 'create.templates.errorFetching': string; + readonly 'create.templates.sectionTitle': string; + readonly 'create.templates.allTemplates': string; + readonly 'create.templates.noTemplatesAvailable': string; + } +>; + +// @public +export const globalHeaderTranslations: TranslationResource<'plugin.global-header'>; + +// @public (undocumented) +export const HeaderButton: (input: HeaderButtonProps) => JSX_2.Element; + +// @public (undocumented) +export interface HeaderButtonProps { + // (undocumented) + ariaLabel?: string; + // (undocumented) + color?: 'inherit' | 'primary' | 'secondary' | 'default'; + // (undocumented) + endIcon?: string; + // (undocumented) + externalLinkIcon?: boolean; + // (undocumented) + layout?: CSSProperties; + // (undocumented) + size?: 'small' | 'medium' | 'large'; + // (undocumented) + startIcon?: string; + // (undocumented) + title: string; + // (undocumented) + to: string; + // (undocumented) + tooltip?: string; + // (undocumented) + variant?: 'text' | 'outlined' | 'contained'; +} + +// @public (undocumented) +export const HeaderIcon: (input: HeaderIconProps) => JSX_2.Element | null; + +// @public (undocumented) +export const HeaderIconButton: (input: HeaderIconButtonProps) => JSX_2.Element; + +// @public (undocumented) +export interface HeaderIconButtonProps { + // (undocumented) + ariaLabel?: string; + // (undocumented) + color?: 'inherit' | 'primary' | 'secondary' | 'default'; + // (undocumented) + icon: string; + // (undocumented) + size?: 'small' | 'medium' | 'large'; + // (undocumented) + title: string; + // (undocumented) + titleKey?: string; + // (undocumented) + to: string; + // (undocumented) + tooltip?: string; +} + +// @public (undocumented) +export interface HeaderIconProps { + // (undocumented) + icon: string; + // (undocumented) + layout?: CSSProperties; + // (undocumented) + size?: 'small' | 'medium' | 'large'; +} + +// @public +export const HelpDropdown: ComponentType; + +// @public (undocumented) +export interface HelpDropdownProps { + // (undocumented) + layout?: CSSProperties; +} + +// @public +export type LogoURLs = + | { + light: string; + dark: string; + } + | string + | undefined; + +// @public +export const LogoutButton: ComponentType; + +// @public +export interface MenuItemConfig { + // (undocumented) + Component: ComponentType; + // (undocumented) + icon?: string; + // (undocumented) + label: string; + // (undocumented) + labelKey?: string; + // (undocumented) + link?: string; + // (undocumented) + onClick?: () => void; + // (undocumented) + subLabel?: string; + // (undocumented) + subLabelKey?: string; +} + +// @public +export const MenuItemLink: ComponentType; + +// @public +export interface MenuItemLinkProps { + // (undocumented) + icon?: string; + // (undocumented) + subTitle?: string; + // (undocumented) + subTitleKey?: string; + // (undocumented) + title?: string; + // (undocumented) + titleKey?: string; + // (undocumented) + to: string; + // (undocumented) + tooltip?: string; +} + +// @public +export const NotificationBanner: ( + props: NotificationBannerProps, +) => JSX_2.Element | null; + +// @public (undocumented) +export type NotificationBannerDismiss = 'none' | 'session' | 'localstorage'; + +// @public (undocumented) +export interface NotificationBannerProps { + // (undocumented) + backgroundColor?: string; + // (undocumented) + borderColor?: string; + // (undocumented) + dismiss?: NotificationBannerDismiss; + // (undocumented) + icon?: string; + // (undocumented) + id?: string; + // (undocumented) + layout?: CSSProperties; + // (undocumented) + markdown?: boolean; + // (undocumented) + textColor?: string; + // (undocumented) + title: string; +} + +// @public (undocumented) +export const NotificationButton: ( + input: NotificationButtonProps, +) => JSX_2.Element | null; + +// @public (undocumented) +export interface NotificationButtonProps { + // (undocumented) + badgeColor?: + | 'primary' + | 'secondary' + | 'default' + | 'error' + | 'info' + | 'success' + | 'warning'; + // (undocumented) + color?: + | 'inherit' + | 'default' + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning'; + // (undocumented) + layout?: CSSProperties; + // (undocumented) + size?: 'small' | 'medium' | 'large'; + // (undocumented) + title?: string; + // (undocumented) + to?: string; + // (undocumented) + tooltip?: string; +} + +// @public +export const ProfileDropdown: ComponentType; + +// @public +export interface ProfileDropdownProps { + // (undocumented) + layout?: CSSProperties; +} + +// @public +export const RegisterAComponentSection: ComponentType; + +// @public +export type RegisterAComponentSectionProps = { + hideDivider: boolean; + handleClose: () => void; +}; + +// @public +export const SearchComponent: ComponentType; + +// @public +export const SoftwareTemplatesSection: ComponentType; + +// @public +export type SoftwareTemplatesSectionProps = { + handleClose: () => void; + hideDivider?: boolean; +}; + +// @public +export const Spacer: (input: SpacerProps) => JSX_2.Element; + +// @public (undocumented) +export interface SpacerProps { + // (undocumented) + growFactor?: number; + // (undocumented) + layout?: CSSProperties; + // (undocumented) + minWidth?: number | string; +} + +// @public +export const StarredDropdown: () => JSX_2.Element; + +// @public (undocumented) +export const SupportButton: ComponentType; + +// @public (undocumented) +export interface SupportButtonProps { + // (undocumented) + icon?: string; + // (undocumented) + onClick?: () => void; + // (undocumented) + style?: CSSProperties; + // (undocumented) + title?: string; + // (undocumented) + titleKey?: string; + // (undocumented) + to?: string; + // (undocumented) + tooltip?: string; +} + +// (No @packageDocumentation comment for this package) +``` diff --git a/workspaces/global-header/plugins/global-header/report.api.md b/workspaces/global-header/plugins/global-header/report.api.md index 33f80a84ce5..34d78f709bc 100644 --- a/workspaces/global-header/plugins/global-header/report.api.md +++ b/workspaces/global-header/plugins/global-header/report.api.md @@ -3,83 +3,1019 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import { BackstagePlugin } from '@backstage/core-plugin-api'; +import type Button from '@mui/material/Button'; +import type { ComponentProps } from 'react'; import type { ComponentType } from 'react'; -import { CSSProperties } from 'react'; +import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; +import { ExtensionBlueprint } from '@backstage/frontend-plugin-api'; +import { ExtensionDataRef } from '@backstage/frontend-plugin-api'; +import { FrontendModule } from '@backstage/frontend-plugin-api'; import { JSX as JSX_2 } from 'react/jsx-runtime'; -import { MenuItemProps } from '@mui/material/MenuItem'; +import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api'; +import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api'; +import type { ReactNode } from 'react'; import { TranslationRef } from '@backstage/frontend-plugin-api'; import { TranslationResource } from '@backstage/frontend-plugin-api'; +// @public (undocumented) +export const appLauncherDevHubMenuItemExtension: OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'app-launcher-devhub'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; +}>; + +// @public (undocumented) +export const appLauncherRhdhLocalMenuItemExtension: OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'app-launcher-rhdh-local'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; +}>; + +// @public (undocumented) +export const applicationLauncherDropdownExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'app-launcher-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; + +// @public (undocumented) +export const companyLogoExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'company-logo'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; + // @public -export const ApplicationLauncherDropdown: () => JSX_2.Element; +export const defaultMenuItemExtensions: ( + | OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'settings'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'my-profile'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'logout'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'support-button'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'app-launcher-devhub'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'app-launcher-rhdh-local'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }> +)[]; // @public -export const CompanyLogo: (input: CompanyLogoProps) => JSX_2.Element; +export const defaultToolbarExtensions: ( + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'company-logo'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'search'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'spacer'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'self-service-button'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'starred-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'app-launcher-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'help-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'notification-button'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'divider'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> + | OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'profile-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }> +)[]; // @public (undocumented) -export interface CompanyLogoProps { - height?: string | number; - layout?: CSSProperties; - logo?: LogoURLs; - to?: string; - width?: string | number; -} +export const dividerExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'divider'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; // @public -export const CreateDropdown: ComponentType; +export const GlobalHeaderComponentBlueprint: ExtensionBlueprint<{ + kind: 'gh-component'; + params: ToolbarComponentParams; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + dataRefs: { + componentData: ConfigurableExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + }; +}>; // @public -export interface CreateDropdownProps { +export interface GlobalHeaderComponentData { // (undocumented) - layout?: CSSProperties; + component: ComponentType; + layout?: Record; + // (undocumented) + priority?: number; } // @public -export const defaultGlobalHeaderComponentsMountPoints: GlobalHeaderComponentMountPoint[]; +export const globalHeaderComponentDataRef: ConfigurableExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} +>; + +// @public +export const GlobalHeaderDropdown: ( + input: GlobalHeaderDropdownProps, +) => JSX_2.Element | null; -// @public (undocumented) -export const Divider: (input: DividerProps) => JSX_2.Element; +// @public +export interface GlobalHeaderDropdownProps { + buttonContent: ReactNode; + buttonProps?: ComponentProps; + emptyState?: ReactNode; + isIconButton?: boolean; + target: string; + tooltip?: string; + trackValidity?: boolean; +} // @public (undocumented) -export interface DividerProps { - // (undocumented) - layout?: CSSProperties; -} +export const GlobalHeaderIconButton: ( + input: HeaderIconButtonProps, +) => JSX_2.Element; // @public -export const GlobalHeader: () => JSX_2.Element; +export const GlobalHeaderMenuItem: ( + input: GlobalHeaderMenuItemProps, +) => JSX_2.Element; // @public -export const GlobalHeaderComponent: ComponentType; +export const GlobalHeaderMenuItemBlueprint: ExtensionBlueprint<{ + kind: 'gh-menu-item'; + params: MenuItemParams; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + dataRefs: { + menuItemData: ConfigurableExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + }; +}>; // @public -export interface GlobalHeaderComponentMountPoint { +export interface GlobalHeaderMenuItemData { + component?: ComponentType; + icon?: string; + link?: string; + onClick?: () => void; // (undocumented) - Component: ComponentType<{ - layout?: CSSProperties; - }>; + priority?: number; + sectionLabel?: string; + sectionLink?: string; + sectionLinkLabel?: string; + subTitle?: string; + subTitleKey?: string; // (undocumented) - config?: GlobalHeaderComponentMountPointConfig & { - props?: Record; - layout?: CSSProperties; - }; + target: string; + title?: string; + titleKey?: string; + type?: 'component' | 'data'; } // @public -export interface GlobalHeaderComponentMountPointConfig { - // (undocumented) - priority?: number; -} +export const globalHeaderMenuItemDataRef: ConfigurableExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} +>; // @public -export interface GlobalHeaderComponentProps { - // (undocumented) - globalHeaderMountPoints: GlobalHeaderComponentMountPoint[]; +export interface GlobalHeaderMenuItemProps { + icon?: string; + onClick?: () => void; + subTitle?: string; + subTitleKey?: string; + title?: string; + titleKey?: string; + to?: string; + tooltip?: string; } // @public -export const globalHeaderPlugin: BackstagePlugin<{}, {}, {}>; +export const globalHeaderModule: FrontendModule; + +// @public +const globalHeaderPlugin: OverridableFrontendPlugin< + {}, + {}, + { + 'gh-component:global-header/app-launcher-dropdown': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'app-launcher-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/company-logo': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'company-logo'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/divider': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'divider'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/help-dropdown': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'help-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/notification-button': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'notification-button'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/profile-dropdown': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'profile-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/search': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'search'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/self-service-button': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'self-service-button'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/spacer': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'spacer'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-component:global-header/starred-dropdown': OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'starred-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; + }>; + 'gh-menu-item:global-header/app-launcher-devhub': OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'app-launcher-devhub'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }>; + 'gh-menu-item:global-header/app-launcher-rhdh-local': OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'app-launcher-rhdh-local'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }>; + 'gh-menu-item:global-header/logout': OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'logout'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }>; + 'gh-menu-item:global-header/my-profile': OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'my-profile'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }>; + 'gh-menu-item:global-header/settings': OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'settings'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }>; + 'gh-menu-item:global-header/support-button': OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'support-button'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; + }>; + } +>; +export default globalHeaderPlugin; // @public export const globalHeaderTranslationRef: TranslationRef< @@ -125,40 +1061,8 @@ export const globalHeaderTranslationRef: TranslationRef< // @public export const globalHeaderTranslations: TranslationResource<'plugin.global-header'>; -// @public (undocumented) -export const HeaderButton: (input: HeaderButtonProps) => JSX_2.Element; - -// @public (undocumented) -export interface HeaderButtonProps { - // (undocumented) - ariaLabel?: string; - // (undocumented) - color?: 'inherit' | 'primary' | 'secondary' | 'default'; - // (undocumented) - endIcon?: string; - // (undocumented) - externalLinkIcon?: boolean; - // (undocumented) - layout?: CSSProperties; - // (undocumented) - size?: 'small' | 'medium' | 'large'; - // (undocumented) - startIcon?: string; - // (undocumented) - title: string; - // (undocumented) - to: string; - // (undocumented) - tooltip?: string; - // (undocumented) - variant?: 'text' | 'outlined' | 'contained'; -} - -// @public (undocumented) -export const HeaderIcon: (input: HeaderIconProps) => JSX_2.Element | null; - -// @public (undocumented) -export const HeaderIconButton: (input: HeaderIconButtonProps) => JSX_2.Element; +// @public +export const globalHeaderTranslationsModule: FrontendModule; // @public (undocumented) export interface HeaderIconButtonProps { @@ -181,211 +1085,325 @@ export interface HeaderIconButtonProps { } // @public (undocumented) -export interface HeaderIconProps { - // (undocumented) - icon: string; - // (undocumented) - layout?: CSSProperties; - // (undocumented) - size?: 'small' | 'medium' | 'large'; -} - -// @public -export const HelpDropdown: ComponentType; +export const helpDropdownExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'help-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; // @public (undocumented) -export interface HelpDropdownProps { - // (undocumented) - layout?: CSSProperties; -} - -// @public -export type LogoURLs = - | { - light: string; - dark: string; - } - | string - | undefined; - -// @public -export const LogoutButton: ComponentType; +export const logoutMenuItemExtension: OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'logout'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; +}>; // @public -export interface MenuItemConfig { +export interface MenuItemParams { // (undocumented) - Component: ComponentType; + component?: ComponentType; // (undocumented) icon?: string; // (undocumented) - label: string; - // (undocumented) - labelKey?: string; - // (undocumented) link?: string; // (undocumented) onClick?: () => void; // (undocumented) - subLabel?: string; - // (undocumented) - subLabelKey?: string; -} - -// @public -export const MenuItemLink: ComponentType; - -// @public -export interface MenuItemLinkProps { - // (undocumented) - icon?: string; + priority?: number; + sectionLabel?: string; + sectionLink?: string; + sectionLinkLabel?: string; // (undocumented) subTitle?: string; // (undocumented) subTitleKey?: string; // (undocumented) + target: string; + // (undocumented) title?: string; // (undocumented) titleKey?: string; - // (undocumented) - to: string; - // (undocumented) - tooltip?: string; } -// @public -export const NotificationBanner: ( - props: NotificationBannerProps, -) => JSX_2.Element | null; - // @public (undocumented) -export type NotificationBannerDismiss = 'none' | 'session' | 'localstorage'; +export const myProfileMenuItemExtension: OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'my-profile'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; +}>; // @public (undocumented) -export interface NotificationBannerProps { - // (undocumented) - backgroundColor?: string; - // (undocumented) - borderColor?: string; - // (undocumented) - dismiss?: NotificationBannerDismiss; - // (undocumented) - icon?: string; - // (undocumented) - id?: string; - // (undocumented) - layout?: CSSProperties; - // (undocumented) - markdown?: boolean; - // (undocumented) - textColor?: string; - // (undocumented) - title: string; -} +export const notificationButtonExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'notification-button'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; // @public (undocumented) -export const NotificationButton: ( - input: NotificationButtonProps, -) => JSX_2.Element | null; +export const profileDropdownExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'profile-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; // @public (undocumented) -export interface NotificationButtonProps { - // (undocumented) - badgeColor?: - | 'primary' - | 'secondary' - | 'default' - | 'error' - | 'info' - | 'success' - | 'warning'; - // (undocumented) - color?: - | 'inherit' - | 'default' - | 'primary' - | 'secondary' - | 'error' - | 'info' - | 'success' - | 'warning'; - // (undocumented) - layout?: CSSProperties; - // (undocumented) - size?: 'small' | 'medium' | 'large'; - // (undocumented) - title?: string; - // (undocumented) - to?: string; - // (undocumented) - tooltip?: string; -} - -// @public -export const ProfileDropdown: ComponentType; - -// @public -export interface ProfileDropdownProps { - // (undocumented) - layout?: CSSProperties; -} - -// @public -export const RegisterAComponentSection: ComponentType; - -// @public -export type RegisterAComponentSectionProps = { - hideDivider: boolean; - handleClose: () => void; -}; - -// @public -export const SearchComponent: ComponentType; - -// @public -export const SoftwareTemplatesSection: ComponentType; - -// @public -export type SoftwareTemplatesSectionProps = { - handleClose: () => void; - hideDivider?: boolean; -}; +export const searchExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'search'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; -// @public -export const Spacer: (input: SpacerProps) => JSX_2.Element; +// @public (undocumented) +export const selfServiceButtonExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'self-service-button'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; // @public (undocumented) -export interface SpacerProps { - // (undocumented) - growFactor?: number; - // (undocumented) - layout?: CSSProperties; - // (undocumented) - minWidth?: number | string; -} +export const settingsMenuItemExtension: OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'settings'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; +}>; -// @public -export const StarredDropdown: () => JSX_2.Element; +// @public (undocumented) +export const spacerExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'spacer'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; // @public (undocumented) -export const SupportButton: ComponentType; +export const starredDropdownExtension: OverridableExtensionDefinition<{ + kind: 'gh-component'; + name: 'starred-dropdown'; + config: { + priority: number | undefined; + }; + configInput: { + priority?: number | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderComponentData, + 'global-header.component', + {} + >; + inputs: {}; + params: ToolbarComponentParams; +}>; // @public (undocumented) -export interface SupportButtonProps { +export const supportButtonMenuItemExtension: OverridableExtensionDefinition<{ + kind: 'gh-menu-item'; + name: 'support-button'; + config: { + priority: number | undefined; + title: string | undefined; + titleKey: string | undefined; + icon: string | undefined; + link: string | undefined; + sectionLabel: string | undefined; + sectionLink: string | undefined; + sectionLinkLabel: string | undefined; + }; + configInput: { + link?: string | undefined; + title?: string | undefined; + icon?: string | undefined; + titleKey?: string | undefined; + priority?: number | undefined; + sectionLabel?: string | undefined; + sectionLink?: string | undefined; + sectionLinkLabel?: string | undefined; + }; + output: ExtensionDataRef< + GlobalHeaderMenuItemData, + 'global-header.menu-item', + {} + >; + inputs: {}; + params: MenuItemParams; +}>; + +// @public +export interface ToolbarComponentParams { + // (undocumented) + component?: ComponentType; // (undocumented) icon?: string; + layout?: Record; + // (undocumented) + link?: string; // (undocumented) onClick?: () => void; // (undocumented) - style?: CSSProperties; + priority?: number; // (undocumented) title?: string; // (undocumented) titleKey?: string; // (undocumented) - to?: string; - // (undocumented) tooltip?: string; } +// @public +export function useGlobalHeaderComponents(): GlobalHeaderComponentData[]; + +// @public +export function useGlobalHeaderMenuItems( + target: string, +): GlobalHeaderMenuItemData[]; + // (No @packageDocumentation comment for this package) ``` diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeader.tsx b/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeader.tsx deleted file mode 100644 index 307cc3025c8..00000000000 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -/* - * Copyright Red Hat, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { ErrorBoundary } from '@backstage/core-components'; - -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; - -import { useGlobalHeaderComponents } from '../extensions/GlobalHeaderContext'; - -/** - * Global header bar. Reads toolbar items from GlobalHeaderContext - * and renders them in a sticky AppBar. - * - * @alpha - */ -export const GlobalHeader = () => { - const components = useGlobalHeaderComponents(); - - return ( - - - (theme as any).rhdh?.general?.appBarForegroundColor ?? - theme.palette.text.primary, - }} - > - {components.map((item, index) => ( - - - - - - ))} - - - ); -}; diff --git a/workspaces/global-header/plugins/global-header/src/alpha/index.ts b/workspaces/global-header/plugins/global-header/src/alpha/index.ts index 38e727ddd88..0b0fd1ec516 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/index.ts +++ b/workspaces/global-header/plugins/global-header/src/alpha/index.ts @@ -15,82 +15,8 @@ */ /** - * New Frontend System API surface for the global header plugin. - * - * @alpha + * @deprecated Use the root import instead: `import from '@red-hat-developer-hub/backstage-plugin-global-header'` * @packageDocumentation */ -import { createFrontendModule } from '@backstage/frontend-plugin-api'; -import { TranslationBlueprint } from '@backstage/plugin-app-react'; -import { globalHeaderTranslations } from '../translations'; - -// ── Core: plugin + module ────────────────────────────────────────────── - -export { default } from './plugin'; -export { globalHeaderModule } from './extensions/globalHeaderModule'; - -// ── Blueprints: for other plugins to contribute header items ─────────── - -export { - GlobalHeaderComponentBlueprint, - GlobalHeaderMenuItemBlueprint, -} from './extensions/blueprints'; -export type { - ToolbarComponentParams, - MenuItemParams, -} from './extensions/blueprints'; - -// ── Data refs ────────────────────────────────────────────────────────── - -export { - globalHeaderComponentDataRef, - globalHeaderMenuItemDataRef, -} from './extensions/dataRefs'; - -// ── Context hooks for custom dropdown components ─────────────────────── - -export { - useGlobalHeaderComponents, - useGlobalHeaderMenuItems, -} from './extensions/GlobalHeaderContext'; - -// ── Types ────────────────────────────────────────────────────────────── - -export type { - GlobalHeaderComponentData, - GlobalHeaderMenuItemData, -} from './types'; - -// ── Building block components for plugin authors ─────────────────────── - -export { HeaderIconButton as GlobalHeaderIconButton } from '../components/HeaderIconButton/HeaderIconButton'; -export type { HeaderIconButtonProps } from '../components/HeaderIconButton/HeaderIconButton'; -export { GlobalHeaderMenuItem } from './components/GlobalHeaderMenuItem'; -export type { GlobalHeaderMenuItemProps } from './components/GlobalHeaderMenuItem'; -export { GlobalHeaderDropdown } from './components/GlobalHeaderDropdown'; -export type { GlobalHeaderDropdownProps } from './components/GlobalHeaderDropdown'; - -// ── Default extensions (collections + individual for cherry-picking) ─── - -export * from './defaults'; - -// ── Translations ─────────────────────────────────────────────────────── - -export { globalHeaderTranslationRef } from '../translations/ref'; -export { globalHeaderTranslations } from '../translations'; - -const globalHeaderTranslation = TranslationBlueprint.make({ - params: { - resource: globalHeaderTranslations, - }, -}); - -/** - * App module that registers global header translations. - * @alpha - */ -export const globalHeaderTranslationsModule = createFrontendModule({ - pluginId: 'app', - extensions: [globalHeaderTranslation], -}); +export * from '../translations'; diff --git a/workspaces/global-header/plugins/global-header/src/alpha/plugin.ts b/workspaces/global-header/plugins/global-header/src/alpha/plugin.ts deleted file mode 100644 index 1b84c11f942..00000000000 --- a/workspaces/global-header/plugins/global-header/src/alpha/plugin.ts +++ /dev/null @@ -1,66 +0,0 @@ -/* - * Copyright Red Hat, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { createFrontendPlugin } from '@backstage/frontend-plugin-api'; - -import { - companyLogoExtension, - searchExtension, - spacerExtension, - selfServiceButtonExtension, - starredDropdownExtension, - applicationLauncherDropdownExtension, - helpDropdownExtension, - notificationButtonExtension, - dividerExtension, - profileDropdownExtension, - settingsMenuItemExtension, - myProfileMenuItemExtension, - logoutMenuItemExtension, - supportButtonMenuItemExtension, - appLauncherDevHubMenuItemExtension, - appLauncherRhdhLocalMenuItemExtension, -} from './defaults'; - -/** - * Plugin providing the default global header toolbar items and - * dropdown menu items. - * - * @alpha - */ -const globalHeaderPlugin = createFrontendPlugin({ - pluginId: 'global-header', - extensions: [ - companyLogoExtension, - searchExtension, - spacerExtension, - selfServiceButtonExtension, - starredDropdownExtension, - applicationLauncherDropdownExtension, - helpDropdownExtension, - notificationButtonExtension, - dividerExtension, - profileDropdownExtension, - settingsMenuItemExtension, - myProfileMenuItemExtension, - logoutMenuItemExtension, - supportButtonMenuItemExtension, - appLauncherDevHubMenuItemExtension, - appLauncherRhdhLocalMenuItemExtension, - ], -}); - -export default globalHeaderPlugin; diff --git a/workspaces/global-header/plugins/global-header/src/alpha/types.ts b/workspaces/global-header/plugins/global-header/src/alpha/types.ts deleted file mode 100644 index 488f8358670..00000000000 --- a/workspaces/global-header/plugins/global-header/src/alpha/types.ts +++ /dev/null @@ -1,89 +0,0 @@ -/* - * Copyright Red Hat, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import type { ComponentType } from 'react'; - -/** - * Data produced by a `GlobalHeaderComponentBlueprint` extension. - * Represents a single toolbar-level item in the global header. - * - * @alpha - */ -export interface GlobalHeaderComponentData { - component: ComponentType; - priority?: number; - /** MUI `sx`-compatible layout overrides applied by the header wrapper. */ - layout?: Record; -} - -/** - * Data produced by a `GlobalHeaderMenuItemBlueprint` extension. - * Represents a single menu item inside a header dropdown. - * - * When `type` is `'component'`, the item is a self-contained component that - * controls its own layout and `MenuItem` wrapping (e.g. `SoftwareTemplatesSection`, - * `LogoutButton`). - * - * When `type` is `'data'` (the default), the item is data-driven: it is - * grouped by `sectionLabel` and rendered through `MenuSection` - * which provides `` wrapping, `` navigation, section headers - * and dividers. - * - * @alpha - */ -export interface GlobalHeaderMenuItemData { - target: string; - /** - * React component used for rendering. Required when `type` is `'component'`. - * For `type: 'data'` items, defaults to the built-in `MenuItemLink`. - */ - component?: ComponentType; - priority?: number; - /** - * Controls how the item is rendered. - * - * - `'data'` (default) -- grouped by `sectionLabel` and rendered through - * `MenuSection` with standard `MenuItem` wrapping. - * - `'component'` -- rendered directly; the component controls its own - * layout and `MenuItem` wrapping. - */ - type?: 'component' | 'data'; - /** Display title for the item. */ - title?: string; - /** Translation key for the title. */ - titleKey?: string; - /** Icon identifier passed to `HeaderIcon`. */ - icon?: string; - /** Secondary title rendered below the main title. */ - subTitle?: string; - /** Translation key for the secondary title. */ - subTitleKey?: string; - /** Navigation URL. External links show a launch indicator. */ - link?: string; - /** Click handler invoked when the item is selected (in addition to closing the menu). */ - onClick?: () => void; - /** - * Section label used both as the grouping key and the displayed header. - * Items sharing the same string are grouped together and rendered as a - * single `MenuSection`. Auto-translated when the value contains - * dots (e.g. `'applicationLauncher.sections.documentation'`). - */ - sectionLabel?: string; - /** Optional URL rendered as a clickable link in the section header row. */ - sectionLink?: string; - /** Display text for the section header link. */ - sectionLinkLabel?: string; -} diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/ApplicationLauncherDropdown.tsx b/workspaces/global-header/plugins/global-header/src/components/ApplicationLauncherDropdown.tsx similarity index 90% rename from workspaces/global-header/plugins/global-header/src/alpha/components/ApplicationLauncherDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/components/ApplicationLauncherDropdown.tsx index 6ce242ff82d..6461234af52 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/ApplicationLauncherDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/ApplicationLauncherDropdown.tsx @@ -17,8 +17,8 @@ import AppsIcon from '@mui/icons-material/Apps'; import AppRegistrationIcon from '@mui/icons-material/AppRegistration'; -import { useTranslation } from '../../hooks/useTranslation'; -import { DropdownEmptyState } from '../../components/HeaderDropdownComponent/DropdownEmptyState'; +import { useTranslation } from '../hooks/useTranslation'; +import { DropdownEmptyState } from './HeaderDropdownComponent/DropdownEmptyState'; import { GlobalHeaderDropdown } from './GlobalHeaderDropdown'; /** diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeader.test.tsx b/workspaces/global-header/plugins/global-header/src/components/GlobalHeader.test.tsx similarity index 100% rename from workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeader.test.tsx rename to workspaces/global-header/plugins/global-header/src/components/GlobalHeader.test.tsx diff --git a/workspaces/global-header/plugins/global-header/src/components/GlobalHeader.tsx b/workspaces/global-header/plugins/global-header/src/components/GlobalHeader.tsx index b9cd15f491a..258926b9ec2 100644 --- a/workspaces/global-header/plugins/global-header/src/components/GlobalHeader.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/GlobalHeader.tsx @@ -14,15 +14,50 @@ * limitations under the License. */ -import { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints'; -import { GlobalHeaderComponent } from './GlobalHeaderComponent'; +import { ErrorBoundary } from '@backstage/core-components'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import Toolbar from '@mui/material/Toolbar'; + +import { useGlobalHeaderComponents } from '../extensions/GlobalHeaderContext'; + +/** + * Global header bar. Reads toolbar items from GlobalHeaderContext + * and renders them in a sticky AppBar. + * + * @public + */ export const GlobalHeader = () => { - const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints(); + const components = useGlobalHeaderComponents(); return ( - + + + (theme as any).rhdh?.general?.appBarForegroundColor ?? + theme.palette.text.primary, + }} + > + {components.map((item, index) => ( + + + + + + ))} + + ); }; diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdown.tsx b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdown.tsx similarity index 95% rename from workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdown.tsx index c407c09ff11..f52137d65b4 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdown.tsx @@ -20,14 +20,14 @@ import type Button from '@mui/material/Button'; import { useGlobalHeaderMenuItems } from '../extensions/GlobalHeaderContext'; import { buildDropdownEntries } from '../utils/menuItemGrouping'; -import { useDropdownManager } from '../../hooks'; -import { HeaderDropdownComponent } from '../../components/HeaderDropdownComponent/HeaderDropdownComponent'; +import { useDropdownManager } from '../hooks'; +import { HeaderDropdownComponent } from './HeaderDropdownComponent/HeaderDropdownComponent'; import { GlobalHeaderDropdownContent } from './GlobalHeaderDropdownContent'; /** * Props for {@link GlobalHeaderDropdown}. * - * @alpha + * @public */ export interface GlobalHeaderDropdownProps { /** Extension target name that items are collected from (e.g. `'help'`, `'create'`). */ @@ -57,7 +57,7 @@ export interface GlobalHeaderDropdownProps { * by section, sorts by priority, and renders them inside a * `HeaderDropdownComponent`. * - * @alpha + * @public */ export const GlobalHeaderDropdown = ({ target, diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdownContent.test.tsx b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdownContent.test.tsx similarity index 98% rename from workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdownContent.test.tsx rename to workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdownContent.test.tsx index ac708055de7..429ba89f286 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdownContent.test.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdownContent.test.tsx @@ -18,7 +18,7 @@ import { render, screen } from '@testing-library/react'; import { GlobalHeaderDropdownContent } from './GlobalHeaderDropdownContent'; import type { DropdownEntry } from '../utils/menuItemGrouping'; -jest.mock('../../components/HeaderDropdownComponent/MenuSection', () => ({ +jest.mock('./HeaderDropdownComponent/MenuSection', () => ({ MenuSection: ({ sectionLabel, hideDivider }: any) => (
{hideDivider ? 'no-divider' : 'has-divider'} diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdownContent.tsx b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdownContent.tsx similarity index 96% rename from workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdownContent.tsx rename to workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdownContent.tsx index daf9f31af14..1362fcbaacf 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderDropdownContent.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderDropdownContent.tsx @@ -15,7 +15,7 @@ */ import type { DropdownEntry } from '../utils/menuItemGrouping'; -import { MenuSection } from '../../components/HeaderDropdownComponent/MenuSection'; +import { MenuSection } from './HeaderDropdownComponent/MenuSection'; /** Renders a standalone component or a data-driven `MenuSection`. */ const DropdownItem = ({ diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderMenuItem.tsx b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderMenuItem.tsx similarity index 96% rename from workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderMenuItem.tsx rename to workspaces/global-header/plugins/global-header/src/components/GlobalHeaderMenuItem.tsx index f01e77dd9a2..3dc81c31a7b 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/GlobalHeaderMenuItem.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderMenuItem.tsx @@ -18,12 +18,12 @@ import { Link } from '@backstage/core-components'; import MenuItem from '@mui/material/MenuItem'; -import { MenuItemLink } from '../../components/MenuItemLink/MenuItemLink'; +import { MenuItemLink } from './MenuItemLink/MenuItemLink'; /** * Props for {@link GlobalHeaderMenuItem}. * - * @alpha + * @public */ export interface GlobalHeaderMenuItemProps { /** Navigation URL. When absent the item renders as a plain action button. */ @@ -64,7 +64,7 @@ export interface GlobalHeaderMenuItemProps { * ); * ``` * - * @alpha + * @public */ export const GlobalHeaderMenuItem = ({ to, diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/HelpDropdown.tsx b/workspaces/global-header/plugins/global-header/src/components/HelpDropdown.tsx similarity index 90% rename from workspaces/global-header/plugins/global-header/src/alpha/components/HelpDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/components/HelpDropdown.tsx index b7cf159fa0b..9c9f9e42e00 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/HelpDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/HelpDropdown.tsx @@ -17,8 +17,8 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; import SupportAgentIcon from '@mui/icons-material/SupportAgent'; -import { useTranslation } from '../../hooks/useTranslation'; -import { DropdownEmptyState } from '../../components/HeaderDropdownComponent/DropdownEmptyState'; +import { useTranslation } from '../hooks/useTranslation'; +import { DropdownEmptyState } from './HeaderDropdownComponent/DropdownEmptyState'; import { GlobalHeaderDropdown } from './GlobalHeaderDropdown'; /** diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/MyProfileMenuItem.tsx b/workspaces/global-header/plugins/global-header/src/components/MyProfileMenuItem.tsx similarity index 93% rename from workspaces/global-header/plugins/global-header/src/alpha/components/MyProfileMenuItem.tsx rename to workspaces/global-header/plugins/global-header/src/components/MyProfileMenuItem.tsx index 09a4b729d26..caa8bbdbf3b 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/MyProfileMenuItem.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/MyProfileMenuItem.tsx @@ -22,8 +22,8 @@ import { Link } from '@backstage/core-components'; import MenuItem from '@mui/material/MenuItem'; -import { MenuItemLinkContent } from '../../components/MenuItemLink/MenuItemLinkContent'; -import { useTranslation } from '../../hooks/useTranslation'; +import { MenuItemLinkContent } from './MenuItemLink/MenuItemLinkContent'; +import { useTranslation } from '../hooks/useTranslation'; /** * Custom component for the "My Profile" menu item. diff --git a/workspaces/global-header/plugins/global-header/src/alpha/components/ProfileDropdown.tsx b/workspaces/global-header/plugins/global-header/src/components/ProfileDropdown.tsx similarity index 98% rename from workspaces/global-header/plugins/global-header/src/alpha/components/ProfileDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/components/ProfileDropdown.tsx index 5492f8b029c..c9595827c19 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/components/ProfileDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/components/ProfileDropdown.tsx @@ -28,7 +28,7 @@ import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import { useTheme } from '@mui/material/styles'; -import { useTranslation } from '../../hooks/useTranslation'; +import { useTranslation } from '../hooks/useTranslation'; import { GlobalHeaderDropdown } from './GlobalHeaderDropdown'; /** diff --git a/workspaces/global-header/plugins/global-header/src/alpha/defaults/index.ts b/workspaces/global-header/plugins/global-header/src/defaults/index.ts similarity index 98% rename from workspaces/global-header/plugins/global-header/src/alpha/defaults/index.ts rename to workspaces/global-header/plugins/global-header/src/defaults/index.ts index e84e35fe8f7..0f8a91efc15 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/defaults/index.ts +++ b/workspaces/global-header/plugins/global-header/src/defaults/index.ts @@ -41,7 +41,7 @@ import { /** * All default toolbar component extensions. - * @alpha + * @public */ export const defaultToolbarExtensions = [ companyLogoExtension, @@ -58,7 +58,7 @@ export const defaultToolbarExtensions = [ /** * All default menu item extensions. - * @alpha + * @public */ export const defaultMenuItemExtensions = [ settingsMenuItemExtension, diff --git a/workspaces/global-header/plugins/global-header/src/alpha/defaults/menuItemExtensions.tsx b/workspaces/global-header/plugins/global-header/src/defaults/menuItemExtensions.tsx similarity index 93% rename from workspaces/global-header/plugins/global-header/src/alpha/defaults/menuItemExtensions.tsx rename to workspaces/global-header/plugins/global-header/src/defaults/menuItemExtensions.tsx index 11e74d7ab35..cc7f12602d0 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/defaults/menuItemExtensions.tsx +++ b/workspaces/global-header/plugins/global-header/src/defaults/menuItemExtensions.tsx @@ -27,15 +27,15 @@ import { GlobalHeaderMenuItemBlueprint } from '../extensions/blueprints'; -import { LogoutButton } from '../../components/LogoutButton/LogoutButton'; -import { SupportButton } from '../../components/SupportButton/SupportButton'; +import { LogoutButton } from '../components/LogoutButton/LogoutButton'; +import { SupportButton } from '../components/SupportButton/SupportButton'; import { MyProfileMenuItem } from '../components/MyProfileMenuItem'; // --------------------------------------------------------------------------- // Profile dropdown items // --------------------------------------------------------------------------- -/** @alpha */ +/** @public */ export const settingsMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ name: 'settings', params: { @@ -48,7 +48,7 @@ export const settingsMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ }, }); -/** @alpha */ +/** @public */ export const myProfileMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ name: 'my-profile', params: { @@ -58,7 +58,7 @@ export const myProfileMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ }, }); -/** @alpha */ +/** @public */ export const logoutMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ name: 'logout', params: { @@ -72,7 +72,7 @@ export const logoutMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ // Help dropdown items // --------------------------------------------------------------------------- -/** @alpha */ +/** @public */ export const supportButtonMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ name: 'support-button', @@ -87,7 +87,7 @@ export const supportButtonMenuItemExtension = // App launcher dropdown items // --------------------------------------------------------------------------- -/** @alpha */ +/** @public */ export const appLauncherDevHubMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ name: 'app-launcher-devhub', @@ -102,7 +102,7 @@ export const appLauncherDevHubMenuItemExtension = }, }); -/** @alpha */ +/** @public */ export const appLauncherRhdhLocalMenuItemExtension = GlobalHeaderMenuItemBlueprint.make({ name: 'app-launcher-rhdh-local', diff --git a/workspaces/global-header/plugins/global-header/src/alpha/defaults/rhdhLogo.ts b/workspaces/global-header/plugins/global-header/src/defaults/rhdhLogo.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/alpha/defaults/rhdhLogo.ts rename to workspaces/global-header/plugins/global-header/src/defaults/rhdhLogo.ts diff --git a/workspaces/global-header/plugins/global-header/src/alpha/defaults/toolbarExtensions.tsx b/workspaces/global-header/plugins/global-header/src/defaults/toolbarExtensions.tsx similarity index 81% rename from workspaces/global-header/plugins/global-header/src/alpha/defaults/toolbarExtensions.tsx rename to workspaces/global-header/plugins/global-header/src/defaults/toolbarExtensions.tsx index e63925115ac..3f300b83808 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/defaults/toolbarExtensions.tsx +++ b/workspaces/global-header/plugins/global-header/src/defaults/toolbarExtensions.tsx @@ -22,13 +22,13 @@ import { GlobalHeaderComponentBlueprint } from '../extensions/blueprints'; -import { SearchComponent } from '../../components/SearchComponent/SearchComponent'; -import { Spacer } from '../../components/Spacer/Spacer'; -import { StarredDropdown } from '../../components/HeaderDropdownComponent/StarredDropdown'; -import { NotificationButton } from '../../components/NotificationButton/NotificationButton'; -import { Divider } from '../../components/Divider/Divider'; -import { CompanyLogo } from '../../components/CompanyLogo/CompanyLogo'; -import { HeaderIconButton } from '../../components/HeaderIconButton/HeaderIconButton'; +import { SearchComponent } from '../components/SearchComponent/SearchComponent'; +import { Spacer } from '../components/Spacer/Spacer'; +import { StarredDropdown } from '../components/HeaderDropdownComponent/StarredDropdown'; +import { NotificationButton } from '../components/NotificationButton/NotificationButton'; +import { Divider } from '../components/Divider/Divider'; +import { CompanyLogo } from '../components/CompanyLogo/CompanyLogo'; +import { HeaderIconButton } from '../components/HeaderIconButton/HeaderIconButton'; import { ProfileDropdown } from '../components/ProfileDropdown'; import { HelpDropdown } from '../components/HelpDropdown'; import { ApplicationLauncherDropdown } from '../components/ApplicationLauncherDropdown'; @@ -45,13 +45,13 @@ const SelfServiceButton = () => ( /> ); -/** @alpha */ +/** @public */ export const companyLogoExtension = GlobalHeaderComponentBlueprint.make({ name: 'company-logo', params: { component: CompanyLogoWrapper, priority: 200 }, }); -/** @alpha */ +/** @public */ export const searchExtension = GlobalHeaderComponentBlueprint.make({ name: 'search', params: { @@ -61,13 +61,13 @@ export const searchExtension = GlobalHeaderComponentBlueprint.make({ }, }); -/** @alpha */ +/** @public */ export const spacerExtension = GlobalHeaderComponentBlueprint.make({ name: 'spacer', params: { component: Spacer, priority: 99, layout: { flexGrow: 0 } }, }); -/** @alpha */ +/** @public */ export const selfServiceButtonExtension = GlobalHeaderComponentBlueprint.make({ name: 'self-service-button', params: { @@ -76,38 +76,38 @@ export const selfServiceButtonExtension = GlobalHeaderComponentBlueprint.make({ }, }); -/** @alpha */ +/** @public */ export const starredDropdownExtension = GlobalHeaderComponentBlueprint.make({ name: 'starred-dropdown', params: { component: StarredDropdown, priority: 85 }, }); -/** @alpha */ +/** @public */ export const applicationLauncherDropdownExtension = GlobalHeaderComponentBlueprint.make({ name: 'app-launcher-dropdown', params: { component: ApplicationLauncherDropdown, priority: 82 }, }); -/** @alpha */ +/** @public */ export const helpDropdownExtension = GlobalHeaderComponentBlueprint.make({ name: 'help-dropdown', params: { component: HelpDropdown, priority: 80 }, }); -/** @alpha */ +/** @public */ export const notificationButtonExtension = GlobalHeaderComponentBlueprint.make({ name: 'notification-button', params: { component: NotificationButton, priority: 70 }, }); -/** @alpha */ +/** @public */ export const dividerExtension = GlobalHeaderComponentBlueprint.make({ name: 'divider', params: { component: Divider, priority: 50 }, }); -/** @alpha */ +/** @public */ export const profileDropdownExtension = GlobalHeaderComponentBlueprint.make({ name: 'profile-dropdown', params: { component: ProfileDropdown, priority: 10 }, diff --git a/workspaces/global-header/plugins/global-header/src/alpha/extensions/GlobalHeaderContext.test.tsx b/workspaces/global-header/plugins/global-header/src/extensions/GlobalHeaderContext.test.tsx similarity index 100% rename from workspaces/global-header/plugins/global-header/src/alpha/extensions/GlobalHeaderContext.test.tsx rename to workspaces/global-header/plugins/global-header/src/extensions/GlobalHeaderContext.test.tsx diff --git a/workspaces/global-header/plugins/global-header/src/alpha/extensions/GlobalHeaderContext.tsx b/workspaces/global-header/plugins/global-header/src/extensions/GlobalHeaderContext.tsx similarity index 76% rename from workspaces/global-header/plugins/global-header/src/alpha/extensions/GlobalHeaderContext.tsx rename to workspaces/global-header/plugins/global-header/src/extensions/GlobalHeaderContext.tsx index 7fa15236c4f..bddce4673a2 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/extensions/GlobalHeaderContext.tsx +++ b/workspaces/global-header/plugins/global-header/src/extensions/GlobalHeaderContext.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createContext, useContext, useMemo } from 'react'; +import React, { createContext, useContext, useMemo } from 'react'; import type { GlobalHeaderComponentData, @@ -26,10 +26,20 @@ interface GlobalHeaderContextValue { menuItems: GlobalHeaderMenuItemData[]; } -const GlobalHeaderContext = createContext({ - components: [], - menuItems: [], -}); +const CONTEXT_KEY = '__global_header_context__' as keyof typeof globalThis; + +function getOrCreateContext(): React.Context { + const existing = (globalThis as any)[CONTEXT_KEY]; + if (existing) return existing as React.Context; + const ctx = createContext({ + components: [], + menuItems: [], + }); + (globalThis as any)[CONTEXT_KEY] = ctx; + return ctx; +} + +const GlobalHeaderContext = getOrCreateContext(); /** * Provider that distributes collected header extension data to child components. @@ -56,7 +66,7 @@ export const GlobalHeaderProvider = ({ /** * Returns all toolbar-level header components, sorted by priority (highest first). * - * @alpha + * @public */ export function useGlobalHeaderComponents(): GlobalHeaderComponentData[] { return useContext(GlobalHeaderContext).components; @@ -65,7 +75,7 @@ export function useGlobalHeaderComponents(): GlobalHeaderComponentData[] { /** * Returns menu items for a specific dropdown target, sorted by priority (highest first). * - * @alpha + * @public */ export function useGlobalHeaderMenuItems( target: string, diff --git a/workspaces/global-header/plugins/global-header/src/alpha/extensions/blueprints.tsx b/workspaces/global-header/plugins/global-header/src/extensions/blueprints.tsx similarity index 95% rename from workspaces/global-header/plugins/global-header/src/alpha/extensions/blueprints.tsx rename to workspaces/global-header/plugins/global-header/src/extensions/blueprints.tsx index a3b172c5f49..3657e987147 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/extensions/blueprints.tsx +++ b/workspaces/global-header/plugins/global-header/src/extensions/blueprints.tsx @@ -20,10 +20,10 @@ import { createExtensionBlueprint } from '@backstage/frontend-plugin-api'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; -import { HeaderIconButton } from '../../components/HeaderIconButton/HeaderIconButton'; -import { HeaderIcon } from '../../components/HeaderIcon/HeaderIcon'; -import { useTranslation } from '../../hooks/useTranslation'; -import { translateWithFallback } from '../../utils/translationUtils'; +import { HeaderIconButton } from '../components/HeaderIconButton/HeaderIconButton'; +import { HeaderIcon } from '../components/HeaderIcon/HeaderIcon'; +import { useTranslation } from '../hooks/useTranslation'; +import { translateWithFallback } from '../utils/translationUtils'; import { globalHeaderComponentDataRef, @@ -37,7 +37,7 @@ import { * (`icon`, `title`, `link`/`onClick`) and let the framework render a * consistent `HeaderIconButton` automatically (tier 1). * - * @alpha + * @public */ export interface ToolbarComponentParams { icon?: string; @@ -67,7 +67,7 @@ export interface ToolbarComponentParams { * Items with data fields (with or without a custom component) are grouped * by `sectionLabel` and rendered inside `MenuSection`. * - * @alpha + * @public */ export interface MenuItemParams { target: string; @@ -156,7 +156,7 @@ function createDataDrivenToolbarComponent( * priority: 200 * ``` * - * @alpha + * @public */ export const GlobalHeaderComponentBlueprint = createExtensionBlueprint({ kind: 'gh-component', @@ -206,7 +206,7 @@ export const GlobalHeaderComponentBlueprint = createExtensionBlueprint({ * sectionLabel: mySection * ``` * - * @alpha + * @public */ export const GlobalHeaderMenuItemBlueprint = createExtensionBlueprint({ kind: 'gh-menu-item', diff --git a/workspaces/global-header/plugins/global-header/src/alpha/extensions/dataRefs.ts b/workspaces/global-header/plugins/global-header/src/extensions/dataRefs.ts similarity index 98% rename from workspaces/global-header/plugins/global-header/src/alpha/extensions/dataRefs.ts rename to workspaces/global-header/plugins/global-header/src/extensions/dataRefs.ts index 173f2fa8916..4a6494387d7 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/extensions/dataRefs.ts +++ b/workspaces/global-header/plugins/global-header/src/extensions/dataRefs.ts @@ -25,7 +25,7 @@ import type { * Extension data ref carrying toolbar component data from a plugin to the * global header wrapper. * - * @alpha + * @public */ export const globalHeaderComponentDataRef = createExtensionDataRef().with({ @@ -36,7 +36,7 @@ export const globalHeaderComponentDataRef = * Extension data ref carrying menu item data from a plugin to the * global header wrapper. * - * @alpha + * @public */ export const globalHeaderMenuItemDataRef = createExtensionDataRef().with({ diff --git a/workspaces/global-header/plugins/global-header/src/alpha/extensions/globalHeaderModule.tsx b/workspaces/global-header/plugins/global-header/src/extensions/globalHeaderModule.tsx similarity index 99% rename from workspaces/global-header/plugins/global-header/src/alpha/extensions/globalHeaderModule.tsx rename to workspaces/global-header/plugins/global-header/src/extensions/globalHeaderModule.tsx index e47c1fd9301..a4938a83799 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/extensions/globalHeaderModule.tsx +++ b/workspaces/global-header/plugins/global-header/src/extensions/globalHeaderModule.tsx @@ -119,7 +119,7 @@ const globalHeaderExtension = AppRootWrapperBlueprint.makeWithOverrides({ * marked `internal: true`, restricting attachments to extensions from the * `app` plugin. * - * @alpha + * @public */ export const globalHeaderModule = createFrontendModule({ pluginId: 'app', diff --git a/workspaces/global-header/plugins/global-header/src/globalHeaderModuleExport.ts b/workspaces/global-header/plugins/global-header/src/globalHeaderModuleExport.ts new file mode 100644 index 00000000000..2ea291b7b43 --- /dev/null +++ b/workspaces/global-header/plugins/global-header/src/globalHeaderModuleExport.ts @@ -0,0 +1,16 @@ +/* + * Copyright Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export { globalHeaderModule as default } from './extensions/globalHeaderModule'; diff --git a/workspaces/global-header/plugins/global-header/src/globalHeaderTranslationsModuleExport.ts b/workspaces/global-header/plugins/global-header/src/globalHeaderTranslationsModuleExport.ts new file mode 100644 index 00000000000..13a0aa375ff --- /dev/null +++ b/workspaces/global-header/plugins/global-header/src/globalHeaderTranslationsModuleExport.ts @@ -0,0 +1,16 @@ +/* + * Copyright Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export { globalHeaderTranslationsModule as default } from './index'; diff --git a/workspaces/global-header/plugins/global-header/src/index.ts b/workspaces/global-header/plugins/global-header/src/index.ts index 33fb9e71d0a..adeb98f314f 100644 --- a/workspaces/global-header/plugins/global-header/src/index.ts +++ b/workspaces/global-header/plugins/global-header/src/index.ts @@ -13,6 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +/** + * New Frontend System API surface for the global header plugin. + * + * @public + * @packageDocumentation + */ + import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className'; ClassNameGenerator.configure(componentName => { @@ -21,6 +29,77 @@ ClassNameGenerator.configure(componentName => { : `v5-${componentName}`; }); -export * from './plugin'; +import { createFrontendModule } from '@backstage/frontend-plugin-api'; +import { TranslationBlueprint } from '@backstage/plugin-app-react'; +import { globalHeaderTranslations } from './translations'; + +// ── Core: plugin + module ────────────────────────────────────────────── + +export { default } from './plugin'; +export { globalHeaderModule } from './extensions/globalHeaderModule'; + +// ── Blueprints: for other plugins to contribute header items ─────────── + +export { + GlobalHeaderComponentBlueprint, + GlobalHeaderMenuItemBlueprint, +} from './extensions/blueprints'; +export type { + ToolbarComponentParams, + MenuItemParams, +} from './extensions/blueprints'; + +// ── Data refs ────────────────────────────────────────────────────────── + +export { + globalHeaderComponentDataRef, + globalHeaderMenuItemDataRef, +} from './extensions/dataRefs'; + +// ── Context hooks for custom dropdown components ─────────────────────── + +export { + useGlobalHeaderComponents, + useGlobalHeaderMenuItems, +} from './extensions/GlobalHeaderContext'; -export * from './translations'; +// ── Types ────────────────────────────────────────────────────────────── + +export type { + GlobalHeaderComponentData, + GlobalHeaderMenuItemData, +} from './types'; + +// ── Building block components for plugin authors ─────────────────────── + +export { HeaderIconButton as GlobalHeaderIconButton } from './components/HeaderIconButton/HeaderIconButton'; +export type { HeaderIconButtonProps } from './components/HeaderIconButton/HeaderIconButton'; +export { GlobalHeaderMenuItem } from './components/GlobalHeaderMenuItem'; +export type { GlobalHeaderMenuItemProps } from './components/GlobalHeaderMenuItem'; +export { GlobalHeaderDropdown } from './components/GlobalHeaderDropdown'; +export type { GlobalHeaderDropdownProps } from './components/GlobalHeaderDropdown'; + +// ── Default extensions (collections + individual for cherry-picking) ─── + +export * from './defaults'; + +// ── Translations ─────────────────────────────────────────────────────── + +export { globalHeaderTranslationRef } from './translations/ref'; +export { globalHeaderTranslations } from './translations'; + +const globalHeaderTranslation = TranslationBlueprint.make({ + name: 'global-header-translations', + params: { + resource: globalHeaderTranslations, + }, +}); + +/** + * App module that registers global header translations. + * @public + */ +export const globalHeaderTranslationsModule = createFrontendModule({ + pluginId: 'app', + extensions: [globalHeaderTranslation], +}); diff --git a/workspaces/global-header/plugins/global-header/src/legacy.ts b/workspaces/global-header/plugins/global-header/src/legacy.ts new file mode 100644 index 00000000000..9ef3c0d01c1 --- /dev/null +++ b/workspaces/global-header/plugins/global-header/src/legacy.ts @@ -0,0 +1,34 @@ +/* + * Copyright Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Legacy frontend system API surface for the global header plugin. + * + * @deprecated Use the root import instead: `import from '@red-hat-developer-hub/backstage-plugin-global-header'` + * @packageDocumentation + */ + +import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className'; + +ClassNameGenerator.configure(componentName => { + return componentName.startsWith('v5-') + ? componentName + : `v5-${componentName}`; +}); + +export * from './legacy/plugin'; + +export * from './translations'; diff --git a/workspaces/global-header/plugins/global-header/src/legacy/components/GlobalHeader.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/GlobalHeader.tsx new file mode 100644 index 00000000000..b9cd15f491a --- /dev/null +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/GlobalHeader.tsx @@ -0,0 +1,28 @@ +/* + * Copyright Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints'; +import { GlobalHeaderComponent } from './GlobalHeaderComponent'; + +export const GlobalHeader = () => { + const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints(); + + return ( + + ); +}; diff --git a/workspaces/global-header/plugins/global-header/src/components/GlobalHeaderComponent.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/GlobalHeaderComponent.tsx similarity index 100% rename from workspaces/global-header/plugins/global-header/src/components/GlobalHeaderComponent.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/GlobalHeaderComponent.tsx diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.test.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ApplicationLauncherDropdown.test.tsx similarity index 90% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.test.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ApplicationLauncherDropdown.test.tsx index a0ba476423c..549df8ca9a0 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.test.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ApplicationLauncherDropdown.test.tsx @@ -18,12 +18,12 @@ import { renderInTestApp } from '@backstage/test-utils'; import { MockTrans, mockUseTranslation, -} from '../../test-utils/mockTranslations'; +} from '../../../test-utils/mockTranslations'; import { ApplicationLauncherDropdown } from './ApplicationLauncherDropdown'; -import { useDropdownManager } from '../../hooks'; +import { useDropdownManager } from '../../../hooks'; import { useApplicationLauncherDropdownMountPoints } from '../../hooks/useApplicationLauncherDropdownMountPoints'; -jest.mock('../../hooks', () => ({ +jest.mock('../../../hooks', () => ({ useDropdownManager: jest.fn(), })); @@ -32,11 +32,11 @@ jest.mock('../../hooks/useApplicationLauncherDropdownMountPoints', () => ({ })); // Mock translation hooks -jest.mock('../../hooks/useTranslation', () => ({ +jest.mock('../../../hooks/useTranslation', () => ({ useTranslation: mockUseTranslation, })); -jest.mock('../../components/Trans', () => ({ +jest.mock('../../../components/Trans', () => ({ Trans: MockTrans, })); diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ApplicationLauncherDropdown.tsx similarity index 88% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ApplicationLauncherDropdown.tsx index 0ddf4daf8d0..4ee012405e9 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ApplicationLauncherDropdown.tsx @@ -19,11 +19,11 @@ import AppsIcon from '@mui/icons-material/Apps'; import AppRegistrationIcon from '@mui/icons-material/AppRegistration'; import { useApplicationLauncherDropdownMountPoints } from '../../hooks/useApplicationLauncherDropdownMountPoints'; -import { useDropdownManager } from '../../hooks'; -import { HeaderDropdownComponent } from './HeaderDropdownComponent'; -import { MenuSection } from './MenuSection'; -import { DropdownEmptyState } from './DropdownEmptyState'; -import { useTranslation } from '../../hooks/useTranslation'; +import { useDropdownManager } from '../../../hooks'; +import { HeaderDropdownComponent } from '../../../components/HeaderDropdownComponent/HeaderDropdownComponent'; +import { MenuSection } from '../../../components/HeaderDropdownComponent/MenuSection'; +import { DropdownEmptyState } from '../../../components/HeaderDropdownComponent/DropdownEmptyState'; +import { useTranslation } from '../../../hooks/useTranslation'; export const ApplicationLauncherDropdown = () => { const { anchorEl, handleOpen, handleClose } = useDropdownManager(); diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/CreateDropdown.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/CreateDropdown.tsx similarity index 88% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/CreateDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/CreateDropdown.tsx index b301afcfbbc..68120cf0f86 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/CreateDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/CreateDropdown.tsx @@ -19,11 +19,11 @@ import type { CSSProperties, ComponentType } from 'react'; import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined'; -import { MenuItemConfig } from './MenuSection'; +import { MenuItemConfig } from '../../../components/HeaderDropdownComponent/MenuSection'; import { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints'; -import { useTranslation } from '../../hooks/useTranslation'; -import { useDropdownManager } from '../../hooks'; -import { HeaderDropdownComponent } from './HeaderDropdownComponent'; +import { useTranslation } from '../../../hooks/useTranslation'; +import { useDropdownManager } from '../../../hooks'; +import { HeaderDropdownComponent } from '../../../components/HeaderDropdownComponent/HeaderDropdownComponent'; import Box from '@mui/material/Box'; /** diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.test.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/HelpDropdown.test.tsx similarity index 97% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.test.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/HelpDropdown.test.tsx index 138fee7ba21..03b7a5e814c 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.test.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/HelpDropdown.test.tsx @@ -18,13 +18,13 @@ import { renderInTestApp } from '@backstage/test-utils'; import { MockTrans, mockUseTranslation, -} from '../../test-utils/mockTranslations'; +} from '../../../test-utils/mockTranslations'; import { HelpDropdown } from './HelpDropdown'; -import { useDropdownManager } from '../../hooks'; +import { useDropdownManager } from '../../../hooks'; import { useHelpDropdownMountPoints } from '../../hooks/useHelpDropdownMountPoints'; import { HelpDropdownMountPoint } from '../../types'; -jest.mock('../../hooks', () => ({ +jest.mock('../../../hooks', () => ({ useDropdownManager: jest.fn(), })); @@ -33,11 +33,11 @@ jest.mock('../../hooks/useHelpDropdownMountPoints', () => ({ })); // Mock translation hooks -jest.mock('../../hooks/useTranslation', () => ({ +jest.mock('../../../hooks/useTranslation', () => ({ useTranslation: mockUseTranslation, })); -jest.mock('../../components/Trans', () => ({ +jest.mock('../../../components/Trans', () => ({ Trans: MockTrans, })); diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/HelpDropdown.tsx similarity index 88% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/HelpDropdown.tsx index e7dc233476e..1acec2a2b28 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HelpDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/HelpDropdown.tsx @@ -17,16 +17,16 @@ import { useEffect, useMemo, useRef } from 'react'; import type { ComponentType, CSSProperties } from 'react'; import type { MenuItemProps } from '@mui/material/MenuItem'; -import { HeaderDropdownComponent } from './HeaderDropdownComponent'; -import { useDropdownManager } from '../../hooks'; +import { HeaderDropdownComponent } from '../../../components/HeaderDropdownComponent/HeaderDropdownComponent'; +import { useDropdownManager } from '../../../hooks'; import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; import { useHelpDropdownMountPoints } from '../../hooks/useHelpDropdownMountPoints'; -import { MenuSection } from './MenuSection'; -import { DropdownEmptyState } from './DropdownEmptyState'; +import { MenuSection } from '../../../components/HeaderDropdownComponent/MenuSection'; +import { DropdownEmptyState } from '../../../components/HeaderDropdownComponent/DropdownEmptyState'; import SupportAgentIcon from '@mui/icons-material/SupportAgent'; -import { useValidComponentTracker } from '../../hooks/useValidComponentTracker'; -import { useTranslation } from '../../hooks/useTranslation'; -import type { MenuItemLinkProps } from '../MenuItemLink/MenuItemLink'; +import { useValidComponentTracker } from '../../../hooks/useValidComponentTracker'; +import { useTranslation } from '../../../hooks/useTranslation'; +import type { MenuItemLinkProps } from '../../../components/MenuItemLink/MenuItemLink'; /** * @public diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.test.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ProfileDropdown.test.tsx similarity index 97% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.test.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ProfileDropdown.test.tsx index 5b554cf18a5..c9011d6bab8 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.test.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ProfileDropdown.test.tsx @@ -22,7 +22,7 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { MockTrans, mockUseTranslation, -} from '../../test-utils/mockTranslations'; +} from '../../../test-utils/mockTranslations'; import { ProfileDropdown } from './ProfileDropdown'; jest.mock('@backstage/plugin-user-settings', () => ({ @@ -30,11 +30,11 @@ jest.mock('@backstage/plugin-user-settings', () => ({ })); // Mock translation hooks -jest.mock('../../hooks/useTranslation', () => ({ +jest.mock('../../../hooks/useTranslation', () => ({ useTranslation: mockUseTranslation, })); -jest.mock('../../components/Trans', () => ({ +jest.mock('../../../components/Trans', () => ({ Trans: MockTrans, })); diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ProfileDropdown.tsx similarity index 94% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ProfileDropdown.tsx index 3dedf8c5adf..c111aac8bce 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/ProfileDropdown.tsx @@ -27,12 +27,15 @@ import Typography from '@mui/material/Typography'; import { lighten } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import { MenuItemConfig, MenuSection } from './MenuSection'; -import { HeaderDropdownComponent } from './HeaderDropdownComponent'; +import { + MenuItemConfig, + MenuSection, +} from '../../../components/HeaderDropdownComponent/MenuSection'; +import { HeaderDropdownComponent } from '../../../components/HeaderDropdownComponent/HeaderDropdownComponent'; import { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints'; -import { useDropdownManager } from '../../hooks'; -import { useTranslation } from '../../hooks/useTranslation'; -import { translateWithFallback } from '../../utils/translationUtils'; +import { useDropdownManager } from '../../../hooks'; +import { useTranslation } from '../../../hooks/useTranslation'; +import { translateWithFallback } from '../../../utils/translationUtils'; /** * @public diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/RegisterAComponentSection.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/RegisterAComponentSection.tsx similarity index 85% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/RegisterAComponentSection.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/RegisterAComponentSection.tsx index 130d75ec72a..401456b241e 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/RegisterAComponentSection.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/RegisterAComponentSection.tsx @@ -14,9 +14,9 @@ * limitations under the License. */ import type { ComponentType } from 'react'; -import { MenuSection } from './MenuSection'; -import { MenuItemLink } from '../MenuItemLink/MenuItemLink'; -import { useTranslation } from '../../hooks/useTranslation'; +import { MenuSection } from '../../../components/HeaderDropdownComponent/MenuSection'; +import { MenuItemLink } from '../../../components/MenuItemLink/MenuItemLink'; +import { useTranslation } from '../../../hooks/useTranslation'; /** * Register A Component Section properties diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/SoftwareTemplatesSection.tsx b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/SoftwareTemplatesSection.tsx similarity index 93% rename from workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/SoftwareTemplatesSection.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/SoftwareTemplatesSection.tsx index c44b0204259..e7b99c7a745 100644 --- a/workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/SoftwareTemplatesSection.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/components/HeaderDropdownComponent/SoftwareTemplatesSection.tsx @@ -25,9 +25,9 @@ import Box from '@mui/material/Box'; import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; -import { MenuSection } from './MenuSection'; -import { MenuItemLink } from '../MenuItemLink/MenuItemLink'; -import { useTranslation } from '../../hooks/useTranslation'; +import { MenuSection } from '../../../components/HeaderDropdownComponent/MenuSection'; +import { MenuItemLink } from '../../../components/MenuItemLink/MenuItemLink'; +import { useTranslation } from '../../../hooks/useTranslation'; /** * Software Templates Section properties diff --git a/workspaces/global-header/plugins/global-header/src/components/index.ts b/workspaces/global-header/plugins/global-header/src/legacy/components/index.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/components/index.ts rename to workspaces/global-header/plugins/global-header/src/legacy/components/index.ts diff --git a/workspaces/global-header/plugins/global-header/src/defaultMountPoints/defaultMountPoints.tsx b/workspaces/global-header/plugins/global-header/src/legacy/defaultMountPoints/defaultMountPoints.tsx similarity index 97% rename from workspaces/global-header/plugins/global-header/src/defaultMountPoints/defaultMountPoints.tsx rename to workspaces/global-header/plugins/global-header/src/legacy/defaultMountPoints/defaultMountPoints.tsx index 709812be39d..fe55c86e372 100644 --- a/workspaces/global-header/plugins/global-header/src/defaultMountPoints/defaultMountPoints.tsx +++ b/workspaces/global-header/plugins/global-header/src/legacy/defaultMountPoints/defaultMountPoints.tsx @@ -14,13 +14,13 @@ * limitations under the License. */ import type { ComponentType } from 'react'; -import { LogoutButton } from '../components/LogoutButton/LogoutButton'; +import { LogoutButton } from '../../components/LogoutButton/LogoutButton'; import { ProfileDropdown } from '../components/HeaderDropdownComponent/ProfileDropdown'; import { RegisterAComponentSection } from '../components/HeaderDropdownComponent/RegisterAComponentSection'; import { SoftwareTemplatesSection } from '../components/HeaderDropdownComponent/SoftwareTemplatesSection'; -import { SearchComponent } from '../components/SearchComponent/SearchComponent'; -import { HeaderIconButton } from '../components/HeaderIconButton/HeaderIconButton'; -import { SupportButton } from '../components/SupportButton/SupportButton'; +import { SearchComponent } from '../../components/SearchComponent/SearchComponent'; +import { HeaderIconButton } from '../../components/HeaderIconButton/HeaderIconButton'; +import { SupportButton } from '../../components/SupportButton/SupportButton'; import { ApplicationLauncherDropdownMountPoint, CreateDropdownMountPoint, @@ -28,13 +28,13 @@ import { HelpDropdownMountPoint, ProfileDropdownMountPoint, } from '../types'; -import { NotificationButton } from '../components/NotificationButton/NotificationButton'; -import { Divider } from '../components/Divider/Divider'; -import { MenuItemLink } from '../components/MenuItemLink/MenuItemLink'; -import { Spacer } from '../components/Spacer/Spacer'; -import { StarredDropdown } from '../components/HeaderDropdownComponent/StarredDropdown'; +import { NotificationButton } from '../../components/NotificationButton/NotificationButton'; +import { Divider } from '../../components/Divider/Divider'; +import { MenuItemLink } from '../../components/MenuItemLink/MenuItemLink'; +import { Spacer } from '../../components/Spacer/Spacer'; +import { StarredDropdown } from '../../components/HeaderDropdownComponent/StarredDropdown'; import { ApplicationLauncherDropdown } from '../components/HeaderDropdownComponent/ApplicationLauncherDropdown'; -import { CompanyLogo } from '../components/CompanyLogo/CompanyLogo'; +import { CompanyLogo } from '../../components/CompanyLogo/CompanyLogo'; import { HelpDropdown } from '../components/HeaderDropdownComponent/HelpDropdown'; /** diff --git a/workspaces/global-header/plugins/global-header/src/hooks/useApplicationLauncherDropdownMountPoints.ts b/workspaces/global-header/plugins/global-header/src/legacy/hooks/useApplicationLauncherDropdownMountPoints.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/hooks/useApplicationLauncherDropdownMountPoints.ts rename to workspaces/global-header/plugins/global-header/src/legacy/hooks/useApplicationLauncherDropdownMountPoints.ts diff --git a/workspaces/global-header/plugins/global-header/src/hooks/useCreateDropdownMountPoints.ts b/workspaces/global-header/plugins/global-header/src/legacy/hooks/useCreateDropdownMountPoints.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/hooks/useCreateDropdownMountPoints.ts rename to workspaces/global-header/plugins/global-header/src/legacy/hooks/useCreateDropdownMountPoints.ts diff --git a/workspaces/global-header/plugins/global-header/src/hooks/useGlobalHeaderMountPoints.ts b/workspaces/global-header/plugins/global-header/src/legacy/hooks/useGlobalHeaderMountPoints.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/hooks/useGlobalHeaderMountPoints.ts rename to workspaces/global-header/plugins/global-header/src/legacy/hooks/useGlobalHeaderMountPoints.ts diff --git a/workspaces/global-header/plugins/global-header/src/hooks/useHelpDropdownMountPoints.ts b/workspaces/global-header/plugins/global-header/src/legacy/hooks/useHelpDropdownMountPoints.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/hooks/useHelpDropdownMountPoints.ts rename to workspaces/global-header/plugins/global-header/src/legacy/hooks/useHelpDropdownMountPoints.ts diff --git a/workspaces/global-header/plugins/global-header/src/hooks/useProfileDropdownMountPoints.ts b/workspaces/global-header/plugins/global-header/src/legacy/hooks/useProfileDropdownMountPoints.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/hooks/useProfileDropdownMountPoints.ts rename to workspaces/global-header/plugins/global-header/src/legacy/hooks/useProfileDropdownMountPoints.ts diff --git a/workspaces/global-header/plugins/global-header/src/plugin.test.ts b/workspaces/global-header/plugins/global-header/src/legacy/plugin.test.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/plugin.test.ts rename to workspaces/global-header/plugins/global-header/src/legacy/plugin.test.ts diff --git a/workspaces/global-header/plugins/global-header/src/legacy/plugin.ts b/workspaces/global-header/plugins/global-header/src/legacy/plugin.ts new file mode 100644 index 00000000000..130e6f7d7fe --- /dev/null +++ b/workspaces/global-header/plugins/global-header/src/legacy/plugin.ts @@ -0,0 +1,430 @@ +/* + * Copyright Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { ComponentType } from 'react'; + +import { + createPlugin, + createComponentExtension, +} from '@backstage/core-plugin-api'; + +import { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent'; +import { MenuItemLinkProps } from '../components/MenuItemLink/MenuItemLink'; +import { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection'; +import { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection'; +import { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown'; +import { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown'; +import { SupportButtonProps } from '../components/SupportButton/SupportButton'; +import { HelpDropdownProps } from './components/HeaderDropdownComponent/HelpDropdown'; +import { globalHeaderTranslationRef } from '../translations'; + +export type { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent'; + +export type { HeaderButtonProps } from '../components/HeaderButton/HeaderButton'; +export type { HeaderIconProps } from '../components/HeaderIcon/HeaderIcon'; +export type { HeaderIconButtonProps } from '../components/HeaderIconButton/HeaderIconButton'; +export type { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown'; +export type { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown'; +export type { HelpDropdownProps } from './components/HeaderDropdownComponent/HelpDropdown'; + +export type { MenuItemLinkProps } from '../components/MenuItemLink/MenuItemLink'; +export type { MenuItemConfig } from '../components/HeaderDropdownComponent/MenuSection'; +export type { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection'; +export type { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection'; +export type { DividerProps } from '../components/Divider/Divider'; +export type { SpacerProps } from '../components/Spacer/Spacer'; +export type { SupportButtonProps } from '../components/SupportButton/SupportButton'; +export type { NotificationButtonProps } from '../components/NotificationButton/NotificationButton'; +export type { + LogoURLs, + CompanyLogoProps, +} from '../components/CompanyLogo/CompanyLogo'; + +export type { + NotificationBannerProps, + NotificationBannerDismiss, +} from '../components/NotificationBanner'; + +export type { + GlobalHeaderComponentMountPoint, + GlobalHeaderComponentMountPointConfig, +} from './types'; + +export { defaultGlobalHeaderComponentsMountPoints } from './defaultMountPoints/defaultMountPoints'; + +/** + * Global Header Plugin + * + * @public + */ +export const globalHeaderPlugin = createPlugin({ + id: 'global-header', + __experimentalTranslations: { + availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja'], + resources: [globalHeaderTranslationRef], + }, +} as any); + +/** + * Global Header + * + * @public + */ +export const GlobalHeader = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'GlobalHeader', + component: { + lazy: () => import('./components/GlobalHeader').then(m => m.GlobalHeader), + }, + }), +); + +/** + * Global Header Component + * + * @public + */ +export const GlobalHeaderComponent: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'GlobalHeaderComponent', + component: { + lazy: () => + import('./components/GlobalHeaderComponent').then( + m => m.GlobalHeaderComponent, + ), + }, + }), + ); + +/** + * @public + */ +export const HeaderButton = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'HeaderButton', + component: { + lazy: () => + import('../components/HeaderButton/HeaderButton').then( + m => m.HeaderButton, + ), + }, + }), +); + +/** + * @public + */ +export const HeaderIcon = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'HeaderIcon', + component: { + lazy: () => + import('../components/HeaderIcon/HeaderIcon').then(m => m.HeaderIcon), + }, + }), +); + +/** + * @public + */ +export const HeaderIconButton = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'HeaderIconButton', + component: { + lazy: () => + import('../components/HeaderIconButton/HeaderIconButton').then( + m => m.HeaderIconButton, + ), + }, + }), +); + +/** + * Search Component + * + * @public + */ +export const SearchComponent: ComponentType = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'SearchComponent', + component: { + lazy: () => + import('../components/SearchComponent/SearchComponent').then( + m => m.SearchComponent, + ), + }, + }), +); + +/** + * Create Dropdown + * + * @public + */ +export const CreateDropdown: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'CreateDropdown', + component: { + lazy: () => + import('./components/HeaderDropdownComponent/CreateDropdown').then( + m => m.CreateDropdown, + ), + }, + }), + ); + +/** + * Profile Dropdown + * + * @public + */ +export const ProfileDropdown: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'ProfileDropdown', + component: { + lazy: () => + import('./components/HeaderDropdownComponent/ProfileDropdown').then( + m => m.ProfileDropdown, + ), + }, + }), + ); + +/** + * Help Dropdown + * + * @public + */ +export const HelpDropdown: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'HelpDropdown', + component: { + lazy: () => + import('./components/HeaderDropdownComponent/HelpDropdown').then( + m => m.HelpDropdown, + ), + }, + }), + ); + +/** + * Software Templates List + * + * @public + */ +export const SoftwareTemplatesSection: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'SoftwareTemplatesSection', + component: { + lazy: () => + import( + './components/HeaderDropdownComponent/SoftwareTemplatesSection' + ).then(m => m.SoftwareTemplatesSection), + }, + }), + ); + +/** + * Register A Component Link + * + * @public + */ +export const RegisterAComponentSection: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'RegisterAComponentSection', + component: { + lazy: () => + import( + './components/HeaderDropdownComponent/RegisterAComponentSection' + ).then(m => m.RegisterAComponentSection), + }, + }), + ); + +/** + * Header Link + * + * @public + */ +export const MenuItemLink: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'MenuItemLink', + component: { + lazy: () => + import('../components/MenuItemLink/MenuItemLink').then( + m => m.MenuItemLink, + ), + }, + }), + ); + +/** + * Header Logout Button + * + * @public + */ +export const LogoutButton: ComponentType = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'LogoutButton', + component: { + lazy: () => + import('../components/LogoutButton/LogoutButton').then( + m => m.LogoutButton, + ), + }, + }), +); + +/** + * Spacer component that allow users to add a flexible spacing between components. + * + * Supports two props: `growFactor` with default 1 and `minWidth` width default 8 pixels. + * + * @public + */ +export const Spacer = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'Spacer', + component: { + lazy: () => import('../components/Spacer/Spacer').then(m => m.Spacer), + }, + }), +); + +/** + * @public + */ +export const Divider = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'Divider', + component: { + lazy: () => import('../components/Divider/Divider').then(m => m.Divider), + }, + }), +); + +/** + * @public + */ +export const SupportButton: ComponentType = + globalHeaderPlugin.provide( + createComponentExtension({ + name: 'SupportButton', + component: { + lazy: () => + import('../components/SupportButton/SupportButton').then( + m => m.SupportButton, + ), + }, + }), + ); + +/** + * @public + */ +export const NotificationButton = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'NotificationButton', + component: { + lazy: () => + import('../components/NotificationButton/NotificationButton').then( + m => m.NotificationButton, + ), + }, + }), +); + +/** + * NotificationBanner + * + * @public + */ +export const NotificationBanner = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'NotificationBanner', + component: { + lazy: () => + import('../components/NotificationBanner').then( + m => m.NotificationBanner, + ), + }, + }), +); + +/** + * Starred Dropdown + * + * @public + */ +export const StarredDropdown = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'StarredDropdown', + component: { + lazy: () => + import('../components/HeaderDropdownComponent/StarredDropdown').then( + m => m.StarredDropdown, + ), + }, + }), +); + +/** + * Application Launcher Dropdown + * + * @public + */ +export const ApplicationLauncherDropdown = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'ApplicationLauncherDropdown', + component: { + lazy: () => + import( + './components/HeaderDropdownComponent/ApplicationLauncherDropdown' + ).then(m => m.ApplicationLauncherDropdown), + }, + }), +); + +/** + * Company Logo + * + * @public + */ +export const CompanyLogo = globalHeaderPlugin.provide( + createComponentExtension({ + name: 'CompanyLogo', + component: { + lazy: () => + import('../components/CompanyLogo/CompanyLogo').then( + m => m.CompanyLogo, + ), + }, + }), +); + +/** + * Translation resource for the global header plugin + * + * @public + */ +export { globalHeaderTranslations } from '../translations'; diff --git a/workspaces/global-header/plugins/global-header/src/legacy/types.ts b/workspaces/global-header/plugins/global-header/src/legacy/types.ts new file mode 100644 index 00000000000..6392ae41abf --- /dev/null +++ b/workspaces/global-header/plugins/global-header/src/legacy/types.ts @@ -0,0 +1,148 @@ +/* + * Copyright Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { ComponentType, CSSProperties } from 'react'; + +/** + * Global Header Config + * + * @public + */ +export interface GlobalHeaderComponentMountPointConfig { + priority?: number; +} + +/** + * Create Dropdown Config + * + * @public + */ +export interface CreateDropdownMountPointConfig { + priority?: number; + props?: Record; +} +/** + * Profile Dropdown Config + * + * @public + */ +export interface ProfileDropdownMountPointConfig { + priority?: number; + icon?: string; + title?: string; + link?: string; + props?: Record; +} +/** + * Help Dropdown Config + * + * @public + */ +export interface HelpDropdownMountPointConfig { + priority?: number; + icon?: string; + title?: string; + link?: string; + style?: CSSProperties; + props?: Record; +} +/** + * Application Launcher Dropdown Config + * + * @public + */ +export interface ApplicationLauncherDropdownMountPointConfig { + section?: string; + sectionLink?: string; + sectionLinkLabel?: string; + priority?: number; + icon?: string; + title?: string; + link?: string; + props?: Record; +} + +/** + * Global Header Component Mount Point + * + * @public + */ +export interface GlobalHeaderComponentMountPoint { + Component: ComponentType<{ + layout?: CSSProperties; + }>; + config?: GlobalHeaderComponentMountPointConfig & { + props?: Record; + layout?: CSSProperties; + }; +} + +/** + * Create Dropdown Mount Point + * + * @public + */ +export interface CreateDropdownMountPoint { + Component: ComponentType; + config?: CreateDropdownMountPointConfig & { + props?: Record; + }; +} + +/** + * Profile Dropdown Mount Point + * + * @public + */ +export interface ProfileDropdownMountPoint { + Component: ComponentType; + config?: ProfileDropdownMountPointConfig & { + props?: Record; + }; +} + +export interface HelpDropdownMountPoint { + Component: ComponentType; + config?: HelpDropdownMountPointConfig & { + props?: Record; + }; +} + +export interface ApplicationLauncherDropdownMountPoint { + Component: ComponentType; + config?: ApplicationLauncherDropdownMountPointConfig & { + props?: Record; + }; +} + +/** + * ScalprumState + * + * @public + */ +export interface ScalprumState { + api?: { + dynamicRootConfig?: { + mountPoints?: { + 'global.header/component': GlobalHeaderComponentMountPoint[]; + 'global.header/create': CreateDropdownMountPoint[]; + 'global.header/profile': ProfileDropdownMountPoint[]; + 'global.header/application-launcher': ApplicationLauncherDropdownMountPoint[]; + 'global.header/help': HelpDropdownMountPoint[]; + }; + }; + }; +} diff --git a/workspaces/global-header/plugins/global-header/src/plugin.ts b/workspaces/global-header/plugins/global-header/src/plugin.ts index 45dcbf93ac4..a17d7398dc7 100644 --- a/workspaces/global-header/plugins/global-header/src/plugin.ts +++ b/workspaces/global-header/plugins/global-header/src/plugin.ts @@ -14,415 +14,53 @@ * limitations under the License. */ -import type { ComponentType } from 'react'; +import { createFrontendPlugin } from '@backstage/frontend-plugin-api'; import { - createPlugin, - createComponentExtension, -} from '@backstage/core-plugin-api'; - -import { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent'; -import { MenuItemLinkProps } from './components/MenuItemLink/MenuItemLink'; -import { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection'; -import { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection'; -import { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown'; -import { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown'; -import { SupportButtonProps } from './plugin'; -import { HelpDropdownProps } from './components/HeaderDropdownComponent/HelpDropdown'; -import { globalHeaderTranslationRef } from './translations'; - -export type { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent'; - -export type { HeaderButtonProps } from './components/HeaderButton/HeaderButton'; -export type { HeaderIconProps } from './components/HeaderIcon/HeaderIcon'; -export type { HeaderIconButtonProps } from './components/HeaderIconButton/HeaderIconButton'; -export type { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown'; -export type { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown'; -export type { HelpDropdownProps } from './components/HeaderDropdownComponent/HelpDropdown'; - -export type { MenuItemLinkProps } from './components/MenuItemLink/MenuItemLink'; -export type { MenuItemConfig } from './components/HeaderDropdownComponent/MenuSection'; -export type { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection'; -export type { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection'; -export type { DividerProps } from './components/Divider/Divider'; -export type { SpacerProps } from './components/Spacer/Spacer'; -export type { SupportButtonProps } from './components/SupportButton/SupportButton'; -export type { NotificationButtonProps } from './components/NotificationButton/NotificationButton'; -export type { - LogoURLs, - CompanyLogoProps, -} from './components/CompanyLogo/CompanyLogo'; - -export type { - NotificationBannerProps, - NotificationBannerDismiss, -} from './components/NotificationBanner'; - -export type { - GlobalHeaderComponentMountPoint, - GlobalHeaderComponentMountPointConfig, -} from './types'; - -export { defaultGlobalHeaderComponentsMountPoints } from './defaultMountPoints/defaultMountPoints'; - -/** - * Global Header Plugin - * - * @public - */ -export const globalHeaderPlugin = createPlugin({ - id: 'global-header', - __experimentalTranslations: { - availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja'], - resources: [globalHeaderTranslationRef], - }, -} as any); - -/** - * Global Header - * - * @public - */ -export const GlobalHeader = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'GlobalHeader', - component: { - lazy: () => import('./components/GlobalHeader').then(m => m.GlobalHeader), - }, - }), -); - -/** - * Global Header Component - * - * @public - */ -export const GlobalHeaderComponent: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'GlobalHeaderComponent', - component: { - lazy: () => - import('./components/GlobalHeaderComponent').then( - m => m.GlobalHeaderComponent, - ), - }, - }), - ); - -/** - * @public - */ -export const HeaderButton = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'HeaderButton', - component: { - lazy: () => - import('./components/HeaderButton/HeaderButton').then( - m => m.HeaderButton, - ), - }, - }), -); - -/** - * @public - */ -export const HeaderIcon = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'HeaderIcon', - component: { - lazy: () => - import('./components/HeaderIcon/HeaderIcon').then(m => m.HeaderIcon), - }, - }), -); - -/** - * @public - */ -export const HeaderIconButton = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'HeaderIconButton', - component: { - lazy: () => - import('./components/HeaderIconButton/HeaderIconButton').then( - m => m.HeaderIconButton, - ), - }, - }), -); - -/** - * Search Component - * - * @public - */ -export const SearchComponent: ComponentType = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'SearchComponent', - component: { - lazy: () => - import('./components/SearchComponent/SearchComponent').then( - m => m.SearchComponent, - ), - }, - }), -); - -/** - * Create Dropdown - * - * @public - */ -export const CreateDropdown: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'CreateDropdown', - component: { - lazy: () => - import('./components/HeaderDropdownComponent/CreateDropdown').then( - m => m.CreateDropdown, - ), - }, - }), - ); - -/** - * Profile Dropdown - * - * @public - */ -export const ProfileDropdown: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'ProfileDropdown', - component: { - lazy: () => - import('./components/HeaderDropdownComponent/ProfileDropdown').then( - m => m.ProfileDropdown, - ), - }, - }), - ); - -/** - * Help Dropdown - * - * @public - */ -export const HelpDropdown: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'HelpDropdown', - component: { - lazy: () => - import('./components/HeaderDropdownComponent/HelpDropdown').then( - m => m.HelpDropdown, - ), - }, - }), - ); - -/** - * Software Templates List - * - * @public - */ -export const SoftwareTemplatesSection: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'SoftwareTemplatesSection', - component: { - lazy: () => - import( - './components/HeaderDropdownComponent/SoftwareTemplatesSection' - ).then(m => m.SoftwareTemplatesSection), - }, - }), - ); - -/** - * Register A Component Link - * - * @public - */ -export const RegisterAComponentSection: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'RegisterAComponentSection', - component: { - lazy: () => - import( - './components/HeaderDropdownComponent/RegisterAComponentSection' - ).then(m => m.RegisterAComponentSection), - }, - }), - ); - -/** - * Header Link - * - * @public - */ -export const MenuItemLink: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'MenuItemLink', - component: { - lazy: () => - import('./components/MenuItemLink/MenuItemLink').then( - m => m.MenuItemLink, - ), - }, - }), - ); - -/** - * Header Logout Button - * - * @public - */ -export const LogoutButton: ComponentType = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'LogoutButton', - component: { - lazy: () => - import('./components/LogoutButton/LogoutButton').then( - m => m.LogoutButton, - ), - }, - }), -); - -/** - * Spacer component that allow users to add a flexible spacing between components. - * - * Supports two props: `growFactor` with default 1 and `minWidth` width default 8 pixels. - * - * @public - */ -export const Spacer = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'Spacer', - component: { - lazy: () => import('./components/Spacer/Spacer').then(m => m.Spacer), - }, - }), -); - -/** - * @public - */ -export const Divider = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'Divider', - component: { - lazy: () => import('./components/Divider/Divider').then(m => m.Divider), - }, - }), -); - -/** - * @public - */ -export const SupportButton: ComponentType = - globalHeaderPlugin.provide( - createComponentExtension({ - name: 'SupportButton', - component: { - lazy: () => - import('./components/SupportButton/SupportButton').then( - m => m.SupportButton, - ), - }, - }), - ); - -/** - * @public - */ -export const NotificationButton = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'NotificationButton', - component: { - lazy: () => - import('./components/NotificationButton/NotificationButton').then( - m => m.NotificationButton, - ), - }, - }), -); - -/** - * NotificationBanner - * - * @public - */ -export const NotificationBanner = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'NotificationBanner', - component: { - lazy: () => - import('./components/NotificationBanner').then( - m => m.NotificationBanner, - ), - }, - }), -); - -/** - * Starred Dropdown - * - * @public - */ -export const StarredDropdown = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'StarredDropdown', - component: { - lazy: () => - import('./components/HeaderDropdownComponent/StarredDropdown').then( - m => m.StarredDropdown, - ), - }, - }), -); - -/** - * Application Launcher Dropdown - * - * @public - */ -export const ApplicationLauncherDropdown = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'ApplicationLauncherDropdown', - component: { - lazy: () => - import( - './components/HeaderDropdownComponent/ApplicationLauncherDropdown' - ).then(m => m.ApplicationLauncherDropdown), - }, - }), -); - -/** - * Company Logo - * - * @public - */ -export const CompanyLogo = globalHeaderPlugin.provide( - createComponentExtension({ - name: 'CompanyLogo', - component: { - lazy: () => - import('./components/CompanyLogo/CompanyLogo').then(m => m.CompanyLogo), - }, - }), -); - -/** - * Translation resource for the global header plugin - * - * @public - */ -export { globalHeaderTranslations } from './translations'; + companyLogoExtension, + searchExtension, + spacerExtension, + selfServiceButtonExtension, + starredDropdownExtension, + applicationLauncherDropdownExtension, + helpDropdownExtension, + notificationButtonExtension, + dividerExtension, + profileDropdownExtension, + settingsMenuItemExtension, + myProfileMenuItemExtension, + logoutMenuItemExtension, + supportButtonMenuItemExtension, + appLauncherDevHubMenuItemExtension, + appLauncherRhdhLocalMenuItemExtension, +} from './defaults'; + +/** + * Plugin providing the default global header toolbar items and + * dropdown menu items. + * + * @public + */ +const globalHeaderPlugin = createFrontendPlugin({ + pluginId: 'global-header', + extensions: [ + companyLogoExtension, + searchExtension, + spacerExtension, + selfServiceButtonExtension, + starredDropdownExtension, + applicationLauncherDropdownExtension, + helpDropdownExtension, + notificationButtonExtension, + dividerExtension, + profileDropdownExtension, + settingsMenuItemExtension, + myProfileMenuItemExtension, + logoutMenuItemExtension, + supportButtonMenuItemExtension, + appLauncherDevHubMenuItemExtension, + appLauncherRhdhLocalMenuItemExtension, + ], +}); + +export default globalHeaderPlugin; diff --git a/workspaces/global-header/plugins/global-header/src/types.ts b/workspaces/global-header/plugins/global-header/src/types.ts index 6392ae41abf..a7f21827e34 100644 --- a/workspaces/global-header/plugins/global-header/src/types.ts +++ b/workspaces/global-header/plugins/global-header/src/types.ts @@ -14,135 +14,76 @@ * limitations under the License. */ -import type { ComponentType, CSSProperties } from 'react'; +import type { ComponentType } from 'react'; /** - * Global Header Config + * Data produced by a `GlobalHeaderComponentBlueprint` extension. + * Represents a single toolbar-level item in the global header. * * @public */ -export interface GlobalHeaderComponentMountPointConfig { +export interface GlobalHeaderComponentData { + component: ComponentType; priority?: number; + /** MUI `sx`-compatible layout overrides applied by the header wrapper. */ + layout?: Record; } /** - * Create Dropdown Config + * Data produced by a `GlobalHeaderMenuItemBlueprint` extension. + * Represents a single menu item inside a header dropdown. * - * @public - */ -export interface CreateDropdownMountPointConfig { - priority?: number; - props?: Record; -} -/** - * Profile Dropdown Config + * When `type` is `'component'`, the item is a self-contained component that + * controls its own layout and `MenuItem` wrapping (e.g. `SoftwareTemplatesSection`, + * `LogoutButton`). * - * @public - */ -export interface ProfileDropdownMountPointConfig { - priority?: number; - icon?: string; - title?: string; - link?: string; - props?: Record; -} -/** - * Help Dropdown Config + * When `type` is `'data'` (the default), the item is data-driven: it is + * grouped by `sectionLabel` and rendered through `MenuSection` + * which provides `` wrapping, `` navigation, section headers + * and dividers. * * @public */ -export interface HelpDropdownMountPointConfig { +export interface GlobalHeaderMenuItemData { + target: string; + /** + * React component used for rendering. Required when `type` is `'component'`. + * For `type: 'data'` items, defaults to the built-in `MenuItemLink`. + */ + component?: ComponentType; priority?: number; - icon?: string; + /** + * Controls how the item is rendered. + * + * - `'data'` (default) -- grouped by `sectionLabel` and rendered through + * `MenuSection` with standard `MenuItem` wrapping. + * - `'component'` -- rendered directly; the component controls its own + * layout and `MenuItem` wrapping. + */ + type?: 'component' | 'data'; + /** Display title for the item. */ title?: string; + /** Translation key for the title. */ + titleKey?: string; + /** Icon identifier passed to `HeaderIcon`. */ + icon?: string; + /** Secondary title rendered below the main title. */ + subTitle?: string; + /** Translation key for the secondary title. */ + subTitleKey?: string; + /** Navigation URL. External links show a launch indicator. */ link?: string; - style?: CSSProperties; - props?: Record; -} -/** - * Application Launcher Dropdown Config - * - * @public - */ -export interface ApplicationLauncherDropdownMountPointConfig { - section?: string; + /** Click handler invoked when the item is selected (in addition to closing the menu). */ + onClick?: () => void; + /** + * Section label used both as the grouping key and the displayed header. + * Items sharing the same string are grouped together and rendered as a + * single `MenuSection`. Auto-translated when the value contains + * dots (e.g. `'applicationLauncher.sections.documentation'`). + */ + sectionLabel?: string; + /** Optional URL rendered as a clickable link in the section header row. */ sectionLink?: string; + /** Display text for the section header link. */ sectionLinkLabel?: string; - priority?: number; - icon?: string; - title?: string; - link?: string; - props?: Record; -} - -/** - * Global Header Component Mount Point - * - * @public - */ -export interface GlobalHeaderComponentMountPoint { - Component: ComponentType<{ - layout?: CSSProperties; - }>; - config?: GlobalHeaderComponentMountPointConfig & { - props?: Record; - layout?: CSSProperties; - }; -} - -/** - * Create Dropdown Mount Point - * - * @public - */ -export interface CreateDropdownMountPoint { - Component: ComponentType; - config?: CreateDropdownMountPointConfig & { - props?: Record; - }; -} - -/** - * Profile Dropdown Mount Point - * - * @public - */ -export interface ProfileDropdownMountPoint { - Component: ComponentType; - config?: ProfileDropdownMountPointConfig & { - props?: Record; - }; -} - -export interface HelpDropdownMountPoint { - Component: ComponentType; - config?: HelpDropdownMountPointConfig & { - props?: Record; - }; -} - -export interface ApplicationLauncherDropdownMountPoint { - Component: ComponentType; - config?: ApplicationLauncherDropdownMountPointConfig & { - props?: Record; - }; -} - -/** - * ScalprumState - * - * @public - */ -export interface ScalprumState { - api?: { - dynamicRootConfig?: { - mountPoints?: { - 'global.header/component': GlobalHeaderComponentMountPoint[]; - 'global.header/create': CreateDropdownMountPoint[]; - 'global.header/profile': ProfileDropdownMountPoint[]; - 'global.header/application-launcher': ApplicationLauncherDropdownMountPoint[]; - 'global.header/help': HelpDropdownMountPoint[]; - }; - }; - }; } diff --git a/workspaces/global-header/plugins/global-header/src/alpha/utils/menuItemGrouping.test.ts b/workspaces/global-header/plugins/global-header/src/utils/menuItemGrouping.test.ts similarity index 98% rename from workspaces/global-header/plugins/global-header/src/alpha/utils/menuItemGrouping.test.ts rename to workspaces/global-header/plugins/global-header/src/utils/menuItemGrouping.test.ts index 242783162bc..e83b9563e33 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/utils/menuItemGrouping.test.ts +++ b/workspaces/global-header/plugins/global-header/src/utils/menuItemGrouping.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { MenuItemLink } from '../../components/MenuItemLink/MenuItemLink'; +import { MenuItemLink } from '../components/MenuItemLink/MenuItemLink'; import type { GlobalHeaderMenuItemData } from '../types'; import { groupBySection, buildDropdownEntries } from './menuItemGrouping'; diff --git a/workspaces/global-header/plugins/global-header/src/alpha/utils/menuItemGrouping.ts b/workspaces/global-header/plugins/global-header/src/utils/menuItemGrouping.ts similarity index 94% rename from workspaces/global-header/plugins/global-header/src/alpha/utils/menuItemGrouping.ts rename to workspaces/global-header/plugins/global-header/src/utils/menuItemGrouping.ts index 0746c6ae8f7..9d42837f516 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/utils/menuItemGrouping.ts +++ b/workspaces/global-header/plugins/global-header/src/utils/menuItemGrouping.ts @@ -14,9 +14,9 @@ * limitations under the License. */ -import { MenuItemLink } from '../../components/MenuItemLink/MenuItemLink'; +import { MenuItemLink } from '../components/MenuItemLink/MenuItemLink'; import type { GlobalHeaderMenuItemData } from '../types'; -import type { MenuItemConfig } from '../../components/HeaderDropdownComponent/MenuSection'; +import type { MenuItemConfig } from '../components/HeaderDropdownComponent/MenuSection'; /** A group of data-driven menu items sharing the same `sectionLabel` value. */ export interface SectionGroup { diff --git a/workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigComponents.test.tsx b/workspaces/global-header/plugins/global-header/src/utils/readConfigComponents.test.tsx similarity index 97% rename from workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigComponents.test.tsx rename to workspaces/global-header/plugins/global-header/src/utils/readConfigComponents.test.tsx index 27f9238a586..3346aa84cc5 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigComponents.test.tsx +++ b/workspaces/global-header/plugins/global-header/src/utils/readConfigComponents.test.tsx @@ -19,7 +19,7 @@ import { renderInTestApp } from '@backstage/test-utils'; import { ConfigReader } from '@backstage/config'; import { readConfigComponents } from './readConfigComponents'; -jest.mock('../../hooks/useTranslation', () => ({ +jest.mock('../hooks/useTranslation', () => ({ useTranslation: () => ({ t: (key: string) => key }), })); diff --git a/workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigComponents.tsx b/workspaces/global-header/plugins/global-header/src/utils/readConfigComponents.tsx similarity index 95% rename from workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigComponents.tsx rename to workspaces/global-header/plugins/global-header/src/utils/readConfigComponents.tsx index 31f76a058c3..61c6476e0c8 100644 --- a/workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigComponents.tsx +++ b/workspaces/global-header/plugins/global-header/src/utils/readConfigComponents.tsx @@ -16,7 +16,7 @@ import type { Config } from '@backstage/config'; -import { HeaderIconButton } from '../../components/HeaderIconButton/HeaderIconButton'; +import { HeaderIconButton } from '../components/HeaderIconButton/HeaderIconButton'; import type { GlobalHeaderComponentData } from '../types'; /** diff --git a/workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigMenuItems.test.ts b/workspaces/global-header/plugins/global-header/src/utils/readConfigMenuItems.test.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigMenuItems.test.ts rename to workspaces/global-header/plugins/global-header/src/utils/readConfigMenuItems.test.ts diff --git a/workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigMenuItems.ts b/workspaces/global-header/plugins/global-header/src/utils/readConfigMenuItems.ts similarity index 100% rename from workspaces/global-header/plugins/global-header/src/alpha/utils/readConfigMenuItems.ts rename to workspaces/global-header/plugins/global-header/src/utils/readConfigMenuItems.ts