Custom Fields (ui:field) Validation Not Recognized In Software Template Arrays

[ProticM]

Expected Behavior

The custom field should be picked up in the template and attached validation should be triggered

Current Behavior

Custom field is ignored and validation is not triggered when moving to the next step or submitting the form in the template

Possible Solution

Revisit the validation generation code and include ui:field attached to array item.

To me, what seems fishy is that in the code where you check if the variable isObject, !Array.isArray() check is also included which ignores the arrays

Not sure if this is the right spot to look in, but the check is located in the TemplatePage.tsx in createValidator function.

Steps to Reproduce

Example YAML

- title: Step Title
  required:
    - field
    - list
    - list_two
  properties:
    field:
      title: Field
      type: string
      ui:field: EntityNamePicker # Here the field works without issues
      # or
      # ui:field: TagField # Here the custom field works without issues
    list:
      type: array
      title: List title
      items:
        required: # required works fine
          - field_one
          - field_two
        properties:
          field_one:
            title: Field One
            type: string
            ui:field: EntityNamePicker # Built in fields are not working here
            description: Field One Desc
          field_two:
            title: Field Two
            type: string
            ui:field: TagField # Custom fields are not working as well
            description: Field Two Desc
    list_two:
      type: array
      title: List Two Title
      items:
        title: Field Title
        type: string
        ui:field: TagField # Custom fields are not working here neither
        description: Some Desc

Sample custom extension:

export const TagFieldExtension = scaffolderPlugin.provide(
  createScaffolderFieldExtension({
    name: 'TagField',
    component: TextValuePicker,
    validation: (value: string, validation: FieldValidation) => {
      // validate the value
      // this code is never reached even though the field is created
    }
  })
);

Context

I'm building a step to scaffold the component kind YAML file where the user should be able to enter the related links and tags. And, the tags for example have some specific validation rules (From docs: Each tag must be sequences of [a-z0-9] separated by -, at most 63 characters in total) that are not supported by default thus I need a custom extension to include the tag validation

Your Environment

• NodeJS Version (v14): v14.17.5
• Operating System and Version (e.g. Ubuntu 14.04): Windows 10 Pro
• Browser Information: Chrome

[dhenneke]

ui:fields is a feature from react-jsonschema-form but backstage does some preprocessing to simplify its usage. Namely in backstage you can write them directly in your schema while in the library, you provide the schema and the special configurations in separate objects.

The code for the array feature is here: https://github.com/backstage/backstage/blob/8c754968d9b8d87b19c1b52c00937c33b5cd5dbb/plugins/scaffolder/src/components/MultistepJsonForm/schema.ts#L58-L62

There is also a test that checks if this works. https://github.com/backstage/backstage/blob/8c754968d9b8d87b19c1b52c00937c33b5cd5dbb/plugins/scaffolder/src/components/MultistepJsonForm/schema.test.ts#L350-L412

So it should already work 🤔

[ProticM]

@dhenneke Thanks for the reply.

I see, but the snippets from your comment do not include validation and the test does not include ui:field 🤔

The item to which I attach the field is being rendered and shown in the UI and you can use it, but the validation is not triggered.

In createValidator function that I mentioned, there are some modifications and merging is done which is then passed down to the MultistepJsonForm. It feels that the issue is in that part of the code considering that both built-in and custom fields are not picked up if attached to the nested item (in terms of triggering validation, the field is rendered, but not validated).

Also, do you see any issues with the YAML above? Just to exclude that we have a problem in the config

[dhenneke]

I see, but the snippets from your comment do not include validation and the test does not include ui:field 🤔

Yes that's right 😅. The validation part is indeed a backstage feature and is unrelated to the code I linked.

The YAML looks fine. But I only have experience with using extra properties in array fields but not with custom validations.

[ProticM]

Ok @dhenneke tnx 😄 Could you mention someone here who can help us with this problem and investigate further?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[benjdlambert]

@ProticM I wonder if this is a problem with the upstream library? could you confirm that you cann't replicate it using the library directly and providing different uiSchema and schema. I wonder if you could actually do this in the playground that they have online.

[goenning]

@benjdlambert I don't think it's possible to replicate this on the playground as they don't have validation built into react-jsonschema-form. I have a similar (slightly different) issue with custom validations as on #8542. I'm happy to submit a PR if confirmed this is a bug/missing feature.

[benjdlambert]

ah yeah, I think that would be great. I'm thinking that there's a few tickets which are kind of linked together around this validation of different field types, and thinking that they're all the same issue right now. So the object and the array one should be fixed when one is.

Feel free to contribute and raise a PR 🙏

[OrKarstoft]

@benjdlambert I don't think it's possible to replicate this on the playground as they don't have validation built into react-jsonschema-form. I have a similar (slightly different) issue with custom validations as on #8542. I'm happy to submit a PR if confirmed this is a bug/missing feature.

Hey @goenning! How's the progress with the PR? :) I'm having this issue where my custom ui components doesn't show in the array.

[goenning]

@OrKarstoft hey, there was no progress yet, we deprioritised this task for now. I’ll eventually get back to it, but I don’t know when, so feel free to take over if you’d like.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.