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

Add allowedRepos Option and move Repo Field to own Component

Browse Source 
Signed-off-by: Maximilian Ressel <maximiliandotressel@gmail.com>
This commit is contained in:
Maximilian Ressel
2022-05-31 16:08:50 +02:00
committed by Maixmilian Ressel
parent 43bf3ae171
commit 8ebc1dea21
7 changed files with 103 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/scaffolder/src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx
+1 -14
View File
@@ -27,7 +27,7 @@ export const AzureRepoPicker = (props: {
rawErrors: string[];
}) => {
const { rawErrors, state, onChange } = props;
const { organization, repoName, owner } = state;
const { organization, owner } = state;
return (
<>
<FormControl
@@ -58,19 +58,6 @@ export const AzureRepoPicker = (props: {
/>
<FormHelperText>The Owner that this repo will belong to</FormHelperText>
</FormControl>
<FormControl
margin="normal"
required
error={rawErrors?.length > 0 && !repoName}
>
<InputLabel htmlFor="repoNameInput">Repository</InputLabel>
<Input
id="repoNameInput"
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
</FormControl>
</>
);
};
plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.tsx
+1 -14
View File
@@ -26,7 +26,7 @@ export const BitbucketRepoPicker = (props: {
rawErrors: string[];
}) => {
const { onChange, rawErrors, state } = props;
const { host, workspace, project, repoName } = state;
const { host, workspace, project } = state;
return (
<>
{host === 'bitbucket.org' && (
@@ -61,19 +61,6 @@ export const BitbucketRepoPicker = (props: {
The Project that this repo will belong to
</FormHelperText>
</FormControl>
<FormControl
margin="normal"
required
error={rawErrors?.length > 0 && !repoName}
>
<InputLabel htmlFor="repoNameInput">Repository</InputLabel>
<Input
id="repoNameInput"
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
</FormControl>
</>
);
};
plugins/scaffolder/src/components/fields/RepoUrlPicker/GerritRepoPicker.tsx
+1 -14
View File
@@ -26,7 +26,7 @@ export const GerritRepoPicker = (props: {
rawErrors: string[];
}) => {
const { onChange, rawErrors, state } = props;
const { workspace, repoName, owner } = state;
const { workspace, owner } = state;
return (
<>
<FormControl
@@ -57,19 +57,6 @@ export const GerritRepoPicker = (props: {
The project parent that the repo will belong to
</FormHelperText>
</FormControl>
<FormControl
margin="normal"
required
error={rawErrors?.length > 0 && !repoName}
>
<InputLabel htmlFor="repoNameInput">Repository</InputLabel>
<Input
id="repoNameInput"
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
</FormControl>
</>
);
};
plugins/scaffolder/src/components/fields/RepoUrlPicker/GithubRepoPicker.tsx
+1 -14
View File
@@ -32,7 +32,7 @@ export const GithubRepoPicker = (props: {
? allowedOwners.map(i => ({ label: i, value: i }))
: [{ label: 'Loading...', value: 'loading' }];
const { owner, repoName } = state;
const { owner } = state;
return (
<>
@@ -66,19 +66,6 @@ export const GithubRepoPicker = (props: {
The organization, user or project that this repo will belong to
</FormHelperText>
</FormControl>
<FormControl
margin="normal"
required
error={rawErrors?.length > 0 && !repoName}
>
<InputLabel htmlFor="repoNameInput">Repository</InputLabel>
<Input
id="repoNameInput"
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
</FormControl>
</>
);
};
plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx
+3 -15
View File
@@ -23,16 +23,17 @@ import { RepoUrlPickerState } from './types';
export const GitlabRepoPicker = (props: {
allowedOwners?: string[];
allowedRepos?: string[];
state: RepoUrlPickerState;
onChange: (state: RepoUrlPickerState) => void;
rawErrors: string[];
}) => {
const { allowedOwners = [], rawErrors, state, onChange } = props;
const { allowedOwners = [], state, onChange, rawErrors } = props;
const ownerItems: SelectItem[] = allowedOwners
? allowedOwners.map(i => ({ label: i, value: i }))
: [{ label: 'Loading...', value: 'loading' }];
const { owner, repoName } = state;
const { owner } = state;
return (
<>
@@ -69,19 +70,6 @@ export const GitlabRepoPicker = (props: {
namespaces in gitlab), that this repo will belong to
</FormHelperText>
</FormControl>
<FormControl
margin="normal"
required
error={rawErrors?.length > 0 && !repoName}
>
<InputLabel htmlFor="repoNameInput">Repository</InputLabel>
<Input
id="repoNameInput"
onChange={e => onChange({ repoName: e.target.value })}
value={repoName}
/>
<FormHelperText>The name of the repository</FormHelperText>
</FormControl>
</>
);
};
plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
+19
View File
@@ -26,6 +26,7 @@ import { BitbucketRepoPicker } from './BitbucketRepoPicker';
import { GerritRepoPicker } from './GerritRepoPicker';
import { FieldExtensionComponentProps } from '../../../extensions';
import { RepoUrlPickerHost } from './RepoUrlPickerHost';
import { RepoUrlPickerRepoName } from './RepoUrlPickerRepoName';
import { parseRepoPickerUrl, serializeRepoPickerUrl } from './utils';
import { RepoUrlPickerState } from './types';
import useDebounce from 'react-use/lib/useDebounce';
@@ -40,6 +41,7 @@ import { useTemplateSecrets } from '../../secrets';
export interface RepoUrlPickerUiOptions {
allowedHosts?: string[];
allowedOwners?: string[];
allowedRepos?: string[];
requestUserCredentials?: {
secretsKey: string;
additionalScopes?: {
@@ -76,6 +78,10 @@ export const RepoUrlPicker = (
() => uiSchema?.['ui:options']?.allowedOwners ?? [],
[uiSchema],
);
const allowedRepos = useMemo(
() => uiSchema?.['ui:options']?.allowedRepos ?? [],
[uiSchema],
);
useEffect(() => {
onChange(serializeRepoPickerUrl(state));
@@ -87,6 +93,11 @@ export const RepoUrlPicker = (
setState(prevState => ({ ...prevState, owner: allowedOwners[0] }));
}
}, [setState, allowedOwners]);
useEffect(() => {
if (allowedRepos.length === 1) {
setState(prevState => ({ ...prevState, repoName: allowedRepos[0] }));
}
}, [setState, allowedRepos]);
const updateLocalState = useCallback(
(newState: RepoUrlPickerState) => {
@@ -179,6 +190,14 @@ export const RepoUrlPicker = (
onChange={updateLocalState}
/>
)}
<RepoUrlPickerRepoName
repoName={state.repoName}
allowedRepos={allowedRepos}
onChange={repoName =>
setState(prevState => ({ ...prevState, repoName }))
}
rawErrors={rawErrors}
/>
</>
);
};
plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx
+77
View File
@@ -0,0 +1,77 @@
/*
* Copyright 2021 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.
*/
import React, { useEffect } from 'react';
import { Select, SelectItem } from '@backstage/core-components';
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';
export const RepoUrlPickerRepoName = (props: {
repoName?: string;
allowedRepos?: string[];
onChange: (host: string) => void;
rawErrors: string[];
}) => {
const { repoName, allowedRepos, onChange, rawErrors } = props;
useEffect(() => {
// If there is no repoName chosen currently
if (!repoName) {
// Set the first of the allowedRepos option if that available
if (allowedRepos?.length) {
onChange(allowedRepos[0]);
}
}
}, [allowedRepos, repoName, onChange]);
const repoItems: SelectItem[] = allowedRepos
? allowedRepos.map(i => ({ label: i, value: i }))
: [{ label: 'Loading...', value: 'loading' }];
return (
<>
<FormControl
margin="normal"
required
error={rawErrors?.length > 0 && !repoName}
>
{allowedRepos?.length ? (
<Select
native
label="Repositories Available"
onChange={selected =>
onChange(String(Array.isArray(selected) ? selected[0] : selected))
}
disabled={allowedRepos.length === 1}
selected={repoName}
items={repoItems}
/>
) : (
<>
<InputLabel htmlFor="repoNameInput">Repository</InputLabel>
<Input
id="repoNameInput"
onChange={e => onChange(String(e.target.value))}
value={repoName}
/>
</>
)}
<FormHelperText>The name of the repository</FormHelperText>
</FormControl>
</>
);
};