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 79a8f8524 fix(config-ui): cannot manage webhook (#5215)
79a8f8524 is described below
commit 79a8f8524d5849c2292e087bd3f9a32422b484f4
Author: 青湛 <[email protected]>
AuthorDate: Thu May 18 09:12:49 2023 +0800
fix(config-ui): cannot manage webhook (#5215)
---
config-ui/src/pages/connection/home/index.tsx | 53 +++-----------
.../plugins/components/connection-form/index.tsx | 6 +-
.../plugins/components/connection-list/index.tsx | 81 ++++++++++++++++++++++
config-ui/src/plugins/components/index.ts | 1 +
4 files changed, 93 insertions(+), 48 deletions(-)
diff --git a/config-ui/src/pages/connection/home/index.tsx
b/config-ui/src/pages/connection/home/index.tsx
index 4367d0143..1462bd838 100644
--- a/config-ui/src/pages/connection/home/index.tsx
+++ b/config-ui/src/pages/connection/home/index.tsx
@@ -17,13 +17,12 @@
*/
import { useState, useMemo } from 'react';
-import { Link } from 'react-router-dom';
-import { Tag, Intent, Button } from '@blueprintjs/core';
+import { Tag, Intent } from '@blueprintjs/core';
-import { Dialog, Table } from '@/components';
+import { Dialog } from '@/components';
import type { PluginConfigType } from '@/plugins';
-import { PluginConfig, PluginType, ConnectionForm } from '@/plugins';
-import { ConnectionContextProvider, useConnection, ConnectionStatus } from
'@/store';
+import { PluginConfig, PluginType, ConnectionForm, ConnectionList } from
'@/plugins';
+import { ConnectionContextProvider, useConnection } from '@/store';
import * as S from './styled';
@@ -31,7 +30,7 @@ export const ConnectionHome = () => {
const [type, setType] = useState<'list' | 'form'>();
const [pluginConfig, setPluginConfig] = useState<PluginConfigType>();
- const { connections, onRefresh, onTest } = useConnection();
+ const { connections, onRefresh } = useConnection();
const [plugins, webhook] = useMemo(
() => [
@@ -61,7 +60,7 @@ export const ConnectionHome = () => {
setPluginConfig(undefined);
};
- const handleCreateSuccess = async (unqie: string, plugin: string) => {
+ const handleCreateSuccess = async (plugin: string) => {
onRefresh(plugin);
setType('list');
};
@@ -122,40 +121,7 @@ export const ConnectionHome = () => {
footer={null}
onCancel={handleHideDialog}
>
- <Table
- noShadow
- columns={[
- {
- title: 'Connection Name',
- dataIndex: 'name',
- key: 'name',
- },
- {
- title: 'Status',
- dataIndex: ['status', 'unique'],
- key: 'status',
- render: ({ status, unique }) => <ConnectionStatus
status={status} unique={unique} onTest={onTest} />,
- },
- {
- title: '',
- dataIndex: ['plugin', 'id'],
- key: 'link',
- width: 100,
- render: ({ plugin, id }) => <Link
to={`/connections/${plugin}/${id}`}>Details</Link>,
- },
- ]}
- dataSource={connections.filter((cs) => cs.plugin ===
pluginConfig.plugin)}
- noData={{
- text: 'There is no data connection yet. Please add a new
connection.',
- }}
- />
- <Button
- style={{ marginTop: 16 }}
- intent={Intent.PRIMARY}
- icon="add"
- text="Create a New Connection"
- onClick={handleShowFormDialog}
- />
+ <ConnectionList plugin={pluginConfig.plugin}
onCreate={handleShowFormDialog} />
</Dialog>
)}
{type === 'form' && pluginConfig && (
@@ -171,10 +137,7 @@ export const ConnectionHome = () => {
footer={null}
onCancel={handleHideDialog}
>
- <ConnectionForm
- plugin={pluginConfig.plugin}
- onSuccess={(unique) => handleCreateSuccess(unique,
pluginConfig.plugin)}
- />
+ <ConnectionForm plugin={pluginConfig.plugin} onSuccess={() =>
handleCreateSuccess(pluginConfig.plugin)} />
</Dialog>
)}
</S.Wrapper>
diff --git a/config-ui/src/plugins/components/connection-form/index.tsx
b/config-ui/src/plugins/components/connection-form/index.tsx
index b2ec47e62..6ea9d89c6 100644
--- a/config-ui/src/plugins/components/connection-form/index.tsx
+++ b/config-ui/src/plugins/components/connection-form/index.tsx
@@ -32,7 +32,7 @@ import * as S from './styled';
interface Props {
plugin: string;
connectionId?: ID;
- onSuccess?: (unique: string) => void;
+ onSuccess?: () => void;
}
export const ConnectionForm = ({ plugin, connectionId, onSuccess }: Props) => {
@@ -83,7 +83,7 @@ export const ConnectionForm = ({ plugin, connectionId,
onSuccess }: Props) => {
};
const handleSave = async () => {
- const [success, res] = await operator(
+ const [success] = await operator(
() => (!connectionId ? API.createConnection(plugin, values) :
API.updateConnection(plugin, connectionId, values)),
{
setOperating,
@@ -92,7 +92,7 @@ export const ConnectionForm = ({ plugin, connectionId,
onSuccess }: Props) => {
);
if (success) {
- onSuccess?.(`${plugin}-${res.id}`);
+ onSuccess?.();
}
};
diff --git a/config-ui/src/plugins/components/connection-list/index.tsx
b/config-ui/src/plugins/components/connection-list/index.tsx
new file mode 100644
index 000000000..00fc04e5e
--- /dev/null
+++ b/config-ui/src/plugins/components/connection-list/index.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 { Link } from 'react-router-dom';
+import { Button, Intent } from '@blueprintjs/core';
+
+import { Table } from '@/components';
+import { ConnectionStatus, useConnection } from '@/store';
+
+import { WebHookConnection } from '@/plugins/register/webook';
+
+interface Props {
+ plugin: string;
+ onCreate: () => void;
+}
+
+export const ConnectionList = ({ plugin, onCreate }: Props) => {
+ if (plugin === 'webhook') {
+ return <WebHookConnection />;
+ }
+
+ return <BaseList plugin={plugin} onCreate={onCreate} />;
+};
+
+const BaseList = ({ plugin, onCreate }: Props) => {
+ const { connections, onTest } = useConnection();
+
+ return (
+ <>
+ <Table
+ noShadow
+ columns={[
+ {
+ title: 'Connection Name',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: 'Status',
+ dataIndex: ['status', 'unique'],
+ key: 'status',
+ render: ({ status, unique }) => <ConnectionStatus status={status}
unique={unique} onTest={onTest} />,
+ },
+ {
+ title: '',
+ dataIndex: ['plugin', 'id'],
+ key: 'link',
+ width: 100,
+ render: ({ plugin, id }) => <Link
to={`/connections/${plugin}/${id}`}>Details</Link>,
+ },
+ ]}
+ dataSource={connections.filter((cs) => cs.plugin === plugin)}
+ noData={{
+ text: 'There is no data connection yet. Please add a new
connection.',
+ }}
+ />
+ <Button
+ style={{ marginTop: 16 }}
+ intent={Intent.PRIMARY}
+ icon="add"
+ text="Create a New Connection"
+ onClick={onCreate}
+ />
+ </>
+ );
+};
diff --git a/config-ui/src/plugins/components/index.ts
b/config-ui/src/plugins/components/index.ts
index 6f45b86b7..49b6b13e8 100644
--- a/config-ui/src/plugins/components/index.ts
+++ b/config-ui/src/plugins/components/index.ts
@@ -17,6 +17,7 @@
*/
export * from './connection-form';
+export * from './connection-list';
export * from './data-scope';
export * from './data-scope-form';
export * from './data-scope-form-2';
