Add allowedOrganizations selector for Azure host

Signed-off-by: Clemens S. Heithecker <clemens@heithecker.dev>

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

@@ -20,14 +20,21 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
 import { RepoUrlPickerState } from './types';
+import { Select, SelectItem } from '@backstage/core-components';
 
 export const AzureRepoPicker = (props: {
+  allowedOrganizations?: string[];
+  rawErrors: string[];
   state: RepoUrlPickerState;
   onChange: (state: RepoUrlPickerState) => void;
-  rawErrors: string[];
 }) => {
-  const { rawErrors, state, onChange } = props;
+  const { allowedOrganizations = [], rawErrors, state, onChange } = props;
+  const organizationItems: SelectItem[] = allowedOrganizations
+    ? allowedOrganizations.map(i => ({ label: i, value: i }))
+    : [{ label: 'Loading...', value: 'loading' }];
+
   const { organization, owner } = state;
+
   return (
     <>
       <FormControl
@@ -35,12 +42,27 @@ export const AzureRepoPicker = (props: {
         required
         error={rawErrors?.length > 0 && !organization}
       >
-        <InputLabel htmlFor="orgInput">Organization</InputLabel>
-        <Input
-          id="orgInput"
-          onChange={e => onChange({ organization: e.target.value })}
-          value={organization}
-        />
+        {allowedOrganizations?.length ? (
+          <Select
+            native
+            label="Organization"
+            onChange={s =>
+              onChange({ organization: String(Array.isArray(s) ? s[0] : s) })
+            }
+            disabled={allowedOrganizations.length === 1}
+            selected={organization}
+            items={organizationItems}
+          />
+        ) : (
+          <>
+            <InputLabel htmlFor="orgInput">Organization</InputLabel>
+            <Input
+              id="orgInput"
+              onChange={e => onChange({ organization: e.target.value })}
+              value={organization}
+            />
+          </>
+        )}
         <FormHelperText>
           The organization that this repo will belong to
         </FormHelperText>

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

@@ -40,6 +40,7 @@ import { useTemplateSecrets } from '../../secrets';
  */
 export interface RepoUrlPickerUiOptions {
   allowedHosts?: string[];
+  allowedOrganizations?: string[];
   allowedOwners?: string[];
   allowedRepos?: string[];
   requestUserCredentials?: {
@@ -74,6 +75,10 @@ export const RepoUrlPicker = (
     () => uiSchema?.['ui:options']?.allowedHosts ?? [],
     [uiSchema],
   );
+  const allowedOrganizations = useMemo(
+    () => uiSchema?.['ui:options']?.allowedOrganizations ?? [],
+    [uiSchema],
+  );
   const allowedOwners = useMemo(
     () => uiSchema?.['ui:options']?.allowedOwners ?? [],
     [uiSchema],
@@ -88,6 +93,15 @@ export const RepoUrlPicker = (
   }, [state, onChange]);
 
   /* we deal with calling the repo setting here instead of in each components for ease */
+  useEffect(() => {
+    if (allowedOrganizations.length > 0) {
+      setState(prevState => ({
+        ...prevState,
+        organization: allowedOrganizations[0],
+      }));
+    }
+  }, [setState, allowedOrganizations]);
+
   useEffect(() => {
     if (allowedOwners.length > 0) {
       setState(prevState => ({
@@ -183,6 +197,7 @@ export const RepoUrlPicker = (
       )}
       {hostType === 'azure' && (
         <AzureRepoPicker
+          allowedOrganizations={allowedOrganizations}
           rawErrors={rawErrors}
           state={state}
           onChange={updateLocalState}