[ui-v2] Schema form component

[pleek91]

Schema Forms

Prefect uses schema generated forms for several features:

• Deployment parameters
• Work Pool configuration
• Automation actions (for deployment parameters)

Example form

import { SchemaForm } from "@/components/schemas";

const [values, setValues] = useState({});
const [errors, setErrors] = useState([]);

const schema = {
  type: "object",
  properties: {
    name: { type: "string", title: "Name" },
  },
};

<SchemaForm
  schema={schema}
  values={values}
  errors={errors}
  onValuesChange={setValues}
  kinds={["json"]}
/>

Validation

Validation of values is done on the server side. The form will return errors that can be displayed to the user. To validate the values, use the validateSchemaValues function.

import { validateSchemaValues } from "@/components/schemas";

const errors = await validateSchemaValues(schema, values);

Types

The schema form uses the PrefectSchemaObject type to define the schema.

Prefect Kind Values

A value can dictate the type of input that is rendered by using the __prefect_kind property. Using this property, the form will know how to render the value. For this example a json input will be rendered rather than the default object input.

const schema = {
  type: "object",
  properties: {
    user: {
      type: "object",
      properties: {
        name: { type: "string", title: "Name" },
      },
    },
  },
};

const values = {
  user: {
    name: {
      __prefect_kind: "json",
      value: "John Doe",
    },
  },
};

Default Values

By default, the form will use the default property to set the initial value of all fields when the form is rendered. In this example, the name field will be pre-filled with "John Doe" because the values object has no name property.

const schema = {
  type: "object",
  properties: {
    name: { type: "string", title: "Name", default: "John Doe" },
  },
};

const values = {}

<SchemaForm
  schema={schema}
  values={values}
  errors={errors}
  onValuesChange={setValues}
  kinds={["json"]}
/>

Note
This can be disabled by setting the skipDefaultValueInitialization prop to true.

[devinvillarosa]

This might be a dumb question, but what do we do with the values being set from the schema?
Is it supposed to fit in for an API request? etc?

[pleek91]

When using this form to create things like blocks and flow runs the endpoint to create that entity needs a record/dictionary of the values for it. For example when creating a flow run the endpoint asks for parameters as part of the payload. If a form is created from the deployment's parameter schema, the values from the form are what you would post as the parameters of the flow run being created.

Lets chat about that more if you have any questions

[devinvillarosa]

Very awesome job!
I like how easy it looks to use.

Only have a few comments due to my lack of understanding of how "as an OSS contributor", I would be using this

[devangrose]

Just one nit thing!