This is an automated email from the ASF dual-hosted git repository.
klesh 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 758a2a599 fix(config-ui): some bugs (#6697)
758a2a599 is described below
commit 758a2a599a5c6d1cfe8187d2bc5ac0de4581ce5b
Author: 青湛 <[email protected]>
AuthorDate: Wed Dec 27 19:49:31 2023 +1300
fix(config-ui): some bugs (#6697)
* fix(config-ui): use input to replace input.password in github
* fix(config-ui): change button type in connection status
* fix(config-ui): missed some plugin for dayjs
* fix(config-ui): adjust some style for connection
* fix(config-ui): adjust some style for exception
* refactor(config-ui): remove unuse style for global
* fix(config-ui): cannot create scope config in tapd
* fix(config-ui): style error for sync-policy
* fix(config-ui): adjust the style for message component
* Revert "refactor(config-ui): remove unuse style for global"
This reverts commit b5036d5bc20c881eb5ac52454fa703f4df0ddc85.
* fix(config-ui): missed field name in data scope select
* fix(config-ui): adjust no scope config operation condition
* fix(config-ui): dis-associate tips error
* fix(config-ui): cannot select in jira transformation
* fix(config-ui): modal not reset cause scope config error
---
config-ui/src/components/message/index.tsx | 7 +-
.../detail/components/sync-policy/index.tsx | 4 +-
.../plugins/components/connection-status/index.tsx | 7 +-
.../plugins/components/data-scope-select/index.tsx | 2 +-
.../components/scope-config-select/index.tsx | 7 +-
.../register/github/connection-fields/token.tsx | 4 +-
.../src/plugins/register/jira/transformation.tsx | 92 +++++++---------------
.../src/plugins/register/tapd/transformation.tsx | 8 +-
config-ui/src/routes/connection/connection.tsx | 15 ++--
.../routes/error/components/exception/index.tsx | 28 ++++---
config-ui/src/utils/time.ts | 4 +
11 files changed, 81 insertions(+), 97 deletions(-)
diff --git a/config-ui/src/components/message/index.tsx
b/config-ui/src/components/message/index.tsx
index 04e7c5b50..6b9f2fc2f 100644
--- a/config-ui/src/components/message/index.tsx
+++ b/config-ui/src/components/message/index.tsx
@@ -17,6 +17,7 @@
*/
import { WarningOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
import styled from 'styled-components';
const Wrapper = styled.div`
@@ -33,8 +34,10 @@ interface Props {
export const Message = ({ style, size = 20, content }: Props) => {
return (
<Wrapper style={style}>
- <WarningOutlined size={size} color="#f4be55" />
- <span>{content}</span>
+ <Space>
+ <WarningOutlined style={{ fontSize: size, color: '#f4be55' }} />
+ <span>{content}</span>
+ </Space>
</Wrapper>
);
};
diff --git
a/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
b/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
index b0cf77f6d..41e4efa45 100644
--- a/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
@@ -144,7 +144,7 @@ export const SyncPolicy = ({
</Radio.Group>
{selectedValue === 'Custom' && (
<>
- <S.Input>
+ <Space>
<Block title="Minute">
<Input
value={mintue}
@@ -175,7 +175,7 @@ export const SyncPolicy = ({
onChange={(e) => onChangeCronConfig([mintue, hour, day,
month, e.target.value].join(' '))}
/>
</Block>
- </S.Input>
+ </Space>
{!cron.nextTime && <S.Error>Invalid Cron code, please enter
again.</S.Error>}
</>
)}
diff --git a/config-ui/src/plugins/components/connection-status/index.tsx
b/config-ui/src/plugins/components/connection-status/index.tsx
index 9430de712..e71011b5f 100644
--- a/config-ui/src/plugins/components/connection-status/index.tsx
+++ b/config-ui/src/plugins/components/connection-status/index.tsx
@@ -60,7 +60,12 @@ export const ConnectionStatus = ({ connection }: Props) => {
<Wrapper>
<span className={status}>{STATUS_MAP[status]}</span>
{status !== IConnectionStatus.ONLINE && (
- <Button loading={status === IConnectionStatus.TESTING}
icon={<RedoOutlined />} onClick={handleTest} />
+ <Button
+ type="text"
+ loading={status === IConnectionStatus.TESTING}
+ icon={<RedoOutlined />}
+ onClick={handleTest}
+ />
)}
</Wrapper>
);
diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx
b/config-ui/src/plugins/components/data-scope-select/index.tsx
index fff01e773..9e1559e37 100644
--- a/config-ui/src/plugins/components/data-scope-select/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -139,7 +139,7 @@ export const DataScopeSelect = ({
loading={!ready}
showSearch
mode="multiple"
- options={searchItems.map((it) => ({ label: it.fullName, value:
getPluginScopeId(plugin, it) }))}
+ options={searchItems.map((it) => ({ label: it.fullName ?? it.name,
value: getPluginScopeId(plugin, it) }))}
value={selectedIds}
onChange={(value) => setSelectedIds(value)}
onSearch={(value) => setQuery(value)}
diff --git a/config-ui/src/plugins/components/scope-config-select/index.tsx
b/config-ui/src/plugins/components/scope-config-select/index.tsx
index 93cb0950d..be1d5cce2 100644
--- a/config-ui/src/plugins/components/scope-config-select/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-select/index.tsx
@@ -42,8 +42,8 @@ export const ScopeConfigSelect = ({ plugin, connectionId,
scopeConfigId, onCance
const { ready, data } = useRefreshData(() => API.scopeConfig.list(plugin,
connectionId), [version]);
const dataSource = useMemo(
- () => (data ? (data.length ? [{ id: 'None', name: 'No Scope Config'
}].concat(data) : []) : []),
- [data],
+ () => (data ? (scopeConfigId ? [{ id: 'None', name: 'No Scope Config'
}].concat(data) : data) : []),
+ [data, scopeConfigId],
);
useEffect(() => {
@@ -109,6 +109,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId,
scopeConfigId, onCance
</Button>
</Flex>
<Modal
+ destroyOnClose
open={open}
width={960}
centered
@@ -121,7 +122,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId,
scopeConfigId, onCance
connectionId={connectionId}
showWarning={!!updatedId}
scopeConfigId={updatedId}
- onCancel={onCancel}
+ onCancel={handleHideDialog}
onSubmit={handleSubmit}
/>
</Modal>
diff --git a/config-ui/src/plugins/register/github/connection-fields/token.tsx
b/config-ui/src/plugins/register/github/connection-fields/token.tsx
index 13e699645..3f800ec3e 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -154,14 +154,14 @@ export const Token = ({
{tokens.map(({ value, isValid, status, from }, i) => (
<S.Input key={i}>
<div className="input">
- <Input.Password
+ <Input
style={{ width: 386 }}
placeholder="Token"
value={value}
onChange={(e) => handleChangeToken(i, e.target.value)}
onBlur={() => handleTestToken(i)}
/>
- <Button size="small" icon={<CloseOutlined />} onClick={() =>
handleRemoveToken(i)} />
+ <Button type="text" icon={<CloseOutlined />} onClick={() =>
handleRemoveToken(i)} />
<div className="info">
{isValid === false && <span className="error">Invalid</span>}
{isValid === true && <span className="success">Valid From:
{from}</span>}
diff --git a/config-ui/src/plugins/register/jira/transformation.tsx
b/config-ui/src/plugins/register/jira/transformation.tsx
index 2a2021200..ad8aec07c 100644
--- a/config-ui/src/plugins/register/jira/transformation.tsx
+++ b/config-ui/src/plugins/register/jira/transformation.tsx
@@ -84,14 +84,6 @@ export const JiraTransformation = ({ entities, connectionId,
transformation, set
setIncidents(types.filter((it) => it.standardType ===
StandardType.Incident).map((it) => it.name));
}, [transformation]);
- const [requirementItems, bugItems, incidentItems] = useMemo(() => {
- return [
- (data?.issueTypes ?? []).filter((it) => requirements.includes(it.name)),
- (data?.issueTypes ?? []).filter((it) => bugs.includes(it.name)),
- (data?.issueTypes ?? []).filter((it) => incidents.includes(it.name)),
- ];
- }, [requirements, bugs, incidents, data?.issueTypes]);
-
const { token } = theme.useToken();
if (!ready || !data) {
@@ -100,16 +92,9 @@ export const JiraTransformation = ({ entities,
connectionId, transformation, set
const { issueTypes, fields } = data;
- const transformaType = (
- its: Array<{
- id: string;
- name: string;
- iconUrl: string;
- }>,
- standardType: StandardType,
- ) => {
+ const transformaType = (its: string[], standardType: StandardType) => {
return its.reduce((acc, cur) => {
- acc[cur.name] = {
+ acc[cur] = {
standardType,
};
return acc;
@@ -138,9 +123,9 @@ export const JiraTransformation = ({ entities,
connectionId, transformation, set
connectionId,
issueTypes,
fields,
- requirementItems,
- bugItems,
- incidentItems,
+ requirements,
+ bugs,
+ incidents,
transformaType,
})}
/>
@@ -155,9 +140,9 @@ const renderCollapseItems = ({
connectionId,
issueTypes,
fields,
- bugItems,
- incidentItems,
- requirementItems,
+ requirements,
+ bugs,
+ incidents,
transformaType,
}: {
entities: string[];
@@ -173,18 +158,9 @@ const renderCollapseItems = ({
id: string;
name: string;
}>;
- requirementItems: Array<{
- id: string;
- name: string;
- }>;
- bugItems: Array<{
- id: string;
- name: string;
- }>;
- incidentItems: Array<{
- id: string;
- name: string;
- }>;
+ requirements: string[];
+ bugs: string[];
+ incidents: string[];
transformaType: any;
}) =>
[
@@ -193,7 +169,7 @@ const renderCollapseItems = ({
label: 'Issue Tracking',
style: panelStyle,
children: (
- <>
+ <Form labelCol={{ span: 5 }}>
<p>
Tell DevLake what types of Jira issues you are using as features,
bugs and incidents, and what field as
`Epic Link` or `Story Points`.
@@ -208,18 +184,15 @@ const renderCollapseItems = ({
<Form.Item label="Requirement">
<Select
mode="multiple"
- options={issueTypes.map((it) => ({ label: it.name, value: it.id
}))}
- value={requirementItems.map((it) => it.id)}
+ options={issueTypes.map((it) => ({ label: it.name, value:
it.name }))}
+ value={requirements}
onChange={(value) =>
onChangeTransformation({
...transformation,
typeMappings: {
- ...transformaType(
- requirementItems.filter((it) => value.includes(it.id)),
- StandardType.Requirement,
- ),
- ...transformaType(bugItems, StandardType.Bug),
- ...transformaType(incidentItems, StandardType.Incident),
+ ...transformaType(value, StandardType.Requirement),
+ ...transformaType(bugs, StandardType.Bug),
+ ...transformaType(incidents, StandardType.Incident),
},
})
}
@@ -228,18 +201,15 @@ const renderCollapseItems = ({
<Form.Item label="Bug">
<Select
mode="multiple"
- options={issueTypes.map((it) => ({ label: it.name, value: it.id
}))}
- value={bugItems.map((it) => it.id)}
+ options={issueTypes.map((it) => ({ label: it.name, value:
it.name }))}
+ value={bugs}
onChange={(value) =>
onChangeTransformation({
...transformation,
typeMappings: {
- ...transformaType(requirementItems,
StandardType.Requirement),
- ...transformaType(
- bugItems.filter((it) => value.includes(it.id)),
- StandardType.Bug,
- ),
- ...transformaType(incidentItems, StandardType.Incident),
+ ...transformaType(requirements, StandardType.Requirement),
+ ...transformaType(value, StandardType.Bug),
+ ...transformaType(incidents, StandardType.Incident),
},
})
}
@@ -257,19 +227,15 @@ const renderCollapseItems = ({
>
<Select
mode="multiple"
- options={issueTypes.map((it) => ({ label: it.name, value: it.id
}))}
- value={incidentItems.map((it) => it.id)}
+ options={issueTypes.map((it) => ({ label: it.name, value:
it.name }))}
+ value={incidents}
onChange={(value) =>
onChangeTransformation({
...transformation,
typeMappings: {
- ...transformaType(requirementItems,
StandardType.Requirement),
- ...transformaType(bugItems, StandardType.Bug),
- ...transformaType(
- incidentItems.filter((it) => value.includes(it.id)),
-
- StandardType.Incident,
- ),
+ ...transformaType(requirements, StandardType.Requirement),
+ ...transformaType(bugs, StandardType.Bug),
+ ...transformaType(value, StandardType.Incident),
},
})
}
@@ -284,7 +250,7 @@ const renderCollapseItems = ({
}
>
<Select
- options={fields.map((it) => ({ label: it.name, value: it.id }))}
+ options={fields.map((it) => ({ label: it.name, value: it.name
}))}
value={transformation.storyPointField}
onChange={(value) =>
onChangeTransformation({
@@ -294,7 +260,7 @@ const renderCollapseItems = ({
}
/>
</Form.Item>
- </>
+ </Form>
),
},
{
diff --git a/config-ui/src/plugins/register/tapd/transformation.tsx
b/config-ui/src/plugins/register/tapd/transformation.tsx
index b4782034d..747b43c51 100644
--- a/config-ui/src/plugins/register/tapd/transformation.tsx
+++ b/config-ui/src/plugins/register/tapd/transformation.tsx
@@ -55,6 +55,8 @@ export const TapdTransformation = ({ entities, connectionId,
scopeId, transforma
const prefix = useProxyPrefix({ plugin: 'tapd', connectionId });
+ const { token } = theme.useToken();
+
const { ready, data } = useRefreshData<{
statusList: Array<{
id: string;
@@ -129,8 +131,6 @@ export const TapdTransformation = ({ entities,
connectionId, scopeId, transforma
}, {} as Record<string, string>);
};
- const { token } = theme.useToken();
-
const panelStyle: React.CSSProperties = {
marginBottom: 24,
background: token.colorFillAlter,
@@ -205,7 +205,7 @@ const renderCollapseItems = ({
label: 'Issue Tracking',
style: panelStyle,
children: (
- <>
+ <Form labelCol={{ span: 5 }}>
<p>
Standardize your issue types to the following issue types to view
metrics such as `Requirement lead time`
and `Bug age` in built-in dashboards.
@@ -325,7 +325,7 @@ const renderCollapseItems = ({
}
/>
</Form.Item>
- </>
+ </Form>
),
},
].filter((it) => entities.includes(it.key));
diff --git a/config-ui/src/routes/connection/connection.tsx
b/config-ui/src/routes/connection/connection.tsx
index 922a1c2b7..3e0a4aeec 100644
--- a/config-ui/src/routes/connection/connection.tsx
+++ b/config-ui/src/routes/connection/connection.tsx
@@ -19,7 +19,7 @@
import { useState, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { DeleteOutlined, PlusOutlined, NodeIndexOutlined, LinkOutlined,
ClearOutlined } from '@ant-design/icons';
-import { theme, Table, Button, Modal, message } from 'antd';
+import { theme, Table, Button, Modal, message, Space } from 'antd';
import API from '@/api';
import { useAppDispatch, useAppSelector } from '@/app/hook';
@@ -211,7 +211,8 @@ export const Connection = () => {
),
{
setOperating,
- formatMessage: () => `Associate scope config successful.`,
+ formatMessage: () =>
+ trId !== 'None' ? 'Associate scope config successful.' :
'Dis-associate scope config successful.',
},
);
@@ -295,13 +296,14 @@ export const Connection = () => {
{
title: 'Scope Config',
key: 'scopeConfig',
+ align: 'center',
width: 400,
render: (_, { id, configId, configName }) => (
<>
<span>{configId ? configName : 'N/A'}</span>
{pluginConfig.scopeConfig && (
<Button
- type="primary"
+ type="link"
icon={<LinkOutlined />}
onClick={() => {
handleShowScopeConfigSelectDialog([id]);
@@ -316,12 +318,13 @@ export const Connection = () => {
title: '',
dataIndex: 'id',
key: 'id',
- width: 100,
+ align: 'center',
+ width: 200,
render: (id) => (
- <>
+ <Space>
<Button type="primary" icon={<ClearOutlined />} onClick={() =>
handleShowClearDataScopeDialog(id)} />
<Button type="primary" icon={<DeleteOutlined />} onClick={()
=> handleShowDeleteDataScopeDialog(id)} />
- </>
+ </Space>
),
},
]}
diff --git a/config-ui/src/routes/error/components/exception/index.tsx
b/config-ui/src/routes/error/components/exception/index.tsx
index d829ab728..748d23240 100644
--- a/config-ui/src/routes/error/components/exception/index.tsx
+++ b/config-ui/src/routes/error/components/exception/index.tsx
@@ -18,7 +18,7 @@
import { useNavigate } from 'react-router-dom';
import { CloseCircleOutlined } from '@ant-design/icons';
-import { Card, Flex, Button } from 'antd';
+import { Card, Space, Flex, Button } from 'antd';
interface Props {
error: string | Error;
@@ -30,24 +30,26 @@ export const Exception = ({ error }: Props) => {
return (
<Card>
- <h2>
- <CloseCircleOutlined size={20} color="#f5222d" />
- <span>{error.toString() || 'Unknown Error'}</span>
- </h2>
+ <Space>
+ <CloseCircleOutlined style={{ fontSize: 20, color: '#f5222d' }} />
+ <h2 style={{ color: '#f5222d' }}>{error.toString() || 'Unknown
Error'}</h2>
+ </Space>
<p>
Please try again, if the problem persists include the above error
message when filing a bug report on{' '}
<strong>GitHub</strong>. You can also message us on
<strong>Slack</strong> to engage with community members for
solutions to common issues.
</p>
<Flex justify="center">
- <Button type="primary" onClick={handleResetError}>
- Continue
- </Button>
- <Button
- onClick={() =>
window.open('https://github.com/apache/incubator-devlake', '_blank',
'noopener,noreferrer')}
- >
- Visit GitHub
- </Button>
+ <Space>
+ <Button type="primary" onClick={handleResetError}>
+ Continue
+ </Button>
+ <Button
+ onClick={() =>
window.open('https://github.com/apache/incubator-devlake', '_blank',
'noopener,noreferrer')}
+ >
+ Visit GitHub
+ </Button>
+ </Space>
</Flex>
</Card>
);
diff --git a/config-ui/src/utils/time.ts b/config-ui/src/utils/time.ts
index 33b5141b4..c50bcbb99 100644
--- a/config-ui/src/utils/time.ts
+++ b/config-ui/src/utils/time.ts
@@ -17,6 +17,8 @@
*/
import dayjs from 'dayjs';
+import weekday from 'dayjs/plugin/weekday';
+import localeData from 'dayjs/plugin/localeData';
import relativeTime from 'dayjs/plugin/relativeTime';
import updateLocale from 'dayjs/plugin/updateLocale';
import LocalizedFormat from 'dayjs/plugin/localizedFormat';
@@ -40,6 +42,8 @@ const localeConfiguration = {
},
};
+dayjs.extend(weekday);
+dayjs.extend(localeData);
dayjs.extend(relativeTime);
dayjs.extend(updateLocale);
dayjs.extend(LocalizedFormat);
