home: customize title

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

packages/app-next/src/App.tsx

@@ -20,7 +20,9 @@ import { pagesPlugin } from './examples/pagesPlugin';
 import graphiqlPlugin from '@backstage/plugin-graphiql/alpha';
 import techRadarPlugin from '@backstage/plugin-tech-radar/alpha';
 import userSettingsPlugin from '@backstage/plugin-user-settings/alpha';
-import homePlugin from '@backstage/plugin-home/alpha';
+import homePlugin, {
+  titleExtensionDataRef,
+} from '@backstage/plugin-home/alpha';
 
 import {
   coreExtensionData,
@@ -74,9 +76,10 @@ const homePageExtension = createExtension({
   attachTo: { id: 'home', input: 'props' },
   output: {
     children: coreExtensionData.reactElement,
+    title: titleExtensionDataRef,
   },
   factory({ bind }) {
-    bind({ children: homePage });
+    bind({ children: homePage, title: 'just a title' });
   },
 });
 

plugins/home/alpha-api-report.md

@@ -4,10 +4,14 @@
 
 ```ts
 import { BackstagePlugin } from '@backstage/frontend-plugin-api';
+import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 
 // @alpha (undocumented)
-const _default: BackstagePlugin;
+const _default: BackstagePlugin<{}, {}>;
 export default _default;
 
+// @alpha (undocumented)
+export const titleExtensionDataRef: ConfigurableExtensionDataRef<string, {}>;
+
 // (No @packageDocumentation comment for this package)
 ```

plugins/home/src/alpha.tsx

@@ -16,22 +16,33 @@
 
 import React from 'react';
 
-import { rootRouteRef } from './routes';
 import {
   coreExtensionData,
+  createExtensionDataRef,
   createExtensionInput,
   createPageExtension,
   createPlugin,
+  createRouteRef,
 } from '@backstage/frontend-plugin-api';
 
+const rootRouteRef = createRouteRef();
+
+/**
+ * @alpha
+ */
+export const titleExtensionDataRef = createExtensionDataRef<string>('title');
+
 const HomepageCompositionRootExtension = createPageExtension({
   id: 'home',
   defaultPath: '/home',
   routeRef: rootRouteRef,
   inputs: {
     props: createExtensionInput(
-      { children: coreExtensionData.reactElement.optional() },
-      // TODO(vinzscam): title
+      {
+        children: coreExtensionData.reactElement.optional(),
+        title: titleExtensionDataRef.optional(),
+      },
+
       {
         singleton: true,
         optional: true,
@@ -40,7 +51,10 @@ const HomepageCompositionRootExtension = createPageExtension({
   },
   loader: ({ inputs }) =>
     import('./components/').then(m => (
-      <m.HomepageCompositionRoot children={inputs.props?.children} />
+      <m.HomepageCompositionRoot
+        children={inputs.props?.children}
+        title={inputs.props?.title}
+      />
     )),
 });