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 51e42c7b9 fix(config-ui): some bugs (#4119)
51e42c7b9 is described below
commit 51e42c7b9456993d7dc6e492a3a46e1b7f43262f
Author: 青湛 <[email protected]>
AuthorDate: Thu Jan 5 20:42:07 2023 +0800
fix(config-ui): some bugs (#4119)
* fix(config-ui): the placeholder not right on tapd
* feat(config-ui): show beta on siderbar menu item
* fix(config-ui): adjust delete scope condition
* fix(config-ui): adjust scope length condition
---
config-ui/src/layouts/base/base.tsx | 9 +++++++--
config-ui/src/layouts/base/styled.ts | 9 +++++++++
config-ui/src/layouts/base/use-menu.ts | 9 +++++++--
config-ui/src/pages/blueprint/create/bp-context.tsx | 2 +-
config-ui/src/plugins/common/data-scope-list/index.tsx | 7 ++++---
config-ui/src/plugins/tapd/config.ts | 2 +-
6 files changed, 29 insertions(+), 9 deletions(-)
diff --git a/config-ui/src/layouts/base/base.tsx
b/config-ui/src/layouts/base/base.tsx
index 51209d6c8..39274860f 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -18,7 +18,7 @@
import React from 'react';
import { useLocation, useHistory } from 'react-router-dom';
-import { Menu, MenuItem, Navbar, Alignment } from '@blueprintjs/core';
+import { Menu, MenuItem, Tag, Navbar, Intent, Alignment } from
'@blueprintjs/core';
import { Logo } from '@/components';
import { useVersion } from '@/store';
@@ -66,7 +66,12 @@ export const BaseLayout = ({ children }: Props) => {
<MenuItem
key={cit.key}
className="sub-menu-item"
- text={cit.title}
+ text={
+ <S.SiderMenuItem>
+ <span>{cit.title}</span>
+ {cit.isBeta && <Tag intent={Intent.WARNING}>beta</Tag>}
+ </S.SiderMenuItem>
+ }
icon={cit.icon ?? <img src={cit.iconUrl} width={16} alt=""
/>}
active={pathname.includes(cit.path)}
onClick={() => handlePushPath(cit)}
diff --git a/config-ui/src/layouts/base/styled.ts
b/config-ui/src/layouts/base/styled.ts
index 443c90a43..77fe0fcdf 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -116,3 +116,12 @@ export const Content = styled.div`
max-width: 900px;
width: 100%;
`;
+
+export const SiderMenuItem = styled.div`
+ display: flex;
+ align-items: center;
+
+ & > .bp4-tag {
+ margin-left: 8px;
+ }
+`;
diff --git a/config-ui/src/layouts/base/use-menu.ts
b/config-ui/src/layouts/base/use-menu.ts
index b4cc34b26..e7abe62bd 100644
--- a/config-ui/src/layouts/base/use-menu.ts
+++ b/config-ui/src/layouts/base/use-menu.ts
@@ -19,6 +19,7 @@
import { useMemo } from 'react';
import { IconName } from '@blueprintjs/core';
+import type { PluginConfigConnectionType } from '@/plugins';
import { PluginConfig, PluginType } from '@/plugins';
export type MenuItemType = {
@@ -29,6 +30,7 @@ export type MenuItemType = {
path: string;
children?: MenuItemType[];
target?: boolean;
+ isBeta?: boolean;
};
export const useMenu = () => {
@@ -53,13 +55,16 @@ export const useMenu = () => {
title: 'Connections',
icon: 'data-connection',
path: '/connections',
- children: PluginConfig.filter((p) =>
- [PluginType.Connection,
PluginType.Incoming_Connection].includes(p.type),
+ children: (
+ PluginConfig.filter((p) =>
+ [PluginType.Connection,
PluginType.Incoming_Connection].includes(p.type),
+ ) as PluginConfigConnectionType[]
).map((it) => ({
key: it.plugin,
title: it.name,
iconUrl: it.icon,
path: `/connections/${it.plugin}`,
+ isBeta: it.isBeta,
})),
},
{
diff --git a/config-ui/src/pages/blueprint/create/bp-context.tsx
b/config-ui/src/pages/blueprint/create/bp-context.tsx
index 06ed0805d..9305de9a2 100644
--- a/config-ui/src/pages/blueprint/create/bp-context.tsx
+++ b/config-ui/src/pages/blueprint/create/bp-context.tsx
@@ -104,7 +104,7 @@ export const BPContextProvider = ({ from, projectName,
children }: Props) => {
.filter((cs) => uniqueList.includes(cs.unique))
.every((cs) => cs.status === ConnectionStatusEnum.ONLINE):
return 'Normal Mode: Has some offline connections';
- case step === 2 && Object.keys(scopeMap).length !== uniqueList.length:
+ case step === 2 && Object.keys(scopeMap).filter((key) =>
scopeMap[key].length).length !== uniqueList.length:
return 'No Data Scope is Selected';
default:
return '';
diff --git a/config-ui/src/plugins/common/data-scope-list/index.tsx
b/config-ui/src/plugins/common/data-scope-list/index.tsx
index e5e4fe04c..20f79ca6a 100644
--- a/config-ui/src/plugins/common/data-scope-list/index.tsx
+++ b/config-ui/src/plugins/common/data-scope-list/index.tsx
@@ -28,11 +28,12 @@ import * as S from './styled';
interface Props extends UseDataScopeList {
groupByTs: boolean;
+ scopeIds: string[];
onDelete?: (plugin: Plugins, connectionId: ID, scopeId: ID) => void;
}
-export const DataScopeList = ({ groupByTs, onDelete, ...props }: Props) => {
- const { loading, scope, scopeTsMap } = useDataScopeList({ ...props });
+export const DataScopeList = ({ groupByTs, scopeIds, onDelete, ...props }:
Props) => {
+ const { loading, scope, scopeTsMap } = useDataScopeList({ scopeIds, ...props
});
if (!scope.length) {
return <span>No Data Scope Selected</span>;
@@ -65,7 +66,7 @@ export const DataScopeList = ({ groupByTs, onDelete, ...props
}: Props) => {
{scopeTsMap[name].map((sc) => (
<li key={sc.id}>
<span>{sc.name}</span>
- {onDelete && (
+ {onDelete && scopeIds.length > 1 && (
<DeleteButton onDelete={() => onDelete(props.plugin,
props.connectionId, sc.id)}>
<Button small minimal intent={Intent.PRIMARY}
icon="cross" />
</DeleteButton>
diff --git a/config-ui/src/plugins/tapd/config.ts
b/config-ui/src/plugins/tapd/config.ts
index 204c9c2ac..8d3d7b383 100644
--- a/config-ui/src/plugins/tapd/config.ts
+++ b/config-ui/src/plugins/tapd/config.ts
@@ -37,7 +37,7 @@ export const TAPDConfig: PluginConfigType = {
label: 'Connection Name',
type: 'text',
required: true,
- placeholder: 'eg. ZenTao',
+ placeholder: 'eg. TAPD',
},
{
key: 'endpoint',
