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 5cd168f34 fix(config-ui): some bugs (#4013)
5cd168f34 is described below
commit 5cd168f34542775dc63f3bf9a7ca6760a8d25ffc
Author: 青湛 <[email protected]>
AuthorDate: Thu Dec 22 15:37:38 2022 +0800
fix(config-ui): some bugs (#4013)
* fix(config-ui): cannot use advanced mode in project
* chore(config-ui): adjust the style for bp
* fix(config-ui): push link error
* fix(config-ui): token not check if one input skip
* fix(config-ui): cannot display correctly when bp has webhook
* fix(config-ui): cannot display correctly when bp is advanced mode
* chore(config-ui): adjust the style for project detail
---
config-ui/src/hooks/usePipelineManager.jsx | 7 +++-
config-ui/src/pages/blueprint/create/index.tsx | 2 +-
.../src/pages/blueprint/create/step-one/index.tsx | 31 ++++++++++------
.../pages/blueprint/detail/blueprint-detail.tsx | 8 ++---
.../pages/blueprint/detail/panel/configuration.tsx | 23 ++++++++++--
config-ui/src/pages/blueprint/detail/use-detail.ts | 27 ++------------
.../src/pages/blueprints/blueprint-detail.jsx | 6 +++-
.../pages/configure/connections/AddConnection.jsx | 4 +--
.../configure/connections/ConfigureConnection.jsx | 6 ++--
.../pages/configure/connections/ConnectionForm.jsx | 42 +++++++++++-----------
.../src/pages/configure/integration/index.jsx | 2 +-
config-ui/src/pages/configure/settings/tapd.jsx | 2 +-
config-ui/src/pages/configure/settings/zentao.jsx | 2 +-
config-ui/src/pages/project/detail/styled.ts | 2 --
14 files changed, 86 insertions(+), 78 deletions(-)
diff --git a/config-ui/src/hooks/usePipelineManager.jsx
b/config-ui/src/hooks/usePipelineManager.jsx
index f475f44e9..53d7c5f66 100644
--- a/config-ui/src/hooks/usePipelineManager.jsx
+++ b/config-ui/src/hooks/usePipelineManager.jsx
@@ -263,6 +263,8 @@ function usePipelineManager(
}
const rerunTask = async (taskId) => {
+ setIsRunning(true)
+ setErrors([])
try {
const res = await request.post(
`${DEVLAKE_ENDPOINT}/pipelines/${activePipeline.id}/tasks`,
@@ -273,7 +275,10 @@ function usePipelineManager(
if (res?.data?.success) {
fetchPipeline(activePipeline.id)
}
- } catch (err) {}
+ } catch (err) {
+ } finally {
+ setIsRunning(false)
+ }
}
useEffect(() => {
diff --git a/config-ui/src/pages/blueprint/create/index.tsx
b/config-ui/src/pages/blueprint/create/index.tsx
index 533d01240..1f6a6b4d6 100644
--- a/config-ui/src/pages/blueprint/create/index.tsx
+++ b/config-ui/src/pages/blueprint/create/index.tsx
@@ -66,7 +66,7 @@ export const CreateBlueprintPage = ({ from }: Props) => {
<S.Container>
<WorkFlow />
<S.Content>
- {step === 1 && <StepOne />}
+ {step === 1 && <StepOne from={from} />}
{mode === ModeEnum.normal && step === 2 && <StepTwo />}
{step === 3 && <StepThree />}
{((mode === ModeEnum.normal && step === 4) ||
diff --git a/config-ui/src/pages/blueprint/create/step-one/index.tsx
b/config-ui/src/pages/blueprint/create/step-one/index.tsx
index 891f8107e..69a93e810 100644
--- a/config-ui/src/pages/blueprint/create/step-one/index.tsx
+++ b/config-ui/src/pages/blueprint/create/step-one/index.tsx
@@ -16,7 +16,7 @@
*
*/
-import React from 'react'
+import React, { useMemo } from 'react'
import { InputGroup, Icon } from '@blueprintjs/core'
import { useConnection, ConnectionStatusEnum } from '@/store'
@@ -25,10 +25,15 @@ import { Card, Divider, MultiSelector, Loading } from
'@/components'
import { ModeEnum } from '../../types'
import { AdvancedEditor } from '../../components'
import { useCreateBP } from '../bp-context'
+import { FromEnum } from '../types'
import * as S from './styled'
-export const StepOne = () => {
+interface Props {
+ from: FromEnum
+}
+
+export const StepOne = ({ from }: Props) => {
const { connections, onTest } = useConnection()
const {
@@ -42,6 +47,8 @@ export const StepOne = () => {
onChangeUniqueList
} = useCreateBP()
+ const fromProject = useMemo(() => from === FromEnum.project, [from])
+
return (
<>
<Card className='card'>
@@ -103,18 +110,20 @@ export const StepOne = () => {
))}
</S.ConnectionList>
</Card>
- <S.Tips>
- <span>
- To customize how tasks are executed in the blueprint, please
use{' '}
- </span>
- <span onClick={() => onChangeMode(ModeEnum.advanced)}>
- Advanced Mode.
- </span>
- </S.Tips>
+ {!fromProject && (
+ <S.Tips>
+ <span>
+ To customize how tasks are executed in the blueprint, please
use{' '}
+ </span>
+ <span onClick={() => onChangeMode(ModeEnum.advanced)}>
+ Advanced Mode.
+ </span>
+ </S.Tips>
+ )}
</>
)}
- {mode === ModeEnum.advanced && (
+ {mode === ModeEnum.advanced && !fromProject && (
<>
<Card className='card'>
<h2>JSON Configuration</h2>
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
index 76b589e88..be3a2c570 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
@@ -34,10 +34,9 @@ interface Props extends UseDetailProps {}
export const BlueprintDetail = ({ id }: Props) => {
const [activeTab, setActiveTab] = useState<TabId>('status')
- const { loading, blueprint, connections, saving, onUpdate, onRefresh } =
- useDetail({
- id
- })
+ const { loading, blueprint, saving, onUpdate, onRefresh } = useDetail({
+ id
+ })
if (loading || !blueprint) {
return <PageLoading />
@@ -52,7 +51,6 @@ export const BlueprintDetail = ({ id }: Props) => {
panel={
<Configuration
blueprint={blueprint}
- connections={connections}
saving={saving}
onUpdate={onUpdate}
onRefresh={onRefresh}
diff --git a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
index bef2c1ffc..89695ca5c 100644
--- a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
@@ -22,7 +22,7 @@ import dayjs from 'dayjs'
import { Table, ColumnType } from '@/components'
import { getCron } from '@/config'
-import { DataScopeList } from '@/plugins'
+import { PluginConfig, PluginType, DataScopeList, Plugins } from '@/plugins'
import { ModeEnum } from '../../types'
import { validRawPlan } from '../../utils'
@@ -40,7 +40,6 @@ type Type = 'name' | 'frequency' | 'scope' | 'transformation'
interface Props {
blueprint: BlueprintType
- connections: ConnectionItemType[]
saving: boolean
onUpdate: (bp: any) => void
onRefresh: () => void
@@ -48,7 +47,6 @@ interface Props {
export const Configuration = ({
blueprint,
- connections,
saving,
onUpdate,
onRefresh
@@ -66,6 +64,25 @@ export const Configuration = ({
[blueprint]
)
+ const connections = useMemo(
+ () =>
+ blueprint.settings?.connections
+ .filter((cs) => cs.plugin !== Plugins.Webhook)
+ .map((cs: any) => {
+ const plugin = PluginConfig.find((p) => p.plugin === cs.plugin) as
any
+ return {
+ icon: plugin.icon,
+ name: plugin.name,
+ connectionId: cs.connectionId,
+ entities: cs.scopes[0].entities,
+ plugin: cs.plugin,
+ scopeIds: cs.scopes.map((sc: any) => sc.id)
+ }
+ })
+ .filter(Boolean),
+ [blueprint]
+ )
+
const handleCancel = () => {
setType(undefined)
}
diff --git a/config-ui/src/pages/blueprint/detail/use-detail.ts
b/config-ui/src/pages/blueprint/detail/use-detail.ts
index 26c24e101..d3ca9ece6 100644
--- a/config-ui/src/pages/blueprint/detail/use-detail.ts
+++ b/config-ui/src/pages/blueprint/detail/use-detail.ts
@@ -20,9 +20,8 @@ import { useState, useEffect, useMemo } from 'react'
import { Error } from '@/error'
import { operator } from '@/utils'
-import { PluginConfig } from '@/plugins'
-import type { BlueprintType, ConnectionItemType } from './types'
+import type { BlueprintType } from './types'
import * as API from './api'
export interface UseDetailProps {
@@ -33,40 +32,21 @@ export const useDetail = ({ id }: UseDetailProps) => {
const [loading, setLoading] = useState(false)
const [saving, setSaving] = useState(false)
const [blueprint, setBlueprint] = useState<BlueprintType>()
- const [connections, setConnections] = useState<ConnectionItemType[]>([])
const [, setError] = useState()
- const transformConnection = (connections: any) => {
- return connections
- .map((cs: any) => {
- const plugin = PluginConfig.find((p) => p.plugin === cs.plugin)
- if (!plugin) return null
- return {
- icon: plugin.icon,
- name: plugin.name,
- connectionId: cs.connectionId,
- entities: cs.scopes[0].entities,
- plugin: cs.plugin,
- scopeIds: cs.scopes.map((sc: any) => sc.id)
- }
- })
- .filter(Boolean)
- }
-
const getBlueprint = async () => {
setLoading(true)
try {
const res = await API.getBlueprint(id)
// need to upgrade 2.0.0
- if (res.settings.version === '1.0.0') {
+ if (res.settings?.version === '1.0.0') {
setError(() => {
throw Error.BP_NEED_TO_UPGRADE
})
}
setBlueprint(res)
- setConnections(transformConnection(res.settings?.connections || []))
} finally {
setLoading(false)
}
@@ -98,10 +78,9 @@ export const useDetail = ({ id }: UseDetailProps) => {
loading,
saving,
blueprint,
- connections,
onUpdate: handleUpdate,
onRefresh: getBlueprint
}),
- [loading, saving, blueprint, connections]
+ [loading, saving, blueprint]
)
}
diff --git a/config-ui/src/pages/blueprints/blueprint-detail.jsx
b/config-ui/src/pages/blueprints/blueprint-detail.jsx
index bf7a4b421..bb8374445 100644
--- a/config-ui/src/pages/blueprints/blueprint-detail.jsx
+++ b/config-ui/src/pages/blueprints/blueprint-detail.jsx
@@ -380,7 +380,11 @@ const BlueprintDetail = ({ id }) => {
<main className='main'>
<div
className='blueprint-info'
- style={{ display: 'flex', alignItems: 'center' }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end'
+ }}
>
<div className='blueprint-schedule'>
<span
diff --git a/config-ui/src/pages/configure/connections/AddConnection.jsx
b/config-ui/src/pages/configure/connections/AddConnection.jsx
index 4144d44b3..9bc259e4a 100644
--- a/config-ui/src/pages/configure/connections/AddConnection.jsx
+++ b/config-ui/src/pages/configure/connections/AddConnection.jsx
@@ -108,7 +108,7 @@ export default function AddConnection() {
})
const cancel = () => {
- history.push(`/integrations/${activeProvider?.id}`)
+ history.push(`/connections/${activeProvider?.id}`)
}
// const resetForm = () => {
@@ -149,7 +149,7 @@ export default function AddConnection() {
<div style={{ width: '100%' }}>
<Link
style={{ float: 'right', marginLeft: '10px', color: '#777777' }}
- to={`/integrations/${activeProvider?.id}`}
+ to={`/connections/${activeProvider?.id}`}
>
<Icon icon='undo' size={16} /> Go Back
</Link>
diff --git a/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
b/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
index 3daa995e0..68ba47dae 100644
--- a/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
+++ b/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
@@ -127,7 +127,7 @@ export default function ConfigureConnection() {
})
const cancel = () => {
- history.push(`/integrations/${activeProvider?.id}`)
+ history.push(`/connections/${activeProvider?.id}`)
}
// @todo: cleanup unused render helper
@@ -170,7 +170,7 @@ export default function ConfigureConnection() {
useEffect(() => {
if (deleteComplete) {
console.log('>>> DELETE COMPLETE!')
- history.replace(`/integrations/${deleteComplete.provider?.id}`)
+ history.replace(`/connections/${deleteComplete.provider?.id}`)
}
}, [deleteComplete, history])
@@ -188,7 +188,7 @@ export default function ConfigureConnection() {
marginLeft: '10px',
color: '#777777'
}}
- to={`/integrations/${activeProvider?.id}`}
+ to={`/connections/${activeProvider?.id}`}
>
<Icon icon='fast-backward' size={16} /> Connection List
</Link>
diff --git a/config-ui/src/pages/configure/connections/ConnectionForm.jsx
b/config-ui/src/pages/configure/connections/ConnectionForm.jsx
index b8120f241..7d223de95 100644
--- a/config-ui/src/pages/configure/connections/ConnectionForm.jsx
+++ b/config-ui/src/pages/configure/connections/ConnectionForm.jsx
@@ -220,7 +220,7 @@ export default function ConnectionForm(props) {
}
const syncPersonalAcessTokens = useCallback(() => {
- onTokenChange(personalAccessTokens.join(',').trim())
+ onTokenChange(personalAccessTokens.filter(Boolean).join(',').trim())
// eslint-disable-next-line no-unused-vars
const tokenTestResponses = personalAccessTokens
.filter((t) => t !== '')
@@ -262,7 +262,7 @@ export default function ConnectionForm(props) {
useEffect(() => {
console.log('>> PERSONAL TOKEN STORE UPDATED...', tokenStore)
- setPersonalAccessTokens(Object.values(tokenStore).filter((t) => t !== ''))
+ setPersonalAccessTokens(Object.values(tokenStore))
}, [tokenStore])
useEffect(() => {
@@ -292,26 +292,24 @@ export default function ConnectionForm(props) {
useEffect(() => {
console.log('>> ALL TEST RESPONSES FROM CONN MGR...', allTestResponses)
setTokenTests(
- personalAccessTokens
- .filter((t) => t !== '')
- .map((t, tIdx) => {
- return {
- id: tIdx,
- token: t,
- response: allTestResponses ? allTestResponses[t] : null,
- success: allTestResponses ? allTestResponses[t]?.success : false,
- message: allTestResponses
- ? allTestResponses[t]?.message
- : 'invalid token',
- username: allTestResponses ? allTestResponses[t]?.login : '',
- status: getValidityStatus(
- t,
- allTestResponses ? allTestResponses[t] : null,
- allTestResponses
- ),
- isDuplicate: !!(allTestResponses && allTestResponses[t])
- }
- })
+ personalAccessTokens.map((t, tIdx) => {
+ return {
+ id: tIdx,
+ token: t,
+ response: allTestResponses ? allTestResponses[t] : null,
+ success: allTestResponses ? allTestResponses[t]?.success : false,
+ message: allTestResponses
+ ? allTestResponses[t]?.message
+ : 'invalid token',
+ username: allTestResponses ? allTestResponses[t]?.login : '',
+ status: getValidityStatus(
+ t,
+ allTestResponses ? allTestResponses[t] : null,
+ allTestResponses
+ ),
+ isDuplicate: !!(allTestResponses && allTestResponses[t])
+ }
+ })
)
}, [allTestResponses, personalAccessTokens, getValidityStatus])
diff --git a/config-ui/src/pages/configure/integration/index.jsx
b/config-ui/src/pages/configure/integration/index.jsx
index f9091a024..62e8dc14c 100644
--- a/config-ui/src/pages/configure/integration/index.jsx
+++ b/config-ui/src/pages/configure/integration/index.jsx
@@ -41,7 +41,7 @@ export default function Integration() {
const theProvider = Plugins.find((p) => p.id === providerId)
if (theProvider) {
setActiveProvider(theProvider)
- history.push(`/integrations/${theProvider.id}`)
+ history.push(`/connections/${theProvider.id}`)
} else {
setActiveProvider(Plugins.find[0])
}
diff --git a/config-ui/src/pages/configure/settings/tapd.jsx
b/config-ui/src/pages/configure/settings/tapd.jsx
index 563da48ea..67a79b2fa 100644
--- a/config-ui/src/pages/configure/settings/tapd.jsx
+++ b/config-ui/src/pages/configure/settings/tapd.jsx
@@ -32,7 +32,7 @@ export default function TapdSettings(props) {
const history = useHistory()
const cancel = () => {
- history.push(`/integrations/${provider.id}`)
+ history.push(`/connections/${provider.id}`)
}
return (
diff --git a/config-ui/src/pages/configure/settings/zentao.jsx
b/config-ui/src/pages/configure/settings/zentao.jsx
index 96de85a1f..f51b6999e 100644
--- a/config-ui/src/pages/configure/settings/zentao.jsx
+++ b/config-ui/src/pages/configure/settings/zentao.jsx
@@ -32,7 +32,7 @@ export default function ZentaoSettings(props) {
const history = useHistory()
const cancel = () => {
- history.push(`/integrations/${provider.id}`)
+ history.push(`/connections/${provider.id}`)
}
return (
diff --git a/config-ui/src/pages/project/detail/styled.ts
b/config-ui/src/pages/project/detail/styled.ts
index aa6b434f6..eaa7cabc7 100644
--- a/config-ui/src/pages/project/detail/styled.ts
+++ b/config-ui/src/pages/project/detail/styled.ts
@@ -46,8 +46,6 @@ export const Wrapper = styled.div`
}
.settings {
- padding: 24px;
-
h3 {
margin: 0;
padding: 0;
