This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 4f426a960 fix(config-ui): some bugs for connection (#4472)
4f426a960 is described below
commit 4f426a960489c5b1e8ef8ab2ecc9ed6fed819aac
Author: 青湛 <[email protected]>
AuthorDate: Tue Feb 21 16:04:08 2023 +0800
fix(config-ui): some bugs for connection (#4472)
* fix(config-ui): bitbucket missed initial endpoint
* refactor(config-ui): adjust the sort for tapd and zentao
* refactor(config-ui): standardize connection props
* fix(config-ui): adjust the password input type
---
.../components/connection-form/fields/endpoint.tsx | 1 -
.../components/connection-form/fields/index.tsx | 84 +++++-----------------
.../components/connection-form/fields/name.tsx | 1 +
.../components/connection-form/fields/password.tsx | 11 ++-
.../components/connection-form/fields/proxy.tsx | 2 +
.../connection-form/fields/rate-limit.tsx | 3 +
.../components/connection-form/fields/token.tsx | 9 ++-
.../components/connection-form/fields/username.tsx | 9 ++-
.../src/plugins/register/bitbucket/config.tsx | 3 +
config-ui/src/plugins/register/tapd/config.ts | 2 +-
config-ui/src/plugins/register/zentao/config.ts | 2 +-
11 files changed, 54 insertions(+), 73 deletions(-)
diff --git
a/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
b/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
index a0906b872..ae5376bd4 100644
--- a/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
@@ -59,7 +59,6 @@ export const ConnectionEndpoint = ({
multipleVersions,
initialValue,
value,
- error,
setValue,
setError,
}: Props) => {
diff --git a/config-ui/src/plugins/components/connection-form/fields/index.tsx
b/config-ui/src/plugins/components/connection-form/fields/index.tsx
index 0cad52dba..74027e33f 100644
--- a/config-ui/src/plugins/components/connection-form/fields/index.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/index.tsx
@@ -40,6 +40,17 @@ export const Form = ({ name, fields, initialValues, values,
errors, setValues, s
const onValues = (values: any) => setValues((prev: any) => ({ ...prev,
...values }));
const onErrors = (values: any) => setErrors((prev: any) => ({ ...prev,
...values }));
+ const getProps = (key: string, defaultValue: any = '') => {
+ return {
+ name,
+ initialValue: initialValues[key] ?? defaultValue,
+ value: values[key] ?? defaultValue,
+ error: errors[key] ?? defaultValue,
+ setValue: (value: any) => onValues({ [key]: value }),
+ setError: (value: any) => onErrors({ [key]: value }),
+ };
+ };
+
const generateForm = () => {
return fields.map((field) => {
if (typeof field === 'function') {
@@ -56,78 +67,19 @@ export const Form = ({ name, fields, initialValues, values,
errors, setValues, s
switch (key) {
case 'name':
- return (
- <ConnectionName
- key={key}
- initialValue={initialValues.name ?? ''}
- value={values.name ?? ''}
- error={errors.name ?? ''}
- setValue={(value) => onValues({ name: value })}
- setError={(value) => onErrors({ name: value })}
- />
- );
+ return <ConnectionName key={key} {...getProps('name')} {...field} />;
case 'endpoint':
- return (
- <ConnectionEndpoint
- {...field}
- key={key}
- name={name}
- initialValue={initialValues.endpoint ?? ''}
- value={values.endpoint ?? ''}
- error={errors.endpoint ?? ''}
- setValue={(value) => onValues({ endpoint: value })}
- setError={(value) => onErrors({ endpoint: value })}
- />
- );
+ return <ConnectionEndpoint key={key} {...getProps('endpoint')}
{...field} />;
case 'username':
- return (
- <ConnectionUsername
- key={key}
- initialValue={initialValues.username ?? ''}
- value={values.username ?? ''}
- setValue={(value) => onValues({ username: value })}
- />
- );
+ return <ConnectionUsername key={key} {...getProps('username')}
{...field} />;
case 'password':
- return (
- <ConnectionPassword
- {...field}
- key={key}
- initialValue={initialValues.password ?? ''}
- value={values.password ?? ''}
- setValue={(value) => onValues({ password: value })}
- />
- );
+ return <ConnectionPassword key={key} {...getProps('password')}
{...field} />;
case 'token':
- return (
- <ConnectionToken
- {...field}
- key={key}
- initialValue={initialValues.token ?? ''}
- value={values.token ?? ''}
- setValue={(value) => onValues({ token: value })}
- />
- );
+ return <ConnectionToken key={key} {...getProps('token')} {...field}
/>;
case 'proxy':
- return (
- <ConnectionProxy
- key={key}
- name={name}
- initialValue={initialValues.proxy ?? ''}
- value={values.proxy ?? ''}
- setValue={(value) => onValues({ proxy: value })}
- />
- );
+ return <ConnectionProxy key={key} {...getProps('proxy')} {...field}
/>;
case 'rateLimitPerHour':
- return (
- <ConnectionRateLimit
- {...field}
- key={key}
- initialValue={initialValues.rateLimitPerHour ?? 0}
- value={values.rateLimitPerHour}
- setValue={(value) => onValues({ rateLimitPerHour: value })}
- />
- );
+ return <ConnectionRateLimit key={key}
{...getProps('rateLimitPerHour', 0)} {...field} />;
default:
return null;
}
diff --git a/config-ui/src/plugins/components/connection-form/fields/name.tsx
b/config-ui/src/plugins/components/connection-form/fields/name.tsx
index d8d970cfc..ab299e285 100644
--- a/config-ui/src/plugins/components/connection-form/fields/name.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/name.tsx
@@ -22,6 +22,7 @@ import { FormGroup, InputGroup } from '@blueprintjs/core';
import * as S from './styled';
interface Props {
+ name: string;
initialValue: string;
value: string;
error: string;
diff --git
a/config-ui/src/plugins/components/connection-form/fields/password.tsx
b/config-ui/src/plugins/components/connection-form/fields/password.tsx
index 35d9eea3c..6be3ed07d 100644
--- a/config-ui/src/plugins/components/connection-form/fields/password.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/password.tsx
@@ -40,23 +40,30 @@ import * as S from './styled';
interface Props {
label?: string;
+ name: string;
initialValue: string;
value: string;
+ error: string;
setValue: (value: string) => void;
+ setError: (value: string) => void;
}
-export const ConnectionPassword = ({ label, initialValue, value, setValue }:
Props) => {
+export const ConnectionPassword = ({ label, initialValue, value, setValue,
setError }: Props) => {
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
+ useEffect(() => {
+ setError(value ? '' : 'password is required');
+ }, [value]);
+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
return (
<FormGroup label={<S.Label>{label ?? 'Password'}</S.Label>}
labelInfo={<S.LabelInfo>*</S.LabelInfo>}>
- <InputGroup placeholder="Your Password" value={value}
onChange={handleChange} />
+ <InputGroup type="password" placeholder="Your Password" value={value}
onChange={handleChange} />
</FormGroup>
);
};
diff --git a/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
b/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
index 868de21b5..7924309f9 100644
--- a/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
@@ -42,7 +42,9 @@ interface Props {
name: string;
initialValue: string;
value: string;
+ error: string;
setValue: (value: string) => void;
+ setError: (value: string) => void;
}
export const ConnectionProxy = ({ name, initialValue, value, setValue }:
Props) => {
diff --git
a/config-ui/src/plugins/components/connection-form/fields/rate-limit.tsx
b/config-ui/src/plugins/components/connection-form/fields/rate-limit.tsx
index 2606f02cd..a92e72a4d 100644
--- a/config-ui/src/plugins/components/connection-form/fields/rate-limit.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/rate-limit.tsx
@@ -45,9 +45,12 @@ interface Props {
learnMore: string;
externalInfo: string;
defaultValue: number;
+ name: string;
initialValue: number;
value: number;
+ error: string;
setValue: (value: number) => void;
+ setError: (value: string) => void;
}
export const ConnectionRateLimit = ({
diff --git a/config-ui/src/plugins/components/connection-form/fields/token.tsx
b/config-ui/src/plugins/components/connection-form/fields/token.tsx
index 9c070c3fd..ff48ee9cb 100644
--- a/config-ui/src/plugins/components/connection-form/fields/token.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/token.tsx
@@ -41,16 +41,23 @@ import * as S from './styled';
interface Props {
label?: string;
subLabel?: string;
+ name: string;
initialValue: string;
value: string;
+ error: string;
setValue: (value: string) => void;
+ setError: (value: string) => void;
}
-export const ConnectionToken = ({ label, subLabel, initialValue, value,
setValue }: Props) => {
+export const ConnectionToken = ({ label, subLabel, initialValue, value,
setValue, setError }: Props) => {
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
+ useEffect(() => {
+ setError(value ? '' : 'token is required');
+ }, [value]);
+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
diff --git
a/config-ui/src/plugins/components/connection-form/fields/username.tsx
b/config-ui/src/plugins/components/connection-form/fields/username.tsx
index 23ae9d21c..9389fe292 100644
--- a/config-ui/src/plugins/components/connection-form/fields/username.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/username.tsx
@@ -39,16 +39,23 @@ import { FormGroup, InputGroup } from '@blueprintjs/core';
import * as S from './styled';
interface Props {
+ name: string;
initialValue: string;
value: string;
+ error: string;
setValue: (value: string) => void;
+ setError: (error: string) => void;
}
-export const ConnectionUsername = ({ initialValue, value, setValue }: Props)
=> {
+export const ConnectionUsername = ({ initialValue, value, setValue, setError
}: Props) => {
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
+ useEffect(() => {
+ setError(value ? '' : 'username is required');
+ }, [value]);
+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
diff --git a/config-ui/src/plugins/register/bitbucket/config.tsx
b/config-ui/src/plugins/register/bitbucket/config.tsx
index b951de53f..b15349ea2 100644
--- a/config-ui/src/plugins/register/bitbucket/config.tsx
+++ b/config-ui/src/plugins/register/bitbucket/config.tsx
@@ -29,6 +29,9 @@ export const BitBucketConfig: PluginConfigType = {
sort: 5,
connection: {
docLink: 'https://devlake.apache.org/docs/Configuration/BitBucket',
+ initialValues: {
+ endpoint: 'https://api.bitbucket.org/2.0/',
+ },
fields: [
'name',
{
diff --git a/config-ui/src/plugins/register/tapd/config.ts
b/config-ui/src/plugins/register/tapd/config.ts
index 9bcb20c9c..cd71b7fc8 100644
--- a/config-ui/src/plugins/register/tapd/config.ts
+++ b/config-ui/src/plugins/register/tapd/config.ts
@@ -27,7 +27,7 @@ export const TAPDConfig: PluginConfigType = {
name: 'TAPD',
isBeta: true,
icon: Icon,
- sort: 6,
+ sort: 100,
connection: {
docLink: 'https://devlake.apache.org/docs/Configuration/Tapd',
initialValues: {
diff --git a/config-ui/src/plugins/register/zentao/config.ts
b/config-ui/src/plugins/register/zentao/config.ts
index 47a54faab..1593feca2 100644
--- a/config-ui/src/plugins/register/zentao/config.ts
+++ b/config-ui/src/plugins/register/zentao/config.ts
@@ -27,7 +27,7 @@ export const ZenTaoConfig: PluginConfigType = {
name: 'ZenTao',
isBeta: true,
icon: Icon,
- sort: 7,
+ sort: 100,
connection: {
docLink: 'https://devlake.apache.org/docs/Configuration/Zentao',
fields: [
