Generate Forms from Kubernetes Schema to Create and Edit Resources

[Guilamb]

Objective:

The objective is to have a simple way to create CR/Kubernetes resources without using YAML.

Solution:

My solution is to generate a form from the Custom Resource Definition (CRD) schema using an existing library that can generate forms from a JSON schema. On CRD, json schema are defined in the base definition. CRD schema doc

This could be extended to other Kubernetes resources to simplify resource creation and make it more accessible since we can retrieve kubernetes resources schemas from the Kubernetes API.

What I Have Done So Far:

I have developed an initial version of this feature, only for CRD, in our plugin, which is available at Headlamp-plugin. All elements used to dynamically create the form are located under Headlamp-plugin/src/Components/Form/.

To create this version, I've used react-jsonschema-form (@rjsf-core) to generate the forms. Currently, I couldn't use the Material 5 theme, but it is available with react-Jsonschema-form, as mentioned here: RJSF/Themes.

I've added a simple "plus" button on the CRD details page that, when pressed, makes a popup with the form appear.

Here is what it looks like on a simple example CRD, with a basic name and description string:

I think this would be an interesting feature for base Headlamp that would make the creation of CR and Kubernetes resources more user-friendly.
I've just remembered this related issue : #1220

[joaquimrocha]

Yeah. This is a very interesting feature we have wanted for a long time.
I guess it would make sense as part of the CRD details view: Go to CRD details, there is a + button next to the CRD name/title, clicking it shows the auto-generated UI.
Edit would also show it, but have a tab to switch to the Editor view.

[Guilamb]

Hi, so I would like to contribute the part I've already developed in my plugin (Headlamp-plugin) directly to Headlamp. This includes the addition of the "+" button and the pop-up that shows a form to create a new CR based on the schema provided in the CRD.

Would it be ok, to introduce a new dependence : react-jsonschema-form (@rjsf-core) ?

Should I create a new component for the "+" button in frontend/src/common/resource next to the EditButton ?
The same way, should I create a new component for the form?

For now, I have separated the pop-up form into three components:

1. NewCrDialog: Creates a dialog with a CustomResourceForm inside.
2. CustomResourceForm: Adds a DynamicForm and passes the CRD as an argument.
3. DynamicForm: Generate the form using the schema specified inside the CRD.

Should I use the same organization for my contribution ?