feat(ui): add automatic active tab detection to Header (#33783)

* feat(ui): widen activeTabId type to accept null

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* feat(ui): add automatic active tab detection to HeaderNav

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* feat(ui): update Header stories to demonstrate auto-detection and explicit activeTabId

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* refactor(ui): remove manual useActiveTabId from PluginHeaderAndHeader recipe

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* docs(ui): update Header docs for activeTabId auto-detection

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* chore(ui): add API report and changeset for activeTabId auto-detection

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* fix(ui): resolve relative hrefs in HeaderNav tabs

Add resolveHref to HeaderNavItemDefinition so tab links with relative
hrefs are resolved against the router context before rendering.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* chore(ui): add breaking change changeset for HeaderNav resolveHref

Signed-off-by: Johan Persson <johanopersson@gmail.com>

---------

Signed-off-by: Johan Persson <johanopersson@gmail.com>

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

@@ -30,7 +30,7 @@ const breadcrumbs = [
 ];
 
 export const WithEverything = () => (
-  <MemoryRouter>
+  <MemoryRouter initialEntries={['/overview']}>
     <Header
       title="Page Title"
       tabs={tabs.slice(0, 2)}
@@ -52,7 +52,7 @@ export const WithLongBreadcrumbs = () => (
 );
 
 export const WithTabs = () => (
-  <MemoryRouter>
+  <MemoryRouter initialEntries={['/overview']}>
     <Header title="Page Title" tabs={tabs.slice(0, 3)} />
   </MemoryRouter>
 );

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

@@ -47,7 +47,7 @@ Labels are truncated at 240px.
 
 ### Tabs
 
-Tabs use React Router and highlight based on the current route.
+Tabs auto-detect the active tab from the current route when `activeTabId` is omitted. Pass an explicit `activeTabId` to override, or `null` for no active tab.
 
 <Snippet open preview={<WithTabs />} code={withTabs} />
 

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

@@ -42,9 +42,10 @@ export const headerPagePropDefs: Record<string, PropDef> = {
     },
   },
   activeTabId: {
-    type: 'string',
+    type: 'enum',
+    values: ['string', 'null'],
     description:
-      'ID of the currently active tab. Can be a flat tab ID or a child tab ID within a group.',
+      'ID of the currently active tab. Omit to auto-detect from the current route. Set to null for no active tab.',
   },
   breadcrumbs: {
     type: 'complex',