paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 46 Packages Projects Releases Wiki Activity

chore: simplify the contract between the different provider pickers

Browse Source 
Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam
2022-01-13 17:34:59 +01:00
parent 142d65b1d7
commit 7fb125ac07
9 changed files with 121 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/scaffolder/src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx
+13 -18
View File
@@ -1,5 +1,5 @@
/*
* Copyright 2021 The Backstage Authors
* Copyright 2022 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -13,41 +13,36 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import FormControl from '@material-ui/core/FormControl';
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';
export const AzureRepoPicker = ({
onOrgChange,
onOwnerChange,
onRepoNameChange,
rawErrors,
org,
owner,
repoName,
state,
onChange,
}: {
onOrgChange: (org: string) => void;
onOwnerChange: (owner: string) => void;
onRepoNameChange: (name: string) => void;
owner?: string;
org?: string;
repoName?: string;
state: RepoUrlPickerState;
onChange: (state: RepoUrlPickerState) => void;
rawErrors: string[];
}) => {
const { organization, repoName, owner } = state;
return (
<>
<FormControl
margin="normal"
required
error={rawErrors?.length > 0 && !org}
error={rawErrors?.length > 0 && !organization}
>
<InputLabel htmlFor="orgInput">Organization</InputLabel>
<Input
id="orgInput"
onChange={e => onOrgChange(e.target.value)}
value={org}
onChange={e => onChange({ organization: e.target.value })}
value={organization}
/>
<FormHelperText>
The organization that this repo will belong to
@@ -61,7 +56,7 @@ export const AzureRepoPicker = ({
<InputLabel htmlFor="ownerInput">Owner</InputLabel>
<Input
id="ownerInput"
onChange={e => onOwnerChange(e.target.value)}
onChange={e => onChange({ owner: e.target.value })}
value={owner}
/>
<FormHelperText>The Owner that this repo will belong to</FormHelperText>
@@ -74,7 +69,7 @@ export const AzureRepoPicker = ({
<InputLabel htmlFor="repoInput">Repository</InputLabel>
<Input
id="repoInput"
onChange={e => onRepoNameChange(e.target.value)}
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.tsx
+9 -17
View File
@@ -18,26 +18,18 @@ import FormControl from '@material-ui/core/FormControl';
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';
export const BitbucketRepoPicker = ({
onProjectChange,
onWorkspaceChange,
onRepoNameChange,
onChange,
rawErrors,
workspace,
project,
host,
repoName,
state,
}: {
onProjectChange: (owner: string) => void;
onWorkspaceChange: (name: string) => void;
onRepoNameChange: (name: string) => void;
workspace?: string;
project?: string;
repoName?: string;
host: string;
onChange: (state: RepoUrlPickerState) => void;
state: RepoUrlPickerState;
rawErrors: string[];
}) => {
const { host, workspace, project, repoName } = state;
return (
<>
{host === 'bitbucket.org' && (
@@ -49,7 +41,7 @@ export const BitbucketRepoPicker = ({
<InputLabel htmlFor="workspaceInput">Workspace</InputLabel>
<Input
id="workspaceInput"
onChange={e => onWorkspaceChange(e.target.value)}
onChange={e => onChange({ workspace: e.target.value })}
value={workspace}
/>
<FormHelperText>
@@ -65,7 +57,7 @@ export const BitbucketRepoPicker = ({
<InputLabel htmlFor="projectInput">Project</InputLabel>
<Input
id="projectInput"
onChange={e => onProjectChange(e.target.value)}
onChange={e => onChange({ project: e.target.value })}
value={project}
/>
<FormHelperText>
@@ -80,7 +72,7 @@ export const BitbucketRepoPicker = ({
<InputLabel htmlFor="repoInput">Repository</InputLabel>
<Input
id="repoInput"
onChange={e => onRepoNameChange(e.target.value)}
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.test.tsx
+18 -24
View File
@@ -24,10 +24,9 @@ describe('GitubRepoPicker', () => {
const allowedOwners = ['owner1', 'owner2'];
const { findByText } = render(
<GithubRepoPicker
onOwnerChange={jest.fn()}
onRepoNameChange={jest.fn()}
onChange={jest.fn()}
rawErrors={[]}
repoName="repo"
state={{ repoName: 'repo' }}
allowedOwners={allowedOwners}
/>,
);
@@ -36,15 +35,14 @@ describe('GitubRepoPicker', () => {
expect(await findByText('owner2')).toBeInTheDocument();
});
it('calls onOwnerChange when the owner is changed to a different owner', async () => {
const onOwnerChange = jest.fn();
it('calls onChange when the owner is changed to a different owner', async () => {
const onChange = jest.fn();
const allowedOwners = ['owner1', 'owner2'];
const { getByRole } = render(
<GithubRepoPicker
onOwnerChange={onOwnerChange}
onRepoNameChange={jest.fn()}
onChange={onChange}
rawErrors={[]}
repoName="repo"
state={{ repoName: 'repo' }}
allowedOwners={allowedOwners}
/>,
);
@@ -53,18 +51,17 @@ describe('GitubRepoPicker', () => {
target: { value: 'owner2' },
});
expect(onOwnerChange).toHaveBeenCalledWith('owner2');
expect(onChange).toHaveBeenCalledWith({ owner: 'owner2' });
});
it('is disabled picked when only one allowed owner', () => {
const onOwnerChange = jest.fn();
const onChange = jest.fn();
const allowedOwners = ['owner1'];
const { getByRole } = render(
<GithubRepoPicker
onOwnerChange={onOwnerChange}
onRepoNameChange={jest.fn()}
onChange={onChange}
rawErrors={[]}
repoName="repo"
state={{ repoName: 'repo' }}
allowedOwners={allowedOwners}
/>,
);
@@ -73,32 +70,29 @@ describe('GitubRepoPicker', () => {
});
it('should display free text if no allowed owners are passed', async () => {
const onOwnerChange = jest.fn();
const onChange = jest.fn();
const { getAllByRole } = render(
<GithubRepoPicker
onOwnerChange={onOwnerChange}
onRepoNameChange={jest.fn()}
onChange={onChange}
rawErrors={[]}
repoName="repo"
state={{ repoName: 'repo' }}
/>,
);
const ownerField = getAllByRole('textbox')[0];
fireEvent.change(ownerField, { target: { value: 'my-mock-owner' } });
expect(onOwnerChange).toHaveBeenCalledWith('my-mock-owner');
expect(onChange).toHaveBeenCalledWith({ owner: 'my-mock-owner' });
});
});
describe('repo name', () => {
it('should render free text field for input of repo name', () => {
const onRepoNameChange = jest.fn();
const onChange = jest.fn();
const { getAllByRole } = render(
<GithubRepoPicker
onOwnerChange={jest.fn()}
onRepoNameChange={onRepoNameChange}
onChange={onChange}
rawErrors={[]}
repoName="repo"
state={{ repoName: 'repo' }}
/>,
);
@@ -107,7 +101,7 @@ describe('GitubRepoPicker', () => {
target: { value: 'my-mock-repo-name' },
});
expect(onRepoNameChange).toHaveBeenCalledWith('my-mock-repo-name');
expect(onChange).toHaveBeenCalledWith({ repoName: 'my-mock-repo-name' });
});
});
});
plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx
+12 -11
View File
@@ -19,26 +19,25 @@ import FormHelperText from '@material-ui/core/FormHelperText';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import { Select, SelectItem } from '@backstage/core-components';
import { RepoUrlPickerState } from './types';
export const GithubRepoPicker = ({
onOwnerChange,
onRepoNameChange,
allowedOwners = [],
rawErrors,
owner,
repoName,
state,
onChange,
}: {
onOwnerChange: (owner: string) => void;
onRepoNameChange: (name: string) => void;
allowedOwners?: string[];
owner?: string;
repoName?: string;
rawErrors: string[];
state: RepoUrlPickerState;
onChange: (state: RepoUrlPickerState) => void;
}) => {
const ownerItems: SelectItem[] = allowedOwners
? allowedOwners.map(i => ({ label: i, value: i }))
: [{ label: 'Loading...', value: 'loading' }];
const { owner, repoName } = state;
return (
<>
<FormControl
@@ -50,7 +49,9 @@ export const GithubRepoPicker = ({
<Select
native
label="Owner Available"
onChange={s => onOwnerChange(String(Array.isArray(s) ? s[0] : s))}
onChange={s =>
onChange({ owner: String(Array.isArray(s) ? s[0] : s) })
}
disabled={allowedOwners.length === 1}
selected={owner}
items={ownerItems}
@@ -60,7 +61,7 @@ export const GithubRepoPicker = ({
<InputLabel htmlFor="ownerInput">Owner</InputLabel>
<Input
id="ownerInput"
onChange={e => onOwnerChange(e.target.value)}
onChange={e => onChange({ owner: e.target.value })}
value={owner}
/>
</>
@@ -77,7 +78,7 @@ export const GithubRepoPicker = ({
<InputLabel htmlFor="repoInput">Repository</InputLabel>
<Input
id="repoInput"
onChange={e => onRepoNameChange(e.target.value)}
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx
+14 -11
View File
@@ -19,26 +19,25 @@ import FormHelperText from '@material-ui/core/FormHelperText';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import { Select, SelectItem } from '@backstage/core-components';
import { RepoUrlPickerState } from './types';
export const GitlabRepoPicker = ({
onOwnerChange,
onRepoNameChange,
allowedOwners = [],
rawErrors,
owner,
repoName,
state,
onChange,
}: {
onOwnerChange: (owner: string) => void;
onRepoNameChange: (name: string) => void;
allowedOwners?: string[];
owner?: string;
repoName?: string;
state: RepoUrlPickerState;
onChange: (state: RepoUrlPickerState) => void;
rawErrors: string[];
}) => {
const ownerItems: SelectItem[] = allowedOwners
? allowedOwners.map(i => ({ label: i, value: i }))
: [{ label: 'Loading...', value: 'loading' }];
const { owner, repoName } = state;
return (
<>
<FormControl
@@ -50,7 +49,11 @@ export const GitlabRepoPicker = ({
<Select
native
label="Owner Available"
onChange={s => onOwnerChange(String(Array.isArray(s) ? s[0] : s))}
onChange={selected =>
onChange({
owner: String(Array.isArray(selected) ? selected[0] : selected),
})
}
disabled={allowedOwners.length === 1}
selected={owner}
items={ownerItems}
@@ -60,7 +63,7 @@ export const GitlabRepoPicker = ({
<InputLabel htmlFor="ownerInput">Owner</InputLabel>
<Input
id="ownerInput"
onChange={e => onOwnerChange(e.target.value)}
onChange={e => onChange({ owner: e.target.value })}
value={owner}
/>
</>
@@ -77,7 +80,7 @@ export const GitlabRepoPicker = ({
<InputLabel htmlFor="repoInput">Repository</InputLabel>
<Input
id="repoInput"
onChange={e => onRepoNameChange(e.target.value)}
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
+21 -51
View File
@@ -15,7 +15,7 @@
*/
import { useApi } from '@backstage/core-plugin-api';
import { scmIntegrationsApiRef } from '@backstage/integration-react';
import React, { useEffect, useState, useMemo } from 'react';
import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { GithubRepoPicker } from './GithubRepoPicker';
import { GitlabRepoPicker } from './GitlabRepoPicker';
import { AzureRepoPicker } from './AzureRepoPicker';
@@ -23,6 +23,7 @@ import { BitbucketRepoPicker } from './BitbucketRepoPicker';
import { FieldExtensionComponentProps } from '../../../extensions';
import { RepoUrlPickerHost } from './RepoUrlPickerHost';
import { parseRepoPickerUrl, serializeRepoPickerUrl } from './utils';
import { RepoUrlPickerState } from './types';
export interface RepoUrlPickerUiOptions {
allowedHosts?: string[];
@@ -35,14 +36,9 @@ export const RepoUrlPicker = ({
rawErrors,
formData,
}: FieldExtensionComponentProps<string, RepoUrlPickerUiOptions>) => {
const [state, setState] = useState<{
host?: string;
owner?: string;
repo?: string;
organization?: string;
workspace?: string;
project?: string;
}>(parseRepoPickerUrl(formData));
const [state, setState] = useState<RepoUrlPickerState>(
parseRepoPickerUrl(formData),
);
const integrationApi = useApi(scmIntegrationsApiRef);
const allowedHosts = uiSchema?.['ui:options']?.allowedHosts ?? [];
@@ -62,76 +58,50 @@ export const RepoUrlPicker = ({
}
}, [setState, allowedOwners]);
const updateLocalState = useCallback(
(newState: RepoUrlPickerState) => {
setState(prevState => ({ ...prevState, ...newState }));
},
[setState],
);
return (
<>
<RepoUrlPickerHost
host={state.host}
hosts={allowedHosts}
onChange={host => setState({ host })}
onChange={host => setState(prevState => ({ ...prevState, host }))}
rawErrors={rawErrors}
/>
{state.host && integrationApi.byHost(state.host)?.type === 'github' && (
<GithubRepoPicker
allowedOwners={allowedOwners}
rawErrors={rawErrors}
owner={state.owner}
repoName={state.repo}
onRepoNameChange={repo =>
setState(prevState => ({ ...prevState, repo }))
}
onOwnerChange={owner =>
setState(prevState => ({ ...prevState, owner }))
}
state={state}
onChange={updateLocalState}
/>
)}
{state.host && integrationApi.byHost(state.host)?.type === 'gitlab' && (
<GitlabRepoPicker
allowedOwners={allowedOwners}
rawErrors={rawErrors}
owner={state.owner}
repoName={state.repo}
onRepoNameChange={repo =>
setState(prevState => ({ ...prevState, repo }))
}
onOwnerChange={owner =>
setState(prevState => ({ ...prevState, owner }))
}
state={state}
onChange={updateLocalState}
/>
)}
{state.host &&
integrationApi.byHost(state.host)?.type === 'bitbucket' && (
<BitbucketRepoPicker
rawErrors={rawErrors}
host={state.host}
project={state.project}
workspace={state.workspace}
repoName={state.repo}
onRepoNameChange={repo =>
setState(prevState => ({ ...prevState, repo }))
}
onProjectChange={project =>
setState(prevState => ({ ...prevState, project }))
}
onWorkspaceChange={workspace =>
setState(prevState => ({ ...prevState, workspace }))
}
state={state}
onChange={updateLocalState}
/>
)}
{state.host && integrationApi.byHost(state.host)?.type === 'azure' && (
<AzureRepoPicker
rawErrors={rawErrors}
org={state.organization}
repoName={state.repo}
owner={state.owner}
onOwnerChange={owner =>
setState(prevState => ({ ...prevState, owner }))
}
onRepoNameChange={repo =>
setState(prevState => ({ ...prevState, repo }))
}
onOrgChange={org =>
setState(prevState => ({ ...prevState, organization: org }))
}
state={state}
onChange={updateLocalState}
/>
)}
</>
plugins/scaffolder/src/components/fields/RepoUrlPicker/types.ts
+23
View File
@@ -0,0 +1,23 @@
/*
* Copyright 2022 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export interface RepoUrlPickerState {
host?: string;
owner?: string;
repoName?: string;
organization?: string;
workspace?: string;
project?: string;
}
plugins/scaffolder/src/components/fields/RepoUrlPicker/utils.test.ts
+3 -3
View File
@@ -26,7 +26,7 @@ describe('utils', () => {
serializeRepoPickerUrl({
host: 'github.com',
owner: 'owner',
repo: 'backstage',
repoName: 'backstage',
}),
).toBe('github.com?owner=owner&repo=backstage');
});
@@ -49,7 +49,7 @@ describe('utils', () => {
serializeRepoPickerUrl({
host: 'github.com',
owner: 'owner',
repo: 'backstage',
repoName: 'backstage',
organization: 'organization',
workspace: 'workspace',
project: 'backstage',
@@ -69,7 +69,7 @@ describe('utils', () => {
).toEqual({
host: 'github.com',
owner: 'owner',
repo: 'backstage',
repoName: 'backstage',
organization: 'organization',
workspace: 'workspace',
project: 'backstage',
plugins/scaffolder/src/components/fields/RepoUrlPicker/utils.ts
+8 -15
View File
@@ -14,16 +14,9 @@
* limitations under the License.
*/
type RepoUrlPickerOptions = {
host?: string;
owner?: string;
repo?: string;
organization?: string;
workspace?: string;
project?: string;
};
import { RepoUrlPickerState } from './types';
export function serializeRepoPickerUrl(data: RepoUrlPickerOptions) {
export function serializeRepoPickerUrl(data: RepoUrlPickerState) {
if (!data.host) {
return undefined;
}
@@ -32,8 +25,8 @@ export function serializeRepoPickerUrl(data: RepoUrlPickerOptions) {
if (data.owner) {
params.set('owner', data.owner);
}
if (data.repo) {
params.set('repo', data.repo);
if (data.repoName) {
params.set('repo', data.repoName);
}
if (data.organization) {
params.set('organization', data.organization);
@@ -50,10 +43,10 @@ export function serializeRepoPickerUrl(data: RepoUrlPickerOptions) {
export function parseRepoPickerUrl(
url: string | undefined,
): RepoUrlPickerOptions {
): RepoUrlPickerState {
let host = undefined;
let owner = undefined;
let repo = undefined;
let repoName = undefined;
let organization = undefined;
let workspace = undefined;
let project = undefined;
@@ -63,7 +56,7 @@ export function parseRepoPickerUrl(
const parsed = new URL(`https://${url}`);
host = parsed.host;
owner = parsed.searchParams.get('owner') || undefined;
repo = parsed.searchParams.get('repo') || undefined;
repoName = parsed.searchParams.get('repo') || undefined;
organization = parsed.searchParams.get('organization') || undefined;
workspace = parsed.searchParams.get('workspace') || undefined;
project = parsed.searchParams.get('project') || undefined;
@@ -72,5 +65,5 @@ export function parseRepoPickerUrl(
/* ok */
}
return { host, owner, repo, organization, workspace, project };
return { host, owner, repoName, organization, workspace, project };
}