Set field id in scaffolder

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.changeset/fifty-taxis-deny.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Set `id` in `<TextValuePicker>`.

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 && 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 && idSchema.$id}
     label={title}
+    placeholder={placeholder}
     helperText={description}
     required={required}
     value={formData ?? ''}