[incubator-devlake] branch main updated: fix(config-ui): keep tab state in project details (#5111)

[likyh]

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 735af15eb fix(config-ui): keep tab state in project details (#5111)
735af15eb is described below

commit 735af15ebda1af48d71ac8c6ef3e036779392bf3
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Mon May 8 10:06:50 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);
     }
   };