feat: ui:disabled allowed in RepoUrlPicker

Signed-off-by: Nikunj Hudka <nikunjhudka123@gmail.com>

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx

@@ -119,6 +119,36 @@ describe('RepoUrlPicker', () => {
       );
     });
 
+    it('should disable the picker when ui:disabled', async () => {
+      const onSubmit = jest.fn();
+      const { getAllByRole } = await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [scmIntegrationsApiRef, mockIntegrationsApi],
+            [scmAuthApiRef, {}],
+            [scaffolderApiRef, mockScaffolderApi],
+          ]}
+        >
+          <SecretsContextProvider>
+            <Form
+              validator={validator}
+              schema={{ type: 'string' }}
+              uiSchema={{ 'ui:field': 'RepoUrlPicker', 'ui:disabled': true }}
+              fields={{
+                RepoUrlPicker: RepoUrlPicker as ScaffolderRJSFField<string>,
+              }}
+              onSubmit={onSubmit}
+            />
+          </SecretsContextProvider>
+        </TestApiProvider>,
+      );
+
+      const [ownerInput, repoInput] = getAllByRole('textbox');
+
+      expect(ownerInput).toBeDisabled();
+      expect(repoInput).toBeDisabled();
+    });
+
     it('should render properly with allowedHosts', async () => {
       const { getByRole } = await renderInTestApp(
         <TestApiProvider

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

@@ -77,7 +77,10 @@ export const RepoUrlPicker = (
     () => uiSchema?.['ui:options']?.allowedRepos ?? [],
     [uiSchema],
   );
-
+  const isDisabled = useMemo(
+    () => uiSchema?.['ui:disabled'] ?? false,
+    [uiSchema],
+  );
   const { owner, organization, project, repoName } = state;
 
   useEffect(() => {
@@ -179,6 +182,7 @@ export const RepoUrlPicker = (
         hosts={allowedHosts}
         onChange={host => setState(prevState => ({ ...prevState, host }))}
         rawErrors={rawErrors}
+        isDisabled={isDisabled}
       />
       {hostType === 'github' && (
         <GithubRepoPicker
@@ -186,6 +190,7 @@ export const RepoUrlPicker = (
           onChange={updateLocalState}
           rawErrors={rawErrors}
           state={state}
+          isDisabled={isDisabled}
           accessToken={
             uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&
             secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]
@@ -198,6 +203,7 @@ export const RepoUrlPicker = (
           allowedRepos={allowedRepos}
           rawErrors={rawErrors}
           state={state}
+          isDisabled={isDisabled}
           onChange={updateLocalState}
         />
       )}
@@ -207,6 +213,7 @@ export const RepoUrlPicker = (
           rawErrors={rawErrors}
           state={state}
           onChange={updateLocalState}
+          isDisabled={isDisabled}
           accessToken={
             uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&
             secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]
@@ -220,6 +227,7 @@ export const RepoUrlPicker = (
           rawErrors={rawErrors}
           state={state}
           onChange={updateLocalState}
+          isDisabled={isDisabled}
           accessToken={
             uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&
             secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]
@@ -232,6 +240,7 @@ export const RepoUrlPicker = (
           allowedProject={allowedProjects}
           rawErrors={rawErrors}
           state={state}
+          isDisabled={isDisabled}
           onChange={updateLocalState}
         />
       )}
@@ -240,6 +249,7 @@ export const RepoUrlPicker = (
           rawErrors={rawErrors}
           state={state}
           onChange={updateLocalState}
+          isDisabled={isDisabled}
         />
       )}
       <RepoUrlPickerRepoName
@@ -251,6 +261,7 @@ export const RepoUrlPicker = (
             repoName: repo.id || repo.name,
           }))
         }
+        isDisabled={isDisabled}
         rawErrors={rawErrors}
         availableRepos={state.availableRepos}
       />