RFC: Composable Embeddable Scaffolder UI with Inline support

[taras]

Motivation

We need a much more flexible Embeddable Scaffolder UI that supports two categories of use cases: micro-actions and customizations.

Micro Actions

Scaffolder workflows are a powerful tool that supports golden paths with reusable templates. They are commonly used to create service templates that incorporate the organization's best practices. These templates aim to provide developers with everything they need, including configuration for deployment, documentation, monitoring, and other platform features. The primary purpose of building these templates is to eliminate toil and reduce friction and cognitive load for developers. However, our current approach to providing these configurations introduces friction, making using templates more complicated and frustrating than necessary.

Let's take a few examples to see the difference in the approach:

Example 1: Relating a component to a system

A component can be part of a system. It's common to see an entity picker field in a Scaffolder Template that allows a user to choose a system that the component belongs to. The user's selection is added to catalog-info.yaml via the template. It seems intuitive, but we must ask ourselves: "Do we need this information when the component is being created? What happens when the user wants to update the system after creating the component?" The answer, in many cases, is "no."

Floating Form

Instead of designing complex form

1. A user can change a value by clicking on it. It will show a Scaffolder form.
2. Clicking on Save will trigger the workflow
3. While the PR is pending, it'll show a symbol with a tooltip
4. Hover will show that PR is pending
5. Clicking on the symbol will take the user to the PR

This is an example of the kind of workflow that we want to be able to implement with Embeddable Scaffolder Workflow.

Inline Actions

Some actions do not require user input. These actions could be triggered and visualized entirely inline.

Customizations

Custom chrome

chrome in this context refers to components around the form. In the following diagram, the chrome is the blue box. It includes the form's title, the description, and action buttons at the bottom.

We need to be able to completely replace these because some of our clients have strict accessibility requirements that we can not retrofit onto Material UI.

Custom Form

Many of our clients have internal design systems and component libraries that implement these design systems. Their developers are familiar with their design system, making Backstage feel like an internal tool. We want our clients to be able to use their internal component library for scaffolder forms.

This can be accomplished by creating a custom RJSF form component that provides the following templates and widgets.

Templates:

• ArrayFieldItemTemplate
• ArrayFieldTemplate
• BaseInputTemplate
• AddButton
• CopyButton
• MoveDownButton
• MoveUpButton
• RemoveButton
• SubmitButton
• DescriptionFieldTemplate
• ErrorListTemplate
• FieldErrorTemplate,
• FieldHelpTemplate
• FieldTemplate
• ObjectFieldTemplate,
• TitleFieldTemplate
• WrapIfAdditionalTemplate,

Widgets:

• CheckboxWidget
• CheckboxesWidget
• RadioWidget
• RangeWidget
• SelectWidget
• TextareaWidget

Embedded Scaffolder Workflow should allow rendering with a custom Form component.

Approach

TBD