diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.test.tsx index c11f7a52a8..3f1105badc 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.test.tsx +++ b/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( - , - ); + describe('owner field', () => { + it('renders a select if there is a list of allowed owners', async () => { + const allowedOwners = ['owner1', 'owner2']; + const { findByText } = render( + , + ); - 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( + , + ); + + 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( + , + ); + + expect(getByRole('combobox')).toBeDisabled(); + }); + + it('should display free text if no allowed owners are passed', async () => { + const onOwnerChange = jest.fn(); + const { getAllByRole } = render( + , + ); + + 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( + , + ); + + const repoNameField = getAllByRole('textbox')[1]; + fireEvent.change(repoNameField, { + target: { value: 'my-mock-repo-name' }, + }); + + expect(onRepoNameChange).toHaveBeenCalledWith('my-mock-repo-name'); + }); }); }); diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx index 53126420f3..627027d130 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx +++ b/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[]; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx index 2aecc76fbc..ae76c29555 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx +++ b/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[]; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx index cdce9512a9..68df677274 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx +++ b/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 ( <>