fix: some bugs for project layout

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

@@ -77,7 +77,7 @@ export const BlueprintDetail = ({ id, from }: Props) => {
           },
           {
             key: 'configuration',
-            label: 'Configuration',
+            label: 'General Settings',
             children: (
               <ConfigurationPanel
                 from={from}

config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx

@@ -17,7 +17,7 @@
  */
 
 import { useState, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { PlusOutlined } from '@ant-design/icons';
 import { Modal, Select, Space, Button } from 'antd';
 import styled from 'styled-components';
@@ -62,7 +62,7 @@
   const [step, setStep] = useState(1);
   const [selectedValue, setSelectedValue] = useState<string>();
 
   const navigate = useNavigate();
 
   const connections = useAppSelector(selectAllConnections);
 
@@ -110,9 +110,12 @@
               optionRender={(option, { index }) => {
                 if (index === 0) {
                   return (
-                    <Button size="small" type="link" icon={<PlusOutlined />}>
-                      Add New Connection
-                    </Button>
+                    <Link style={{ display: 'block' }} to="/connections" target="_blank">
+                      <Space>
+                        <PlusOutlined />
+                        <span>Add New Connection</span>
+                      </Space>
+                    </Link>
                   );
                 }
                 return (
@@ -123,7 +126,7 @@
               }}
               onChange={(value) => {
                 if (!value) {
-                  navigate('/connections');
+                  return;
                 }
                 setSelectedValue(value);
               }}

config-ui/src/routes/blueprint/detail/components/index.ts

@@ -18,5 +18,4 @@
 
 export * from './add-connection-dialog';
 export * from './advanced-editor';
-export * from './update-name-dialog';
 export * from './update-policy-dialog';

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

@@ -32,7 +32,7 @@ import { formatTime, operator } from '@/utils';
 import { FromEnum } from '../types';
 import { validRawPlan } from '../utils';
 
-import { AdvancedEditor, UpdateNameDialog, UpdatePolicyDialog, AddConnectionDialog } from './components';
+import { AdvancedEditor, UpdatePolicyDialog, AddConnectionDialog } from './components';
 import * as S from './styled';
 
 interface Props {
@@ -43,7 +43,7 @@ interface Props {
 }
 
 export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }: Props) => {
-  const [type, setType] = useState<'name' | 'policy' | 'add-connection'>();
+  const [type, setType] = useState<'policy' | 'add-connection'>();
   const [rawPlan, setRawPlan] = useState('');
   const [operating, setOperating] = useState(false);
 
@@ -72,10 +72,6 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
     setType(undefined);
   };
 
-  const handleShowNameDialog = () => {
-    setType('name');
-  };
-
   const handleShowPolicyDialog = () => {
     setType('policy');
   };
@@ -120,11 +116,6 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
 
   return (
     <S.ConfigurationPanel>
-      <div className="block">
-        <h3>Blueprint Name</h3>
-        <span>{blueprint.name}</span>
-        <Button type="link" icon={<FormOutlined />} onClick={handleShowNameDialog} />
-      </div>
       <div className="block">
         <h3>
           <span>Sync Policy</span>
@@ -244,14 +235,6 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
           </div>
         </div>
       )}
-      {type === 'name' && (
-        <UpdateNameDialog
-          name={blueprint.name}
-          operating={operating}
-          onCancel={handleCancel}
-          onSubmit={(name) => handleUpdate({ name })}
-        />
-      )}
       {type === 'policy' && (
         <UpdatePolicyDialog
           blueprint={blueprint}

config-ui/src/routes/project/home/index.tsx

@@ -119,7 +119,7 @@ export const ProjectHomePage = () => {
             key: 'name',
             render: (name: string) => (
               <Link
-                to={`/projects/${encodeURIComponent(name)}`}
+                to={`/projects/${encodeURIComponent(name)}/general-settings`}
                 state={{ activeKey: 'configuration' }}
                 style={{ color: '#292b3f' }}
                 ref={nameRef}
@@ -182,9 +182,9 @@ export const ProjectHomePage = () => {
                 ref={configRef}
                 type="primary"
                 icon={<SettingOutlined />}
-                helptip="Project Configuration"
+                helptip="Project Settings"
                 onClick={() =>
-                  navigate(`/projects/${encodeURIComponent(name)}`, {
+                  navigate(`/projects/${encodeURIComponent(name)}/general-settings`, {
                     state: { activeKey: 'configuration' },
                   })
                 }

config-ui/src/routes/project/layout/index.tsx

@@ -17,7 +17,7 @@
  */
 
 import { useMemo } from 'react';
-import { useParams, useNavigate, useLocation, Outlet } from 'react-router-dom';
+import { useParams, useNavigate, useLocation, Link, Outlet } from 'react-router-dom';
 import { RollbackOutlined } from '@ant-design/icons';
 import { Layout, Menu } from 'antd';
 
@@ -52,18 +52,49 @@ const items = [
   },
 ];
 
+const breadcrumbs = (paths: string[]) => {
+  const map: Record<
+    string,
+    {
+      path: string;
+      name: string;
+    }
+  > = {
+    '/config': {
+      path: '/',
+      name: 'Configurations',
+    },
+    projects: {
+      path: '/projects',
+      name: 'Projects',
+    },
+  };
+
+  return paths
+    .filter((p) => p)
+    .map(
+      (p) =>
+        map[p] ?? {
+          path: `/projects/${p}`,
+          name: p,
+        },
+    );
+};
+
 export const ProjectLayout = () => {
   const { pname } = useParams() as { pname: string };
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
-  const { selectedKeys, breadcrumbs } = useMemo(() => {
-    const key = pathname.split('/').pop();
+  const { paths, selectedKeys, title } = useMemo(() => {
+    const paths = pathname.split('/');
+    const key = paths.pop();
     const item = items.find((i) => i.key === key);
 
     return {
+      paths,
       selectedKeys: key ? [key] : [],
-      breadcrumbs: [
+      title: [
         {
           name: item?.label ?? '',
           path: '',
@@ -90,8 +121,15 @@ export const ProjectLayout = () => {
       </Sider>
       <Layout>
         <Content style={{ padding: '36px 48px', overflowY: 'auto' }}>
-          <p>Configurations / Projects / {pname} /</p>
-          <PageHeader breadcrumbs={breadcrumbs}>
+          <p>
+            {breadcrumbs(paths).map((b) => (
+              <span key={b.path}>
+                <Link to={b.path}>{b.name}</Link>
+                <span> / </span>
+              </span>
+            ))}
+          </p>
+          <PageHeader breadcrumbs={title}>
             <Outlet />
           </PageHeader>
         </Content>

config-ui/src/routes/project/webhook/index.tsx

@@ -135,7 +135,7 @@ export const ProjectWebhook = () => {
             <div style={{ marginTop: 16 }}>
               To calculate DORA after receiving Webhook data immediately, you can visit the{' '}
               <b style={{ textDecoration: 'underline' }}>
-                <Link to={`${window.location.pathname}?tab=status`}>Status tab</Link>
+                <Link to={`/projects/${encodeURIComponent(pname)}/general-settings`}>Status tab</Link>
               </b>{' '}
               of the Blueprint page and click on Run Now.
             </div>