From 154f6e4490cbd5df6398b80aced03efa727cebbd Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Wed, 11 Oct 2023 20:02:41 +0200 Subject: [PATCH 1/6] home: add support for new backend system Signed-off-by: Vincenzo Scamporlino --- plugins/home/alpha-api-report.md | 13 ++++++++ plugins/home/package.json | 16 ++++++++++ plugins/home/src/alpha.tsx | 53 ++++++++++++++++++++++++++++++++ yarn.lock | 1 + 4 files changed, 83 insertions(+) create mode 100644 plugins/home/alpha-api-report.md create mode 100644 plugins/home/src/alpha.tsx diff --git a/plugins/home/alpha-api-report.md b/plugins/home/alpha-api-report.md new file mode 100644 index 0000000000..3ae9f14973 --- /dev/null +++ b/plugins/home/alpha-api-report.md @@ -0,0 +1,13 @@ +## API Report File for "@backstage/plugin-home" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts +import { BackstagePlugin } from '@backstage/frontend-plugin-api'; + +// @alpha (undocumented) +const _default: BackstagePlugin; +export default _default; + +// (No @packageDocumentation comment for this package) +``` diff --git a/plugins/home/package.json b/plugins/home/package.json index a239f1b17e..2bd22ee549 100644 --- a/plugins/home/package.json +++ b/plugins/home/package.json @@ -23,6 +23,21 @@ "backstage", "homepage" ], + "exports": { + ".": "./src/index.ts", + "./alpha": "./src/alpha.tsx", + "./package.json": "./package.json" + }, + "typesVersions": { + "*": { + "alpha": [ + "src/alpha.tsx" + ], + "package.json": [ + "package.json" + ] + } + }, "sideEffects": false, "scripts": { "build": "backstage-cli package build", @@ -39,6 +54,7 @@ "@backstage/core-app-api": "workspace:^", "@backstage/core-components": "workspace:^", "@backstage/core-plugin-api": "workspace:^", + "@backstage/frontend-plugin-api": "workspace:^", "@backstage/plugin-catalog-react": "workspace:^", "@backstage/plugin-home-react": "workspace:^", "@backstage/theme": "workspace:^", diff --git a/plugins/home/src/alpha.tsx b/plugins/home/src/alpha.tsx new file mode 100644 index 0000000000..d712769cb0 --- /dev/null +++ b/plugins/home/src/alpha.tsx @@ -0,0 +1,53 @@ +/* + * Copyright 2023 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 React from 'react'; + +import { rootRouteRef } from './routes'; +import { + coreExtensionData, + createExtensionInput, + createPageExtension, + createPlugin, +} from '@backstage/frontend-plugin-api'; + +const HomepageCompositionRootExtension = createPageExtension({ + id: 'home', + defaultPath: '/home', + routeRef: rootRouteRef, + inputs: { + props: createExtensionInput( + { children: coreExtensionData.reactElement.optional() }, + // TODO(vinzscam): title + { + singleton: true, + optional: true, + }, + ), + }, + loader: ({ inputs }) => + import('./components/').then(m => ( + + )), +}); + +/** + * @alpha + */ +export default createPlugin({ + id: 'home', + extensions: [HomepageCompositionRootExtension], +}); diff --git a/yarn.lock b/yarn.lock index b2d6c3b2e7..d17dc58776 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7208,6 +7208,7 @@ __metadata: "@backstage/core-components": "workspace:^" "@backstage/core-plugin-api": "workspace:^" "@backstage/dev-utils": "workspace:^" + "@backstage/frontend-plugin-api": "workspace:^" "@backstage/plugin-catalog-react": "workspace:^" "@backstage/plugin-home-react": "workspace:^" "@backstage/test-utils": "workspace:^" From a9c4fb996f28cd1d44c1f6fc5029c6a84a6c9a72 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Wed, 11 Oct 2023 20:03:37 +0200 Subject: [PATCH 2/6] app-next: add home plugin Signed-off-by: Vincenzo Scamporlino --- packages/app-next/src/App.tsx | 19 ++++++++++++++++++- .../app-next/src/examples/pagesPlugin.tsx | 3 +++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx index 92d71fee89..b2ea86feb4 100644 --- a/packages/app-next/src/App.tsx +++ b/packages/app-next/src/App.tsx @@ -20,13 +20,18 @@ 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 { + 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 +69,17 @@ const entityPageExtension = createPageExtension({ loader: async () =>
Just a temporary mocked entity page
, }); +const homePageExtension = createExtension({ + id: 'myhomepage', + attachTo: { id: 'home', input: 'props' }, + output: { + children: coreExtensionData.reactElement, + }, + factory({ bind }) { + bind({ children: homePage }); + }, +}); + const app = createApp({ features: [ graphiqlPlugin, @@ -71,8 +87,9 @@ const app = createApp({ techRadarPlugin, techdocsPlugin, userSettingsPlugin, + homePlugin, createExtensionOverrides({ - extensions: [entityPageExtension], + extensions: [entityPageExtension, homePageExtension], }), ], /* Handled through config instead */ diff --git a/packages/app-next/src/examples/pagesPlugin.tsx b/packages/app-next/src/examples/pagesPlugin.tsx index 6e040c2faf..1e9409a5e4 100644 --- a/packages/app-next/src/examples/pagesPlugin.tsx +++ b/packages/app-next/src/examples/pagesPlugin.tsx @@ -48,6 +48,9 @@ const IndexPage = createPageExtension({
Page 1
+
+ Home +
GraphiQL
From 17c37fcbc57319874f88c645fde8c8c5ccbde868 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Wed, 11 Oct 2023 20:03:58 +0200 Subject: [PATCH 3/6] app-next: migrate current ejected homepage Signed-off-by: Vincenzo Scamporlino --- packages/app-next/src/HomePage.tsx | 119 +++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 packages/app-next/src/HomePage.tsx diff --git a/packages/app-next/src/HomePage.tsx b/packages/app-next/src/HomePage.tsx new file mode 100644 index 0000000000..cb31beb34a --- /dev/null +++ b/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 = ( + +
} pageTitleOverride="Home"> + +
+ + + + + + + + + + , + }, + ]} + /> + + + + + +); From 7878eac0a796eb3be5de9d6782a441e4f84e5573 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 17 Oct 2023 15:30:16 +0200 Subject: [PATCH 4/6] home: customize title Signed-off-by: Vincenzo Scamporlino --- packages/app-next/src/App.tsx | 7 +++++-- plugins/home/alpha-api-report.md | 6 +++++- plugins/home/src/alpha.tsx | 22 ++++++++++++++++++---- 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx index b2ea86feb4..d64c4dbb15 100644 --- a/packages/app-next/src/App.tsx +++ b/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' }); }, }); diff --git a/plugins/home/alpha-api-report.md b/plugins/home/alpha-api-report.md index 3ae9f14973..35ce0bb86c 100644 --- a/plugins/home/alpha-api-report.md +++ b/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; + // (No @packageDocumentation comment for this package) ``` diff --git a/plugins/home/src/alpha.tsx b/plugins/home/src/alpha.tsx index d712769cb0..c8308f7c0a 100644 --- a/plugins/home/src/alpha.tsx +++ b/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('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 => ( - + )), }); From a65eed00a988b5041cfe94470b2bc39bebd8d076 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 17 Oct 2023 19:32:38 +0200 Subject: [PATCH 5/6] home: fix plugin lol Signed-off-by: Vincenzo Scamporlino --- plugins/home/package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/plugins/home/package.json b/plugins/home/package.json index 2bd22ee549..2612db5bbe 100644 --- a/plugins/home/package.json +++ b/plugins/home/package.json @@ -6,9 +6,7 @@ "types": "src/index.ts", "license": "Apache-2.0", "publishConfig": { - "access": "public", - "main": "dist/index.esm.js", - "types": "dist/index.d.ts" + "access": "public" }, "backstage": { "role": "frontend-plugin" From 5b364984bf5e66d2555cf92bedf9069cbaf31ee7 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 17 Oct 2023 23:58:01 +0200 Subject: [PATCH 6/6] home: changeset Signed-off-by: Vincenzo Scamporlino --- .changeset/quick-pumpkins-shave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quick-pumpkins-shave.md diff --git a/.changeset/quick-pumpkins-shave.md b/.changeset/quick-pumpkins-shave.md new file mode 100644 index 0000000000..cbb4c48dce --- /dev/null +++ b/.changeset/quick-pumpkins-shave.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': patch +--- + +Added experimental support for declarative integration via the `/alpha` subpath.