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 bd61f605f fix(config-ui): adjust the redirect link for project/bp
detail (#5665)
bd61f605f is described below
commit bd61f605fffcaadf655034989b727e36377afe34
Author: 青湛 <[email protected]>
AuthorDate: Thu Jul 13 15:26:13 2023 +1200
fix(config-ui): adjust the redirect link for project/bp detail (#5665)
---
.../pages/blueprint/connection-detail/index.tsx | 2 +-
.../pages/blueprint/detail/blueprint-detail.tsx | 24 +++++++++-----------
.../pages/blueprint/detail/configuration-panel.tsx | 4 +++-
config-ui/src/pages/blueprint/home/index.tsx | 12 ++++++----
config-ui/src/pages/project/detail/index.tsx | 26 +++++++---------------
.../src/pages/project/detail/settings-panel.tsx | 6 +++--
config-ui/src/pages/project/home/index.tsx | 8 +++++--
7 files changed, 41 insertions(+), 41 deletions(-)
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx
b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 5d9a8c643..2c66ce8cd 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -123,7 +123,7 @@ export const BlueprintConnectionDetailPage = () => {
if (success) {
handleShowTips();
- navigate(pname ? `/projects/${pname}` : `/blueprints/${blueprint.id}`);
+ navigate(pname ? `/projects/${pname}?tab=configuration` :
`/blueprints/${blueprint.id}?tab=configuration`);
}
};
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
index 2e773d32a..082a580ee 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
@@ -45,6 +45,14 @@ export const BlueprintDetail = ({ id, from }: Props) => {
return [bpRes, pipelineRes.pipelines[0]];
}, [version]);
+ const handlRefresh = () => {
+ setVersion((v) => v + 1);
+ };
+
+ const handleChangeTab = (tab: string) => {
+ setQuery({ tab });
+ };
+
if (!ready || !data) {
return <PageLoading />;
}
@@ -58,15 +66,7 @@ export const BlueprintDetail = ({ id, from }: Props) => {
id="status"
title="Status"
panel={
- <StatusPanel
- from={from}
- blueprint={blueprint}
- pipelineId={lastPipeline?.id}
- onRefresh={() => {
- setVersion((v) => v + 1);
- setQuery({ tab: 'status' });
- }}
- />
+ <StatusPanel from={from} blueprint={blueprint}
pipelineId={lastPipeline?.id} onRefresh={handlRefresh} />
}
/>
<Tab
@@ -76,10 +76,8 @@ export const BlueprintDetail = ({ id, from }: Props) => {
<ConfigurationPanel
from={from}
blueprint={blueprint}
- onRefresh={() => {
- setVersion((v) => v + 1);
- setQuery({ tab: 'configuration' });
- }}
+ onRefresh={handlRefresh}
+ onChangeTab={handleChangeTab}
/>
}
/>
diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
index f5225c493..c04f29432 100644
--- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -38,9 +38,10 @@ interface Props {
from: FromEnum;
blueprint: BlueprintType;
onRefresh: () => void;
+ onChangeTab: (tab: string) => void;
}
-export const ConfigurationPanel = ({ from, blueprint, onRefresh }: Props) => {
+export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab
}: Props) => {
const [type, setType] = useState<'name' | 'policy' | 'add-connection'>();
const [rawPlan, setRawPlan] = useState('');
const [operating, setOperating] = useState(false);
@@ -114,6 +115,7 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh }: Props) => {
if (success) {
onRefresh();
+ onChangeTab('status');
}
};
diff --git a/config-ui/src/pages/blueprint/home/index.tsx
b/config-ui/src/pages/blueprint/home/index.tsx
index 73867f38c..78f208ad6 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -139,9 +139,13 @@ export const BlueprintHomePage = () => {
columns={[
{
title: 'Blueprint Name',
- dataIndex: 'name',
+ dataIndex: ['id', 'name'],
key: 'name',
- ellipsis: true,
+ render: ({ id, name }) => (
+ <Link to={`/blueprints/${id}?tab=configuration`} style={{
color: '#292b3f' }}>
+ <TextTooltip content={name}>{name}</TextTooltip>
+ </Link>
+ ),
},
{
title: 'Data Connections',
@@ -188,7 +192,7 @@ export const BlueprintHomePage = () => {
<TextTooltip content={val}>{val}</TextTooltip>
</Link>
) : (
- val
+ 'N/A'
),
},
{
@@ -210,7 +214,7 @@ export const BlueprintHomePage = () => {
width: 100,
align: 'center',
render: (val) => (
- <Link to={`/blueprints/${val}`}>
+ <Link to={`/blueprints/${val}?tab=configuration`}>
<IconButton icon="cog" tooltip="Detail" />
</Link>
),
diff --git a/config-ui/src/pages/project/detail/index.tsx
b/config-ui/src/pages/project/detail/index.tsx
index 50e8ace09..58337995e 100644
--- a/config-ui/src/pages/project/detail/index.tsx
+++ b/config-ui/src/pages/project/detail/index.tsx
@@ -16,9 +16,10 @@
*
*/
-import { useState, useEffect } from 'react';
-import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
import { Tabs, Tab } from '@blueprintjs/core';
+import useUrlState from '@ahooksjs/use-url-state';
import { PageHeader, PageLoading } from '@/components';
import { useRefreshData } from '@/hooks';
@@ -30,26 +31,15 @@ import * as API from './api';
import * as S from './styled';
export const ProjectDetailPage = () => {
- const [tabId, setTabId] = useState('blueprint');
const [version, setVersion] = useState(1);
const { pname } = useParams() as { pname: string };
- const { search } = useLocation();
- const navigate = useNavigate();
+ const [query, setQuery] = useUrlState({ tabId: 'blueprint' });
- const query = new URLSearchParams(search);
- const urlTabId = query.get('tabId');
-
- useEffect(() => {
- setTabId(urlTabId ?? 'blueprint');
- }, [urlTabId]);
-
- const { ready, data } = useRefreshData(() =>
Promise.all([API.getProject(pname)]), [version]);
+ const { ready, data } = useRefreshData(() =>
Promise.all([API.getProject(pname)]), [pname, version]);
const handleChangeTabId = (tabId: string) => {
- query.delete('tabId');
- query.append('tabId', tabId);
- navigate({ search: query.toString() });
+ setQuery({ tabId });
};
const handleRefresh = () => {
@@ -70,7 +60,7 @@ export const ProjectDetailPage = () => {
]}
>
<S.Wrapper>
- <Tabs selectedTabId={tabId} onChange={handleChangeTabId}>
+ <Tabs selectedTabId={query.tabId} onChange={handleChangeTabId}>
<Tab
id="blueprint"
title="Blueprint"
@@ -81,7 +71,7 @@ export const ProjectDetailPage = () => {
title="Incoming Webhooks"
panel={<WebhooksPanel project={project} onRefresh={handleRefresh}
/>}
/>
- <Tab id="settings" title="Settings" panel={<SettingsPanel
project={project} />} />
+ <Tab id="settings" title="Settings" panel={<SettingsPanel
project={project} onRefresh={handleRefresh} />} />
</Tabs>
</S.Wrapper>
</PageHeader>
diff --git a/config-ui/src/pages/project/detail/settings-panel.tsx
b/config-ui/src/pages/project/detail/settings-panel.tsx
index a6938ff56..94c92feef 100644
--- a/config-ui/src/pages/project/detail/settings-panel.tsx
+++ b/config-ui/src/pages/project/detail/settings-panel.tsx
@@ -31,9 +31,10 @@ import * as S from './styled';
interface Props {
project: ProjectType;
+ onRefresh: () => void;
}
-export const SettingsPanel = ({ project }: Props) => {
+export const SettingsPanel = ({ project, onRefresh }: Props) => {
const [name, setName] = useState('');
const [enableDora, setEnableDora] = useState(false);
const [operating, setOperating] = useState(false);
@@ -73,7 +74,8 @@ export const SettingsPanel = ({ project }: Props) => {
);
if (success) {
- navigate(`/projects/${name}`);
+ onRefresh();
+ navigate(`/projects/${name}?tabId=settings`);
}
};
diff --git a/config-ui/src/pages/project/home/index.tsx
b/config-ui/src/pages/project/home/index.tsx
index 8b371d51f..e15a76dc3 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -111,7 +111,7 @@ export const ProjectHomePage = () => {
dataIndex: 'name',
key: 'name',
render: (name: string) => (
- <Link to={`/projects/${encodeName(name)}`} style={{ color:
'#292b3f' }}>
+ <Link to={`/projects/${encodeName(name)}?tab=configuration`}
style={{ color: '#292b3f' }}>
{name}
</Link>
),
@@ -123,7 +123,11 @@ export const ProjectHomePage = () => {
width: 100,
align: 'center',
render: (name: any) => (
- <IconButton icon="cog" tooltip="Detail" onClick={() =>
navigate(`/projects/${encodeName(name)}`)} />
+ <IconButton
+ icon="cog"
+ tooltip="Detail"
+ onClick={() =>
navigate(`/projects/${encodeName(name)}?tab=configuration`)}
+ />
),
},
]}
