Deprecate HeaderPage in favor of Header in @backstage/ui (#33188)

* Deprecate HeaderPage in favor of Header in @backstage/ui

Rename the HeaderPage component to Header, keeping HeaderPage as a
deprecated alias for backwards compatibility. Also deprecate
HeaderPageProps, HeaderPageOwnProps, HeaderPageBreadcrumb, and
HeaderPageDefinition with new Header* equivalents. Update all internal
usages, stories, and docs-ui documentation to use the new names.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

* Rename HeaderPage files and directories to Header

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

* Add changeset for mui-to-bui Header rename

Document the plugin release impact of switching the MUI to BUI theme converter page to the renamed Header component.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

---------

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

docs-ui/src/app/components/header/components.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage';
+import { Header } from '../../../../../packages/ui/src/components/Header/Header';
 import { Button } from '../../../../../packages/ui/src/components/Button/Button';
 import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
 import {
@@ -31,7 +31,7 @@ const breadcrumbs = [
 
 export const WithEverything = () => (
   <MemoryRouter>
-    <HeaderPage
+    <Header
       title="Page Title"
       tabs={tabs.slice(0, 2)}
       breadcrumbs={breadcrumbs.slice(0, 2)}
@@ -47,28 +47,25 @@ export const WithEverything = () => (
 
 export const WithLongBreadcrumbs = () => (
   <MemoryRouter>
-    <HeaderPage title="Page Title" breadcrumbs={breadcrumbs.slice(0, 2)} />
+    <Header title="Page Title" breadcrumbs={breadcrumbs.slice(0, 2)} />
   </MemoryRouter>
 );
 
 export const WithTabs = () => (
   <MemoryRouter>
-    <HeaderPage title="Page Title" tabs={tabs.slice(0, 3)} />
+    <Header title="Page Title" tabs={tabs.slice(0, 3)} />
   </MemoryRouter>
 );
 
 export const WithCustomActions = () => (
   <MemoryRouter>
-    <HeaderPage
-      title="Page Title"
-      customActions={<Button>Custom action</Button>}
-    />
+    <Header title="Page Title" customActions={<Button>Custom action</Button>} />
   </MemoryRouter>
 );
 
 export const WithMenu = () => (
   <MemoryRouter>
-    <HeaderPage
+    <Header
       title="Page Title"
       customActions={
         <MenuTrigger>

docs-ui/src/app/components/header/page.mdx

@@ -19,11 +19,11 @@ import {
 } from './snippets';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { HeaderPageDefinition } from '../../../utils/definitions';
+import { HeaderDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
-  title="HeaderPage"
+  title="Header"
   description="A secondary header with title, breadcrumbs, tabs, and actions."
 />
 
@@ -61,6 +61,6 @@ Use `customActions` to add a dropdown menu.
 
 <Snippet open preview={<WithMenu />} code={withMenu} />
 
-<Theming definition={HeaderPageDefinition} />
+<Theming definition={HeaderDefinition} />
 
-<ChangelogComponent component="header-page" />
+<ChangelogComponent component="header" />

docs-ui/src/app/components/header/props-definition.tsx

@@ -50,7 +50,7 @@ export const headerPagePropDefs: Record<string, PropDef> = {
     type: 'complex',
     description: 'Breadcrumb trail displayed above the title.',
     complexType: {
-      name: 'HeaderPageBreadcrumb[]',
+      name: 'HeaderBreadcrumb[]',
       properties: {
         label: {
           type: 'string',

docs-ui/src/app/components/header/snippets.ts

@@ -1,8 +1,8 @@
-export const usage = `import { HeaderPage } from '@backstage/ui';
+export const usage = `import { Header } from '@backstage/ui';
 
-<HeaderPage title="Page Title" />`;
+<Header title="Page Title" />`;
 
-export const defaultSnippet = `<HeaderPage
+export const defaultSnippet = `<Header
   title="Page Title"
   breadcrumbs={[
     { label: 'Home', href: '/' },
@@ -20,7 +20,7 @@ export const defaultSnippet = `<HeaderPage
   }
 />`;
 
-export const withBreadcrumbs = `<HeaderPage
+export const withBreadcrumbs = `<Header
   title="Page Title"
   breadcrumbs={[
     { label: 'Home', href: '/' },
@@ -28,7 +28,7 @@ export const withBreadcrumbs = `<HeaderPage
   ]}
 />`;
 
-export const withTabs = `<HeaderPage
+export const withTabs = `<Header
   title="Page Title"
   tabs={[
     { id: 'overview', label: 'Overview', href: '/overview' },
@@ -37,12 +37,12 @@ export const withTabs = `<HeaderPage
   ]}
 />`;
 
-export const withCustomActions = `<HeaderPage
+export const withCustomActions = `<Header
   title="Page Title"
   customActions={<Button>Custom action</Button>}
 />`;
 
-export const withMenu = `<HeaderPage
+export const withMenu = `<Header
   title="Page Title"
   customActions={
     <MenuTrigger>

docs-ui/src/app/components/plugin-header/components.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { PluginHeader } from '../../../../../packages/ui/src/components/PluginHeader/PluginHeader';
-import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage';
+import { Header } from '../../../../../packages/ui/src/components/Header/Header';
 import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
 import { Button } from '../../../../../packages/ui/src/components/Button/Button';
 import { MemoryRouter } from 'react-router-dom';
@@ -58,11 +58,11 @@ export const WithAllOptions = () => (
   </MemoryRouter>
 );
 
-export const WithHeaderPage = () => (
+export const WithHeader = () => (
   <MemoryRouter>
     <>
       <PluginHeader title="My plugin" titleLink="/" tabs={tabs.slice(0, 2)} />
-      <HeaderPage
+      <Header
         title="Page title"
         tabs={tabs2}
         customActions={<Button>Custom action</Button>}

docs-ui/src/app/components/plugin-header/page.mdx

@@ -4,7 +4,7 @@ import { Snippet } from '@/components/Snippet';
 import {
   WithAllOptionsAndTabs,
   WithAllOptions,
-  WithHeaderPage,
+  WithHeader,
 } from './components';
 import { headerPropDefs } from './props-definition';
 import {
@@ -12,7 +12,7 @@ import {
   simple,
   defaultSnippet,
   withTabs,
-  withHeaderPage,
+  withHeader,
 } from './snippets';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -46,11 +46,11 @@ Tabs use React Router and highlight automatically based on the current route.
 
 <Snippet preview={<WithAllOptionsAndTabs />} code={withTabs} open />
 
-### Plugin header with HeaderPage
+### Plugin header with Header
 
-Combine with [HeaderPage](/components/header-page) for multi-level navigation.
+Combine with [Header](/components/header) for multi-level navigation.
 
-<Snippet preview={<WithHeaderPage />} code={withHeaderPage} open />
+<Snippet preview={<WithHeader />} code={withHeader} open />
 
 <Theming definition={PluginHeaderDefinition} />
 

docs-ui/src/app/components/plugin-header/snippets.ts

@@ -43,7 +43,7 @@ export const withTabs = `<PluginHeader
   ]}
 />`;
 
-export const withHeaderPage = `<PluginHeader
+export const withHeader = `<PluginHeader
   title="My plugin"
   titleLink="/"
   tabs={[
@@ -51,7 +51,7 @@ export const withHeaderPage = `<PluginHeader
     { id: 'checks', label: 'Checks', href: '/checks' },
   ]}
 />
-<HeaderPage
+<Header
   title="Page title"
   tabs={[
     { id: 'banana', label: 'Banana', href: '/banana' },