From 66736f9e7dcabcb4af5f090313b38952075bd172 Mon Sep 17 00:00:00 2001 From: blam Date: Wed, 21 Aug 2024 14:38:54 +0200 Subject: [PATCH] feat: move some implementations from the app setup to extensions instead MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Patrik Oldsberg Co-authored-by: Fredrik Adelöw Co-authored-by: Johan Haals Signed-off-by: blam --- .../ComponentsApi/DefaultComponentsApi.ts | 20 ++-- .../frontend-app-api/src/extensions/App.tsx | 14 +-- .../{themes.tsx => AppThemeApi.tsx} | 33 ++++++- .../src/extensions/ComponentsApi.tsx | 50 ++++++++++ .../src/extensions/IconsApi.ts | 49 ++++++++++ .../src/extensions/TranslationsApi.ts | 57 ++++++++++++ .../frontend-app-api/src/wiring/createApp.tsx | 92 ++----------------- .../src/blueprints/IconBundleBlueprint.ts | 2 +- .../src/blueprints/ThemeBlueprint.ts | 2 +- .../src/blueprints/TranslationBlueprint.ts | 2 +- .../extensions/createComponentExtension.tsx | 2 +- 11 files changed, 208 insertions(+), 115 deletions(-) rename packages/frontend-app-api/src/extensions/{themes.tsx => AppThemeApi.tsx} (65%) create mode 100644 packages/frontend-app-api/src/extensions/ComponentsApi.tsx create mode 100644 packages/frontend-app-api/src/extensions/IconsApi.ts create mode 100644 packages/frontend-app-api/src/extensions/TranslationsApi.ts diff --git a/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.ts b/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.ts index 572b6fc3c4..317233d797 100644 --- a/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.ts +++ b/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.ts @@ -16,7 +16,6 @@ import { ComponentType } from 'react'; import { - AppTree, ComponentRef, ComponentsApi, createComponentExtension, @@ -30,19 +29,12 @@ import { export class DefaultComponentsApi implements ComponentsApi { #components: Map>; - static fromTree(tree: AppTree) { - const componentEntries = tree.root.edges.attachments - .get('components') - ?.reduce((map, e) => { - const data = e.instance?.getData( - createComponentExtension.componentDataRef, - ); - if (data) { - map.set(data.ref.id, data.impl); - } - return map; - }, new Map()); - return new DefaultComponentsApi(componentEntries ?? new Map()); + static fromComponents( + components: Array, + ) { + return new DefaultComponentsApi( + new Map(components.map(entry => [entry.ref.id, entry.impl])), + ); } constructor(components: Map) { diff --git a/packages/frontend-app-api/src/extensions/App.tsx b/packages/frontend-app-api/src/extensions/App.tsx index ba6c5f65f1..e99b83eb5a 100644 --- a/packages/frontend-app-api/src/extensions/App.tsx +++ b/packages/frontend-app-api/src/extensions/App.tsx @@ -16,15 +16,11 @@ import React from 'react'; import { + ApiBlueprint, ExtensionBoundary, coreExtensionData, - createComponentExtension, createExtension, createExtensionInput, - IconBundleBlueprint, - ThemeBlueprint, - ApiBlueprint, - TranslationBlueprint, } from '@backstage/frontend-plugin-api'; export const App = createExtension({ @@ -32,14 +28,6 @@ export const App = createExtension({ attachTo: { id: 'root', input: 'default' }, // ignored inputs: { apis: createExtensionInput([ApiBlueprint.dataRefs.factory]), - themes: createExtensionInput([ThemeBlueprint.dataRefs.theme]), - components: createExtensionInput([ - createComponentExtension.componentDataRef, - ]), - translations: createExtensionInput([ - TranslationBlueprint.dataRefs.translation, - ]), - icons: createExtensionInput([IconBundleBlueprint.dataRefs.icons]), root: createExtensionInput([coreExtensionData.reactElement], { singleton: true, }), diff --git a/packages/frontend-app-api/src/extensions/themes.tsx b/packages/frontend-app-api/src/extensions/AppThemeApi.tsx similarity index 65% rename from packages/frontend-app-api/src/extensions/themes.tsx rename to packages/frontend-app-api/src/extensions/AppThemeApi.tsx index a4fd0b253e..375b9e666b 100644 --- a/packages/frontend-app-api/src/extensions/themes.tsx +++ b/packages/frontend-app-api/src/extensions/AppThemeApi.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2023 The Backstage Authors + * Copyright 2024 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. @@ -21,7 +21,36 @@ import { } from '@backstage/theme'; import DarkIcon from '@material-ui/icons/Brightness2'; import LightIcon from '@material-ui/icons/WbSunny'; -import { ThemeBlueprint } from '@backstage/frontend-plugin-api'; +import { + createExtensionInput, + ThemeBlueprint, + ApiBlueprint, + createApiFactory, + appThemeApiRef, +} from '@backstage/frontend-plugin-api'; +import { AppThemeSelector } from '@backstage/core-app-api'; + +/** + * Contains the themes installed into the app. + * + * @public + */ +export const AppThemeApi = ApiBlueprint.makeWithOverrides({ + name: 'app-theme', + inputs: { + themes: createExtensionInput([ThemeBlueprint.dataRefs.theme]), + }, + factory: (originalFactory, { inputs }) => { + return originalFactory({ + factory: createApiFactory( + appThemeApiRef, + AppThemeSelector.createWithStorage( + inputs.themes.map(i => i.get(ThemeBlueprint.dataRefs.theme)), + ), + ), + }); + }, +}); export const LightTheme = ThemeBlueprint.make({ name: 'light', diff --git a/packages/frontend-app-api/src/extensions/ComponentsApi.tsx b/packages/frontend-app-api/src/extensions/ComponentsApi.tsx new file mode 100644 index 0000000000..2949e686f8 --- /dev/null +++ b/packages/frontend-app-api/src/extensions/ComponentsApi.tsx @@ -0,0 +1,50 @@ +/* + * Copyright 2024 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 { + createComponentExtension, + createExtensionInput, + ApiBlueprint, + createApiFactory, + componentsApiRef, +} from '@backstage/frontend-plugin-api'; +import { DefaultComponentsApi } from '../apis/implementations/ComponentsApi'; + +/** + * Contains the shareable components installed into the app. + * + * @public + */ +export const ComponentsApi = ApiBlueprint.makeWithOverrides({ + name: 'components', + inputs: { + components: createExtensionInput([ + createComponentExtension.componentDataRef, + ]), + }, + factory: (originalFactory, { inputs }) => { + return originalFactory({ + factory: createApiFactory( + componentsApiRef, + DefaultComponentsApi.fromComponents( + inputs.components.map(i => + i.get(createComponentExtension.componentDataRef), + ), + ), + ), + }); + }, +}); diff --git a/packages/frontend-app-api/src/extensions/IconsApi.ts b/packages/frontend-app-api/src/extensions/IconsApi.ts new file mode 100644 index 0000000000..f7cb25de96 --- /dev/null +++ b/packages/frontend-app-api/src/extensions/IconsApi.ts @@ -0,0 +1,49 @@ +/* + * Copyright 2024 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 { + createExtensionInput, + IconBundleBlueprint, + ApiBlueprint, + createApiFactory, + iconsApiRef, +} from '@backstage/frontend-plugin-api'; + +import { DefaultIconsApi } from '../apis/implementations/IconsApi'; + +/** + * Contains the shareable icons installed into the app. + * + * @public + */ +export const IconsApi = ApiBlueprint.makeWithOverrides({ + name: 'icons', + inputs: { + icons: createExtensionInput([IconBundleBlueprint.dataRefs.icons]), + }, + factory: (originalFactory, { inputs }) => { + return originalFactory({ + factory: createApiFactory( + iconsApiRef, + new DefaultIconsApi( + inputs.icons + .map(i => i.get(IconBundleBlueprint.dataRefs.icons)) + .reduce((acc, bundle) => ({ ...acc, ...bundle }), {}), + ), + ), + }); + }, +}); diff --git a/packages/frontend-app-api/src/extensions/TranslationsApi.ts b/packages/frontend-app-api/src/extensions/TranslationsApi.ts new file mode 100644 index 0000000000..16defdde10 --- /dev/null +++ b/packages/frontend-app-api/src/extensions/TranslationsApi.ts @@ -0,0 +1,57 @@ +/* + * Copyright 2024 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 { + ApiBlueprint, + TranslationBlueprint, + createApiFactory, + createExtensionInput, +} from '@backstage/frontend-plugin-api'; +import { + appLanguageApiRef, + translationApiRef, +} from '@backstage/core-plugin-api/alpha'; + +// eslint-disable-next-line @backstage/no-relative-monorepo-imports +import { I18nextTranslationApi } from '../../../core-app-api/src/apis/implementations/TranslationApi/I18nextTranslationApi'; + +/** + * Contains translations that are installed in the app. + * + * @public + */ +export const TranslationsApi = ApiBlueprint.makeWithOverrides({ + name: 'translations', + inputs: { + translations: createExtensionInput([ + TranslationBlueprint.dataRefs.translation, + ]), + }, + factory: (originalFactory, { inputs }) => { + return originalFactory({ + factory: createApiFactory({ + api: translationApiRef, + deps: { languageApi: appLanguageApiRef }, + factory: ({ languageApi }) => + I18nextTranslationApi.create({ + languageApi, + resources: inputs.translations.map(i => + i.get(TranslationBlueprint.dataRefs.translation), + ), + }), + }), + }); + }, +}); diff --git a/packages/frontend-app-api/src/wiring/createApp.tsx b/packages/frontend-app-api/src/wiring/createApp.tsx index ca42dce3e4..13374e2e17 100644 --- a/packages/frontend-app-api/src/wiring/createApp.tsx +++ b/packages/frontend-app-api/src/wiring/createApp.tsx @@ -20,15 +20,10 @@ import { ApiBlueprint, AppTree, appTreeApiRef, - componentsApiRef, coreExtensionData, FrontendFeature, - IconBundleBlueprint, - iconsApiRef, RouteResolutionApi, routeResolutionApiRef, - ThemeBlueprint, - TranslationBlueprint, } from '@backstage/frontend-plugin-api'; import { App } from '../extensions/App'; import { AppRoutes } from '../extensions/AppRoutes'; @@ -37,13 +32,10 @@ import { AppNav } from '../extensions/AppNav'; import { AnyApiFactory, ApiHolder, - appThemeApiRef, ConfigApi, configApiRef, - IconComponent, featureFlagsApiRef, identityApiRef, - AppTheme, errorApiRef, discoveryApiRef, fetchApiRef, @@ -53,7 +45,6 @@ import { ApiFactoryRegistry, ApiProvider, ApiResolver, - AppThemeSelector, } from '@backstage/core-app-api'; // TODO: Get rid of all of these @@ -72,21 +63,16 @@ import { overrideBaseUrlConfigs } from '../../../core-app-api/src/app/overrideBa // eslint-disable-next-line @backstage/no-relative-monorepo-imports import { AppLanguageSelector } from '../../../core-app-api/src/apis/implementations/AppLanguageApi/AppLanguageSelector'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports -import { I18nextTranslationApi } from '../../../core-app-api/src/apis/implementations/TranslationApi/I18nextTranslationApi'; -// eslint-disable-next-line @backstage/no-relative-monorepo-imports import { resolveExtensionDefinition } from '../../../frontend-plugin-api/src/wiring/resolveExtensionDefinition'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports import { apis as defaultApis } from '../../../app-defaults/src/defaults'; -import { DarkTheme, LightTheme } from '../extensions/themes'; + import { oauthRequestDialogAppRootElement, alertDisplayAppRootElement, } from '../extensions/elements'; import { extractRouteInfoFromAppNode } from '../routing/extractRouteInfoFromAppNode'; -import { - appLanguageApiRef, - translationApiRef, -} from '@backstage/core-plugin-api/alpha'; +import { appLanguageApiRef } from '@backstage/core-plugin-api/alpha'; import { CreateAppRouteBinder } from '../routing'; import { RouteResolver } from '../routing/RouteResolver'; import { resolveRouteBindings } from '../routing/resolveRouteBindings'; @@ -103,12 +89,12 @@ import { AppRoot } from '../extensions/AppRoot'; import { toInternalBackstagePlugin } from '../../../frontend-plugin-api/src/wiring/createFrontendPlugin'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports import { toInternalExtensionOverrides } from '../../../frontend-plugin-api/src/wiring/createExtensionOverrides'; -import { DefaultComponentsApi } from '../apis/implementations/ComponentsApi'; -import { DefaultIconsApi } from '../apis/implementations/IconsApi'; import { stringifyError } from '@backstage/errors'; -// eslint-disable-next-line @backstage/no-relative-monorepo-imports -import { icons as defaultIcons } from '../../../app-defaults/src/defaults'; import { getBasePath } from '../routing/getBasePath'; +import { AppThemeApi, DarkTheme, LightTheme } from '../extensions/AppThemeApi'; +import { IconsApi } from '../extensions/IconsApi'; +import { TranslationsApi } from '../extensions/TranslationsApi'; +import { ComponentsApi } from '../extensions/ComponentsApi'; const DefaultApis = defaultApis.map(factory => ApiBlueprint.make({ namespace: factory.api.id, params: { factory } }), @@ -127,6 +113,10 @@ export const builtinExtensions = [ DarkTheme, oauthRequestDialogAppRootElement, alertDisplayAppRootElement, + AppThemeApi, + IconsApi, + TranslationsApi, + ComponentsApi, ...DefaultApis, ].map(def => resolveExtensionDefinition(def)); @@ -174,8 +164,6 @@ export interface CreateAppFeatureLoader { /** @public */ export function createApp(options?: { - /** @deprecated - Please use {@link @backstage/frontend-plugin-api#IconBundleBlueprint} to make new icon bundles which can be installed in the app seperately */ - icons?: { [key in string]: IconComponent }; features?: (FrontendFeature | CreateAppFeatureLoader)[]; configLoader?: () => Promise<{ config: ConfigApi }>; bindRoutes?(context: { bind: CreateAppRouteBinder }): void; @@ -222,7 +210,6 @@ export function createApp(options?: { } const app = createSpecializedApp({ - icons: options?.icons, config, features: [...discoveredFeatures, ...providedFeatures], bindRoutes: options?.bindRoutes, @@ -250,8 +237,6 @@ export function createApp(options?: { * @public */ export function createSpecializedApp(options?: { - /** @deprecated - Please use {@link @backstage/frontend-plugin-api#IconBundleBlueprint} to make new icon bundles which can be installed in the app seperately */ - icons?: { [key in string]: IconComponent }; features?: FrontendFeature[]; config?: ConfigApi; bindRoutes?(context: { bind: CreateAppRouteBinder }): void; @@ -288,7 +273,6 @@ export function createSpecializedApp(options?: { routeBindings, getBasePath(config), ), - options?.icons, ); if (isProtectedApp()) { @@ -352,7 +336,6 @@ function createApiHolder( configApi: ConfigApi, appIdentityProxy: AppIdentityProxy, routeResolutionApi: RouteResolutionApi, - icons?: { [key in string]: IconComponent }, ): ApiHolder { const factoryRegistry = new ApiFactoryRegistry(); @@ -362,25 +345,6 @@ function createApiHolder( ?.map(e => e.instance?.getData(ApiBlueprint.dataRefs.factory)) .filter((x): x is AnyApiFactory => !!x) ?? []; - const themeExtensions = - tree.root.edges.attachments - .get('themes') - ?.map(e => e.instance?.getData(ThemeBlueprint.dataRefs.theme)) - .filter((x): x is AppTheme => !!x) ?? []; - - const translationResources = - tree.root.edges.attachments - .get('translations') - ?.map(e => e.instance?.getData(TranslationBlueprint.dataRefs.translation)) - .filter( - (x): x is typeof TranslationBlueprint.dataRefs.translation.T => !!x, - ) ?? []; - - const extensionIcons = tree.root.edges.attachments - .get('icons') - ?.map(e => e.instance?.getData(IconBundleBlueprint.dataRefs.icons)) - .reduce((acc, bundle) => ({ ...acc, ...bundle }), {}); - for (const factory of pluginApis) { factoryRegistry.register('default', factory); } @@ -412,26 +376,6 @@ function createApiHolder( factory: () => routeResolutionApi, }); - factoryRegistry.register('static', { - api: componentsApiRef, - deps: {}, - factory: () => DefaultComponentsApi.fromTree(tree), - }); - - factoryRegistry.register('static', { - api: iconsApiRef, - deps: {}, - factory: () => - new DefaultIconsApi({ ...defaultIcons, ...extensionIcons, ...icons }), - }); - - factoryRegistry.register('static', { - api: appThemeApiRef, - deps: {}, - // TODO: add extension for registering themes - factory: () => AppThemeSelector.createWithStorage(themeExtensions), - }); - factoryRegistry.register('static', { api: appLanguageApiRef, deps: {}, @@ -444,22 +388,6 @@ function createApiHolder( factory: () => configApi, }); - factoryRegistry.register('static', { - api: appLanguageApiRef, - deps: {}, - factory: () => AppLanguageSelector.createWithStorage(), - }); - - factoryRegistry.register('static', { - api: translationApiRef, - deps: { languageApi: appLanguageApiRef }, - factory: ({ languageApi }) => - I18nextTranslationApi.create({ - languageApi, - resources: translationResources, - }), - }); - ApiResolver.validateFactories(factoryRegistry, factoryRegistry.getAllApis()); return new ApiResolver(factoryRegistry); diff --git a/packages/frontend-plugin-api/src/blueprints/IconBundleBlueprint.ts b/packages/frontend-plugin-api/src/blueprints/IconBundleBlueprint.ts index 52d6e2482d..de2df761ff 100644 --- a/packages/frontend-plugin-api/src/blueprints/IconBundleBlueprint.ts +++ b/packages/frontend-plugin-api/src/blueprints/IconBundleBlueprint.ts @@ -25,7 +25,7 @@ const iconsDataRef = createExtensionDataRef<{ export const IconBundleBlueprint = createExtensionBlueprint({ kind: 'icon-bundle', namespace: 'app', - attachTo: { id: 'app', input: 'icons' }, + attachTo: { id: 'api:icons', input: 'icons' }, output: [iconsDataRef], config: { schema: { diff --git a/packages/frontend-plugin-api/src/blueprints/ThemeBlueprint.ts b/packages/frontend-plugin-api/src/blueprints/ThemeBlueprint.ts index a4f550595f..c06078b122 100644 --- a/packages/frontend-plugin-api/src/blueprints/ThemeBlueprint.ts +++ b/packages/frontend-plugin-api/src/blueprints/ThemeBlueprint.ts @@ -29,7 +29,7 @@ const themeDataRef = createExtensionDataRef().with({ export const ThemeBlueprint = createExtensionBlueprint({ kind: 'theme', namespace: 'app', - attachTo: { id: 'app', input: 'themes' }, + attachTo: { id: 'api:app-theme', input: 'themes' }, output: [themeDataRef], dataRefs: { theme: themeDataRef, diff --git a/packages/frontend-plugin-api/src/blueprints/TranslationBlueprint.ts b/packages/frontend-plugin-api/src/blueprints/TranslationBlueprint.ts index 7b01d0b28f..ea7aa64713 100644 --- a/packages/frontend-plugin-api/src/blueprints/TranslationBlueprint.ts +++ b/packages/frontend-plugin-api/src/blueprints/TranslationBlueprint.ts @@ -28,7 +28,7 @@ const translationDataRef = createExtensionDataRef< */ export const TranslationBlueprint = createExtensionBlueprint({ kind: 'translation', - attachTo: { id: 'app', input: 'translations' }, + attachTo: { id: 'api:translations', input: 'translations' }, output: [translationDataRef], dataRefs: { translation: translationDataRef, diff --git a/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx b/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx index 9561636d22..35d003e99b 100644 --- a/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx +++ b/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx @@ -35,7 +35,7 @@ export function createComponentExtension(options: { kind: 'component', namespace: options.ref.id, name: options.name, - attachTo: { id: 'app', input: 'components' }, + attachTo: { id: 'api:components', input: 'components' }, disabled: options.disabled, output: [createComponentExtension.componentDataRef], factory() {