@finos/legend-studio
Version:
143 lines • 12.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed 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 { clsx, ContextMenu, CustomSelectorInput, Dialog, MaskIcon, MenuContent, MenuContentItem, PanelLoadingIndicator, PlusIcon, PURE_ConnectionIcon, RefreshIcon, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, ResizablePanelSplitterLine, } from '@finos/legend-art';
import { observer } from 'mobx-react-lite';
import { forwardRef, useState } from 'react';
import { EmbeddedDataEditor } from '../../data-editor/EmbeddedDataEditor.js';
import { EmbeddedDataType } from '../../../../../stores/editor-state/ExternalFormatState.js';
import { flowResult } from 'mobx';
import { buildElementOption } from '@finos/legend-application';
import { prettyCONSTName } from '@finos/legend-shared';
export const ConnectionTestDataEditor = observer((props) => {
const { connectionTestDataState } = props;
const isReadOnly = connectionTestDataState.testDataState.testSuiteState.testableState
.serviceEditorState.isReadOnly;
// test data
const anonymizeGeneratedData = connectionTestDataState.anonymizeGeneratedData;
const toggleAnonymizeGeneratedData = () => {
connectionTestDataState.setAnonymizeGeneratedData(!anonymizeGeneratedData);
};
const generateTestData = () => {
flowResult(connectionTestDataState.generateTestData()).catch(connectionTestDataState.editorStore.applicationStore
.alertUnhandledError);
};
return (_jsxs("div", { className: "service-test-data-editor", children: [_jsxs("div", { className: "service-test-suite-editor__header", children: [_jsx("div", { className: "service-test-suite-editor__header__title", children: _jsx("div", { className: "service-test-suite-editor__header__title__label", children: "embedded data" }) }), _jsxs("div", { className: "panel__header__actions", children: [_jsx("div", { className: clsx('panel__content__form__section__toggler', {
'panel__content__form__section__toggler--disabled': isReadOnly,
}), onClick: toggleAnonymizeGeneratedData, children: _jsx("button", { className: clsx('btn--sm service-execution-editor__test-data__anonymize-btn', {
'service-execution-editor__test-data__anonymize-btn--active': anonymizeGeneratedData,
}), disabled: isReadOnly, tabIndex: -1, title: `[${anonymizeGeneratedData ? 'on' : 'off'}] Anonymize Test Data`, children: _jsx(MaskIcon, {}) }) }), _jsx("button", { className: "panel__header__action service-execution-editor__test-data__generate-btn", onClick: generateTestData, title: "Generate test data if possible", disabled: connectionTestDataState.generatingTestDataSate.isInProgress, tabIndex: -1, children: _jsxs("div", { className: "service-execution-editor__test-data__generate-btn__label", children: [_jsx(RefreshIcon, { className: "service-execution-editor__test-data__generate-btn__label__icon" }), _jsx("div", { className: "service-execution-editor__test-data__generate-btn__label__title", children: "Generate" })] }) })] })] }), _jsx(EmbeddedDataEditor, { isReadOnly: isReadOnly, embeddedDataEditorState: connectionTestDataState.embeddedEditorState })] }));
});
const ConnectionTestDataContextMenu = observer(forwardRef(function TestContainerContextMenu(props, ref) {
const { deleteConnectionData } = props;
const remove = () => deleteConnectionData();
return (_jsx(MenuContent, { ref: ref, children: _jsx(MenuContentItem, { onClick: remove, children: "Delete" }) }));
}));
const ConnectionTestDataItem = observer((props) => {
const { connectionTestData, serviceTestDataState } = props;
const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] = useState(false);
const isReadOnly = serviceTestDataState.testSuiteState.testableState.serviceEditorState
.isReadOnly;
const openConnectionTestData = () => serviceTestDataState.openConnectionTestData(connectionTestData);
const isActive = serviceTestDataState.selectedDataState?.connectionData ===
connectionTestData;
const deleteConnectionTestData = () => serviceTestDataState.deleteConnectionTestData(connectionTestData);
const onContextMenuOpen = () => setIsSelectedFromContextMenu(true);
const onContextMenuClose = () => setIsSelectedFromContextMenu(false);
return (_jsx(ContextMenu, { className: clsx('testable-test-assertion-explorer__item', {
'testable-test-assertion-explorer__item--selected-from-context-menu': !isActive && isSelectedFromContextMenu,
}, { 'testable-test-assertion-explorer__item--active': isActive }), disabled: isReadOnly, content: _jsx(ConnectionTestDataContextMenu, { connectionTestData: connectionTestData, deleteConnectionData: deleteConnectionTestData }), menuProps: { elevation: 7 }, onOpen: onContextMenuOpen, onClose: onContextMenuClose, children: _jsxs("button", { className: clsx('testable-test-assertion-explorer__item__label'), onClick: openConnectionTestData, tabIndex: -1, children: [_jsx("div", { className: "testable-test-assertion-explorer__item__label__icon testable-test-assertion-explorer__test-result-indicator__container", children: _jsx(PURE_ConnectionIcon, {}) }), _jsx("div", { className: "testable-test-assertion-explorer__item__label__text", children: connectionTestData.connectionId })] }) }));
});
export const NewConnectionDataModal = observer((props) => {
const { testDataState } = props;
const dataElementOptions = testDataState.editorStore.dataOptions;
const newConnectionState = testDataState.newConnectionDataState;
const dataElement = newConnectionState.dataElement;
const selectedOption = dataElement ? buildElementOption(dataElement) : null;
const onDataElementChange = (val) => {
if (val.value !== selectedOption?.value && val.value) {
newConnectionState.setDataElement(val.value);
}
};
const isReadOnly = testDataState.testSuiteState.testableState.serviceEditorState.isReadOnly;
const closeModal = () => newConnectionState.setModal(false);
const connectionOptions = testDataState.allIdentifiedConnections.map((e) => ({
label: e.id,
value: e,
}));
const selectedConnection = newConnectionState.connection
? {
label: newConnectionState.connection.id,
value: newConnectionState.connection,
}
: undefined;
const isDisabled = isReadOnly ||
!testDataState.allIdentifiedConnections.length ||
Boolean(testDataState.testData.connectionsTestData.find((c) => c.connectionId === selectedConnection?.value.id));
const handleSubmit = () => {
const connection = newConnectionState.connection;
const data = newConnectionState.embeddedDataType;
if (connection && data) {
testDataState.createConnectionTestData();
closeModal();
}
};
const onConnectionSelectionChange = (val) => {
if (val.value === undefined) {
newConnectionState.setConnection(undefined);
}
else if (val.value !== selectedConnection?.value) {
newConnectionState.setConnection(val.value);
}
};
// external format
const selectedEmbeddedType = newConnectionState.embeddedDataType
? {
label: prettyCONSTName(newConnectionState.embeddedDataType.label),
value: newConnectionState.embeddedDataType.value,
}
: undefined;
const extraOptionTypes = testDataState.editorStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraEmbeddedDataTypeOptions?.() ?? []);
const embeddedOptions = [
...Object.values(EmbeddedDataType).map((typeOption) => ({
label: prettyCONSTName(typeOption),
value: typeOption,
})),
...extraOptionTypes,
];
const onEmbeddedTypeChange = (val) => {
if (!val) {
newConnectionState.setEmbeddedDataType(undefined);
}
else {
newConnectionState.setEmbeddedDataType(val);
}
};
return (_jsx(Dialog, { open: newConnectionState.showModal, onClose: closeModal, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs("form", { onSubmit: handleSubmit, className: "modal modal--dark search-modal", children: [_jsx("div", { className: "modal__title", children: "Create a connection test data" }), _jsx("div", { className: "explorer__new-element-modal__driver", children: _jsx(CustomSelectorInput, { className: "explorer__new-element-modal__driver__dropdown", options: connectionOptions, onChange: onConnectionSelectionChange, value: selectedConnection, isClearable: false, darkMode: true }) }), _jsx("div", { className: "explorer__new-element-modal__driver", children: _jsx(CustomSelectorInput, { className: "explorer__new-element-modal__driver__dropdown", options: embeddedOptions, onChange: onEmbeddedTypeChange, value: selectedEmbeddedType, isClearable: false, darkMode: true }) }), selectedEmbeddedType?.value === EmbeddedDataType.DATA_ELEMENT && (_jsx("div", { className: "explorer__new-element-modal__driver", children: _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown data-element-reference-editor__value__dropdown", disabled: isReadOnly, options: dataElementOptions, onChange: onDataElementChange, value: selectedOption, darkMode: true }) })), _jsxs("div", { className: "search-modal__actions", children: [_jsx("button", { type: "button", className: "btn btn--dark", onClick: closeModal, children: "Cancel" }), _jsx("button", { className: "btn btn--dark", disabled: isDisabled, children: "Create" })] })] }) }));
});
export const ServiceTestDataEditor = observer((props) => {
const { testDataState } = props;
const testData = testDataState.testData;
const newConnectionDataState = testDataState.newConnectionDataState;
const addConnectionTestData = () => {
testDataState.newConnectionDataState.openModal();
};
return (_jsxs("div", { className: "service-test-data-editor panel", children: [_jsx("div", { className: "service-test-suite-editor__header", children: _jsx("div", { className: "service-test-suite-editor__header__title", children: _jsx("div", { className: "service-test-suite-editor__header__title__label service-test-suite-editor__header__title__label--data", children: "data" }) }) }), _jsx("div", { className: "service-test-data-editor__data", children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsxs(ResizablePanel, { minSize: 100, children: [_jsxs("div", { className: "binding-editor__header", children: [_jsx("div", { className: "binding-editor__header__title", children: _jsx("div", { className: "binding-editor__header__title__label", children: "connections test data" }) }), _jsx("div", { className: "panel__header__actions", children: _jsx("button", { className: "panel__header__action", tabIndex: -1, onClick: addConnectionTestData, title: "Add Connection Test Data", children: _jsx(PlusIcon, {}) }) })] }), _jsx("div", { children: testData.connectionsTestData.map((connectionTestData) => (_jsx(ConnectionTestDataItem, { serviceTestDataState: testDataState, connectionTestData: connectionTestData }, connectionTestData.connectionId))) })] }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsxs(ResizablePanel, { minSize: 600, children: [_jsx(PanelLoadingIndicator, { isLoading: Boolean(testDataState.selectedDataState?.generatingTestDataSate
.isInProgress) }), testDataState.selectedDataState && (_jsx(ConnectionTestDataEditor, { connectionTestDataState: testDataState.selectedDataState })), newConnectionDataState.showModal && (_jsx(NewConnectionDataModal, { testDataState: testDataState }))] })] }) })] }));
});
//# sourceMappingURL=ServiceTestDataEditor.js.map