From 3bed6958fa3fb46548e69395be9befeea51bc4eb Mon Sep 17 00:00:00 2001
From: Nikunj Hudka <nikunjhudka123@gmail.com>
Date: Sun, 23 Feb 2025 23:01:19 -0400
Subject: [PATCH] feat: ui:disabled allowed in MultiEntityPicker

Signed-off-by: Nikunj Hudka <nikunjhudka123@gmail.com>
---
 .../MultiEntityPicker.test.tsx                | 32 +++++++++++++++++++
 .../MultiEntityPicker/MultiEntityPicker.tsx   |  8 ++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx
index 74b9dadda3..2839ce1731 100644
--- a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx
@@ -407,6 +407,38 @@ describe('<MultiEntityPicker />', () => {
     });
   });
 
+  describe('ui:disabled MultiEntityPicker', () => {
+    beforeEach(() => {
+      uiSchema = {
+        'ui:options': {
+          allowArbitraryValues: true,
+        },
+        'ui:disabled': true,
+      };
+      props = {
+        onChange,
+        schema,
+        required: true,
+        uiSchema,
+        rawErrors,
+        formData,
+      } as unknown as FieldProps<any>;
+
+      catalogApi.getEntities.mockResolvedValue({ items: entities });
+    });
+    it('Prevents user from modifying input when ui:disabled is true', async () => {
+      props.formData = ['component/default:myentity'];
+      await renderInTestApp(
+        <Wrapper>
+          <MultiEntityPicker {...props} />
+        </Wrapper>,
+      );
+
+      const input = screen.getByRole('textbox');
+      expect(input).toBeDisabled();
+    });
+  });
+
   describe('Optional MultiEntityPicker', () => {
     beforeEach(() => {
       uiSchema = {
diff --git a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
index bf2bb34ab6..bcc2e6e773 100644
--- a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.tsx
@@ -61,10 +61,12 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
     formData,
     idSchema,
   } = props;
+
   const catalogFilter = buildCatalogFilter(uiSchema);
   const defaultKind = uiSchema['ui:options']?.defaultKind;
   const defaultNamespace =
     uiSchema['ui:options']?.defaultNamespace || undefined;
+  const isDisabled = uiSchema?.['ui:disabled'] ?? false;
   const [noOfItemsSelected, setNoOfItemsSelected] = useState(0);
 
   const catalogApi = useApi(catalogApiRef);
@@ -151,7 +153,10 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
         multiple
         filterSelectedOptions
         disabled={
-          required && !allowArbitraryValues && entities?.entities?.length === 1
+          isDisabled ||
+          (required &&
+            !allowArbitraryValues &&
+            entities?.entities?.length === 1)
         }
         id={idSchema?.$id}
         defaultValue={formData}
@@ -175,6 +180,7 @@ export const MultiEntityPicker = (props: MultiEntityPickerProps) => {
           <TextField
             {...params}
             label={title}
+            disabled={isDisabled}
             margin="dense"
             helperText={description}
             FormHelperTextProps={{