Merge pull request #20548 from backstage/vinzscam/home-plugin-di

[DI] Migrate home plugin

packages/app-next/src/App.tsx

@@ -20,13 +20,20 @@ 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, {
+  titleExtensionDataRef,
+} from '@backstage/plugin-home/alpha';
+
 import {
+  coreExtensionData,
+  createExtension,
   createExtensionOverrides,
   createPageExtension,
 } from '@backstage/frontend-plugin-api';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import techdocsPlugin from '@backstage/plugin-techdocs/alpha';
 import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha';
+import { homePage } from './HomePage';
 
 /*
 
@@ -64,6 +71,18 @@ const entityPageExtension = createPageExtension({
   loader: async () => <div>Just a temporary mocked entity page</div>,
 });
 
+const homePageExtension = createExtension({
+  id: 'myhomepage',
+  attachTo: { id: 'home', input: 'props' },
+  output: {
+    children: coreExtensionData.reactElement,
+    title: titleExtensionDataRef,
+  },
+  factory({ bind }) {
+    bind({ children: homePage, title: 'just a title' });
+  },
+});
+
 const app = createApp({
   features: [
     graphiqlPlugin,
@@ -71,8 +90,9 @@ const app = createApp({
     techRadarPlugin,
     techdocsPlugin,
     userSettingsPlugin,
+    homePlugin,
     createExtensionOverrides({
-      extensions: [entityPageExtension],
+      extensions: [entityPageExtension, homePageExtension],
     }),
   ],
   /* Handled through config instead */

packages/app-next/src/HomePage.tsx

@@ -0,0 +1,119 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 {
+  ClockConfig,
+  CustomHomepageGrid,
+  HeaderWorldClock,
+  HomePageCompanyLogo,
+  HomePageRandomJoke,
+  HomePageStarredEntities,
+  HomePageToolkit,
+  HomePageTopVisited,
+  HomePageRecentlyVisited,
+  WelcomeTitle,
+} from '@backstage/plugin-home';
+import { Content, Header, Page } from '@backstage/core-components';
+import { HomePageCalendar } from '@backstage/plugin-gcalendar';
+import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
+import React from 'react';
+import HomeIcon from '@material-ui/icons/Home';
+import { HomePagePagerDutyCard } from '@backstage/plugin-pagerduty';
+
+const clockConfigs: ClockConfig[] = [
+  {
+    label: 'NYC',
+    timeZone: 'America/New_York',
+  },
+  {
+    label: 'UTC',
+    timeZone: 'UTC',
+  },
+  {
+    label: 'STO',
+    timeZone: 'Europe/Stockholm',
+  },
+  {
+    label: 'TYO',
+    timeZone: 'Asia/Tokyo',
+  },
+];
+
+const timeFormat: Intl.DateTimeFormatOptions = {
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+};
+
+const defaultConfig = [
+  {
+    component: 'CompanyLogo',
+    x: 0,
+    y: 0,
+    width: 12,
+    height: 1,
+    movable: false,
+    resizable: false,
+    deletable: false,
+  },
+  {
+    component: 'WelcomeTitle',
+    x: 0,
+    y: 1,
+    width: 12,
+    height: 1,
+  },
+  {
+    component: 'HomePageSearchBar',
+    x: 0,
+    y: 2,
+    width: 12,
+    height: 2,
+  },
+];
+
+export const homePage = (
+  <Page themeId="home">
+    <Header title={<WelcomeTitle />} pageTitleOverride="Home">
+      <HeaderWorldClock
+        clockConfigs={clockConfigs}
+        customTimeFormat={timeFormat}
+      />
+    </Header>
+    <Content>
+      <CustomHomepageGrid config={defaultConfig}>
+        <HomePageRandomJoke />
+        <HomePageCalendar />
+        <HomePagePagerDutyCard name="Rota" />
+        <MicrosoftCalendarCard />
+        <HomePageStarredEntities />
+        <HomePageCompanyLogo />
+        <WelcomeTitle />
+        <HomePageToolkit
+          tools={[
+            {
+              url: 'https://backstage.io',
+              label: 'Backstage Homepage',
+              icon: <HomeIcon />,
+            },
+          ]}
+        />
+        <HomePageTopVisited />
+        <HomePageRecentlyVisited />
+      </CustomHomepageGrid>
+    </Content>
+  </Page>
+);

packages/app-next/src/examples/pagesPlugin.tsx

@@ -48,6 +48,9 @@ const IndexPage = createPageExtension({
           <div>
             <Link to={page1Link()}>Page 1</Link>
           </div>
+          <div>
+            <Link to="/home">Home</Link>
+          </div>
           <div>
             <Link to="/graphiql">GraphiQL</Link>
           </div>