You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/02/17 06:52:21 UTC
[incubator-devlake] branch main updated: fix(config-ui): somethings for connections (#4423)
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 96b0f5ca3 fix(config-ui): somethings for connections (#4423)
96b0f5ca3 is described below
commit 96b0f5ca31793d290cd07c42a1268dc06aa00fab
Author: 青湛 <0x...@gmail.com>
AuthorDate: Fri Feb 17 13:52:17 2023 +0700
fix(config-ui): somethings for connections (#4423)
* fix(config-ui): github token valid error
* refactor(config-ui): remove old connection fields from plugin base
* refactor(config-ui): integrate plugin config type
* feat(config-ui): add sort for plugin config
---
config-ui/src/layouts/base/use-menu.ts | 7 +-
config-ui/src/pages/connection/form/index.tsx | 4 +-
config-ui/src/pages/connection/home/index.tsx | 3 +-
.../src/pages/transformation/detail/use-detail.ts | 4 +-
.../plugins/components/connection-form/index.tsx | 4 +-
.../transformation/use-transformation.ts | 4 +-
config-ui/src/plugins/config.ts | 4 +-
config-ui/src/plugins/register/base/config.ts | 10 +-
.../src/plugins/register/base/connection-fields.ts | 108 ---------------------
config-ui/src/plugins/register/base/index.ts | 1 -
config-ui/src/plugins/register/github/config.tsx | 2 +
.../register/github/connection-fields/token.tsx | 6 +-
config-ui/src/plugins/types.ts | 13 +--
.../src/store/connections/use-context-value.ts | 3 +-
14 files changed, 30 insertions(+), 143 deletions(-)
diff --git a/config-ui/src/layouts/base/use-menu.ts b/config-ui/src/layouts/base/use-menu.ts
index 3af48ab1b..cbc6631fe 100644
--- a/config-ui/src/layouts/base/use-menu.ts
+++ b/config-ui/src/layouts/base/use-menu.ts
@@ -19,7 +19,6 @@
import { useMemo } from 'react';
import { IconName } from '@blueprintjs/core';
-import type { PluginConfigConnectionType } from '@/plugins';
import { PluginConfig, PluginType } from '@/plugins';
export type MenuItemType = {
@@ -55,10 +54,8 @@ export const useMenu = () => {
title: 'Connections',
icon: 'data-connection',
path: '/connections',
- children: (
- PluginConfig.filter((p) =>
- [PluginType.Connection, PluginType.Incoming_Connection].includes(p.type),
- ) as PluginConfigConnectionType[]
+ children: PluginConfig.filter((p) =>
+ [PluginType.Connection, PluginType.Incoming_Connection].includes(p.type),
).map((it) => ({
key: it.plugin,
title: it.name,
diff --git a/config-ui/src/pages/connection/form/index.tsx b/config-ui/src/pages/connection/form/index.tsx
index 387e9a338..07f34edae 100644
--- a/config-ui/src/pages/connection/form/index.tsx
+++ b/config-ui/src/pages/connection/form/index.tsx
@@ -20,13 +20,13 @@ import React, { useMemo } from 'react';
import { useParams } from 'react-router-dom';
import { PageHeader } from '@/components';
-import { PluginConfigConnectionType } from '@/plugins';
+import type { PluginConfigType } from '@/plugins';
import { PluginConfig, ConnectionForm } from '@/plugins';
export const ConnectionFormPage = () => {
const { plugin, cid } = useParams<{ plugin: string; cid?: string }>();
- const { name } = useMemo(() => PluginConfig.find((p) => p.plugin === plugin) as PluginConfigConnectionType, [plugin]);
+ const { name } = useMemo(() => PluginConfig.find((p) => p.plugin === plugin) as PluginConfigType, [plugin]);
return (
<PageHeader
diff --git a/config-ui/src/pages/connection/home/index.tsx b/config-ui/src/pages/connection/home/index.tsx
index be30601a4..bf7e247af 100644
--- a/config-ui/src/pages/connection/home/index.tsx
+++ b/config-ui/src/pages/connection/home/index.tsx
@@ -20,7 +20,6 @@ import React, { useMemo } from 'react';
import { useHistory } from 'react-router-dom';
import { Tag, Intent } from '@blueprintjs/core';
-import type { PluginConfigConnectionType } from '@/plugins';
import { PluginConfig, PluginType } from '@/plugins';
import * as S from './styled';
@@ -30,7 +29,7 @@ export const ConnectionHomePage = () => {
const [connections, webhook] = useMemo(
() => [
- PluginConfig.filter((p) => p.type === PluginType.Connection) as PluginConfigConnectionType[],
+ PluginConfig.filter((p) => p.type === PluginType.Connection),
PluginConfig.filter((p) => p.plugin === 'webhook'),
],
[],
diff --git a/config-ui/src/pages/transformation/detail/use-detail.ts b/config-ui/src/pages/transformation/detail/use-detail.ts
index 8c86f24eb..37705aabb 100644
--- a/config-ui/src/pages/transformation/detail/use-detail.ts
+++ b/config-ui/src/pages/transformation/detail/use-detail.ts
@@ -19,7 +19,7 @@
import { useState, useEffect, useMemo } from 'react';
import { useHistory } from 'react-router-dom';
-import type { PluginConfigConnectionType } from '@/plugins';
+import type { PluginConfigType } from '@/plugins';
import { PluginConfig } from '@/plugins';
import { operator } from '@/utils';
@@ -35,7 +35,7 @@ export const useDetail = ({ plugin, id }: Props) => {
const [operating, setOperating] = useState(false);
const [name, setName] = useState('');
const [transformation, setTransformation] = useState<any>(
- (PluginConfig.find((pc) => pc.plugin === plugin) as PluginConfigConnectionType)?.transformation,
+ (PluginConfig.find((pc) => pc.plugin === plugin) as PluginConfigType)?.transformation,
);
const history = useHistory();
diff --git a/config-ui/src/plugins/components/connection-form/index.tsx b/config-ui/src/plugins/components/connection-form/index.tsx
index 5a4a28c01..569523619 100644
--- a/config-ui/src/plugins/components/connection-form/index.tsx
+++ b/config-ui/src/plugins/components/connection-form/index.tsx
@@ -21,7 +21,7 @@ import { ButtonGroup } from '@blueprintjs/core';
import { PageLoading, ExternalLink } from '@/components';
import { useRefreshData } from '@/hooks';
-import type { PluginConfigConnectionType } from '@/plugins';
+import type { PluginConfigType } from '@/plugins';
import { PluginConfig } from '@/plugins';
import { Form } from './fields';
@@ -41,7 +41,7 @@ export const ConnectionForm = ({ plugin, connectionId }: Props) => {
const {
name,
connection: { docLink, fields, initialValues },
- } = useMemo(() => PluginConfig.find((p) => p.plugin === plugin) as PluginConfigConnectionType, [plugin]);
+ } = useMemo(() => PluginConfig.find((p) => p.plugin === plugin) as PluginConfigType, [plugin]);
const { ready, data } = useRefreshData(async () => {
if (!connectionId) {
diff --git a/config-ui/src/plugins/components/transformation/use-transformation.ts b/config-ui/src/plugins/components/transformation/use-transformation.ts
index 1f29f325c..f277bb5ad 100644
--- a/config-ui/src/plugins/components/transformation/use-transformation.ts
+++ b/config-ui/src/plugins/components/transformation/use-transformation.ts
@@ -18,7 +18,7 @@
import { useState, useEffect, useMemo } from 'react';
-import type { PluginConfigConnectionType } from '@/plugins';
+import type { PluginConfigType } from '@/plugins';
import { PluginConfig } from '@/plugins';
import { operator } from '@/utils';
@@ -50,7 +50,7 @@ export const useTransformation = ({
const [saving, setSaving] = useState(false);
const [transformation, setTransformation] = useState({});
- const config = useMemo(() => PluginConfig.find((p) => p.plugin === plugin) as PluginConfigConnectionType, []);
+ const config = useMemo(() => PluginConfig.find((p) => p.plugin === plugin) as PluginConfigType, []);
useEffect(() => {
setTransformation(selectedRule ? selectedRule : config.transformation);
diff --git a/config-ui/src/plugins/config.ts b/config-ui/src/plugins/config.ts
index ca971d7f5..7fac66628 100644
--- a/config-ui/src/plugins/config.ts
+++ b/config-ui/src/plugins/config.ts
@@ -39,6 +39,7 @@ import { ZenTaoConfig } from './register/zentao';
export const PluginConfig: PluginConfigType[] = [
AEConfig,
AzureConfig,
+ BitBucketConfig,
DBTConfig,
DORAConfig,
FeiShuConfig,
@@ -51,8 +52,7 @@ export const PluginConfig: PluginConfigType[] = [
JIRAConfig,
RefDiffConfig,
StarRocksConfig,
- BitBucketConfig,
TAPDConfig,
ZenTaoConfig,
WebhookConfig,
-];
+].sort((a, b) => a.sort - b.sort);
diff --git a/config-ui/src/plugins/register/base/config.ts b/config-ui/src/plugins/register/base/config.ts
index 2de8f19e4..26403e4d3 100644
--- a/config-ui/src/plugins/register/base/config.ts
+++ b/config-ui/src/plugins/register/base/config.ts
@@ -25,4 +25,12 @@ export const BasePipelineConfig = {
plugin: undefined,
name: undefined,
icon: Icon,
-} as const;
+ sort: 99,
+ connection: {
+ docLink: '',
+ initialValues: {},
+ fields: [],
+ },
+ entities: [],
+ transformation: {},
+};
diff --git a/config-ui/src/plugins/register/base/connection-fields.ts b/config-ui/src/plugins/register/base/connection-fields.ts
deleted file mode 100644
index 0a6493bdf..000000000
--- a/config-ui/src/plugins/register/base/connection-fields.ts
+++ /dev/null
@@ -1,108 +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.
- *
- */
-
-export const ConnectionName = (custom = {}) => ({
- key: 'name',
- label: 'Connection Name',
- type: 'text' as const,
- required: true,
- ...custom,
-});
-
-export const ConnectionEndpoint = (custom = {}) => ({
- key: 'endpoint',
- label: 'Endpoint URL',
- type: 'text' as const,
- required: true,
- ...custom,
-});
-
-export const ConnectionUsername = (custom = {}) => ({
- key: 'username',
- label: 'Username',
- type: 'text' as const,
- required: true,
- placeholder: 'Username',
- ...custom,
-});
-
-export const ConnectionPassword = (custom = {}) => ({
- key: 'password',
- label: 'Password',
- type: 'password' as const,
- required: true,
- placeholder: 'Password',
- ...custom,
-});
-
-export const ConnectionToken = (custom = {}) => ({
- key: 'token',
- label: 'Token',
- type: 'password' as const,
- required: true,
- ...custom,
-});
-
-export const ConnectionProxy = (custom = {}) => ({
- key: 'proxy',
- label: 'Proxy URL',
- type: 'text' as const,
- placeholder: 'eg. http://proxy.localhost:8080',
- tooltip: 'Add a proxy if your network can not access Server directly.',
- ...custom,
-});
-
-export const ConnectionRatelimit = (custom = {}) => ({
- key: 'rateLimitPerHour',
- label: 'Fixed Rate Limit (per hour)',
- type: 'rateLimit' as const,
- tooltip: 'Rate Limit requests per hour,\nEnter a numeric value > 0 to enable.',
- ...custom,
-});
-
-export const ConnectionGitHubToken = () => ({
- key: 'token',
- label: 'Basic Auth Token',
- type: 'githubToken' as const,
- required: true,
- tooltip: "Due to Github's rate limit, input more tokens, \ncomma separated, to accelerate data collection.",
-});
-
-export const ConnectionGitHubGraphql = () => ({
- key: 'enableGraphql',
- label: 'Use Graphql APIs',
- type: 'switch' as const,
- tooltip:
- 'GraphQL APIs are 10+ times faster than REST APIs, but it may not be supported in GitHub on-premise versions.',
-});
-
-export const ConnectionGitLabToken = () => ({
- key: 'token',
- label: 'Access Token',
- type: 'gitlabToken' as const,
- required: true,
- placeholder: 'eg. ff9d1ad0e5c04f1f98fa',
-});
-
-export const ConnectionJIRAAuth = () => ({
- key: 'auth',
- type: 'jiraAuth' as const,
- checkError: (form: any) => {
- return !!(form.username && form.password) || !!form.token;
- },
-});
diff --git a/config-ui/src/plugins/register/base/index.ts b/config-ui/src/plugins/register/base/index.ts
index 8e1d25aad..de415db39 100644
--- a/config-ui/src/plugins/register/base/index.ts
+++ b/config-ui/src/plugins/register/base/index.ts
@@ -17,4 +17,3 @@
*/
export * from './config';
-export * from './connection-fields';
diff --git a/config-ui/src/plugins/register/github/config.tsx b/config-ui/src/plugins/register/github/config.tsx
index 13c10fa3c..53ea92f2f 100644
--- a/config-ui/src/plugins/register/github/config.tsx
+++ b/config-ui/src/plugins/register/github/config.tsx
@@ -48,6 +48,8 @@ export const GitHubConfig: PluginConfigType = {
({ initialValues, values, errors, setValues, setErrors }: any) => (
<Token
key="token"
+ endpoint={values.endpoint}
+ proxy={values.proxy}
initialValue={initialValues.token ?? ''}
value={values.token ?? ''}
error={errors.token ?? ''}
diff --git a/config-ui/src/plugins/register/github/connection-fields/token.tsx b/config-ui/src/plugins/register/github/connection-fields/token.tsx
index 27e7fd0a0..6b292a82b 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -46,10 +46,10 @@ export const Token = ({ endpoint, proxy, initialValue, value, error, setValue, s
const [tokens, setTokens] = useState<TokenItem[]>([{ value: '', status: 'idle' }]);
const testToken = async (token: string): Promise<TokenItem> => {
- if (!endpoint) {
+ if (!endpoint || !token) {
return {
value: token,
- status: 'invalid',
+ status: 'idle',
};
}
@@ -79,7 +79,7 @@ export const Token = ({ endpoint, proxy, initialValue, value, error, setValue, s
useEffect(() => {
checkTokens(initialValue);
- }, [initialValue]);
+ }, [initialValue, endpoint]);
useEffect(() => {
setError(value ? '' : 'token is required');
diff --git a/config-ui/src/plugins/types.ts b/config-ui/src/plugins/types.ts
index 84e0fd1dd..9ae5f948d 100644
--- a/config-ui/src/plugins/types.ts
+++ b/config-ui/src/plugins/types.ts
@@ -22,8 +22,8 @@ export enum PluginType {
Pipeline = 'pipeline',
}
-export type PluginConfigConnectionType = {
- type: PluginType.Connection;
+export type PluginConfigType = {
+ type: PluginType;
plugin: string;
name: string;
icon: string;
@@ -37,12 +37,3 @@ export type PluginConfigConnectionType = {
entities: string[];
transformation: any;
};
-
-export type PluginConfigAnotherType = {
- type: PluginType.Incoming_Connection | PluginType.Pipeline;
- plugin: string;
- name: string;
- icon: string;
-};
-
-export type PluginConfigType = PluginConfigConnectionType | PluginConfigAnotherType;
diff --git a/config-ui/src/store/connections/use-context-value.ts b/config-ui/src/store/connections/use-context-value.ts
index 4c31ec576..804c9937f 100644
--- a/config-ui/src/store/connections/use-context-value.ts
+++ b/config-ui/src/store/connections/use-context-value.ts
@@ -18,7 +18,6 @@
import { useState, useEffect, useCallback, useMemo } from 'react';
-import type { PluginConfigConnectionType } from '@/plugins';
import { PluginConfig, PluginType } from '@/plugins';
import type { ConnectionItemType } from './types';
@@ -36,7 +35,7 @@ export const useContextValue = ({ plugin, filterBeta = false }: UseContextValueP
const allConnections = useMemo(
() =>
- (PluginConfig.filter((p) => p.type === PluginType.Connection) as PluginConfigConnectionType[])
+ PluginConfig.filter((p) => p.type === PluginType.Connection)
.filter((p) => (plugin ? p.plugin === plugin : true))
.filter((p) => (filterBeta ? !p.isBeta : true)),
[plugin],