ExtensionDefinitionAttachTo

Home > @backstage/frontend-plugin-api > ExtensionDefinitionAttachTo

Specifies where an extension should attach in the extension tree.

Signature:

export type ExtensionDefinitionAttachTo<UParentInputs extends ExtensionDataRef = ExtensionDataRef> = {
    id: string;
    input: string;
    relative?: never;
} | {
    relative: {
        kind?: string;
        name?: string;
    };
    input: string;
    id?: never;
} | ExtensionInput<UParentInputs> | Array<{
    id: string;
    input: string;
    relative?: never;
} | {
    relative: {
        kind?: string;
        name?: string;
    };
    input: string;
    id?: never;
} | ExtensionInput<UParentInputs>>;

References: ExtensionDataRef, ExtensionInput

Remarks

A standard attachment point declaration will specify the ID of the parent extension, as well as the name of the input to attach to.

There are three more advanced forms that are available for more complex use-cases:

1. Relative attachment points: using the relative property instead of id, the attachment point is resolved relative to the current plugin. 2. Extension input references: using a reference in code to another extension's input in the same plugin. These references are always relative. 3. Array of attachment points: an array of attachment points can be used to clone and attach to multiple extensions at once.

Example

// Attach to a specific extension by full ID
{ id: 'app/routes', input: 'routes' }

// Attach to an extension in the same plugin by kind
{ relative: { kind: 'page' }, input: 'actions' }

// Attach to a specific input of another extension
const page = ParentBlueprint.make({ ... });
const child = ChildBlueprint.make({ attachTo: page.inputs.children });

// Attach to multiple parents at once
[
  { id: 'page/home', input: 'widgets' },
  { relative: { kind: 'page' }, input: 'widgets' },
]