You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by kl...@apache.org on 2023/06/30 05:07:27 UTC
[incubator-devlake] branch main updated: fix(config-ui): The tab state cannot be maintained (#5600)
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 ad0cd4d98 fix(config-ui): The tab state cannot be maintained (#5600)
ad0cd4d98 is described below
commit ad0cd4d980044ecaf8110a18d90300f4c0f22841
Author: 青湛 <0x...@gmail.com>
AuthorDate: Fri Jun 30 17:07:22 2023 +1200
fix(config-ui): The tab state cannot be maintained (#5600)
---
config-ui/package.json | 1 +
.../pages/blueprint/detail/blueprint-detail.tsx | 12 +-
config-ui/src/pages/project/home/index.tsx | 8 +-
config-ui/yarn.lock | 140 +++++++++++++++++++++
4 files changed, 155 insertions(+), 6 deletions(-)
diff --git a/config-ui/package.json b/config-ui/package.json
index 601e54bf4..77f069a8f 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -22,6 +22,7 @@
]
},
"dependencies": {
+ "@ahooksjs/use-url-state": "^3.5.1",
"@blueprintjs/core": "^4.13.0",
"@blueprintjs/datetime2": "^0.9.6",
"@blueprintjs/popover2": "^1.10.2",
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
index a1602ace3..25c3d750b 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
@@ -17,8 +17,8 @@
*/
import { useState } from 'react';
-import type { TabId } from '@blueprintjs/core';
import { Tabs, Tab } from '@blueprintjs/core';
+import useUrlState from '@ahooksjs/use-url-state';
import { PageLoading } from '@/components';
import { useRefreshData } from '@/hooks';
@@ -36,15 +36,19 @@ interface Props {
}
export const BlueprintDetail = ({ id, from }: Props) => {
- const [activeTab, setActiveTab] = useState<TabId>(from === FromEnum.project ? 'configuration' : 'status');
const [version, setVersion] = useState(1);
+ const [query, setQuery] = useUrlState({ tab: 'status' });
+
const { ready, data } = useRefreshData(async () => {
const [bpRes, pipelineRes] = await Promise.all([API.getBlueprint(id), API.getBlueprintPipelines(id)]);
return [bpRes, pipelineRes.pipelines[0]];
}, [version]);
- const handleRefresh = () => setVersion((v) => v + 1);
+ const handleRefresh = () => {
+ setVersion((v) => v + 1);
+ setQuery({ tab: 'status' });
+ };
if (!ready || !data) {
return <PageLoading />;
@@ -54,7 +58,7 @@ export const BlueprintDetail = ({ id, from }: Props) => {
return (
<S.Wrapper>
- <Tabs selectedTabId={activeTab} onChange={(at) => setActiveTab(at)}>
+ <Tabs selectedTabId={query.tab} onChange={(tab) => setQuery({ tab })}>
<Tab
id="status"
title="Status"
diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
index ec8573252..842d78a2e 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={() => history.push(`/projects/${encodeName(name)}`)} />
+ <IconButton
+ icon="cog"
+ tooltip="Detail"
+ onClick={() => history.push(`/projects/${encodeName(name)}?tab=configuration`)}
+ />
),
},
]}
diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
index d5e14c41c..44fa5b1e1 100644
--- a/config-ui/yarn.lock
+++ b/config-ui/yarn.lock
@@ -5,6 +5,20 @@ __metadata:
version: 6
cacheKey: 8
+"@ahooksjs/use-url-state@npm:^3.5.1":
+ version: 3.5.1
+ resolution: "@ahooksjs/use-url-state@npm:3.5.1"
+ dependencies:
+ ahooks: ^3.4.1
+ query-string: ^6.9.0
+ tslib: ^2.4.1
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-router: ^5.0.0 || ^6.0.0
+ checksum: a0c51d2ec8d4c3d27269a94b53adec870a6ee617a9db40fc83c2e5ae79ec2ef0678d88b3d498319feaee3ae0b7fdcc872f292d745d72c7512d3ff05f6fae286b
+ languageName: node
+ linkType: hard
+
"@ampproject/remapping@npm:^2.2.0":
version: 2.2.0
resolution: "@ampproject/remapping@npm:2.2.0"
@@ -1438,6 +1452,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.21.0":
+ version: 7.22.5
+ resolution: "@babel/runtime@npm:7.22.5"
+ dependencies:
+ regenerator-runtime: ^0.13.11
+ checksum: 12a50b7de2531beef38840d17af50c55a094253697600cee255311222390c68eed704829308d4fd305e1b3dfbce113272e428e9d9d45b1730e0fede997eaceb1
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7":
version: 7.20.7
resolution: "@babel/template@npm:7.20.7"
@@ -2047,6 +2070,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/js-cookie@npm:^2.x.x":
+ version: 2.2.7
+ resolution: "@types/js-cookie@npm:2.2.7"
+ checksum: 851f47e94ca1fc43661d8f51614d67a613e7810c91b876d0a3b311ce72f7df800107fd02a08cb6948184e12c120b4f058edca2f50424d8798bdcffd6627281e3
+ languageName: node
+ linkType: hard
+
"@types/json-schema@npm:^7.0.9":
version: 7.0.11
resolution: "@types/json-schema@npm:7.0.11"
@@ -2375,6 +2405,33 @@ __metadata:
languageName: node
linkType: hard
+"ahooks-v3-count@npm:^1.0.0":
+ version: 1.0.0
+ resolution: "ahooks-v3-count@npm:1.0.0"
+ checksum: 3974d94b7cbe0694e18811dee5cfe507a740ecc2875e4bca204d30dfcf0a637a2035d3c296a1b873fc25aa14c4134e805ecc64d4dc2f5d0fb645090bb826771d
+ languageName: node
+ linkType: hard
+
+"ahooks@npm:^3.4.1":
+ version: 3.7.8
+ resolution: "ahooks@npm:3.7.8"
+ dependencies:
+ "@babel/runtime": ^7.21.0
+ "@types/js-cookie": ^2.x.x
+ ahooks-v3-count: ^1.0.0
+ dayjs: ^1.9.1
+ intersection-observer: ^0.12.0
+ js-cookie: ^2.x.x
+ lodash: ^4.17.21
+ resize-observer-polyfill: ^1.5.1
+ screenfull: ^5.0.0
+ tslib: ^2.4.1
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: f6473ba847b58e26851d36a35c36f661283aea343bae3384c9c8cc58bf5a9b479fabace5e435eda58b12b2980765d6c5d441a4e5519222f1f7c9890d05a231a9
+ languageName: node
+ linkType: hard
+
"ajv@npm:^6.10.0, ajv@npm:^6.12.4":
version: 6.12.6
resolution: "ajv@npm:6.12.6"
@@ -2972,6 +3029,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "config-ui@workspace:."
dependencies:
+ "@ahooksjs/use-url-state": ^3.5.1
"@blueprintjs/core": ^4.13.0
"@blueprintjs/datetime2": ^0.9.6
"@blueprintjs/popover2": ^1.10.2
@@ -3159,6 +3217,13 @@ __metadata:
languageName: node
linkType: hard
+"dayjs@npm:^1.9.1":
+ version: 1.11.8
+ resolution: "dayjs@npm:1.11.8"
+ checksum: 4fe04b6df98ba6e5f89b49d80bba603cbf01e21a1b4a24ecb163c94c0ba5324a32ac234a139cee654f89d5277a2bcebca5347e6676c28a0a6d1a90f1d34a42b8
+ languageName: node
+ linkType: hard
+
"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
version: 4.3.4
resolution: "debug@npm:4.3.4"
@@ -3180,6 +3245,13 @@ __metadata:
languageName: node
linkType: hard
+"decode-uri-component@npm:^0.2.0":
+ version: 0.2.2
+ resolution: "decode-uri-component@npm:0.2.2"
+ checksum: 95476a7d28f267292ce745eac3524a9079058bbb35767b76e3ee87d42e34cd0275d2eb19d9d08c3e167f97556e8a2872747f5e65cbebcac8b0c98d83e285f139
+ languageName: node
+ linkType: hard
+
"deep-equal@npm:^1.1.1":
version: 1.1.1
resolution: "deep-equal@npm:1.1.1"
@@ -3987,6 +4059,13 @@ __metadata:
languageName: node
linkType: hard
+"filter-obj@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "filter-obj@npm:1.1.0"
+ checksum: cf2104a7c45ff48e7f505b78a3991c8f7f30f28bd8106ef582721f321f1c6277f7751aacd5d83026cb079d9d5091082f588d14a72e7c5d720ece79118fa61e10
+ languageName: node
+ linkType: hard
+
"find-up@npm:^5.0.0":
version: 5.0.0
resolution: "find-up@npm:5.0.0"
@@ -4489,6 +4568,13 @@ __metadata:
languageName: node
linkType: hard
+"intersection-observer@npm:^0.12.0":
+ version: 0.12.2
+ resolution: "intersection-observer@npm:0.12.2"
+ checksum: d1fa9ebbb1e0baafe88ad95545bbb93f92bdcb8789912a2bd11b2463ab177ef185052c9c79c26187833d633f404acb077d4b1249353c5f6e2ca5cd64f50e216b
+ languageName: node
+ linkType: hard
+
"ip@npm:^2.0.0":
version: 2.0.0
resolution: "ip@npm:2.0.0"
@@ -4753,6 +4839,13 @@ __metadata:
languageName: node
linkType: hard
+"js-cookie@npm:^2.x.x":
+ version: 2.2.1
+ resolution: "js-cookie@npm:2.2.1"
+ checksum: 9b1fb980a1c5e624fd4b28ea4867bb30c71e04c4484bb3a42766344c533faa684de9498e443425479ec68609e96e27b60614bfe354877c449c631529b6d932f2
+ languageName: node
+ linkType: hard
+
"js-sdsl@npm:^4.1.4":
version: 4.3.0
resolution: "js-sdsl@npm:4.3.0"
@@ -5733,6 +5826,18 @@ __metadata:
languageName: node
linkType: hard
+"query-string@npm:^6.9.0":
+ version: 6.14.1
+ resolution: "query-string@npm:6.14.1"
+ dependencies:
+ decode-uri-component: ^0.2.0
+ filter-obj: ^1.1.0
+ split-on-first: ^1.0.0
+ strict-uri-encode: ^2.0.0
+ checksum: f2c7347578fa0f3fd4eaace506470cb4e9dc52d409a7ddbd613f614b9a594d750877e193b5d5e843c7477b3b295b857ec328903c943957adc41a3efb6c929449
+ languageName: node
+ linkType: hard
+
"queue-microtask@npm:^1.2.2":
version: 1.2.3
resolution: "queue-microtask@npm:1.2.3"
@@ -5986,6 +6091,13 @@ __metadata:
languageName: node
linkType: hard
+"resize-observer-polyfill@npm:^1.5.1":
+ version: 1.5.1
+ resolution: "resize-observer-polyfill@npm:1.5.1"
+ checksum: 57e7f79489867b00ba43c9c051524a5c8f162a61d5547e99333549afc23e15c44fd43f2f318ea0261ea98c0eb3158cca261e6f48d66e1ed1cd1f340a43977094
+ languageName: node
+ linkType: hard
+
"resolve-from@npm:^4.0.0":
version: 4.0.0
resolution: "resolve-from@npm:4.0.0"
@@ -6161,6 +6273,13 @@ __metadata:
languageName: node
linkType: hard
+"screenfull@npm:^5.0.0":
+ version: 5.2.0
+ resolution: "screenfull@npm:5.2.0"
+ checksum: 21eae33b780eb4679ea0ea2d14734b11168cf35049c45a2bf24ddeb39c67a788e7a8fb46d8b61ca6d8367fd67ce9dd4fc8bfe476489249c7189c2a79cf83f51a
+ languageName: node
+ linkType: hard
+
"semver@npm:^6.1.1, semver@npm:^6.1.2, semver@npm:^6.3.0":
version: 6.3.0
resolution: "semver@npm:6.3.0"
@@ -6324,6 +6443,13 @@ __metadata:
languageName: node
linkType: hard
+"split-on-first@npm:^1.0.0":
+ version: 1.1.0
+ resolution: "split-on-first@npm:1.1.0"
+ checksum: 16ff85b54ddcf17f9147210a4022529b343edbcbea4ce977c8f30e38408b8d6e0f25f92cd35b86a524d4797f455e29ab89eb8db787f3c10708e0b47ebf528d30
+ languageName: node
+ linkType: hard
+
"ssri@npm:^9.0.0":
version: 9.0.1
resolution: "ssri@npm:9.0.1"
@@ -6342,6 +6468,13 @@ __metadata:
languageName: node
linkType: hard
+"strict-uri-encode@npm:^2.0.0":
+ version: 2.0.0
+ resolution: "strict-uri-encode@npm:2.0.0"
+ checksum: eaac4cf978b6fbd480f1092cab8b233c9b949bcabfc9b598dd79a758f7243c28765ef7639c876fa72940dac687181b35486ea01ff7df3e65ce3848c64822c581
+ languageName: node
+ linkType: hard
+
"string-argv@npm:^0.3.1":
version: 0.3.1
resolution: "string-argv@npm:0.3.1"
@@ -6627,6 +6760,13 @@ __metadata:
languageName: node
linkType: hard
+"tslib@npm:^2.4.1":
+ version: 2.6.0
+ resolution: "tslib@npm:2.6.0"
+ checksum: c01066038f950016a18106ddeca4649b4d76caa76ec5a31e2a26e10586a59fceb4ee45e96719bf6c715648e7c14085a81fee5c62f7e9ebee68e77a5396e5538f
+ languageName: node
+ linkType: hard
+
"tslib@npm:~2.3.1":
version: 2.3.1
resolution: "tslib@npm:2.3.1"