You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2023/05/08 02:49:57 UTC
[incubator-devlake] branch release-v0.17 updated: fix(config-ui): keep tab state in project details (#5111)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch release-v0.17
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/release-v0.17 by this push:
new 06571b678 fix(config-ui): keep tab state in project details (#5111)
06571b678 is described below
commit 06571b6781c06b592bc4605317967e52eb7c838e
Author: 青湛 <0x...@gmail.com>
AuthorDate: Mon May 8 10:49:54 2023 +0800
fix(config-ui): keep tab state in project details (#5111)
---
config-ui/src/pages/project/detail/index.tsx | 23 +++++++++++++++++++---
.../register/webook/create-dialog/index.tsx | 13 ++++++------
.../register/webook/create-dialog/use-create.ts | 12 ++++-------
3 files changed, 30 insertions(+), 18 deletions(-)
diff --git a/config-ui/src/pages/project/detail/index.tsx b/config-ui/src/pages/project/detail/index.tsx
index 929e94114..065352a08 100644
--- a/config-ui/src/pages/project/detail/index.tsx
+++ b/config-ui/src/pages/project/detail/index.tsx
@@ -16,8 +16,8 @@
*
*/
-import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { useParams, useLocation, useHistory } from 'react-router-dom';
import { Tabs, Tab } from '@blueprintjs/core';
import { PageHeader, PageLoading } from '@/components';
@@ -27,10 +27,27 @@ import { BlueprintPanel, IncomingWebhooksPanel, SettingsPanel } from './panel';
import * as S from './styled';
export const ProjectDetailPage = () => {
+ const [tabId, setTabId] = useState('bp');
+
const { pname } = useParams<{ pname: string }>();
+ const { search } = useLocation();
+ const history = useHistory();
+
+ const query = new URLSearchParams(search);
+ const urlTabId = query.get('tabId');
+
+ useEffect(() => {
+ setTabId(urlTabId ?? 'bp');
+ }, [urlTabId]);
const { loading, project, saving, onUpdate, onSelectWebhook, onCreateWebhook, onDeleteWebhook } = useProject(pname);
+ const handleChangeTabId = (tabId: string) => {
+ query.delete('tabId');
+ query.append('tabId', tabId);
+ history.push({ search: query.toString() });
+ };
+
if (loading || !project) {
return <PageLoading />;
}
@@ -43,7 +60,7 @@ export const ProjectDetailPage = () => {
]}
>
<S.Wrapper>
- <Tabs>
+ <Tabs selectedTabId={tabId} onChange={handleChangeTabId}>
<Tab id="bp" title="Blueprint" panel={<BlueprintPanel project={project} />} />
<Tab
id="iw"
diff --git a/config-ui/src/plugins/register/webook/create-dialog/index.tsx b/config-ui/src/plugins/register/webook/create-dialog/index.tsx
index 2de29c13a..cfab833e1 100644
--- a/config-ui/src/plugins/register/webook/create-dialog/index.tsx
+++ b/config-ui/src/plugins/register/webook/create-dialog/index.tsx
@@ -16,25 +16,23 @@
*
*/
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { InputGroup, Icon } from '@blueprintjs/core';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Dialog, toast } from '@/components';
-import type { UseCreateProps } from './use-create';
import { useCreate } from './use-create';
import * as S from './styled';
-interface Props extends UseCreateProps {
+interface Props {
isOpen: boolean;
onCancel: () => void;
+ onSubmitAfter?: (id: ID) => void;
}
-export const WebhookCreateDialog = ({ isOpen, onCancel, ...props }: Props) => {
- const { saving, step, name, record, onChangeName, onSubmit } = useCreate({
- ...props,
- });
+export const WebhookCreateDialog = ({ isOpen, onCancel, onSubmitAfter }: Props) => {
+ const { saving, step, name, record, onChangeName, onSubmit } = useCreate();
const [okText, okDisabled] = useMemo(
() => [step === 1 ? 'Generate POST URL' : 'Done', step === 1 && !name],
@@ -46,6 +44,7 @@ export const WebhookCreateDialog = ({ isOpen, onCancel, ...props }: Props) => {
onSubmit();
} else {
onCancel();
+ onSubmitAfter?.(record.id);
}
};
diff --git a/config-ui/src/plugins/register/webook/create-dialog/use-create.ts b/config-ui/src/plugins/register/webook/create-dialog/use-create.ts
index d1920d57e..b25b8726c 100644
--- a/config-ui/src/plugins/register/webook/create-dialog/use-create.ts
+++ b/config-ui/src/plugins/register/webook/create-dialog/use-create.ts
@@ -22,15 +22,12 @@ import { operator } from '@/utils';
import * as API from '../api';
-export interface UseCreateProps {
- onSubmitAfter?: (id: ID) => void;
-}
-
-export const useCreate = ({ onSubmitAfter }: UseCreateProps) => {
+export const useCreate = () => {
const [saving, setSaving] = useState(false);
const [step, setStep] = useState(1);
const [name, setName] = useState('');
const [record, setRecord] = useState({
+ id: 0,
postIssuesEndpoint: '',
closeIssuesEndpoint: '',
postDeploymentsCurl: '',
@@ -49,9 +46,10 @@ export const useCreate = ({ onSubmitAfter }: UseCreateProps) => {
},
);
- if (success && !onSubmitAfter) {
+ if (success) {
setStep(2);
setRecord({
+ id: res.id,
postIssuesEndpoint: `${prefix}${res.postIssuesEndpoint}`,
closeIssuesEndpoint: `${prefix}${res.closeIssuesEndpoint}`,
postDeploymentsCurl: `curl ${prefix}${res.postPipelineDeployTaskEndpoint}-X 'POST' -d '{
@@ -60,8 +58,6 @@ export const useCreate = ({ onSubmitAfter }: UseCreateProps) => {
\\"start_time\\":\\"eg. 2020-01-01T12:00:00+00:00\\"
}'`,
});
- } else if (success) {
- onSubmitAfter?.(res.id);
}
};