@@ -27,6 +27,11 @@ export const componentDataRef = createExtensionDataRef<{
|
||||
| (() => Promise<(props: {}) => JSX.Element | null>);
|
||||
}>().with({ id: 'core.component.component' });
|
||||
|
||||
/**
|
||||
* Blueprint for creating adaptable components from a componentRef and a loader
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export const AdaptableComponentBlueprint = createExtensionBlueprint({
|
||||
kind: 'component',
|
||||
attachTo: { id: 'api:app/components', input: 'components' },
|
||||
|
||||
@@ -13,16 +13,32 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { createAdaptableComponent } from '@backstage/frontend-plugin-api';
|
||||
import {
|
||||
CoreErrorBoundaryFallbackProps,
|
||||
CoreNotFoundErrorPageProps,
|
||||
CoreProgressProps,
|
||||
createAdaptableComponent,
|
||||
} from '@backstage/frontend-plugin-api';
|
||||
|
||||
export const Progress = createAdaptableComponent({
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
export const Progress = createAdaptableComponent<CoreProgressProps>({
|
||||
id: 'core.components.progress',
|
||||
});
|
||||
|
||||
export const NotFoundErrorPage = createAdaptableComponent({
|
||||
id: 'core.components.notFoundErrorPage',
|
||||
});
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
export const NotFoundErrorPage =
|
||||
createAdaptableComponent<CoreNotFoundErrorPageProps>({
|
||||
id: 'core.components.notFoundErrorPage',
|
||||
});
|
||||
|
||||
export const ErrorBoundary = createAdaptableComponent({
|
||||
id: 'core.components.errorBoundary',
|
||||
});
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
export const ErrorBoundary =
|
||||
createAdaptableComponent<CoreErrorBoundaryFallbackProps>({
|
||||
id: 'core.components.errorBoundary',
|
||||
});
|
||||
|
||||
@@ -29,7 +29,12 @@ export type ComponentRef<
|
||||
$$type: '@backstage/ComponentRef';
|
||||
};
|
||||
|
||||
export type ComponentRefOptions<
|
||||
/**
|
||||
* Options for creating an AdaptableComponent.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export type CreateAdaptableComponentOptions<
|
||||
TInnerComponentProps extends {},
|
||||
TExternalComponentProps extends {} = TInnerComponentProps,
|
||||
> = {
|
||||
@@ -90,11 +95,19 @@ function makeComponentFromRef<
|
||||
return ComponentRefImpl;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a AdaptableComponent that can be used to render the component, optionally overriden by the app.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export function createAdaptableComponent<
|
||||
TInnerComponentProps extends {},
|
||||
TExternalComponentProps extends {} = TInnerComponentProps,
|
||||
>(
|
||||
options: ComponentRefOptions<TInnerComponentProps, TExternalComponentProps>,
|
||||
options: CreateAdaptableComponentOptions<
|
||||
TInnerComponentProps,
|
||||
TExternalComponentProps
|
||||
>,
|
||||
): ((props: TExternalComponentProps) => JSX.Element) & {
|
||||
ref: ComponentRef<TInnerComponentProps, TExternalComponentProps>;
|
||||
} {
|
||||
|
||||
@@ -20,6 +20,7 @@ export {
|
||||
} from './ExtensionBoundary';
|
||||
export {
|
||||
createAdaptableComponent,
|
||||
type CreateAdaptableComponentOptions,
|
||||
type ComponentRef,
|
||||
} from './createAdaptableComponent';
|
||||
export { useAppNode } from './AppNodeProvider';
|
||||
|
||||
Reference in New Issue
Block a user