Skip to content

Commit

Permalink
feat: simplify scope config configuration (apache#7408)
Browse files Browse the repository at this point in the history
  • Loading branch information
mintsweet authored Apr 30, 2024
1 parent d7cb635 commit c890de7
Show file tree
Hide file tree
Showing 16 changed files with 263 additions and 360 deletions.
2 changes: 0 additions & 2 deletions config-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
"react-medium-image-zoom": "^5.1.10",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.2",
"react-transition-group": "^4.4.5",
"redux": "^5.0.1",
"rehype-raw": "^7.0.0",
"styled-components": "^6.1.8"
Expand All @@ -55,7 +54,6 @@
"@types/react-copy-to-clipboard": "^5.0.7",
"@types/react-dom": "^18.2.19",
"@types/react-router-dom": "^5.3.3",
"@types/react-transition-group": "^4.4.10",
"@types/styled-components": "^5.1.34",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
Expand Down
7 changes: 4 additions & 3 deletions config-ui/src/api/blueprint/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@ export const update = (id: ID, data: IBlueprint) => request(`/blueprints/${id}`,
export const pipelines = (id: ID) => request(`/blueprints/${id}/pipelines`);

type TriggerQuery = {
skipCollectors: boolean;
fullSync: boolean;
skipCollectors?: boolean;
fullSync?: boolean;
};

export const trigger = (id: ID, data: TriggerQuery) => request(`/blueprints/${id}/trigger`, { method: 'post', data });
export const trigger = (id: ID, data: TriggerQuery = { skipCollectors: false, fullSync: false }) =>
request(`/blueprints/${id}/trigger`, { method: 'post', data });
3 changes: 1 addition & 2 deletions config-ui/src/app/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,11 @@

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';

import { connectionsSlice, tipsSlice } from '@/features';
import { connectionsSlice } from '@/features';

export const store = configureStore({
reducer: {
connections: connectionsSlice.reducer,
tips: tipsSlice.reducer,
},
});

Expand Down
1 change: 0 additions & 1 deletion config-ui/src/features/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,3 @@
*/

export * from './connections';
export * from './tips';
19 changes: 0 additions & 19 deletions config-ui/src/features/tips/index.ts

This file was deleted.

58 changes: 0 additions & 58 deletions config-ui/src/features/tips/slice.ts

This file was deleted.

1 change: 1 addition & 0 deletions config-ui/src/plugins/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,6 @@ export * from './connection-status';
export * from './data-scope-remote';
export * from './data-scope-select';
export * from './plugin-name';
export * from './scope-config';
export * from './scope-config-form';
export * from './scope-config-select';
3 changes: 2 additions & 1 deletion config-ui/src/plugins/components/scope-config-form/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ export const ScopeConfigForm = ({
: API.scopeConfig.update(plugin, connectionId, scopeConfigId, { name, entities, ...transformation }),
{
setOperating,
formatMessage: () => (!scopeConfigId ? 'Create scope config successful.' : 'Update scope config successful'),
hideToast: !!scopeConfigId,
formatMessage: () => 'Create scope config successful.',
},
);

Expand Down
28 changes: 4 additions & 24 deletions config-ui/src/plugins/components/scope-config-select/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
*/

import { useState, useEffect, useMemo } from 'react';
import { PlusOutlined, EditOutlined } from '@ant-design/icons';
import { PlusOutlined } from '@ant-design/icons';
import { Flex, Table, Button, Modal } from 'antd';

import API from '@/api';
Expand All @@ -37,7 +37,6 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
const [version, setVersion] = useState(1);
const [trId, setTrId] = useState<ID>();
const [open, setOpen] = useState(false);
const [updatedId, setUpdatedId] = useState<ID>();

const { ready, data } = useRefreshData(() => API.scopeConfig.list(plugin, connectionId), [version]);

Expand All @@ -56,12 +55,6 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance

const handleHideDialog = () => {
setOpen(false);
setUpdatedId(undefined);
};

const handleUpdate = async (id: ID) => {
setUpdatedId(id);
handleShowDialog();
};

const handleSubmit = async (trId: ID) => {
Expand All @@ -72,7 +65,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance

return (
<Flex vertical gap="middle">
<Flex>
<Flex style={{ marginTop: 20 }}>
<Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
Add New Scope Config
</Button>
Expand All @@ -81,17 +74,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
rowKey="id"
size="small"
loading={!ready}
columns={[
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: '',
dataIndex: 'id',
key: 'id',
width: 100,
render: (id) =>
id !== 'None' ? <Button type="link" icon={<EditOutlined />} onClick={() => handleUpdate(id)} /> : null,
},
]}
columns={[{ title: 'Name', dataIndex: 'name', key: 'name' }]}
dataSource={dataSource}
rowSelection={{
type: 'radio',
Expand All @@ -114,15 +97,12 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
width={960}
centered
footer={null}
title={!updatedId ? 'Add Scope Config' : 'Edit Scope Config'}
title="Add Scope Config"
onCancel={handleHideDialog}
>
<ScopeConfigForm
plugin={plugin}
connectionId={connectionId}
defaultName={`shared-config-<${dataSource.length}>`}
showWarning={!!updatedId}
scopeConfigId={updatedId}
onCancel={handleHideDialog}
onSubmit={handleSubmit}
/>
Expand Down
132 changes: 132 additions & 0 deletions config-ui/src/plugins/components/scope-config/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
/*
* 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 } from 'react';
import { LinkOutlined, EditOutlined } from '@ant-design/icons';
import { Button, Modal } from 'antd';
import styled from 'styled-components';

import API from '@/api';
import { operator } from '@/utils';

import { PluginName } from '../plugin-name';
import { ScopeConfigSelect } from '../scope-config-select';
import { ScopeConfigForm } from '../scope-config-form';

const Wrapper = styled.div``;

interface Props {
plugin: string;
connectionId: ID;
scopeId: ID;
id?: ID;
name?: string;
onSuccess?: () => void;
}

export const ScopeConfig = ({ plugin, connectionId, scopeId, id, name, onSuccess }: Props) => {
const [type, setType] = useState<'associate' | 'update'>();

const handleHideDialog = () => setType(undefined);

const handleAssociate = async (trId: ID) => {
const [success] = await operator(
() => API.scope.update(plugin, connectionId, scopeId, { scopeConfigId: trId !== 'None' ? +trId : null }),
{
hideToast: true,
},
);

if (success) {
handleHideDialog();
onSuccess?.();
}
};

const handleUpdate = (trId: ID) => {
handleHideDialog();
onSuccess?.();
};

return (
<Wrapper>
<span>{id ? name : 'N/A'}</span>
<Button
size="small"
type="link"
icon={<LinkOutlined />}
onClick={() => {
setType('associate');
}}
/>
{id && (
<Button
size="small"
type="link"
icon={<EditOutlined />}
onClick={() => {
// TO-DO: check if the scope config is associated with any scope
setType('update');
}}
/>
)}
{type === 'associate' && (
<Modal
open
width={960}
centered
footer={null}
title={<PluginName plugin={plugin} name="Associate Scope Config" />}
onCancel={handleHideDialog}
>
{plugin === 'tapd' ? (
<ScopeConfigForm
plugin={plugin}
connectionId={connectionId}
scopeConfigId={id}
scopeId={scopeId}
onCancel={handleHideDialog}
onSubmit={handleAssociate}
/>
) : (
<ScopeConfigSelect
plugin={plugin}
connectionId={connectionId}
scopeConfigId={id}
onCancel={handleHideDialog}
onSubmit={handleAssociate}
/>
)}
</Modal>
)}
{type === 'update' && (
<Modal open width={960} centered footer={null} title="Edit Scope Config" onCancel={handleHideDialog}>
<ScopeConfigForm
plugin={plugin}
connectionId={connectionId}
showWarning
scopeConfigId={id}
scopeId={scopeId}
onCancel={handleHideDialog}
onSubmit={handleUpdate}
/>
</Modal>
)}
</Wrapper>
);
};
Loading

0 comments on commit c890de7

Please sign in to comment.