From d996f05ae57d60d6d56806425040288d6c588c4c Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Wed, 6 Aug 2025 13:36:21 +0200 Subject: [PATCH] chore: `adaptable` -> `swappable` Signed-off-by: benjdlambert Signed-off-by: benjdlambert --- .../config/vocabularies/Backstage/accept.txt | 1 + .../03-common-extension-blueprints.md | 8 +- .../examples/notFoundErrorPageExtension.tsx | 6 +- .../src/convertLegacyAppOptions.tsx | 20 +-- .../DefaultComponentsApi.test.tsx | 8 +- .../ComponentsApi/DefaultComponentsApi.ts | 4 +- packages/frontend-plugin-api/report.api.md | 156 +++++++++--------- ...x => SwappableComponentBlueprint.test.tsx} | 20 +-- ...rint.ts => SwappableComponentBlueprint.ts} | 4 +- .../src/blueprints/index.ts | 2 +- ...nents.ts => DefaultSwappableComponents.ts} | 8 +- .../src/components/ExtensionBoundary.tsx | 2 +- ....tsx => createSwappableComponent.test.tsx} | 28 ++-- ...onent.tsx => createSwappableComponent.tsx} | 10 +- .../src/components/index.ts | 8 +- plugins/app/src/extensions/ComponentsApi.tsx | 6 +- plugins/app/src/extensions/components.tsx | 20 +-- 17 files changed, 156 insertions(+), 155 deletions(-) rename packages/frontend-plugin-api/src/blueprints/{AdaptableComponentBlueprint.test.tsx => SwappableComponentBlueprint.test.tsx} (87%) rename packages/frontend-plugin-api/src/blueprints/{AdaptableComponentBlueprint.ts => SwappableComponentBlueprint.ts} (93%) rename packages/frontend-plugin-api/src/components/{DefaultAdaptableComponents.ts => DefaultSwappableComponents.ts} (80%) rename packages/frontend-plugin-api/src/components/{createAdaptableComponent.test.tsx => createSwappableComponent.test.tsx} (83%) rename packages/frontend-plugin-api/src/components/{createAdaptableComponent.tsx => createSwappableComponent.tsx} (93%) diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt index 86c9be9b98..aa6de7c545 100644 --- a/.github/vale/config/vocabularies/Backstage/accept.txt +++ b/.github/vale/config/vocabularies/Backstage/accept.txt @@ -467,6 +467,7 @@ Superfences superset supertype SVGs +Swappable talkdesk Talkdesk Tanzu diff --git a/docs/frontend-system/building-plugins/03-common-extension-blueprints.md b/docs/frontend-system/building-plugins/03-common-extension-blueprints.md index 11114047cb..330da0b97e 100644 --- a/docs/frontend-system/building-plugins/03-common-extension-blueprints.md +++ b/docs/frontend-system/building-plugins/03-common-extension-blueprints.md @@ -17,10 +17,6 @@ These are the [extension blueprints](../architecture/23-extension-blueprints.md) An API extension is used to add or override [Utility API factories](../utility-apis/01-index.md) in the app. They are commonly used by plugins for both internal and shared APIs. There are also many built-in Api extensions provided by the framework that you are able to override. -### AdaptableComponent - [Reference](../../reference/frontend-plugin-api.adaptablecomponentblueprint.md) - -Adaptable Components are extensions that are used to override implementation of components in the app and plugins. - ### NavItem - [Reference](../../reference/frontend-plugin-api.navitemblueprint.md) Navigation item extensions are used to provide menu items that link to different parts of the app. By default nav items are attached to the app nav extension, which by default is rendered as the left sidebar in the app. @@ -33,6 +29,10 @@ Page extensions provide content for a particular route in the app. By default pa Sign-in page extension have a single purpose - to implement a custom sign-in page. They are always attached to the app root extension and are rendered before the rest of the app until the user is signed in. +### SwappableComponent - [Reference](../../reference/frontend-plugin-api.swappablecomponentblueprint.md) + +Swappable Components are extensions that are used to replace the implementations of components in the app and plugins. + ### Theme - [Reference](../../reference/frontend-plugin-api.themeblueprint.md) Theme extensions provide custom themes for the app. They are always attached to the app extension and you can have any number of themes extensions installed in an app at once, letting the user choose which theme to use. diff --git a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx index 64572ccb62..7f690f90cb 100644 --- a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx +++ b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx @@ -15,14 +15,14 @@ */ import { - AdaptableComponentBlueprint, + SwappableComponentBlueprint, NotFoundErrorPage, } from '@backstage/frontend-plugin-api'; import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import { Button } from '@backstage/core-components'; -export function CustomNotFoundErrorPage() { +function CustomNotFoundErrorPage() { return ( define({ diff --git a/packages/core-compat-api/src/convertLegacyAppOptions.tsx b/packages/core-compat-api/src/convertLegacyAppOptions.tsx index b007c938c2..7615027a96 100644 --- a/packages/core-compat-api/src/convertLegacyAppOptions.tsx +++ b/packages/core-compat-api/src/convertLegacyAppOptions.tsx @@ -16,7 +16,7 @@ import { ComponentType } from 'react'; import { - AdaptableComponentBlueprint, + SwappableComponentBlueprint, ApiBlueprint, CoreErrorBoundaryFallbackProps, createExtension, @@ -27,9 +27,9 @@ import { RouterBlueprint, SignInPageBlueprint, ThemeBlueprint, - ErrorBoundary as AdaptableErrorBoundary, - NotFoundErrorPage as AdaptableNotFoundErrorPage, - Progress as AdaptableProgress, + ErrorBoundary as SwappableErrorBoundary, + NotFoundErrorPage as SwappableNotFoundErrorPage, + Progress as SwappableProgress, } from '@backstage/frontend-plugin-api'; import { AnyApiFactory, @@ -156,10 +156,10 @@ export function convertLegacyAppOptions( } if (Progress) { extensions.push( - AdaptableComponentBlueprint.make({ + SwappableComponentBlueprint.make({ params: define => define({ - component: AdaptableProgress, + component: SwappableProgress, loader: () => componentCompatWrapper(Progress), }), }), @@ -168,10 +168,10 @@ export function convertLegacyAppOptions( if (NotFoundErrorPage) { extensions.push( - AdaptableComponentBlueprint.make({ + SwappableComponentBlueprint.make({ params: define => define({ - component: AdaptableNotFoundErrorPage, + component: SwappableNotFoundErrorPage, loader: () => componentCompatWrapper(NotFoundErrorPage), }), }), @@ -190,10 +190,10 @@ export function convertLegacyAppOptions( ); extensions.push( - AdaptableComponentBlueprint.make({ + SwappableComponentBlueprint.make({ params: define => define({ - component: AdaptableErrorBoundary, + component: SwappableErrorBoundary, loader: () => componentCompatWrapper(WrappedErrorBoundaryFallback), }), diff --git a/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx b/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx index a5b219ec27..7c550103f3 100644 --- a/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx +++ b/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx @@ -14,13 +14,13 @@ * limitations under the License. */ -import { createAdaptableComponent } from '@backstage/frontend-plugin-api'; +import { createSwappableComponent } from '@backstage/frontend-plugin-api'; import { DefaultComponentsApi } from './DefaultComponentsApi'; import { render, screen } from '@testing-library/react'; -const { ref: testRefA } = createAdaptableComponent({ id: 'test.a' }); -const { ref: testRefB1 } = createAdaptableComponent({ id: 'test.b' }); -const { ref: testRefB2 } = createAdaptableComponent({ id: 'test.b' }); +const { ref: testRefA } = createSwappableComponent({ id: 'test.a' }); +const { ref: testRefB1 } = createSwappableComponent({ id: 'test.b' }); +const { ref: testRefB2 } = createSwappableComponent({ id: 'test.b' }); describe('DefaultComponentsApi', () => { it('should provide components', () => { 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 88265955d6..6f5aac8275 100644 --- a/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.ts +++ b/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.ts @@ -17,7 +17,7 @@ import { ComponentRef, ComponentsApi, - AdaptableComponentBlueprint, + SwappableComponentBlueprint, } from '@backstage/frontend-plugin-api'; /** @@ -34,7 +34,7 @@ export class DefaultComponentsApi implements ComponentsApi { >; static fromComponents( - components: Array, + components: Array, ) { return new DefaultComponentsApi( new Map(components.map(entry => [entry.ref.id, entry.loader])), diff --git a/packages/frontend-plugin-api/report.api.md b/packages/frontend-plugin-api/report.api.md index 053c078728..de85709f4f 100644 --- a/packages/frontend-plugin-api/report.api.md +++ b/packages/frontend-plugin-api/report.api.md @@ -94,59 +94,6 @@ import { vmwareCloudAuthApiRef } from '@backstage/core-plugin-api'; import { withApis } from '@backstage/core-plugin-api'; import { z } from 'zod'; -// @public -export const AdaptableComponentBlueprint: ExtensionBlueprint<{ - kind: 'component'; - params: >(params: { - component: Ref extends ComponentRef - ? { - ref: Ref; - } & ((props: IExternalComponentProps) => JSX.Element) - : never; - loader: Ref extends ComponentRef - ? - | (() => (props: IInnerComponentProps) => JSX.Element | null) - | (() => Promise<(props: IInnerComponentProps) => JSX.Element | null>) - : never; - }) => ExtensionBlueprintParams<{ - component: Ref extends ComponentRef - ? { - ref: Ref; - } & ((props: IExternalComponentProps) => JSX.Element) - : never; - loader: Ref extends ComponentRef - ? - | (() => (props: IInnerComponentProps) => JSX.Element | null) - | (() => Promise<(props: IInnerComponentProps) => JSX.Element | null>) - : never; - }>; - output: ExtensionDataRef< - { - ref: ComponentRef; - loader: - | (() => (props: {}) => JSX.Element | null) - | (() => Promise<(props: {}) => JSX.Element | null>); - }, - 'core.component.component', - {} - >; - inputs: {}; - config: {}; - configInput: {}; - dataRefs: { - component: ConfigurableExtensionDataRef< - { - ref: ComponentRef; - loader: - | (() => (props: {}) => JSX.Element | null) - | (() => Promise<(props: {}) => JSX.Element | null>); - }, - 'core.component.component', - {} - >; - }; -}>; - export { AlertApi }; export { alertApiRef }; @@ -485,31 +432,6 @@ export type CoreNotFoundErrorPageProps = { // @public (undocumented) export type CoreProgressProps = {}; -// @public -export function createAdaptableComponent< - TInnerComponentProps extends {}, - TExternalComponentProps extends {} = TInnerComponentProps, ->( - options: CreateAdaptableComponentOptions< - TInnerComponentProps, - TExternalComponentProps - >, -): ((props: TExternalComponentProps) => JSX.Element) & { - ref: ComponentRef; -}; - -// @public -export type CreateAdaptableComponentOptions< - TInnerComponentProps extends {}, - TExternalComponentProps extends {} = TInnerComponentProps, -> = { - id: string; - loader?: - | (() => (props: TInnerComponentProps) => JSX.Element | null) - | (() => Promise<(props: TInnerComponentProps) => JSX.Element | null>); - transformProps?: (props: TExternalComponentProps) => TInnerComponentProps; -}; - export { createApiFactory }; export { createApiRef }; @@ -901,6 +823,31 @@ export function createSubRouteRef< parent: RouteRef; }): MakeSubRouteRef, ParentParams>; +// @public +export function createSwappableComponent< + TInnerComponentProps extends {}, + TExternalComponentProps extends {} = TInnerComponentProps, +>( + options: CreateSwappableComponentOptions< + TInnerComponentProps, + TExternalComponentProps + >, +): ((props: TExternalComponentProps) => JSX.Element) & { + ref: ComponentRef; +}; + +// @public +export type CreateSwappableComponentOptions< + TInnerComponentProps extends {}, + TExternalComponentProps extends {} = TInnerComponentProps, +> = { + id: string; + loader?: + | (() => (props: TInnerComponentProps) => JSX.Element | null) + | (() => Promise<(props: TInnerComponentProps) => JSX.Element | null>); + transformProps?: (props: TExternalComponentProps) => TInnerComponentProps; +}; + export { createTranslationMessages }; export { createTranslationRef }; @@ -1904,6 +1851,59 @@ export interface SubRouteRef< readonly T: TParams; } +// @public +export const SwappableComponentBlueprint: ExtensionBlueprint<{ + kind: 'component'; + params: >(params: { + component: Ref extends ComponentRef + ? { + ref: Ref; + } & ((props: IExternalComponentProps) => JSX.Element) + : never; + loader: Ref extends ComponentRef + ? + | (() => (props: IInnerComponentProps) => JSX.Element | null) + | (() => Promise<(props: IInnerComponentProps) => JSX.Element | null>) + : never; + }) => ExtensionBlueprintParams<{ + component: Ref extends ComponentRef + ? { + ref: Ref; + } & ((props: IExternalComponentProps) => JSX.Element) + : never; + loader: Ref extends ComponentRef + ? + | (() => (props: IInnerComponentProps) => JSX.Element | null) + | (() => Promise<(props: IInnerComponentProps) => JSX.Element | null>) + : never; + }>; + output: ExtensionDataRef< + { + ref: ComponentRef; + loader: + | (() => (props: {}) => JSX.Element | null) + | (() => Promise<(props: {}) => JSX.Element | null>); + }, + 'core.component.component', + {} + >; + inputs: {}; + config: {}; + configInput: {}; + dataRefs: { + component: ConfigurableExtensionDataRef< + { + ref: ComponentRef; + loader: + | (() => (props: {}) => JSX.Element | null) + | (() => Promise<(props: {}) => JSX.Element | null>); + }, + 'core.component.component', + {} + >; + }; +}>; + // @public export const ThemeBlueprint: ExtensionBlueprint<{ kind: 'theme'; diff --git a/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/SwappableComponentBlueprint.test.tsx similarity index 87% rename from packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.test.tsx rename to packages/frontend-plugin-api/src/blueprints/SwappableComponentBlueprint.test.tsx index 3eb73ca7a9..8fae754799 100644 --- a/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/SwappableComponentBlueprint.test.tsx @@ -14,19 +14,19 @@ * limitations under the License. */ import { renderInTestApp } from '@backstage/frontend-test-utils'; -import { createAdaptableComponent } from '../components'; -import { AdaptableComponentBlueprint } from './AdaptableComponentBlueprint'; +import { createSwappableComponent } from '../components'; +import { SwappableComponentBlueprint } from './SwappableComponentBlueprint'; import { PageBlueprint } from './PageBlueprint'; import { waitFor, screen } from '@testing-library/react'; -describe('AdaptableComponentBlueprint', () => { +describe('SwappableComponentBlueprint', () => { it('should allow defining a component override for a component ref', () => { - const Component = createAdaptableComponent({ + const Component = createSwappableComponent({ id: 'test.component', loader: () => (props: { hello: string }) =>
{props.hello}
, }); - const extension = AdaptableComponentBlueprint.make({ + const extension = SwappableComponentBlueprint.make({ params: define => define({ component: Component, @@ -43,7 +43,7 @@ describe('AdaptableComponentBlueprint', () => { }); it('should render default component refs in the app', async () => { - const TestComponent = createAdaptableComponent({ + const TestComponent = createSwappableComponent({ id: 'test.component', loader: () => (props: { hello: string }) =>
{props.hello}
, }); @@ -66,7 +66,7 @@ describe('AdaptableComponentBlueprint', () => { }); it('should render a component ref without a default implementation', async () => { - const TestComponent = createAdaptableComponent({ + const TestComponent = createSwappableComponent({ id: 'test.component', }); @@ -89,7 +89,7 @@ describe('AdaptableComponentBlueprint', () => { }); it('should render a component ref with an async loader implementation', async () => { - const TestComponent = createAdaptableComponent({ + const TestComponent = createSwappableComponent({ id: 'test.component', loader: async () => (props: { hello: string }) =>
{props.hello}
, @@ -113,12 +113,12 @@ describe('AdaptableComponentBlueprint', () => { }); it('should allow overriding a component ref with the blueprint', async () => { - const TestComponent = createAdaptableComponent({ + const TestComponent = createSwappableComponent({ id: 'test.component', loader: () => (props: { hello: string }) =>
{props.hello}
, }); - const extension = AdaptableComponentBlueprint.make({ + const extension = SwappableComponentBlueprint.make({ params: define => define({ component: TestComponent, diff --git a/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.ts b/packages/frontend-plugin-api/src/blueprints/SwappableComponentBlueprint.ts similarity index 93% rename from packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.ts rename to packages/frontend-plugin-api/src/blueprints/SwappableComponentBlueprint.ts index a53f4d4a42..71466fc608 100644 --- a/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.ts +++ b/packages/frontend-plugin-api/src/blueprints/SwappableComponentBlueprint.ts @@ -28,11 +28,11 @@ export const componentDataRef = createExtensionDataRef<{ }>().with({ id: 'core.component.component' }); /** - * Blueprint for creating adaptable components from a componentRef and a loader + * Blueprint for creating swappable components from a componentRef and a loader * * @public */ -export const AdaptableComponentBlueprint = createExtensionBlueprint({ +export const SwappableComponentBlueprint = createExtensionBlueprint({ kind: 'component', attachTo: { id: 'api:app/components', input: 'components' }, output: [componentDataRef], diff --git a/packages/frontend-plugin-api/src/blueprints/index.ts b/packages/frontend-plugin-api/src/blueprints/index.ts index b7164beab3..c8699b4232 100644 --- a/packages/frontend-plugin-api/src/blueprints/index.ts +++ b/packages/frontend-plugin-api/src/blueprints/index.ts @@ -33,4 +33,4 @@ export { RouterBlueprint } from './RouterBlueprint'; export { SignInPageBlueprint } from './SignInPageBlueprint'; export { ThemeBlueprint } from './ThemeBlueprint'; export { TranslationBlueprint } from './TranslationBlueprint'; -export { AdaptableComponentBlueprint } from './AdaptableComponentBlueprint'; +export { SwappableComponentBlueprint } from './SwappableComponentBlueprint'; diff --git a/packages/frontend-plugin-api/src/components/DefaultAdaptableComponents.ts b/packages/frontend-plugin-api/src/components/DefaultSwappableComponents.ts similarity index 80% rename from packages/frontend-plugin-api/src/components/DefaultAdaptableComponents.ts rename to packages/frontend-plugin-api/src/components/DefaultSwappableComponents.ts index 5319c9017b..1ff805ba23 100644 --- a/packages/frontend-plugin-api/src/components/DefaultAdaptableComponents.ts +++ b/packages/frontend-plugin-api/src/components/DefaultSwappableComponents.ts @@ -19,12 +19,12 @@ import { CoreNotFoundErrorPageProps, CoreProgressProps, } from '../types'; -import { createAdaptableComponent } from './createAdaptableComponent'; +import { createSwappableComponent } from './createSwappableComponent'; /** * @public */ -export const Progress = createAdaptableComponent({ +export const Progress = createSwappableComponent({ id: 'core.components.progress', }); @@ -32,7 +32,7 @@ export const Progress = createAdaptableComponent({ * @public */ export const NotFoundErrorPage = - createAdaptableComponent({ + createSwappableComponent({ id: 'core.components.notFoundErrorPage', }); @@ -40,6 +40,6 @@ export const NotFoundErrorPage = * @public */ export const ErrorBoundary = - createAdaptableComponent({ + createSwappableComponent({ id: 'core.components.errorBoundary', }); diff --git a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx index 0296d70b64..e88b26f1ef 100644 --- a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx +++ b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx @@ -29,7 +29,7 @@ import { AppNode } from '../apis'; import { Progress } from '@backstage/core-components'; import { coreExtensionData } from '../wiring'; import { AppNodeProvider } from './AppNodeProvider'; -import { ErrorBoundary as ErrorBoundaryComponent } from './DefaultAdaptableComponents'; +import { ErrorBoundary as ErrorBoundaryComponent } from './DefaultSwappableComponents'; type RouteTrackerProps = PropsWithChildren<{ enabled?: boolean; diff --git a/packages/frontend-plugin-api/src/components/createAdaptableComponent.test.tsx b/packages/frontend-plugin-api/src/components/createSwappableComponent.test.tsx similarity index 83% rename from packages/frontend-plugin-api/src/components/createAdaptableComponent.test.tsx rename to packages/frontend-plugin-api/src/components/createSwappableComponent.test.tsx index 0712b4a5e0..64d989cdb9 100644 --- a/packages/frontend-plugin-api/src/components/createAdaptableComponent.test.tsx +++ b/packages/frontend-plugin-api/src/components/createSwappableComponent.test.tsx @@ -15,11 +15,11 @@ */ import { render, screen } from '@testing-library/react'; -import { createAdaptableComponent } from './createAdaptableComponent'; +import { createSwappableComponent } from './createSwappableComponent'; -describe('createAdaptableComponent', () => { +describe('createSwappableComponent', () => { it('can be created and read', () => { - const { ref } = createAdaptableComponent({ id: 'foo' }); + const { ref } = createSwappableComponent({ id: 'foo' }); expect(ref.id).toBe('foo'); expect(String(ref)).toBe('ComponentRef{id=foo}'); }); @@ -27,7 +27,7 @@ describe('createAdaptableComponent', () => { it('should allow defining a default component implementation', () => { const Test = () =>
test
; - createAdaptableComponent<{ foo: string }, { bar: string }>({ + createSwappableComponent<{ foo: string }, { bar: string }>({ id: 'foo', loader: () => @@ -35,7 +35,7 @@ describe('createAdaptableComponent', () => { , }); - createAdaptableComponent<{ foo: string }, { bar: string }>({ + createSwappableComponent<{ foo: string }, { bar: string }>({ id: 'foo', loader: async () => @@ -43,7 +43,7 @@ describe('createAdaptableComponent', () => { , }); - createAdaptableComponent<{ foo: string }, { bar: string }>({ + createSwappableComponent<{ foo: string }, { bar: string }>({ id: 'foo', }); @@ -51,12 +51,12 @@ describe('createAdaptableComponent', () => { }); it('should allow transformings props', () => { - createAdaptableComponent<{ foo: string }, { bar: string }>({ + createSwappableComponent<{ foo: string }, { bar: string }>({ id: 'foo', transformProps: props => ({ foo: props.bar }), }); - createAdaptableComponent<{ foo: string }, { bar: string }>({ + createSwappableComponent<{ foo: string }, { bar: string }>({ id: 'foo', // @ts-expect-error - this should be an error as foo is not a string transformProps: props => ({ foo: 1 }), @@ -67,7 +67,7 @@ describe('createAdaptableComponent', () => { describe('sync', () => { it('should create a component from a ref for sync component', () => { - const Component = createAdaptableComponent({ + const Component = createSwappableComponent({ id: 'random', loader: () => (props: { name: string }) => { return
{props.name}
; @@ -83,7 +83,7 @@ describe('createAdaptableComponent', () => { }); it('should render a fallback when theres no default implementation provided', () => { - const Component = createAdaptableComponent({ + const Component = createSwappableComponent({ id: 'random', }); @@ -93,7 +93,7 @@ describe('createAdaptableComponent', () => { }); it('should map props from external to internal', () => { - const Component = createAdaptableComponent({ + const Component = createSwappableComponent({ id: 'random', transformProps: (props: { name: string }) => ({ uppercase: props.name.toUpperCase(), @@ -114,7 +114,7 @@ describe('createAdaptableComponent', () => { describe('async', () => { it('should create a component from a ref for async component', async () => { - const Component = createAdaptableComponent({ + const Component = createSwappableComponent({ id: 'random', loader: async () => (props: { name: string }) => { return
{props.name}
; @@ -127,7 +127,7 @@ describe('createAdaptableComponent', () => { }); it('should render a fallback when theres no default implementation provided', async () => { - const Component = createAdaptableComponent({ + const Component = createSwappableComponent({ id: 'random', }); @@ -137,7 +137,7 @@ describe('createAdaptableComponent', () => { }); it('should map props from external to internal', async () => { - const Component = createAdaptableComponent({ + const Component = createSwappableComponent({ id: 'random', transformProps: (props: { name: string }) => ({ uppercase: props.name.toUpperCase(), diff --git a/packages/frontend-plugin-api/src/components/createAdaptableComponent.tsx b/packages/frontend-plugin-api/src/components/createSwappableComponent.tsx similarity index 93% rename from packages/frontend-plugin-api/src/components/createAdaptableComponent.tsx rename to packages/frontend-plugin-api/src/components/createSwappableComponent.tsx index 3d9b4149c2..4089c9d011 100644 --- a/packages/frontend-plugin-api/src/components/createAdaptableComponent.tsx +++ b/packages/frontend-plugin-api/src/components/createSwappableComponent.tsx @@ -30,11 +30,11 @@ export type ComponentRef< }; /** - * Options for creating an AdaptableComponent. + * Options for creating an SwappableComponent. * * @public */ -export type CreateAdaptableComponentOptions< +export type CreateSwappableComponentOptions< TInnerComponentProps extends {}, TExternalComponentProps extends {} = TInnerComponentProps, > = { @@ -96,15 +96,15 @@ function makeComponentFromRef< } /** - * Creates a AdaptableComponent that can be used to render the component, optionally overriden by the app. + * Creates a SwappableComponent that can be used to render the component, optionally overriden by the app. * * @public */ -export function createAdaptableComponent< +export function createSwappableComponent< TInnerComponentProps extends {}, TExternalComponentProps extends {} = TInnerComponentProps, >( - options: CreateAdaptableComponentOptions< + options: CreateSwappableComponentOptions< TInnerComponentProps, TExternalComponentProps >, diff --git a/packages/frontend-plugin-api/src/components/index.ts b/packages/frontend-plugin-api/src/components/index.ts index f7897dfc1a..6e28d769c9 100644 --- a/packages/frontend-plugin-api/src/components/index.ts +++ b/packages/frontend-plugin-api/src/components/index.ts @@ -19,9 +19,9 @@ export { type ExtensionBoundaryProps, } from './ExtensionBoundary'; export { - createAdaptableComponent, - type CreateAdaptableComponentOptions, + createSwappableComponent, + type CreateSwappableComponentOptions, type ComponentRef, -} from './createAdaptableComponent'; +} from './createSwappableComponent'; export { useAppNode } from './AppNodeProvider'; -export * from './DefaultAdaptableComponents'; +export * from './DefaultSwappableComponents'; diff --git a/plugins/app/src/extensions/ComponentsApi.tsx b/plugins/app/src/extensions/ComponentsApi.tsx index 1717872a22..a457e05f3e 100644 --- a/plugins/app/src/extensions/ComponentsApi.tsx +++ b/plugins/app/src/extensions/ComponentsApi.tsx @@ -15,7 +15,7 @@ */ import { - AdaptableComponentBlueprint, + SwappableComponentBlueprint, createExtensionInput, ApiBlueprint, componentsApiRef, @@ -30,7 +30,7 @@ export const ComponentsApi = ApiBlueprint.makeWithOverrides({ name: 'components', inputs: { components: createExtensionInput( - [AdaptableComponentBlueprint.dataRefs.component], + [SwappableComponentBlueprint.dataRefs.component], { replaces: [{ id: 'app', input: 'components' }] }, ), }, @@ -42,7 +42,7 @@ export const ComponentsApi = ApiBlueprint.makeWithOverrides({ factory: () => DefaultComponentsApi.fromComponents( inputs.components.map(i => - i.get(AdaptableComponentBlueprint.dataRefs.component), + i.get(SwappableComponentBlueprint.dataRefs.component), ), ), }), diff --git a/plugins/app/src/extensions/components.tsx b/plugins/app/src/extensions/components.tsx index 25a7a046cc..872630a995 100644 --- a/plugins/app/src/extensions/components.tsx +++ b/plugins/app/src/extensions/components.tsx @@ -14,10 +14,10 @@ * limitations under the License. */ import { - NotFoundErrorPage as AdaptableNotFoundErrorPage, - Progress as AdaptableProgress, - ErrorBoundary as AdaptableErrorBoundary, - AdaptableComponentBlueprint, + NotFoundErrorPage as SwappableNotFoundErrorPage, + Progress as SwappableProgress, + ErrorBoundary as SwappableErrorBoundary, + SwappableComponentBlueprint, } from '@backstage/frontend-plugin-api'; import { @@ -27,30 +27,30 @@ import { } from '@backstage/core-components'; import Button from '@material-ui/core/Button'; -export const Progress = AdaptableComponentBlueprint.make({ +export const Progress = SwappableComponentBlueprint.make({ name: 'core.components.progress', params: define => define({ - component: AdaptableProgress, + component: SwappableProgress, loader: () => ProgressComponent, }), }); -export const NotFoundErrorPage = AdaptableComponentBlueprint.make({ +export const NotFoundErrorPage = SwappableComponentBlueprint.make({ name: 'core.components.notFoundErrorPage', params: define => define({ - component: AdaptableNotFoundErrorPage, + component: SwappableNotFoundErrorPage, loader: () => () => , }), }); -export const ErrorBoundary = AdaptableComponentBlueprint.make({ +export const ErrorBoundary = SwappableComponentBlueprint.make({ name: 'core.components.errorBoundary', params: define => define({ - component: AdaptableErrorBoundary, + component: SwappableErrorBoundary, loader: () => props => { const { plugin, error, resetError } = props; const title = `Error in ${plugin?.id}`;