feat: expose uiSchema and formContext in FormProps

richcooper95 commented 2 weeks ago

Hey, I just made a Pull Request!

This PR exposes two extra fields in the FormProps: uiSchema and formContext.

This allows more control over how specific form fields are rendered when using the Scaffolder.

In our specific use-case, we are using the EmbeddableWorkflow Component introduced in https://github.com/backstage/backstage/pull/15162 to update resources, and want to to make non-editable fields read-only and disabled in the UI.

With this change, we can do the following:

        <EmbeddableWorkflow
          namespace={namespace}
          templateName={templateName}
          onError={onError}
          onCreate={onCreate}
          extensions={customFieldExtensions}
          initialState={initialState}
          formProps={{
            uiSchema: uiSchema,
            formContext: {
              readonlyAsDisabled: true
            }
          }}
        />

with uiSchema defined to set myReadOnlyField to read-only:

  const uiSchema = {
    myReadOnlyField: {
      "ui:readonly": true, // This makes the field read-only in the UI
    },
  };

:heavy_check_mark: Checklist

[x] A changeset describing the change and affected packages. (more info) ~- [ ] Added or updated documentation~ ~- [ ] Tests for new functionality and regression tests for bug fixes~ ~- [ ] Screenshots attached (for UI changes)~
[x] All your commits have a Signed-off-by line in the message. (more info)

backstage-goalie[bot] commented 2 weeks ago

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/plugin-scaffolder-react	plugins/scaffolder-react	patch	`v1.8.5-next.1`

github-actions[bot] commented 2 weeks ago

Uffizzi Ephemeral Environment - Virtual Cluster

Your cluster pr-24622 was successfully created. Learn more about Uffizzi virtual clusters To connect to this cluster, follow these steps:

Download and install the Uffizzi CLI from https://docs.uffizzi.com/install
Login to Uffizzi, then select the backstage account and project:
```
uffizzi login
```

Select an account: 
  ‣ backstage
    jdoe

Select a project or create a new project: 
  ‣ backstage-6783521

Update your kubeconfig: uffizzi cluster update-kubeconfig pr-24622 --kubeconfig=[PATH_TO_KUBECONFIG] After updating your kubeconfig, you can manage your cluster with kubectl, kustomize, helm, and other tools that use kubeconfig files: kubectl get namespace --kubeconfig [PATH_TO_KUBECONFIG]

Access the backstage endpoint at https://backstage-default-pr-24622-c5391.uclusters.app.uffizzi.com

benjdlambert commented 1 week ago

Hey @richcooper95 :wave: thanks for this PR!

I think that we're going to want to add support for merging the properties with the current ui:schema and formContext otherwise providing ones to the Workflow would overwrite the ones that are already provided: https://github.com/backstage/backstage/blob/0e692cf4227d4a03a81981979669935e945665ca/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx#L227-L228

I think we'll need to destructure them out of formProps and merge them seperately.

backstage / backstage