yamlscaffoldingreact-jsonschema-formsbackstage

Backstage Scaffolder - Validate input field


I'm looking for a way to validate the structure of an input in Scaffolder. In case if the string is in the pattern "kehab case".

I hope to be able to use, for example, RegEx for this validation.

As we must write the steps in a yaml file, I haven't found effective ways to enforce this validation.

NOTE: Remembering that "react-jsonschema" is used for the "construction" of the forms.


Solution

  • It would be smth. like the following:

    import {
      scaffolderPlugin,
      createScaffolderFieldExtension,
    } from '@backstage/plugin-scaffolder';
    import {
      ValidateKebabCase,
      validateKebabCaseValidation,
    } from './ValidateKebabCase/ValidateKebabCaseExtension';
    
    export const ValidateKebabCaseFieldExtension = scaffolderPlugin.provide(
      createScaffolderFieldExtension({
        name: 'ValidateKebabCase',
        component: ValidateKebabCase,
        validation: validateKebabCaseValidation,
      }),
    );
    

    with

    export const validateKebabCaseValidation = (
      value: string,
      validation: FieldValidation,
    ) => {
      const kebabCase = /^[a-z0-9-_]+$/g.test(value);
    
      if (kebabCase === false) {
        validation.addError(
          `Only use letters, numbers, hyphen ("-") and underscore ("_").`,
        );
      }
    };
    

    Check out our documentation for the full example: https://backstage.io/docs/features/software-templates/writing-custom-field-extensions#creating-a-field-extension