Entity Manager Frontend Plugin

Frontend plugin for creating and editing Backstage catalog entities through a YAML editor.

Installation

cd packages/app
yarn add @alexandreamormino/plugin-entity-manager

Register the API in packages/app/src/apis.ts:

import { entityManagerApiFactory } from '@alexandreamormino/plugin-entity-manager';

export const apis: AnyApiFactory[] = [
  entityManagerApiFactory,
];

Add the create route in packages/app/src/App.tsx:

import { EntityManagerCreatePage } from '@alexandreamormino/plugin-entity-manager';

<Route path="/entity-manager/create" element={<EntityManagerCreatePage />} />

Entity page integration

The simplest setup is to replace <EntityAboutCard> and <EntityLayout> with the Entity Manager drop-ins in EntityPage.tsx:

import {
  EntityManagerAboutCard,
  EntityManagerLayout,
} from '@alexandreamormino/plugin-entity-manager';

• <EntityManagerLayout> — wraps EntityLayout and hides the "Unregister entity" context menu option for entities managed by this plugin.
• <EntityManagerAboutCard> — wraps EntityAboutCard. For entities managed by this plugin it renders Edit and Delete icon buttons in the card header, respecting RBAC permissions. For unmanaged entities it renders the stock EntityAboutCard unchanged.

Custom button integration

If you want to build your own card or toolbar, you can use the buttons directly. They are re-exported from entity-manager-react so a separate install is not required.

import {
  EditEntityButton,
  DeleteEntityButton,
  isEntityManagerManaged,
} from '@alexandreamormino/plugin-entity-manager';
import { usePermission } from '@backstage/plugin-permission-react';
import {
  entityManagerUpdatePermission,
  entityManagerDeletePermission,
} from '@alexandreamormino/plugin-entity-manager-common';

const { allowed: canEdit } = usePermission({ permission: entityManagerUpdatePermission });
const { allowed: canDelete } = usePermission({ permission: entityManagerDeletePermission });

<EditEntityButton
  entityKind={entity.kind}
  entityName={entity.metadata.name}
  onLoadEntity={async () => {
    const { entity: loaded } = await api.getEntity(entity.kind, entity.metadata.name);
    return loaded;
  }}
  onSave={async (updated) => {
    await api.updateEntity(entity.kind, entity.metadata.name, updated);
  }}
  disabled={!canEdit}
  asIconButton
/>

<DeleteEntityButton
  entityKind={entity.kind}
  entityName={entity.metadata.name}
  onDelete={async () => {
    await api.deleteEntity(entity.kind, entity.metadata.name);
  }}
  disabled={!canDelete}
  asIconButton
/>

isEntityManagerManaged(entity) returns true when the entity's backstage.io/managed-by-location annotation starts with entity-manager-provider:.

Development

yarn workspace @alexandreamormino/plugin-entity-manager start
yarn workspace @alexandreamormino/plugin-entity-manager test
yarn workspace @alexandreamormino/plugin-entity-manager lint