Merge pull request #13805 from clemensheithecker/repo-url-picker-azure

feat: Add support for `allowedOrganizations` and `allowedOwners` to the `AzureRepoPicker`

.changeset/tough-hairs-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Add support for `allowedOrganizations` and `allowedOwners` to the `AzureRepoPicker`.

plugins/scaffolder/api-report.md

@@ -225,6 +225,8 @@ export interface RepoUrlPickerUiOptions {
   // (undocumented)
   allowedHosts?: string[];
   // (undocumented)
+  allowedOrganizations?: string[];
+  // (undocumented)
   allowedOwners?: string[];
   // (undocumented)
   allowedRepos?: string[];

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

@@ -20,14 +20,33 @@ 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[];
+  allowedOwners?: string[];
+  rawErrors: string[];
   state: RepoUrlPickerState;
   onChange: (state: RepoUrlPickerState) => void;
-  rawErrors: string[];
 }) => {
-  const { rawErrors, state, onChange } = props;
+  const {
+    allowedOrganizations = [],
+    allowedOwners = [],
+    rawErrors,
+    state,
+    onChange,
+  } = props;
+
+  const organizationItems: SelectItem[] = allowedOrganizations
+    ? allowedOrganizations.map(i => ({ label: i, value: i }))
+    : [{ label: 'Loading...', value: 'loading' }];
+
+  const ownerItems: SelectItem[] = allowedOwners
+    ? allowedOwners.map(i => ({ label: i, value: i }))
+    : [{ label: 'Loading...', value: 'loading' }];
+
   const { organization, owner } = state;
+
   return (
     <>
       <FormControl
@@ -35,14 +54,29 @@ 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
+          The Organization that this repo will belong to
         </FormHelperText>
       </FormControl>
       <FormControl
@@ -50,13 +84,30 @@ export const AzureRepoPicker = (props: {
         required
         error={rawErrors?.length > 0 && !owner}
       >
-        <InputLabel htmlFor="ownerInput">Owner</InputLabel>
-        <Input
-          id="ownerInput"
-          onChange={e => onChange({ owner: e.target.value })}
-          value={owner}
-        />
-        <FormHelperText>The Owner that this repo will belong to</FormHelperText>
+        {allowedOwners?.length ? (
+          <Select
+            native
+            label="Owner"
+            onChange={s =>
+              onChange({ owner: String(Array.isArray(s) ? s[0] : s) })
+            }
+            disabled={allowedOwners.length === 1}
+            selected={owner}
+            items={ownerItems}
+          />
+        ) : (
+          <>
+            <InputLabel htmlFor="ownerInput">Project</InputLabel>
+            <Input
+              id="ownerInput"
+              onChange={e => onChange({ owner: e.target.value })}
+              value={owner}
+            />
+          </>
+        )}
+        <FormHelperText>
+          The Project that this repo will belong to
+        </FormHelperText>
       </FormControl>
     </>
   );

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,8 @@ export const RepoUrlPicker = (
       )}
       {hostType === 'azure' && (
         <AzureRepoPicker
+          allowedOrganizations={allowedOrganizations}
+          allowedOwners={allowedOwners}
           rawErrors={rawErrors}
           state={state}
           onChange={updateLocalState}