@finos/legend-application-studio
Version:
Legend Studio application core
213 lines • 20.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, CompareIcon, ContextMenu, CustomSelectorInput, Dialog, MenuContent, MenuContentItem, Modal, ModalBody, ModalFooter, ModalFooterButton, ModalHeader, ModalTitle, PanelContent, PanelFormTextField, PanelHeader, PanelHeaderActions, PanelLoadingIndicator, RefreshIcon, WrenchIcon, } from '@finos/legend-art';
import { TestError, PrimitiveType, } from '@finos/legend-graph';
import { ContentType, prettyCONSTName, tryToFormatLosslessJSONString, } from '@finos/legend-shared';
import { observer } from 'mobx-react-lite';
import { AssertFailState, EqualToJsonAssertFailState, EqualToJsonAssertionState, TestAssertionStatusState, TEST_ASSERTION_TAB, EqualToAssertionState, } from '../../../../stores/editor/editor-state/element-editor-state/testable/TestAssertionState.js';
import { externalFormatData_setData } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
import { TESTABLE_RESULT } from '../../../../stores/editor/sidebar-state/testable/GlobalTestRunnerState.js';
import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
import { CodeEditor, JSONDiffView } from '@finos/legend-lego/code-editor';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { forwardRef, useState } from 'react';
import { getTestableResultIcon } from '../../side-bar/testable/GlobalTestRunner.js';
import { buildElementOption, getPackageableElementOptionFormatter, } from '@finos/legend-lego/graph-editor';
import { BasicValueSpecificationEditor, buildDefaultInstanceValue, } from '@finos/legend-query-builder';
import { useApplicationStore } from '@finos/legend-application';
export const SharedDataElementModal = observer((props) => {
const { filterBy, isReadOnly, close, editorStore, handler } = props;
const applicationStore = editorStore.applicationStore;
const dataElements = editorStore.graphManagerState.graph.dataElements.filter((e) => filterBy ? filterBy(e) : true);
const [dataElement, setDataElement] = useState(dataElements[0]);
const dataElementOptions = editorStore.graphManagerState.usableDataElements.map(buildElementOption);
const selectedDataElement = dataElement
? buildElementOption(dataElement)
: null;
const onDataElementChange = (val) => {
if (val.value !== selectedDataElement?.value && val.value) {
setDataElement(val.value);
}
};
const change = () => {
if (dataElement) {
handler(dataElement);
}
close();
};
return (_jsx(Dialog, { open: true, onClose: close, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "service-test-data-modal", children: [_jsx(ModalBody, { children: _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "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: false, options: dataElementOptions, onChange: onDataElementChange, formatOptionLabel: getPackageableElementOptionFormatter({}), value: selectedDataElement, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled }) })] }) }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { className: "database-builder__action--btn", disabled: isReadOnly, onClick: change, title: "Change to use Data Element", children: "Change" }) })] }) }));
});
export const RenameModal = observer((props) => {
const { val, isReadOnly, showModal, closeModal, setValue, errorMessageFunc, } = props;
const [inputValue, setInputValue] = useState(val);
const changeValue = (_val) => {
setInputValue(_val ?? '');
};
const errorMessage = errorMessageFunc?.(inputValue);
return (_jsx(Dialog, { open: showModal, onClose: closeModal, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs("form", { onSubmit: (event) => {
event.preventDefault();
setValue(inputValue);
closeModal();
}, className: "modal modal--dark search-modal", children: [_jsx(ModalBody, { children: _jsx(PanelFormTextField, { name: "Rename", isReadOnly: isReadOnly, value: inputValue, update: changeValue, errorMessage: errorMessage }) }), _jsx("div", { className: "search-modal__actions", children: _jsx("button", { className: "btn btn--dark", disabled: isReadOnly || Boolean(errorMessage), children: "Rename" }) })] }) }));
});
const EqualToJsonAsssertionEditor = observer((props) => {
const { equalToJsonAssertionState, testAssertionEditorState } = props;
const assertion = equalToJsonAssertionState.assertion;
const formatExpectedResultJSONString = () => {
externalFormatData_setData(assertion.expected, tryToFormatLosslessJSONString(assertion.expected.data));
};
return (_jsxs(_Fragment, { children: [_jsxs(PanelHeader, { children: [_jsx(PanelHeader, { title: "expected" }), _jsx("div", { className: "panel__header__actions", children: _jsx("button", { className: "panel__header__action", disabled: testAssertionEditorState.testState.isReadOnly, tabIndex: -1, onClick: formatExpectedResultJSONString, title: "Format JSON (Alt + Shift + F)", children: _jsx(WrenchIcon, {}) }) })] }), _jsx("div", { className: "equal-to-json-editor__content panel__content", children: _jsx("div", { className: "equal-to-json-editor__content__data", children: _jsx(CodeEditor, { inputValue: assertion.expected.data, language: CODE_EDITOR_LANGUAGE.JSON, updateInput: (val) => {
equalToJsonAssertionState.setExpectedValue(val);
}, hideGutter: true }) }) })] }));
});
const EqualToAsssertionEditor = observer((props) => {
const { equalToAssertionState, testAssertionEditorState } = props;
const editorStore = testAssertionEditorState.editorStore;
const resetNode = () => {
const type = equalToAssertionState.valueSpec.genericType?.value.rawType;
if (type) {
const valSpec = buildDefaultInstanceValue(testAssertionEditorState.editorStore.graphManagerState.graph, type, testAssertionEditorState.editorStore.changeDetectionState
.observerContext, true);
equalToAssertionState.updateValueSpec(valSpec);
}
};
return (_jsx(_Fragment, { children: _jsx("div", { className: "equal-to-editor__content", children: _jsx("div", { className: "equal-to-editor__content__data", children: _jsx(BasicValueSpecificationEditor, { valueSpecification: equalToAssertionState.valueSpec, setValueSpecification: (val) => {
equalToAssertionState.updateValueSpec(val);
}, graph: editorStore.graphManagerState.graph, observerContext: editorStore.changeDetectionState.observerContext, resetValue: resetNode, typeCheckOption: {
expectedType: equalToAssertionState.valueSpec.genericType?.value.rawType ??
PrimitiveType.STRING,
} }) }) }) }));
});
const EqualToJsonAssertFailViewer = observer((props) => {
const { equalToJsonAssertFailState } = props;
const applicationStore = equalToJsonAssertFailState.resultState.editorStore.applicationStore;
const open = () => equalToJsonAssertFailState.setDiffModal(true);
const close = () => equalToJsonAssertFailState.setDiffModal(false);
const expected = equalToJsonAssertFailState.status.expected;
const actual = equalToJsonAssertFailState.status.actual;
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "equal-to-json-editor__message", onClick: open, children: `<Click to see difference>` }), equalToJsonAssertFailState.diffModal && (_jsx(Dialog, { open: Boolean(equalToJsonAssertFailState.diffModal), onClose: close, classes: {
root: 'editor-modal__root-container',
container: 'editor-modal__container',
paper: 'editor-modal__content',
}, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled, className: "editor-modal", children: [_jsx(ModalHeader, { children: _jsxs("div", { className: "equal-to-json-result__diff__summary", children: [_jsx("div", { className: "equal-to-json-result__diff__header__label", children: "expected" }), _jsx("div", { className: "equal-to-json-result__diff__icon", children: _jsx(CompareIcon, {}) }), _jsx("div", { className: "equal-to-json-result__diff__header__label", children: "actual" })] }) }), _jsx(ModalBody, { children: _jsx(JSONDiffView, { from: expected, to: actual, lossless: true }) }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { text: "Close", onClick: close, type: "secondary" }) })] }) }))] }));
});
const TestErrorViewer = observer((props) => {
const { testError } = props;
return (_jsx(_Fragment, { children: _jsx("div", { className: "testable-test-assertion-result__summary-info", children: testError.error }) }));
});
const AssertFailViewer = observer((props) => {
const { assertFailState } = props;
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "testable-test-assertion-result__summary-info", children: assertFailState.status.message }), assertFailState instanceof EqualToJsonAssertFailState && (_jsx(EqualToJsonAssertFailViewer, { equalToJsonAssertFailState: assertFailState }))] }));
});
const TestAssertionResultViewer = observer((props) => {
const { testAssertionEditorState } = props;
const parentAssertionResultState = testAssertionEditorState.assertionResultState;
const assertionResult = testAssertionEditorState.assertionResultState.result;
const renderAssertionResult = (assertionResultState) => {
const _statusState = assertionResultState.statusState;
if (assertionResultState.testResult instanceof TestError) {
return _jsx(TestErrorViewer, { testError: assertionResultState.testResult });
}
else if (_statusState instanceof TestAssertionStatusState) {
return _statusState instanceof AssertFailState ? (_jsx(AssertFailViewer, { assertFailState: _statusState })) : null;
}
return null;
};
const renderResultView = (assertionResultState) => {
const _statusState = assertionResultState.statusState;
if (_statusState === undefined ||
_statusState instanceof TestAssertionStatusState) {
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "testable-test-assertion-result__summary-info", children: ["Result: ", prettyCONSTName(assertionResult)] }), renderAssertionResult(assertionResultState)] }));
}
else {
return Array.from(_statusState.entries()).map((state) => {
const _key = state[0];
const resultState = state[1];
return (_jsxs("div", { className: "testable-test-assertion-result__summary-multi", children: [_jsx("div", { children: _key }), _jsxs("div", { className: "testable-test-assertion-result__summary-info", children: ["Result: ", prettyCONSTName(resultState.result)] }), renderAssertionResult(resultState)] }, _key));
});
}
};
return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: "result", children: _jsx(PanelHeaderActions, {}) }), _jsxs(PanelContent, { className: "testable-test-assertion-result__content", children: [_jsxs("div", { className: clsx('testable-test-assertion-result__summary', {
'testable-test-assertion-result__summary--fail': assertionResult === TESTABLE_RESULT.ERROR ||
assertionResult === TESTABLE_RESULT.FAILED,
'testable-test-assertion-result__summary--success': assertionResult === TESTABLE_RESULT.PASSED,
}), children: [_jsx("div", { className: "testable-test-assertion-result__summary-main", children: "Assertion Result Summary" }), assertionResult === TESTABLE_RESULT.IN_PROGRESS && (_jsx("div", { className: "testable-test-assertion-result__summary-info", children: "Running assertion..." })), assertionResult !== TESTABLE_RESULT.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "testable-test-assertion-result__summary-info", children: ["Id: ", testAssertionEditorState.assertion.id] }), _jsxs("div", { className: "testable-test-assertion-result__summary-info", children: ["Type: ", testAssertionEditorState.assertionState.label()] }), renderResultView(parentAssertionResultState)] }))] }), _jsx("div", {})] })] }));
});
export const TestAssertionContextMenu = observer(forwardRef(function TestContainerContextMenu(props, ref) {
const { testableTestState: testableTestState, testAssertionState } = props;
const rename = () => testableTestState.setAssertionToRename(testAssertionState.assertion);
const remove = () => testableTestState.deleteAssertion(testAssertionState);
const add = () => testableTestState.addAssertion();
return (_jsxs(MenuContent, { ref: ref, children: [_jsx(MenuContentItem, { onClick: rename, children: "Rename" }), _jsx(MenuContentItem, { onClick: remove, children: "Delete" }), _jsx(MenuContentItem, { onClick: add, children: "Create a new assert" })] }));
}));
export const TestAssertionItem = observer((props) => {
const { testAssertionEditorState, isReadOnly, testableTestState } = props;
const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] = useState(false);
const isRunning = testableTestState.runningTestAction.isInProgress;
const testAssertion = testAssertionEditorState.assertion;
const isActive = testableTestState.selectedAsertionState?.assertion === testAssertion;
const _testableResult = testAssertionEditorState.assertionResultState.result;
const testableResult = isRunning
? TESTABLE_RESULT.IN_PROGRESS
: _testableResult;
const resultIcon = getTestableResultIcon(testableResult);
const openTestAssertion = () => testableTestState.openAssertion(testAssertion);
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(TestAssertionContextMenu, { testableTestState: testableTestState, testAssertionState: testAssertionEditorState }), menuProps: { elevation: 7 }, onOpen: onContextMenuOpen, onClose: onContextMenuClose, children: _jsxs("button", { className: clsx('testable-test-assertion-explorer__item__label'), onClick: openTestAssertion, tabIndex: -1, children: [_jsx("div", { className: "testable-test-assertion-explorer__item__label__icon testable-test-assertion-explorer__test-result-indicator__container", children: resultIcon }), _jsx("div", { className: "testable-test-assertion-explorer__item__label__text", children: testAssertion.id })] }) }));
});
export const TestAssertionEditor = observer((props) => {
const { testAssertionState } = props;
const selectedTab = testAssertionState.selectedTab;
const isReadOnly = testAssertionState.testState.isReadOnly;
const isDisabled = isReadOnly ||
!testAssertionState.assertionState.supportsGeneratingAssertion ||
testAssertionState.generatingExpectedAction.isInProgress;
const changeTab = (val) => testAssertionState.setSelectedTab(val);
const renderContent = (state) => {
if (state instanceof EqualToJsonAssertionState) {
return (_jsx(EqualToJsonAsssertionEditor, { equalToJsonAssertionState: state, testAssertionEditorState: testAssertionState }));
}
else if (state instanceof EqualToAssertionState) {
return (_jsx(EqualToAsssertionEditor, { equalToAssertionState: state, testAssertionEditorState: testAssertionState }));
}
return (_jsx(UnsupportedEditorPanel, { text: "Can't display this assertion in form-mode", isReadOnly: isReadOnly }));
};
const generate = () => {
testAssertionState.generateExpected();
};
const isRunning = testAssertionState.generatingExpectedAction.isInProgress;
return (_jsxs("div", { className: "testable-test-assertion-editor", children: [_jsx(PanelLoadingIndicator, { isLoading: isRunning }), _jsxs("div", { className: "testable-test-assertion-editor__header", children: [_jsx("div", { className: "testable-test-assertion-editor__header__tabs", children: Object.values(TEST_ASSERTION_TAB).map((tab) => (_jsx("div", { onClick: () => changeTab(tab), className: clsx('testable-test-assertion-editor__header__tab', {
'testable-test-assertion-editor__header__tab--active': tab === selectedTab,
}), children: prettyCONSTName(tab) }, tab))) }), _jsx("div", { className: "testable-test-assertion-editor__header__actions", children: _jsx("button", { className: "panel__header__action service-execution-editor__test-data__generate-btn", onClick: generate, title: "Generate expected result if possible", disabled: isDisabled, 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" })] }) }) })] }), _jsxs("div", { className: "testable-test-assertion-editor__content", children: [selectedTab === TEST_ASSERTION_TAB.EXPECTED && (_jsx("div", { className: "testable-test-assertion-editor__setup", children: renderContent(testAssertionState.assertionState) })), selectedTab === TEST_ASSERTION_TAB.RESULT && (_jsx(TestAssertionResultViewer, { testAssertionEditorState: testAssertionState }))] })] }));
});
export const ExternalFormatParameterEditorModal = observer((props) => {
const { valueSpec, varExpression, isReadOnly, onClose, updateParamValue, contentTypeParamPair, } = props;
const applicationStore = useApplicationStore();
const paramValue = varExpression.genericType?.value.rawType === PrimitiveType.BYTE
? atob(valueSpec.values[0])
: valueSpec.values[0];
return (_jsx(Dialog, { open: true, onClose: onClose, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: clsx('editor-modal lambda-editor__popup__modal'), children: [_jsx(ModalHeader, { children: _jsx(ModalTitle, { title: "Edit Parameter Value" }) }), _jsx(ModalBody, { children: _jsx("div", { className: "service-test-editor__setup__parameter__code-editor__container", children: _jsx("div", { className: "service-test-editor__setup__parameter__code-editor__container__content", children: _jsx(CodeEditor, { inputValue: paramValue, updateInput: updateParamValue, isReadOnly: isReadOnly, language: contentTypeParamPair.contentType ===
ContentType.APPLICATION_JSON.toString()
? CODE_EDITOR_LANGUAGE.JSON
: CODE_EDITOR_LANGUAGE.TEXT }) }) }) }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { text: "Close", onClick: onClose, type: "secondary" }) })] }) }));
});
//# sourceMappingURL=TestableSharedComponents.js.map