Backstage Scaffolder - Validate input field

Question

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.

Answer 1

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