blob: dbb57282a25dc698dcabc6299a7aaf2f575b3678 [file] [log] [blame]
/*
* 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, useMemo } from 'react';
import { Button, Intent } from '@blueprintjs/core';
import { Dialog, PageLoading, Table, IconButton } from '@/components';
import { useRefreshData } from '@/hooks';
import { TransformationForm } from '@/plugins';
import * as API from './api';
import * as S from './styled';
interface Props {
plugin: string;
connectionId: ID;
scopeId: ID;
transformationId?: ID;
transformationType: MixConnection['transformationType'];
onCancel: () => void;
onSubmit: (tid: ID) => void;
}
export const TransformationSelect = ({
plugin,
connectionId,
scopeId,
transformationId,
transformationType,
onCancel,
onSubmit,
}: Props) => {
const [step, setStep] = useState(1);
const [type, setType] = useState<'add' | 'edit'>('add');
const [selectedId, setSelectedId] = useState<ID>();
const [updatedId, setUpdatedId] = useState<ID>();
useEffect(() => setSelectedId(transformationId), [transformationId]);
useEffect(() => {
setStep(transformationType === 'for-scope' ? 2 : 1);
setType(transformationType === 'for-scope' && transformationId ? 'edit' : 'add');
setUpdatedId(transformationType === 'for-scope' && transformationId ? transformationId : undefined);
}, [transformationId, transformationType]);
const { ready, data } = useRefreshData(() => API.getTransformations(plugin, connectionId), [step]);
const title = useMemo(() => {
switch (true) {
case step === 1:
return 'Associate Transformation';
case type === 'add':
return 'Add New Transformation';
case type === 'edit':
return 'Edit Transformation';
}
}, [step, type]);
const handleNewTransformation = () => {
setStep(2);
setType('add');
};
const handleEditTransformation = (id: ID) => {
setStep(2);
setType('edit');
setUpdatedId(id);
};
const handleReset = (tr?: any) => {
if (transformationType === 'for-scope') {
return tr ? onSubmit(tr.id) : onCancel();
}
setStep(1);
setUpdatedId('');
};
const handleSubmit = () => !!selectedId && onSubmit(selectedId);
return (
<Dialog isOpen title={title} footer={null} style={{ width: 960 }} onCancel={onCancel}>
{!ready || !data ? (
<PageLoading />
) : step === 1 ? (
<S.Wrapper>
<S.Aciton>
<Button intent={Intent.PRIMARY} icon="add" onClick={handleNewTransformation}>
Add New Transformation
</Button>
</S.Aciton>
<Table
columns={[
{ title: 'Transformation', dataIndex: 'name', key: 'name' },
{
title: '',
dataIndex: 'id',
key: 'id',
width: 100,
align: 'right',
render: (id) => (
<IconButton icon="annotation" tooltip="Edit" onClick={() => handleEditTransformation(id)} />
),
},
]}
dataSource={data}
rowSelection={{
rowKey: 'id',
type: 'radio',
selectedRowKeys: selectedId ? [selectedId] : [],
onChange: (selectedRowKeys) => setSelectedId(selectedRowKeys[0]),
}}
noShadow
/>
<S.Btns>
<Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={onCancel} />
<Button disabled={!selectedId} intent={Intent.PRIMARY} text="Save" onClick={handleSubmit} />
</S.Btns>
</S.Wrapper>
) : (
<TransformationForm
plugin={plugin}
connectionId={connectionId}
scopeId={scopeId}
id={updatedId}
onCancel={handleReset}
/>
)}
</Dialog>
);
};