From 85d95e510e7a129de5feaabbf7abbb0c97f49d0f Mon Sep 17 00:00:00 2001
From: Stephen Glass <stephen@stephen.glass>
Date: Tue, 8 Oct 2024 09:10:45 -0400
Subject: [PATCH] update condition for entity picker single value

Signed-off-by: Stephen Glass <stephen@stephen.glass>
---
 .changeset/gorgeous-months-fix.md              |  2 +-
 .../fields/EntityPicker/EntityPicker.tsx       | 18 +++++++++++++++++-
 .../MultiEntityPicker/MultiEntityPicker.tsx    | 11 ++++++++++-
 .../fields/MyGroupsPicker/MyGroupsPicker.tsx   |  9 ++++++++-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/.changeset/gorgeous-months-fix.md b/.changeset/gorgeous-months-fix.md
index ca899b4e2f..f248afad46 100644
--- a/.changeset/gorgeous-months-fix.md
+++ b/.changeset/gorgeous-months-fix.md
@@ -2,4 +2,4 @@
 '@backstage/plugin-scaffolder': patch
 ---
 
-Change behavior of scaffolder entity pickers (EntityPicker, MultiEntityPicker, MyGroupsPicker) to not auto-fill and disable the field if there is only a single value option.
+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.
diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
index 67da593a9e..aa5cd44f4d 100644
--- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
@@ -35,7 +35,7 @@ import Autocomplete, {
   AutocompleteChangeReason,
   createFilterOptions,
 } from '@material-ui/lab/Autocomplete';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import {
   EntityPickerFilterQueryValue,
@@ -166,6 +166,17 @@ export const EntityPicker = (props: EntityPickerProps) => {
     entities?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ??
     (allowArbitraryValues && formData ? getLabel(formData) : '');
 
+  useEffect(() => {
+    if (
+      required &&
+      !allowArbitraryValues &&
+      entities?.catalogEntities.length === 1 &&
+      selectedEntity === ''
+    ) {
+      onChange(stringifyEntityRef(entities.catalogEntities[0]));
+    }
+  }, [entities, onChange, selectedEntity, required, allowArbitraryValues]);
+
   return (
     <FormControl
       margin="normal"
@@ -173,6 +184,11 @@ export const EntityPicker = (props: EntityPickerProps) => {
       error={rawErrors?.length > 0 && !formData}
     >
       <Autocomplete
+        disabled={
+          required &&
+          !allowArbitraryValues &&
+          entities?.catalogEntities.length === 1
+        }
         id={idSchema?.$id}
         value={selectedEntity}
         loading={loading}
diff --git a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
index 9d02a42957..bf2bb34ab6 100644
--- a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
@@ -34,7 +34,7 @@ import FormControl from '@material-ui/core/FormControl';
 import Autocomplete, {
   AutocompleteChangeReason,
 } from '@material-ui/lab/Autocomplete';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { FieldValidation } from '@rjsf/utils';
 import {
@@ -135,6 +135,12 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
     [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues],
   );
 
+  useEffect(() => {
+    if (required && !allowArbitraryValues && entities?.entities?.length === 1) {
+      onChange([stringifyEntityRef(entities?.entities[0])]);
+    }
+  }, [entities, onChange, required, allowArbitraryValues]);
+
   return (
     <FormControl
       margin="normal"
@@ -144,6 +150,9 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
       <Autocomplete
         multiple
         filterSelectedOptions
+        disabled={
+          required && !allowArbitraryValues && entities?.entities?.length === 1
+        }
         id={idSchema?.$id}
         defaultValue={formData}
         loading={loading}
diff --git a/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx b/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx
index 1188f2220b..89af9f68b5 100644
--- a/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   errorApiRef,
   identityApiRef,
@@ -101,6 +101,12 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
     groups?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ||
     null;
 
+  useEffect(() => {
+    if (required && groups?.catalogEntities.length === 1 && !selectedEntity) {
+      onChange(stringifyEntityRef(groups.catalogEntities[0]));
+    }
+  }, [groups, onChange, selectedEntity, required]);
+
   return (
     <FormControl
       margin="normal"
@@ -108,6 +114,7 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
       error={rawErrors?.length > 0}
     >
       <Autocomplete
+        disabled={required && groups?.catalogEntities.length === 1}
         id="OwnershipEntityRefPicker-dropdown"
         options={groups?.catalogEntities || []}
         value={selectedEntity}