From 24d0e1ea1253f8f828741d2405cddc589d9d02f6 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Tue, 17 Aug 2021 17:32:21 +0200
Subject: [PATCH] Set field id in scaffolder

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/fifty-taxis-deny.md                            | 5 +++++
 .../src/components/fields/EntityPicker/EntityPicker.tsx   | 4 +++-
 .../components/fields/TextValuePicker/TextValuePicker.tsx | 8 ++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fifty-taxis-deny.md

diff --git a/.changeset/fifty-taxis-deny.md b/.changeset/fifty-taxis-deny.md
new file mode 100644
index 0000000000..63100635d1
--- /dev/null
+++ b/.changeset/fifty-taxis-deny.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Set `id` in `<TextValuePicker>`.
diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
index 04693a94cd..fca40d822f 100644
--- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
+++ b/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}
diff --git a/plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx b/plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx
index f391843f73..d48f863da9 100644
--- a/plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx
+++ b/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 ?? ''}