Merge pull request #27007 from stephenglass/fix-disabled-single-value

fix(scaffolder): change entity picker single value behavior

.changeset/gorgeous-months-fix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Fix behavior of scaffolder entity pickers (EntityPicker, MultiEntityPicker, MyGroupsPicker) to not auto-fill and disable the field if there is only a single value option and the field is not required.

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

@@ -167,10 +167,15 @@ export const EntityPicker = (props: EntityPickerProps) => {
     (allowArbitraryValues && formData ? getLabel(formData) : '');
 
   useEffect(() => {
-    if (entities?.catalogEntities.length === 1 && selectedEntity === '') {
+    if (
+      required &&
+      !allowArbitraryValues &&
+      entities?.catalogEntities.length === 1 &&
+      selectedEntity === ''
+    ) {
       onChange(stringifyEntityRef(entities.catalogEntities[0]));
     }
-  }, [entities, onChange, selectedEntity]);
+  }, [entities, onChange, selectedEntity, required, allowArbitraryValues]);
 
   return (
     <FormControl
@@ -179,7 +184,11 @@ export const EntityPicker = (props: EntityPickerProps) => {
       error={rawErrors?.length > 0 && !formData}
     >
       <Autocomplete
-        disabled={entities?.catalogEntities.length === 1}
+        disabled={
+          required &&
+          !allowArbitraryValues &&
+          entities?.catalogEntities.length === 1
+        }
         id={idSchema?.$id}
         value={selectedEntity}
         loading={loading}

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

@@ -136,10 +136,10 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
   );
 
   useEffect(() => {
-    if (entities?.entities?.length === 1) {
+    if (required && !allowArbitraryValues && entities?.entities?.length === 1) {
       onChange([stringifyEntityRef(entities?.entities[0])]);
     }
-  }, [entities, onChange]);
+  }, [entities, onChange, required, allowArbitraryValues]);
 
   return (
     <FormControl
@@ -150,7 +150,9 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
       <Autocomplete
         multiple
         filterSelectedOptions
-        disabled={entities?.entities?.length === 1}
+        disabled={
+          required && !allowArbitraryValues && entities?.entities?.length === 1
+        }
         id={idSchema?.$id}
         defaultValue={formData}
         loading={loading}

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

@@ -102,10 +102,10 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
     null;
 
   useEffect(() => {
-    if (groups?.catalogEntities.length === 1 && !selectedEntity) {
+    if (required && groups?.catalogEntities.length === 1 && !selectedEntity) {
       onChange(stringifyEntityRef(groups.catalogEntities[0]));
     }
-  }, [groups, onChange, selectedEntity]);
+  }, [groups, onChange, selectedEntity, required]);
 
   return (
     <FormControl
@@ -114,7 +114,7 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
       error={rawErrors?.length > 0}
     >
       <Autocomplete
-        disabled={groups?.catalogEntities.length === 1}
+        disabled={required && groups?.catalogEntities.length === 1}
         id="OwnershipEntityRefPicker-dropdown"
         options={groups?.catalogEntities || []}
         value={selectedEntity}