This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch fix-bugs in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 990e24e5fcb3ad58926482f3e5da92bcd316047a Author: mintsweet <[email protected]> AuthorDate: Thu Dec 28 19:14:15 2023 +1300 fix(config-ui): adjust the style and placeholder for connection form --- .../components/connection-form/fields/endpoint.tsx | 37 ++++++++++++++-------- .../components/connection-form/fields/name.tsx | 2 +- .../components/connection-form/fields/password.tsx | 2 +- .../components/connection-form/fields/proxy.tsx | 7 +++- .../components/connection-form/fields/token.tsx | 7 +++- .../components/connection-form/fields/username.tsx | 7 +++- config-ui/src/plugins/register/jira/config.tsx | 3 +- .../register/jira/connection-fields/auth.tsx | 23 ++++++++++---- .../register/zentao/connection-fields/db-url.tsx | 1 + 9 files changed, 64 insertions(+), 25 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 ff9e45782..2dc3d3ed4 100644 --- a/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx +++ b/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx @@ -76,17 +76,22 @@ export const ConnectionEndpoint = ({ if (multipleVersions) { return ( - <Block title={name} required> - <Radio.Group value={version} onChange={handleChange}> - <Radio value="cloud">{name} Cloud</Radio> - <Radio value="server" disabled={!multipleVersions.server}> - {name} Server {multipleVersions.server ? multipleVersions.server : '(to be supported)'} - </Radio> - </Radio.Group> + <> + <Block title={name} required> + <Radio.Group value={version} onChange={handleChange}> + <Radio value="cloud">{name} Cloud</Radio> + <Radio value="server" disabled={!multipleVersions.server}> + {name} Server {multipleVersions.server ? multipleVersions.server : '(to be supported)'} + </Radio> + </Radio.Group> + </Block> {version === 'cloud' && ( - <p style={{ margin: 0 }}> - If you are using {name} Cloud, you do not need to enter the endpoint URL, which is {multipleVersions.cloud}. - </p> + <Block> + <p> + If you are using {name} Cloud, you do not need to enter the endpoint URL, which is{' '} + {multipleVersions.cloud}. + </p> + </Block> )} {version === 'server' && ( <Block @@ -94,16 +99,22 @@ export const ConnectionEndpoint = ({ description={subLabel ?? `If you are using ${name} Server, please enter the endpoint URL.`} required > - <Input placeholder="Your Endpoint URL" value={value} onChange={handleChangeValue} /> + <Input style={{ width: 386 }} placeholder="Your Endpoint URL" value={value} onChange={handleChangeValue} /> </Block> )} - </Block> + </> ); } return ( <Block title="Endpoint URL" description={subLabel ?? `Provide the ${name} instance API endpoint.`} required> - <Input disabled={disabled} placeholder="Your Endpoint URL" value={value} onChange={handleChangeValue} /> + <Input + style={{ width: 386 }} + disabled={disabled} + placeholder="Your Endpoint URL" + value={value} + onChange={handleChangeValue} + /> </Block> ); }; 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 70eb33b77..d586fff88 100644 --- a/config-ui/src/plugins/components/connection-form/fields/name.tsx +++ b/config-ui/src/plugins/components/connection-form/fields/name.tsx @@ -49,7 +49,7 @@ export const ConnectionName = ({ initialValue, value, setValue, setError }: Prop description="Give your connection a unique name to help you identify it in the future." required > - <Input placeholder="Your Connection Name" value={value} onChange={handleChange} /> + <Input style={{ width: 386 }} placeholder="Your Connection Name" value={value} onChange={handleChange} /> </Block> ); }; 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 c98bd918e..de6e7f190 100644 --- a/config-ui/src/plugins/components/connection-form/fields/password.tsx +++ b/config-ui/src/plugins/components/connection-form/fields/password.tsx @@ -60,7 +60,7 @@ export const ConnectionPassword = ({ <Block title={label ?? 'Password'} description={subLabel ? subLabel : null} required> <Input.Password style={{ width: 386 }} - placeholder={placeholder ?? 'Your Password'} + placeholder={type === 'update' ? '********' : placeholder ? placeholder : 'Your Password'} value={value} onChange={handleChange} /> 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 91f22964c..fee3de699 100644 --- a/config-ui/src/plugins/components/connection-form/fields/proxy.tsx +++ b/config-ui/src/plugins/components/connection-form/fields/proxy.tsx @@ -58,7 +58,12 @@ export const ConnectionProxy = ({ name, initialValue, value, setValue }: Props) return ( <Block title="Proxy" description={`Add a proxy if you cannot access ${name} directly.`}> - <Input placeholder="e.g. http://proxy.localhost:8080"; value={value} onChange={handleChange} /> + <Input + style={{ width: 386 }} + placeholder="e.g. http://proxy.localhost:8080"; + value={value} + onChange={handleChange} + /> </Block> ); }; 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 109aa6655..647f50d68 100644 --- a/config-ui/src/plugins/components/connection-form/fields/token.tsx +++ b/config-ui/src/plugins/components/connection-form/fields/token.tsx @@ -65,7 +65,12 @@ export const ConnectionToken = ({ type, label, subLabel, initialValue, value, se return ( <Block title={label ?? 'Token'} description={subLabel ? subLabel : null} required> - <Input.Password style={{ width: 386 }} placeholder="Your Token" value={value} onChange={handleChange} /> + <Input.Password + style={{ width: 386 }} + placeholder={type === 'update' ? '********' : 'Your Token'} + value={value} + onChange={handleChange} + /> </Block> ); }; 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 7d34d352b..e69b43ad8 100644 --- a/config-ui/src/plugins/components/connection-form/fields/username.tsx +++ b/config-ui/src/plugins/components/connection-form/fields/username.tsx @@ -73,7 +73,12 @@ export const ConnectionUsername = ({ return ( <Block title={label ?? 'Username'} description={subLabel ? subLabel : null} required> - <Input placeholder={placeholder ?? 'Your Username'} value={value} onChange={handleChange} /> + <Input + style={{ width: 386 }} + placeholder={placeholder ?? 'Your Username'} + value={value} + onChange={handleChange} + /> </Block> ); }; diff --git a/config-ui/src/plugins/register/jira/config.tsx b/config-ui/src/plugins/register/jira/config.tsx index 4e2a31497..8eb9b831c 100644 --- a/config-ui/src/plugins/register/jira/config.tsx +++ b/config-ui/src/plugins/register/jira/config.tsx @@ -31,9 +31,10 @@ export const JiraConfig: IPluginConfig = { docLink: DOC_URL.PLUGIN.JIRA.BASIS, fields: [ 'name', - ({ initialValues, values, errors, setValues, setErrors }: any) => ( + ({ type, initialValues, values, errors, setValues, setErrors }: any) => ( <Auth key="auth" + type={type} initialValues={initialValues} values={values} errors={errors} diff --git a/config-ui/src/plugins/register/jira/connection-fields/auth.tsx b/config-ui/src/plugins/register/jira/connection-fields/auth.tsx index 572cf0d5e..dc00bebaf 100644 --- a/config-ui/src/plugins/register/jira/connection-fields/auth.tsx +++ b/config-ui/src/plugins/register/jira/connection-fields/auth.tsx @@ -28,6 +28,7 @@ const JIRA_CLOUD_REGEX = /^https:\/\/\w+.atlassian.net\/rest\/$/; type Method = 'BasicAuth' | 'AccessToken'; interface Props { + type: 'create' | 'update'; initialValues: any; values: any; errors: any; @@ -35,7 +36,7 @@ interface Props { setErrors: (value: any) => void; } -export const Auth = ({ initialValues, values, setValues, setErrors }: Props) => { +export const Auth = ({ type, initialValues, values, setValues, setErrors }: Props) => { const [version, setVersion] = useState('cloud'); useEffect(() => { @@ -140,14 +141,24 @@ export const Auth = ({ initialValues, values, setValues, setErrors }: Props) => } required > - <Input placeholder="Your Endpoint URL" value={values.endpoint} onChange={handleChangeEndpoint} /> + <Input + style={{ width: 386 }} + placeholder="Your Endpoint URL" + value={values.endpoint} + onChange={handleChangeEndpoint} + /> </Block> </Block> {version === 'cloud' && ( <> <Block title="E-Mail" required> - <Input placeholder="Your E-Mail" value={values.username} onChange={handleChangeUsername} /> + <Input + style={{ width: 386 }} + placeholder="Your E-Mail" + value={values.username} + onChange={handleChangeUsername} + /> </Block> <Block title="API Token" @@ -158,7 +169,7 @@ export const Auth = ({ initialValues, values, setValues, setErrors }: Props) => > <Input.Password style={{ width: 386 }} - placeholder="Your PAT" + placeholder={type === 'update' ? '********' : 'Your PAT'} value={values.password} onChange={handleChangePassword} /> @@ -182,7 +193,7 @@ export const Auth = ({ initialValues, values, setValues, setErrors }: Props) => <Block title="Password" required> <Input.Password style={{ width: 386 }} - placeholder="Your Password" + placeholder={type === 'update' ? '********' : 'Your Password'} value={values.password} onChange={handleChangePassword} /> @@ -201,7 +212,7 @@ export const Auth = ({ initialValues, values, setValues, setErrors }: Props) => > <Input.Password style={{ width: 386 }} - placeholder="Your PAT" + placeholder={type === 'update' ? '********' : 'Your Password'} value={values.token} onChange={handleChangeToken} /> diff --git a/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx b/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx index 67c3d23c0..57f62f44d 100644 --- a/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx +++ b/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx @@ -39,6 +39,7 @@ export const DBUrl = ({ initialValue, value, setValue }: Props) => { return ( <Block title="Database URL" description="Provide the DB URL of Zentao if you want to collect issue changelogs."> <Input + style={{ width: 386 }} placeholder="e.g. mysql://root:devlake@sshd-proxy:3306/zentao?charset=utf8mb4&parseTime=True" value={value} onChange={handleChange}
