Add field selection rendering of allowedProjects for BitbucketRepoPicker

Signed-off-by: Andrew Kundrock <akundrock@somalogic.com>

plugins/scaffolder-backend/sample-templates/bitbucket-demo/template.yaml

@@ -20,7 +20,15 @@ spec:
           ui:options:
             allowedHosts:
               - bitbucket.org
-              - server.bitbucket.com
+            allowedOwners:
+              - WORKSPACE1
+              - WORKSPACE2
+            allowedProjects:
+              - PROJECT1
+              - PROJECT2
+            allowedRepos:
+              - REPO1
+              - REPO2
     - title: Fill in some steps
       required:
         - name

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

@@ -56,6 +56,22 @@ describe('BitbucketRepoPicker', () => {
 
     expect(getAllByRole('textbox')).toHaveLength(1);
   });
+
+  it('renders a select if there is a list of allowed projects', async () => {
+    const allowedProjects = ['project1', 'project2'];
+    const { findByText } = render(
+      <BitbucketRepoPicker
+        onChange={jest.fn()}
+        rawErrors={[]}
+        state={{ host: 'bitbucket.org', repoName: 'repo' }}
+        allowedProjects={allowedProjects}
+      />,
+    );
+
+    expect(await findByText('project1')).toBeInTheDocument();
+    expect(await findByText('project2')).toBeInTheDocument();
+  });
+
   describe('workspace field', () => {
     it('calls onChange when the workspace changes', () => {
       const onChange = jest.fn();

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

@@ -23,15 +23,25 @@ import { RepoUrlPickerState } from './types';
 
 export const BitbucketRepoPicker = (props: {
   allowedOwners?: string[];
+  allowedProjects?: string[];
   onChange: (state: RepoUrlPickerState) => void;
   state: RepoUrlPickerState;
   rawErrors: string[];
 }) => {
-  const { allowedOwners = [], onChange, rawErrors, state } = props;
+  const {
+    allowedOwners = [],
+    allowedProjects = [],
+    onChange,
+    rawErrors,
+    state,
+  } = props;
   const { host, workspace, project } = state;
   const ownerItems: SelectItem[] = allowedOwners
     ? allowedOwners?.map(i => ({ label: i, value: i }))
     : [];
+  const projectItems: SelectItem[] = allowedProjects
+    ? allowedProjects?.map(i => ({ label: i, value: i }))
+    : [];
 
   useEffect(() => {
     if (host === 'bitbucket.org' && allowedOwners.length) {
@@ -69,7 +79,7 @@ export const BitbucketRepoPicker = (props: {
             </>
           )}
           <FormHelperText>
-            The Organization that this repo will belong to
+            The Workspace that this repo will belong to
           </FormHelperText>
         </FormControl>
       )}
@@ -78,12 +88,27 @@ export const BitbucketRepoPicker = (props: {
         required
         error={rawErrors?.length > 0 && !project}
       >
-        <InputLabel htmlFor="projectInput">Project</InputLabel>
-        <Input
-          id="projectInput"
-          onChange={e => onChange({ project: e.target.value })}
-          value={project}
-        />
+        {allowedProjects?.length ? (
+          <Select
+            native
+            label="Allowed Projects"
+            onChange={s =>
+              onChange({ project: String(Array.isArray(s) ? s[0] : s) })
+            }
+            disabled={allowedProjects.length === 1}
+            selected={project}
+            items={projectItems}
+          />
+        ) : (
+          <>
+            <InputLabel htmlFor="projectInput">Project</InputLabel>
+            <Input
+              id="projectInput"
+              onChange={e => onChange({ project: e.target.value })}
+              value={project}
+            />
+          </>
+        )}
         <FormHelperText>
           The Project that this repo will belong to
         </FormHelperText>

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

@@ -60,12 +60,16 @@ export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
     () => uiSchema?.['ui:options']?.allowedOwners ?? [],
     [uiSchema],
   );
+  const allowedProjects = useMemo(
+    () => uiSchema?.['ui:options']?.allowedProjects ?? [],
+    [uiSchema],
+  );
   const allowedRepos = useMemo(
     () => uiSchema?.['ui:options']?.allowedRepos ?? [],
     [uiSchema],
   );
 
-  const { owner, organization, repoName } = state;
+  const { owner, organization, project, repoName } = state;
 
   useEffect(() => {
     onChange(serializeRepoPickerUrl(state));
@@ -90,6 +94,15 @@ export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
     }
   }, [setState, allowedOwners, owner]);
 
+  useEffect(() => {
+    if (allowedProjects.length > 0 && !project) {
+      setState(prevState => ({
+        ...prevState,
+        project: allowedProjects[0],
+      }));
+    }
+  }, [setState, allowedProjects, project]);
+
   useEffect(() => {
     if (allowedRepos.length > 0 && !repoName) {
       setState(prevState => ({ ...prevState, repoName: allowedRepos[0] }));
@@ -169,6 +182,7 @@ export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
       {hostType === 'bitbucket' && (
         <BitbucketRepoPicker
           allowedOwners={allowedOwners}
+          allowedProjects={allowedProjects}
           rawErrors={rawErrors}
           state={state}
           onChange={updateLocalState}

plugins/scaffolder/src/components/fields/RepoUrlPicker/schema.ts

@@ -34,6 +34,10 @@ export const RepoUrlPickerFieldSchema = makeFieldSchemaFromZod(
       .array(z.string())
       .optional()
       .describe('List of allowed owners in the given SCM platform'),
+    allowedProjects: z
+      .array(z.string())
+      .optional()
+      .describe('List of allowed projects in the given SCM platform'),
     allowedRepos: z
       .array(z.string())
       .optional()