chore: reworking tests and fixing up some of the types for the repo pickers

Signed-off-by: blam <ben@blam.sh>

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

@@ -16,22 +16,98 @@
 
 import React from 'react';
 import { GithubRepoPicker } from './GithubRepoPicker';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 describe('GitubRepoPicker', () => {
-  it('renders a select if there is a list of allowed owners', async () => {
-    const allowedOwners = ['owner1', 'owner2'];
-    const { findByText } = render(
-      <GithubRepoPicker
-        onOwnerChange={jest.fn()}
-        onRepoNameChange={jest.fn()}
-        rawErrors={[]}
-        repoName="repo"
-        allowedOwners={allowedOwners}
-      />,
-    );
+  describe('owner field', () => {
+    it('renders a select if there is a list of allowed owners', async () => {
+      const allowedOwners = ['owner1', 'owner2'];
+      const { findByText } = render(
+        <GithubRepoPicker
+          onOwnerChange={jest.fn()}
+          onRepoNameChange={jest.fn()}
+          rawErrors={[]}
+          repoName="repo"
+          allowedOwners={allowedOwners}
+        />,
+      );
 
-    expect(await findByText('owner1')).toBeInTheDocument();
-    expect(await findByText('owner2')).toBeInTheDocument();
+      expect(await findByText('owner1')).toBeInTheDocument();
+      expect(await findByText('owner2')).toBeInTheDocument();
+    });
+
+    it('calls onOwnerChange when the owner is changed to a different owner', async () => {
+      const onOwnerChange = jest.fn();
+      const allowedOwners = ['owner1', 'owner2'];
+      const { getByRole } = render(
+        <GithubRepoPicker
+          onOwnerChange={onOwnerChange}
+          onRepoNameChange={jest.fn()}
+          rawErrors={[]}
+          repoName="repo"
+          allowedOwners={allowedOwners}
+        />,
+      );
+
+      await fireEvent.change(getByRole('combobox'), {
+        target: { value: 'owner2' },
+      });
+
+      expect(onOwnerChange).toHaveBeenCalledWith('owner2');
+    });
+
+    it('is disabled picked when only one allowed owner', () => {
+      const onOwnerChange = jest.fn();
+      const allowedOwners = ['owner1'];
+      const { getByRole } = render(
+        <GithubRepoPicker
+          onOwnerChange={onOwnerChange}
+          onRepoNameChange={jest.fn()}
+          rawErrors={[]}
+          repoName="repo"
+          allowedOwners={allowedOwners}
+        />,
+      );
+
+      expect(getByRole('combobox')).toBeDisabled();
+    });
+
+    it('should display free text if no allowed owners are passed', async () => {
+      const onOwnerChange = jest.fn();
+      const { getAllByRole } = render(
+        <GithubRepoPicker
+          onOwnerChange={onOwnerChange}
+          onRepoNameChange={jest.fn()}
+          rawErrors={[]}
+          repoName="repo"
+        />,
+      );
+
+      const ownerField = getAllByRole('textbox')[0];
+      fireEvent.change(ownerField, { target: { value: 'my-mock-owner' } });
+
+      expect(onOwnerChange).toHaveBeenCalledWith('my-mock-owner');
+    });
+  });
+
+  describe('repo name', () => {
+    it('should render free text field for input of repo name', () => {
+      const onRepoNameChange = jest.fn();
+      const { getAllByRole } = render(
+        <GithubRepoPicker
+          onOwnerChange={jest.fn()}
+          onRepoNameChange={onRepoNameChange}
+          rawErrors={[]}
+          repoName="repo"
+        />,
+      );
+
+      const repoNameField = getAllByRole('textbox')[1];
+      fireEvent.change(repoNameField, {
+        target: { value: 'my-mock-repo-name' },
+      });
+
+      expect(onRepoNameChange).toHaveBeenCalledWith('my-mock-repo-name');
+    });
   });
 });

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

@@ -30,7 +30,7 @@ export const GithubRepoPicker = ({
 }: {
   onOwnerChange: (owner: string) => void;
   onRepoNameChange: (name: string) => void;
-  allowedOwners: string[];
+  allowedOwners?: string[];
   owner?: string;
   repoName?: string;
   rawErrors: string[];

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

@@ -30,7 +30,7 @@ export const GitlabRepoPicker = ({
 }: {
   onOwnerChange: (owner: string) => void;
   onRepoNameChange: (name: string) => void;
-  allowedOwners: string[];
+  allowedOwners?: string[];
   owner?: string;
   repoName?: string;
   rawErrors: string[];

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

@@ -15,7 +15,7 @@
  */
 import { useApi } from '@backstage/core-plugin-api';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { GithubRepoPicker } from './GithubRepoPicker';
 import { GitlabRepoPicker } from './GitlabRepoPicker';
 import { AzureRepoPicker } from './AzureRepoPicker';
@@ -46,12 +46,22 @@ export const RepoUrlPicker = ({
   const integrationApi = useApi(scmIntegrationsApiRef);
 
   const allowedHosts = uiSchema?.['ui:options']?.allowedHosts ?? [];
-  const allowedOwners = uiSchema?.['ui:options']?.allowedOwners ?? [];
+  const allowedOwners = useMemo(
+    () => uiSchema?.['ui:options']?.allowedOwners ?? [],
+    [uiSchema],
+  );
 
   useEffect(() => {
     onChange(serializeRepoPickerUrl(state));
   }, [state, onChange]);
 
+  /* we deal with calling the repo setting here instead of in each components for ease */
+  useEffect(() => {
+    if (allowedOwners.length === 1) {
+      setState(prevState => ({ ...prevState, owner: allowedOwners[0] }));
+    }
+  }, [setState, allowedOwners]);
+
   return (
     <>
       <RepoUrlPickerHost