feat: use new project detail layout

config-ui/src/api/project/index.ts

@@ -20,7 +20,7 @@ import type { IProject } from '@/types';
 import { encodeName } from '@/routes';
 import { request } from '@/utils';
 
-export const list = (data: Pagination): Promise<{ count: number; projects: IProject[] }> =>
+export const list = (data: Pagination & { keyword?: string }): Promise<{ count: number; projects: IProject[] }> =>
   request('/projects', { data });
 
 export const get = (name: string): Promise<IProject> => request(`/projects/${encodeName(name)}`);

config-ui/src/app/routrer.tsx

@@ -27,7 +27,10 @@ import {
   Connections,
   Connection,
   ProjectHomePage,
-  ProjectDetailPage,
+  ProjectLayout,
+  ProjectGeneralSettings,
+  ProjectWebhook,
+  ProjectAdditionalSettings,
   BlueprintHomePage,
   BlueprintDetailPage,
   BlueprintConnectionDetailPage,
@@ -52,6 +55,28 @@ export const router = createBrowserRouter([
     path: `${PATH_PREFIX}/onboard`,
     element: <Onboard />,
   },
+  {
+    path: `${PATH_PREFIX}/projects/:pname`,
+    element: <ProjectLayout />,
+    children: [
+      {
+        index: true,
+        element: <Navigate to="general-settings" />,
+      },
+      {
+        path: 'general-settings',
+        element: <ProjectGeneralSettings />,
+      },
+      {
+        path: 'webhooks',
+        element: <ProjectWebhook />,
+      },
+      {
+        path: 'additional-settings',
+        element: <ProjectAdditionalSettings />,
+      },
+    ],
+  },
   {
     path: `${PATH_PREFIX}`,
     element: <Layout />,
@@ -66,14 +91,6 @@ export const router = createBrowserRouter([
         path: 'projects',
         element: <ProjectHomePage />,
       },
-      {
-        path: 'projects/:pname',
-        element: <ProjectDetailPage />,
-      },
-      {
-        path: 'projects/:pname/:unique',
-        element: <BlueprintConnectionDetailPage />,
-      },
       {
         path: 'connections',
         element: <Connections />,

config-ui/src/hooks/index.ts

@@ -18,5 +18,6 @@
 
 export * from './extend-redux';
 export * from './use-auto-refresh';
+export * from './use-outside-click';
 export * from './use-refresh-data';
 export * from './user-proxy-prefix';

config-ui/src/routes/project/detail/styled.ts → config-ui/src/hooks/use-outside-click.ts

@@ -16,11 +16,19 @@
  *
  */
 
-import styled from 'styled-components';
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
 
-export const Wrapper = styled.div``;
-
-export const DialogBody = styled.div`
-  display: flex;
-  align-items: center;
-`;
+export const useOutsideClick = (ref: MutableRefObject<HTMLDivElement | null>, cb: () => void) => {
+  useEffect(() => {
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        cb();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, cb]);
+};

config-ui/src/routes/blueprint/detail/blueprint-detail.tsx

@@ -67,7 +67,6 @@ export const BlueprintDetail = ({ id, from }: Props) => {
   return (
     <S.Wrapper>
       <Tabs
-        centered
         items={[
           {
             key: 'status',

config-ui/src/routes/project/detail/settings-panel.tsx → config-ui/src/routes/project/additional-settings/index.tsx

@@ -17,25 +17,18 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Flex, Space, Card, Modal, Input, Checkbox, Button } from 'antd';
 
 import API from '@/api';
 import { Block, HelpTooltip, Message } from '@/components';
 import { PATHS } from '@/config';
-import { IProject } from '@/types';
+import { useRefreshData } from '@/hooks';
 import { operator } from '@/utils';
 
-import * as S from './styled';
-
 const RegexPrIssueDefaultValue = '(?mi)(Closes)[\\s]*.*(((and )?#\\d+[ ]*)+)';
 
-interface Props {
-  project: IProject;
-  onRefresh: () => void;
-}
-
-export const SettingsPanel = ({ project, onRefresh }: Props) => {
+export const ProjectAdditionalSettings = () => {
   const [name, setName] = useState('');
   const [dora, setDora] = useState({
     enable: false,
@@ -49,10 +42,19 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
   });
   const [operating, setOperating] = useState(false);
   const [open, setOpen] = useState(false);
+  const [version, setVersion] = useState(0);
 
   const navigate = useNavigate();
 
+  const { pname } = useParams() as { pname: string };
+
+  const { data: project } = useRefreshData(() => API.project.get(pname), [pname, version]);
+
   useEffect(() => {
+    if (!project) {
+      return;
+    }
+
     const dora = project.metrics.find((ms) => ms.pluginName === 'dora');
     const linker = project.metrics.find((ms) => ms.pluginName === 'linker');
     const issueTrace = project.metrics.find((ms) => ms.pluginName === 'issue_trace');
@@ -71,6 +73,10 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
   }, [project]);
 
   const handleUpdate = async () => {
+    if (!project) {
+      return;
+    }
+
     const [success] = await operator(
       () =>
         API.project.update(project.name, {
@@ -102,7 +108,7 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
     );
 
     if (success) {
-      onRefresh();
+      setVersion((v) => v + 1);
       navigate(PATHS.PROJECT(name), {
         state: {
           tabId: 'settings',
@@ -120,6 +126,10 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
   };
 
   const handleDelete = async () => {
+    if (!project) {
+      return;
+    }
+
     const [success] = await operator(() => API.project.remove(project.name), {
       setOperating,
       formatMessage: () => 'Delete project successful.',
@@ -215,9 +225,9 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
         onCancel={handleHideDeleteDialog}
         onOk={handleDelete}
       >
-        <S.DialogBody>
+        <Flex align="center">
           <Message content="This operation cannot be undone. Deleting a Data Connection will delete all data that have been collected in this Connection." />
-        </S.DialogBody>
+        </Flex>
       </Modal>
     </Flex>
   );

config-ui/src/routes/project/general-settings/index.tsx

@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useParams } from 'react-router-dom';
+
+import API from '@/api';
+import { PageLoading } from '@/components';
+import { useRefreshData } from '@/hooks';
+import { BlueprintDetail, FromEnum } from '@/routes';
+
+export const ProjectGeneralSettings = () => {
+  const { pname } = useParams() as { pname: string };
+
+  const { ready, data: project } = useRefreshData(() => API.project.get(pname), [pname]);
+
+  if (!ready || !project) {
+    return <PageLoading />;
+  }
+
+  return <BlueprintDetail id={project.blueprint.id} from={FromEnum.project} />;
+};

config-ui/src/routes/project/index.ts

@@ -16,6 +16,9 @@
  *
  */
 
+export * from './additional-settings';
 export * from './utils';
 export * from './home';
-export * from './detail';
+export * from './general-settings';
+export * from './layout';
+export * from './webhook';