Merge pull request #6854 from SDA-SE/feat/field-id

Set field id in scaffolder

plugins/scaffolder/api-report.md

@@ -66,6 +66,7 @@ export const EntityPicker: ({
   uiSchema,
   rawErrors,
   formData,
+  idSchema,
 }: FieldProps<string>) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityPickerFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -229,6 +230,8 @@ export const TextValuePicker: ({
   rawErrors,
   formData,
   uiSchema: { 'ui:autofocus': autoFocus },
+  idSchema,
+  placeholder,
 }: FieldProps<string>) => JSX.Element;
 
 // (No @packageDocumentation comment for this package)

plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useApi } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
   formatEntityRefTitle,
@@ -23,7 +24,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 import { FieldProps } from '@rjsf/core';
 import React from 'react';
 import { useAsync } from 'react-use';
-import { useApi } from '@backstage/core-plugin-api';
 
 export const EntityPicker = ({
   onChange,
@@ -32,6 +32,7 @@ export const EntityPicker = ({
   uiSchema,
   rawErrors,
   formData,
+  idSchema,
 }: FieldProps<string>) => {
   const allowedKinds = uiSchema['ui:options']?.allowedKinds as string[];
   const defaultKind = uiSchema['ui:options']?.defaultKind as string | undefined;
@@ -58,6 +59,7 @@ export const EntityPicker = ({
       error={rawErrors?.length > 0 && !formData}
     >
       <Autocomplete
+        id={idSchema?.$id}
         value={(formData as string) || ''}
         loading={loading}
         onChange={onSelect}

plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { FieldProps } from '@rjsf/core';
 import { TextField } from '@material-ui/core';
+import { FieldProps } from '@rjsf/core';
+import React from 'react';
 
 export const TextValuePicker = ({
   onChange,
@@ -24,9 +24,13 @@ export const TextValuePicker = ({
   rawErrors,
   formData,
   uiSchema: { 'ui:autofocus': autoFocus },
+  idSchema,
+  placeholder,
 }: FieldProps<string>) => (
   <TextField
+    id={idSchema?.$id}
     label={title}
+    placeholder={placeholder}
     helperText={description}
     required={required}
     value={formData ?? ''}