home: customize title

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

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}
+      />
     )),
 });