From 7c85508a02abef046acec64eca8f41dd8e93c456 Mon Sep 17 00:00:00 2001 From: Paulo Eduardo Peixoto Date: Thu, 5 Jan 2023 20:18:45 -0300 Subject: [PATCH 1/3] docs(docs/features/software-templates/writing-custom-field-extensions.md): update doc with valid example. After bug at React. Signed-off-by: Paulo Eduardo Peixoto --- .../writing-custom-field-extensions.md | 57 ++++++++++++------- 1 file changed, 37 insertions(+), 20 deletions(-) diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md index 1d28bd5db9..a2c40a01b9 100644 --- a/docs/features/software-templates/writing-custom-field-extensions.md +++ b/docs/features/software-templates/writing-custom-field-extensions.md @@ -23,18 +23,19 @@ the `Scaffolder` frontend plugin in your own `App.tsx`. You can create your own Field Extension by using the [`createScaffolderFieldExtension`](https://backstage.io/docs/reference/plugin-scaffolder.createscaffolderfieldextension) -`API` like below: +`API` like below. + +As an example, we will create a component that validates whether a string is in the "Kehab case" pattern: ```tsx -//packages/app/src/scaffolder/MyCustomExtension/MyCustomExtension.tsx +//packages/app/src/scaffolder/ValidateKehabCase/ValidateKehabCaseExtension.tsx import React from 'react'; import { FieldProps, FieldValidation } from '@rjsf/core'; import FormControl from '@material-ui/core/FormControl'; -import { KubernetesValidatorFunctions } from '@backstage/catalog-model'; /* This is the actual component that will get rendered in the form */ -export const MyCustomExtension = ({ +export const ValidateKehabCaseExtension = ({ onChange, rawErrors, required, @@ -45,8 +46,17 @@ export const MyCustomExtension = ({ margin="normal" required={required} error={rawErrors?.length > 0 && !formData} - onChange={onChange} - /> + > + Name + onChange(e.target?.value)} + /> + + Use only letters, numbers, hyphens and underscores + + ); }; @@ -55,20 +65,22 @@ export const MyCustomExtension = ({ You will get the value from the `onChange` handler before as the value here to make sure that the types are aligned\ */ -export const myCustomValidation = ( +export const validateKehabCaseValidation = ( value: string, validation: FieldValidation, ) => { - if (!KubernetesValidatorFunctions.isValidObjectName(value)) { + const kehabCase = /^[a-z0-9-_]+$/g.test(value); + + if (kehabCase === false) { validation.addError( - 'must start and end with an alphanumeric character, and contain only alphanumeric characters, hyphens, underscores, and periods. Maximum length is 63 characters.', + `Only use letters, numbers, hyphen ("-") and underscore ("_").`, ); } }; ``` ```tsx -// packages/app/src/scaffolder/MyCustomExtension/extensions.ts +// packages/app/src/scaffolder/ValidateKehabCase/extensions.ts /* This is where the magic happens and creates the custom field extension. @@ -81,21 +93,24 @@ import { scaffolderPlugin, createScaffolderFieldExtension, } from '@backstage/plugin-scaffolder'; -import { MyCustomExtension, myCustomValidation } from './MyCustomExtension'; +import { + ValidateKehabCase, + validateKehabCaseValidation, +} from './ValidateKehabCase'; -export const MyCustomFieldExtension = scaffolderPlugin.provide( +export const ValidateKehabCaseFieldExtension = scaffolderPlugin.provide( createScaffolderFieldExtension({ - name: 'MyCustomExtension', - component: MyCustomExtension, - validation: myCustomValidation, + name: 'ValidateKehabCase', + component: ValidateKehabCase, + validation: validateKehabCaseValidation, }), ); ``` ```tsx -// packages/app/src/scaffolder/MyCustomExtension/index.ts +// packages/app/src/scaffolder/ValidateKehabCase/index.ts -export { MyCustomFieldExtension } from './extensions'; +export { ValidateKehabCaseFieldExtension } from './extensions'; ``` Once all these files are in place, you then need to provide your custom @@ -117,7 +132,7 @@ const routes = ( Should look something like this instead: ```tsx -import { MyCustomFieldExtension } from './scaffolder/MyCustomExtension'; +import { ValidateKehabCaseFieldExtension } from './scaffolder/ValidateKehabCase'; import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder'; const routes = ( @@ -125,7 +140,7 @@ const routes = ( ... }> - + ... @@ -158,7 +173,9 @@ spec: title: Name type: string description: My custom name for the component - ui:field: MyCustomExtension + ui:field: ValidateKehabCaseExtension + steps: + [...] ``` ## Access Data from other Fields From a3497ad62128297abbdbf598904c359fc3353e7e Mon Sep 17 00:00:00 2001 From: Paulo Eduardo Peixoto Date: Mon, 9 Jan 2023 08:18:16 -0300 Subject: [PATCH 2/3] style(docs/features/software-templates/writing-custom-field.extension.md): change style at line 28. Signed-off-by: Paulo Eduardo Peixoto --- .../software-templates/writing-custom-field-extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md index a2c40a01b9..24861936c0 100644 --- a/docs/features/software-templates/writing-custom-field-extensions.md +++ b/docs/features/software-templates/writing-custom-field-extensions.md @@ -25,7 +25,7 @@ You can create your own Field Extension by using the [`createScaffolderFieldExtension`](https://backstage.io/docs/reference/plugin-scaffolder.createscaffolderfieldextension) `API` like below. -As an example, we will create a component that validates whether a string is in the "Kehab case" pattern: +As an example, we will create a component that validates whether a string is in the `Kehab-case` pattern: ```tsx //packages/app/src/scaffolder/ValidateKehabCase/ValidateKehabCaseExtension.tsx From e85e61c15435af2d681bb517e0c918dbb0fa2847 Mon Sep 17 00:00:00 2001 From: Paulo Eduardo Peixoto Date: Mon, 9 Jan 2023 14:16:44 -0300 Subject: [PATCH 3/3] docs(docs/features/software-templates/writing-custom-field-extensions.md): change "kehab" to "kebab". Signed-off-by: Paulo Eduardo Peixoto --- .../writing-custom-field-extensions.md | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md index 24861936c0..be00453795 100644 --- a/docs/features/software-templates/writing-custom-field-extensions.md +++ b/docs/features/software-templates/writing-custom-field-extensions.md @@ -25,17 +25,17 @@ You can create your own Field Extension by using the [`createScaffolderFieldExtension`](https://backstage.io/docs/reference/plugin-scaffolder.createscaffolderfieldextension) `API` like below. -As an example, we will create a component that validates whether a string is in the `Kehab-case` pattern: +As an example, we will create a component that validates whether a string is in the `Kebab-case` pattern: ```tsx -//packages/app/src/scaffolder/ValidateKehabCase/ValidateKehabCaseExtension.tsx +//packages/app/src/scaffolder/ValidateKebabCase/ValidateKebabCaseExtension.tsx import React from 'react'; import { FieldProps, FieldValidation } from '@rjsf/core'; import FormControl from '@material-ui/core/FormControl'; /* This is the actual component that will get rendered in the form */ -export const ValidateKehabCaseExtension = ({ +export const ValidateKebabCaseExtension = ({ onChange, rawErrors, required, @@ -65,13 +65,13 @@ export const ValidateKehabCaseExtension = ({ You will get the value from the `onChange` handler before as the value here to make sure that the types are aligned\ */ -export const validateKehabCaseValidation = ( +export const validateKebabCaseValidation = ( value: string, validation: FieldValidation, ) => { - const kehabCase = /^[a-z0-9-_]+$/g.test(value); + const kebabCase = /^[a-z0-9-_]+$/g.test(value); - if (kehabCase === false) { + if (kebabCase === false) { validation.addError( `Only use letters, numbers, hyphen ("-") and underscore ("_").`, ); @@ -80,7 +80,7 @@ export const validateKehabCaseValidation = ( ``` ```tsx -// packages/app/src/scaffolder/ValidateKehabCase/extensions.ts +// packages/app/src/scaffolder/ValidateKebabCase/extensions.ts /* This is where the magic happens and creates the custom field extension. @@ -94,23 +94,23 @@ import { createScaffolderFieldExtension, } from '@backstage/plugin-scaffolder'; import { - ValidateKehabCase, - validateKehabCaseValidation, -} from './ValidateKehabCase'; + ValidateKebabCase, + validateKebabCaseValidation, +} from './ValidateKebabCase'; -export const ValidateKehabCaseFieldExtension = scaffolderPlugin.provide( +export const ValidateKebabCaseFieldExtension = scaffolderPlugin.provide( createScaffolderFieldExtension({ - name: 'ValidateKehabCase', - component: ValidateKehabCase, - validation: validateKehabCaseValidation, + name: 'ValidateKebabCase', + component: ValidateKebabCase, + validation: validateKebabCaseValidation, }), ); ``` ```tsx -// packages/app/src/scaffolder/ValidateKehabCase/index.ts +// packages/app/src/scaffolder/ValidateKebabCase/index.ts -export { ValidateKehabCaseFieldExtension } from './extensions'; +export { ValidateKebabCaseFieldExtension } from './extensions'; ``` Once all these files are in place, you then need to provide your custom @@ -132,7 +132,7 @@ const routes = ( Should look something like this instead: ```tsx -import { ValidateKehabCaseFieldExtension } from './scaffolder/ValidateKehabCase'; +import { ValidateKebabCaseFieldExtension } from './scaffolder/ValidateKebabCase'; import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder'; const routes = ( @@ -140,7 +140,7 @@ const routes = ( ... }> - + ... @@ -173,7 +173,7 @@ spec: title: Name type: string description: My custom name for the component - ui:field: ValidateKehabCaseExtension + ui:field: ValidateKebabCaseExtension steps: [...] ```