From 08de4fa957b9e18c37b5817c3a4324a78e8eb2e2 Mon Sep 17 00:00:00 2001
From: Thomas Viaud <t.viaud@elsevier.com>
Date: Wed, 27 Oct 2021 17:38:37 +0100
Subject: [PATCH] fix: Adding corrected code documentation for custom field
 extension

Signed-off-by: Thomas Viaud <t.viaud@elsevier.com>
---
 .../writing-custom-field-extensions.md        | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md
index 4f2d3bdf5d..1fb26b7977 100644
--- a/docs/features/software-templates/writing-custom-field-extensions.md
+++ b/docs/features/software-templates/writing-custom-field-extensions.md
@@ -27,20 +27,21 @@ You can create your own Field Extension by using the
 
 ```tsx
 //packages/app/scaffolder/MyCustomExtension/MyCustomExtension.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 = ({ onChange, required }: FieldProps<string>) => {
-  return (
-     <FormControl
-      margin="normal"
-      required={required}
-      error={rawErrors?.length > 0 && !formData}
-      onChange={onChange}
-    >
-  )
+export const MyCustomExtension = ({ onChange, rawErrors, required, formData }: FieldProps<string>) => {
+    return (
+        <FormControl
+            margin="normal"
+            required={required}
+            error={rawErrors?.length > 0 && !formData}
+            onChange={onChange} />
+    )
 };
 
 /*
@@ -49,24 +50,24 @@ export const MyCustomExtension = ({ onChange, required }: FieldProps<string>) =>
 */
 
 export const myCustomValidation = (
-  value: string,
-  validation: FieldValidation,
+    value: string,
+    validation: FieldValidation,
 ) => {
-  if (!KubernetesValidatorFunctions.isValidObjectName(value)) {
-    validation.addError(
-      'must start and end with an alphanumeric character, and contain only alphanumeric characters, hyphens, underscores, and periods. Maximum length is 63 characters.',
-    );
-  }
+    if (!KubernetesValidatorFunctions.isValidObjectName(value)) {
+        validation.addError(
+            'must start and end with an alphanumeric character, and contain only alphanumeric characters, hyphens, underscores, and periods. Maximum length is 63 characters.',
+        );
+    }
 };
 ```
 
 ```tsx
 // packages/app/scaffolder/MyCustomExtension/extensions.ts
 
-/* 
+/*
   This is where the magic happens and creates the custom field extension.
 
-  Note that if you're writing extensions part of a separate plugin, 
+  Note that if you're writing extensions part of a separate plugin,
   then please use `plugin.provide` from there instead and export it part of your `plugin.ts` rather than re-using the `scaffolder.plugin`.
 */