diff --git a/.changeset/dry-lobsters-flash.md b/.changeset/dry-lobsters-flash.md new file mode 100644 index 0000000000..9815bf62f4 --- /dev/null +++ b/.changeset/dry-lobsters-flash.md @@ -0,0 +1,5 @@ +--- +'@backstage/frontend-app-api': patch +--- + +Added `IconsApi` implementation and the ability to configure icons through the `icons` option for `createApp` and `createSpecializedApp`. This is not a long-term solution as icons should be installable via extensions instead. This is just a stop-gap to make sure there is feature parity with the existing frontend system. diff --git a/packages/frontend-app-api/api-report.md b/packages/frontend-app-api/api-report.md index e7dd584734..d0aadb7e8c 100644 --- a/packages/frontend-app-api/api-report.md +++ b/packages/frontend-app-api/api-report.md @@ -8,12 +8,16 @@ import { ConfigApi } from '@backstage/core-plugin-api'; import { ExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExternalRouteRef } from '@backstage/frontend-plugin-api'; import { FrontendFeature } from '@backstage/frontend-plugin-api'; +import { IconComponent } from '@backstage/core-plugin-api'; import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; import { SubRouteRef } from '@backstage/frontend-plugin-api'; // @public (undocumented) export function createApp(options?: { + icons?: { + [key in string]: IconComponent; + }; features?: (FrontendFeature | CreateAppFeatureLoader)[]; configLoader?: () => Promise<{ config: ConfigApi; @@ -49,6 +53,9 @@ export function createExtensionTree(options: { config: Config }): ExtensionTree; // @public export function createSpecializedApp(options?: { + icons?: { + [key in string]: IconComponent; + }; features?: FrontendFeature[]; config?: ConfigApi; bindRoutes?(context: { bind: CreateAppRouteBinder }): void; diff --git a/packages/frontend-app-api/src/apis/implementations/IconsApi/IconsApi.ts b/packages/frontend-app-api/src/apis/implementations/IconsApi/IconsApi.ts new file mode 100644 index 0000000000..f64bbc67f9 --- /dev/null +++ b/packages/frontend-app-api/src/apis/implementations/IconsApi/IconsApi.ts @@ -0,0 +1,38 @@ +/* + * 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 { IconComponent, IconsApi } from '@backstage/frontend-plugin-api'; + +/** + * Implementation for the {@link IconsApi} + * + * @internal + */ +export class DefaultIconsApi implements IconsApi { + #icons: Map; + + constructor(icons: { [key in string]: IconComponent }) { + this.#icons = new Map(Object.entries(icons)); + } + + getIcon(key: string): IconComponent | undefined { + return this.#icons.get(key); + } + + listIconKeys: IconsApi['listIconKeys'] = () => { + return { keys: this.#icons.keys() }; + }; +} diff --git a/packages/frontend-app-api/src/apis/implementations/IconsApi/index.ts b/packages/frontend-app-api/src/apis/implementations/IconsApi/index.ts new file mode 100644 index 0000000000..4a73182e84 --- /dev/null +++ b/packages/frontend-app-api/src/apis/implementations/IconsApi/index.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export { DefaultIconsApi } from './IconsApi'; diff --git a/packages/frontend-app-api/src/wiring/createApp.tsx b/packages/frontend-app-api/src/wiring/createApp.tsx index 7b2f17193e..832aa2663b 100644 --- a/packages/frontend-app-api/src/wiring/createApp.tsx +++ b/packages/frontend-app-api/src/wiring/createApp.tsx @@ -29,6 +29,7 @@ import { createTranslationExtension, ExtensionDataRef, FrontendFeature, + iconsApiRef, RouteRef, useRouteRef, } from '@backstage/frontend-plugin-api'; @@ -105,7 +106,10 @@ import { toInternalBackstagePlugin } from '../../../frontend-plugin-api/src/wiri // 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'; const DefaultApis = defaultApis.map(factory => createApiExtension({ factory })); @@ -269,6 +273,7 @@ export interface CreateAppFeatureLoader { /** @public */ export function createApp(options?: { + icons?: { [key in string]: IconComponent }; features?: (FrontendFeature | CreateAppFeatureLoader)[]; configLoader?: () => Promise<{ config: ConfigApi }>; bindRoutes?(context: { bind: CreateAppRouteBinder }): void; @@ -303,6 +308,7 @@ export function createApp(options?: { } const app = createSpecializedApp({ + icons: options?.icons, config, features: [...discoveredFeatures, ...providedFeatures], bindRoutes: options?.bindRoutes, @@ -330,6 +336,7 @@ export function createApp(options?: { * @public */ export function createSpecializedApp(options?: { + icons?: { [key in string]: IconComponent }; features?: FrontendFeature[]; config?: ConfigApi; bindRoutes?(context: { bind: CreateAppRouteBinder }): void; @@ -348,7 +355,12 @@ export function createSpecializedApp(options?: { }); const appIdentityProxy = new AppIdentityProxy(); - const apiHolder = createApiHolder(tree, config, appIdentityProxy); + const apiHolder = createApiHolder( + tree, + config, + appIdentityProxy, + options?.icons, + ); const featureFlagApi = apiHolder.get(featureFlagsApiRef); if (featureFlagApi) { @@ -402,6 +414,7 @@ function createApiHolder( tree: AppTree, configApi: ConfigApi, appIdentityProxy: AppIdentityProxy, + icons?: { [key in string]: IconComponent }, ): ApiHolder { const factoryRegistry = new ApiFactoryRegistry(); @@ -470,6 +483,12 @@ function createApiHolder( factory: () => new DefaultComponentsApi(componentsMap), }); + factoryRegistry.register('static', { + api: iconsApiRef, + deps: {}, + factory: () => new DefaultIconsApi({ ...defaultIcons, ...icons }), + }); + factoryRegistry.register('static', { api: appThemeApiRef, deps: {},