Cheat notes · Module 07 · The frontend plugin

On the entity page: a card and a tab

A five-minute review for when you have done this module and want it back in your head. Open the full module for the steps and the lab, or the full text to print.

The idea

Put the score where teams already look: their component page. The catalog plugin offers places for cards and tabs; EntityCardBlueprint and EntityContentBlueprint fill them, useEntity gives you the entity, and a config schema makes the card configurable by id.

Remember

Blueprints from @backstage/plugin-catalog-react/alpha: EntityCardBlueprint adds a card to the overview; EntityContentBlueprint adds a tab (path, title).
filter: { kind: 'component' } shows them only where the backend has scorecards.
useEntity() returns the entity the page shows.
Extension config: makeWithOverrides({ name: 'scorecard', configSchema: { passScore: z.number().default(75) }, factory }) gives the card the id entity-card:readiness/scorecard, configurable under app.extensions.
Loading states: useAsync from react-use with Progress, ResponseErrorPanel, and "Not evaluated yet." for undefined.

Pitfalls

Deleting the filter to show the card on systems too: it appears on groups and systems saying Not evaluated yet. forever. Widen the filter and make the backend evaluate those kinds as well.
Filling the overview with cards. Give every card a filter and a reason; the rest goes to a tab.

Commands

yarn --cwd plugins/readiness test --watchAll=false Render the card with a fake API: no backend needed

Configure the card by its id

app:
  extensions:
    - entity-card:readiness/scorecard:
        config:
          passScore: 80

Test yourself

Answer in your head first, then open the answer.

Where does the card get the entity it shows?

useEntity(), from the entity page it is rendered on.

How does the platform team set the pass score to 80?

Config for entity-card:readiness/scorecard under app.extensions.

The card should show on APIs too. What do you change?

Widen the filter, and make the backend evaluate APIs as well.

Where module 07 leaves you: Component pages show a Production readiness card and a Readiness tab with Evaluate now. The pass score is 80, from config. Merged.