Entity Manager React Library

Reusable React components and hooks for building entity management UIs. Used internally by @alexandreamormino/plugin-entity-manager and available for custom integrations.

Installation

yarn add @alexandreamormino/plugin-entity-manager-react

Components

<EditEntityButton />

Opens a YAML editor dialog to edit an entity.

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

<EditEntityButton
  entityKind="Component"
  entityName="my-service"
  onLoadEntity={async () => {
    const { entity } = await api.getEntity('Component', 'my-service');
    return entity;
  }}
  onSave={async (entity) => {
    await api.updateEntity('Component', 'my-service', entity);
  }}
  label="Edit YAML"
  disabled={!canEdit}
  asIconButton  // renders as a circular IconButton to match Backstage card headers
/>

<DeleteEntityButton />

Shows a confirmation dialog before calling the delete callback.

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

<DeleteEntityButton
  entityKind="Component"
  entityName="my-service"
  onDelete={async () => {
    await api.deleteEntity('Component', 'my-service');
  }}
  disabled={!canDelete}
  asIconButton
/>

<EntityYamlEditor />

Monaco editor configured for YAML with live schema validation and autocomplete. Fetches schemas from the backend automatically.

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

<EntityYamlEditor
  value={yaml}
  onChange={(newYaml, isValid) => setYaml(newYaml)}
  height={500}
/>

<EntityEditorToolbar />

Save/Cancel toolbar, typically placed below <EntityYamlEditor />.

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

<EntityEditorToolbar
  onSave={editor.save}
  onCancel={handleCancel}
  canSave={editor.canSave}
  isLoading={editor.isLoading}
/>

Hooks

useEntityEditor()

State machine for the full editor lifecycle: idle → editing → saving → success | error.

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

const editor = useEntityEditor({
  onSave: async (entity) => {
    await api.createEntity(entity);
  },
});

| Property | Type | Description | |----------|------|-------------| | editor.yamlContent | string | Current YAML string | | editor.isValid | boolean | Whether the YAML is currently valid | | editor.error | string \| null | Last error message | | editor.canSave | boolean | true when valid, dirty, and not already saving | | editor.isLoading | boolean | true while loading or saving | | editor.handleYamlChange(yaml, isValid) | fn | Call from <EntityYamlEditor onChange> | | editor.loadEntity(entity) | fn | Load an Entity object into the editor | | editor.save() | fn | Parse YAML and call onSave | | editor.reset() | fn | Reset to initial state |

Development

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