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 2024/09/10 03:45:57 UTC
(incubator-devlake) branch fix-project-layout created (now ebaa5ab6c)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a change to branch fix-project-layout
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
at ebaa5ab6c fix: some bugs for project layout
This branch includes the following new commits:
new ebaa5ab6c fix: some bugs for project layout
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(incubator-devlake) 01/01: fix: some bugs for project layout
Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch fix-project-layout
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit ebaa5ab6cd0adef06cf636dc5b7c3f4936b48a63
Author: mintsweet <0x...@gmail.com>
AuthorDate: Tue Sep 10 15:45:44 2024 +1200
fix: some bugs for project layout
---
.../routes/blueprint/detail/blueprint-detail.tsx | 2 +-
.../components/add-connection-dialog/index.tsx | 13 ++++--
.../routes/blueprint/detail/components/index.ts | 1 -
.../detail/components/update-name-dialog/index.tsx | 53 ----------------------
.../blueprint/detail/configuration-panel.tsx | 21 +--------
config-ui/src/routes/project/home/index.tsx | 6 +--
config-ui/src/routes/project/layout/index.tsx | 50 +++++++++++++++++---
config-ui/src/routes/project/webhook/index.tsx | 2 +-
8 files changed, 59 insertions(+), 89 deletions(-)
diff --git a/config-ui/src/routes/blueprint/detail/blueprint-detail.tsx b/config-ui/src/routes/blueprint/detail/blueprint-detail.tsx
index b0b52cd11..3cc5321f9 100644
--- a/config-ui/src/routes/blueprint/detail/blueprint-detail.tsx
+++ b/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}
diff --git a/config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx b/config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx
index 34d6a834c..ccb2046bf 100644
--- a/config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx
+++ b/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';
@@ -110,9 +110,12 @@ export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props
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 @@ export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props
}}
onChange={(value) => {
if (!value) {
- navigate('/connections');
+ return;
}
setSelectedValue(value);
}}
diff --git a/config-ui/src/routes/blueprint/detail/components/index.ts b/config-ui/src/routes/blueprint/detail/components/index.ts
index 3d9b2044e..ab8f3f607 100644
--- a/config-ui/src/routes/blueprint/detail/components/index.ts
+++ b/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';
diff --git a/config-ui/src/routes/blueprint/detail/components/update-name-dialog/index.tsx b/config-ui/src/routes/blueprint/detail/components/update-name-dialog/index.tsx
deleted file mode 100644
index 8914ed12e..000000000
--- a/config-ui/src/routes/blueprint/detail/components/update-name-dialog/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * 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 { useState, useEffect } from 'react';
-import { Modal, Input } from 'antd';
-
-interface Props {
- name: string;
- operating: boolean;
- onCancel: () => void;
- onSubmit: (name: string) => void;
-}
-
-export const UpdateNameDialog = ({ operating, onCancel, onSubmit, ...props }: Props) => {
- const [name, setName] = useState('');
-
- useEffect(() => {
- setName(props.name);
- }, [props.name]);
-
- return (
- <Modal
- open
- title="Change Blueprint Name"
- okText="Save"
- okButtonProps={{
- disabled: !name || name === props.name,
- loading: operating,
- }}
- onCancel={onCancel}
- onOk={() => onSubmit(name)}
- >
- <h3>Blueprint Name</h3>
- <p>Give your Blueprint a unique name to help you identify it in the future.</p>
- <Input value={name} onChange={(e) => setName(e.target.value)} />
- </Modal>
- );
-};
diff --git a/config-ui/src/routes/blueprint/detail/configuration-panel.tsx b/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
index 66399f82c..cd1dd8ae8 100644
--- a/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
+++ b/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}
diff --git a/config-ui/src/routes/project/home/index.tsx b/config-ui/src/routes/project/home/index.tsx
index 75cf7b264..60ea6abf5 100644
--- a/config-ui/src/routes/project/home/index.tsx
+++ b/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' },
})
}
diff --git a/config-ui/src/routes/project/layout/index.tsx b/config-ui/src/routes/project/layout/index.tsx
index f2fc08d52..fe504e325 100644
--- a/config-ui/src/routes/project/layout/index.tsx
+++ b/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>
diff --git a/config-ui/src/routes/project/webhook/index.tsx b/config-ui/src/routes/project/webhook/index.tsx
index 9d267b243..20e828f71 100644
--- a/config-ui/src/routes/project/webhook/index.tsx
+++ b/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>