Merge pull request #29625 from tobyh-canva/fix-entity-picker-markdown

fix(scaffolder): enable markdown rendering for EntityPicker description

.changeset/green-trainers-float.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Fix EntityPicker field to render description as markdown, matching other form components in the system.

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

@@ -30,7 +30,6 @@ import {
   entityPresentationApiRef,
 } from '@backstage/plugin-catalog-react';
 import TextField from '@material-ui/core/TextField';
-import FormControl from '@material-ui/core/FormControl';
 import Autocomplete, {
   AutocompleteChangeReason,
   createFilterOptions,
@@ -46,6 +45,7 @@ import {
 import { VirtualizedListbox } from '../VirtualizedListbox';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation';
+import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
 
 export { EntityPickerSchema } from './schema';
 
@@ -68,6 +68,7 @@ export const EntityPicker = (props: EntityPickerProps) => {
     rawErrors,
     formData,
     idSchema,
+    errors,
   } = props;
   const catalogFilter = buildCatalogFilter(uiSchema);
   const defaultKind = uiSchema['ui:options']?.defaultKind;
@@ -179,10 +180,12 @@ export const EntityPicker = (props: EntityPickerProps) => {
   }, [entities, onChange, selectedEntity, required, allowArbitraryValues]);
 
   return (
-    <FormControl
-      margin="normal"
+    <ScaffolderField
+      rawErrors={rawErrors}
+      rawDescription={description}
       required={required}
-      error={rawErrors?.length > 0 && !formData}
+      disabled={isDisabled}
+      errors={errors}
     >
       <Autocomplete
         disabled={
@@ -210,8 +213,6 @@ export const EntityPicker = (props: EntityPickerProps) => {
             {...params}
             label={title}
             margin="dense"
-            helperText={description}
-            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}
             variant="outlined"
             required={required}
             disabled={isDisabled}
@@ -226,7 +227,7 @@ export const EntityPicker = (props: EntityPickerProps) => {
         })}
         ListboxComponent={VirtualizedListbox}
       />
-    </FormControl>
+    </ScaffolderField>
   );
 };