@finos/legend-application-studio
Version:
Legend Studio application core
501 lines • 43.1 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 { observer } from 'mobx-react-lite';
import { ModelStore, Database, getMappingCompatibleClasses, isStubbed_RawLambda, stub_RawLambda, MappingTest, PackageableElementExplicitReference, DataElementReference, RelationalCSVData, ModelStoreData, ExternalFormatData, ModelEmbeddedData, } from '@finos/legend-graph';
import { forwardRef, useEffect, useRef, useState } from 'react';
import { BlankPanelPlaceholder, CaretDownIcon, clsx, compareLabelFn, CustomSelectorInput, Dialog, ControlledDropdownMenu, MenuContent, MenuContentItem, Modal, ModalBody, ModalFooter, ModalFooterButton, ModalTitle, PanelContent, PanelFormTextField, PencilIcon, PlusIcon, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, ResizablePanelSplitterLine, RunAllIcon, RunErrorsIcon, PanelLoadingIndicator, ContextMenu, ModalHeader, PanelFormSection, PlayIcon, } from '@finos/legend-art';
import { assertErrorThrown, filterByType, prettyCONSTName, returnUndefOnError, uniq, } from '@finos/legend-shared';
import { useApplicationNavigationContext, useApplicationStore, } from '@finos/legend-application';
import { flowResult } from 'mobx';
import { ExecutionPlanViewer, QueryBuilderTextEditorMode, } from '@finos/legend-query-builder';
import { MappingExecutionQueryBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { atomicTest_setDoc } from '../../../../stores/graph-modifier/Testable_GraphModifierHelper.js';
import { RenameModal, SharedDataElementModal, TestAssertionEditor, } from '../testable/TestableSharedComponents.js';
import { EmbeddedDataEditor } from '../data-editor/EmbeddedDataEditor.js';
import { TESTABLE_RESULT, getTestableResultFromTestResult, getTestableResultFromTestResults, } from '../../../../stores/editor/sidebar-state/testable/GlobalTestRunnerState.js';
import { getTestableResultIcon } from '../../side-bar/testable/GlobalTestRunner.js';
import { EmbeddedDataCreatorFromEmbeddedData, validateTestableId, } from '../../../../stores/editor/utils/TestableUtils.js';
import { getMappingStores } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
import { EmbeddedDataType } from '../../../../stores/editor/editor-state/ExternalFormatState.js';
import { buildElementOption, getPackageableElementOptionFormatter, } from '@finos/legend-lego/graph-editor';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { TestExecutionPlanDebugState, TestUnknownDebugState, } from '../../../../stores/editor/editor-state/element-editor-state/testable/TestableEditorState.js';
const CreateTestSuiteModal = observer((props) => {
const { creatorState } = props;
const mappingTestableState = creatorState.mappingTestableState;
const mappingEditorState = mappingTestableState.mappingEditorState;
const mapping = mappingEditorState.mapping;
const editorStore = mappingEditorState.editorStore;
const applicationStore = editorStore.applicationStore;
// Class mapping selector
const compatibleClasses = getMappingCompatibleClasses(mapping, editorStore.graphManagerState.usableClasses);
const inputRef = useRef(null);
const handleEnter = () => inputRef.current?.focus();
const mappedClassOptions = uniq(compatibleClasses)
.map((e) => ({
label: e.name,
value: e,
}))
.sort(compareLabelFn);
const [selectedClass, setSelectedClass] = useState(compatibleClasses[0]);
const selectedClassOption = selectedClass
? {
value: selectedClass,
label: selectedClass.name,
}
: null;
// init states
const [suiteName, setSuiteName] = useState(undefined);
const [testName, setTestName] = useState(undefined);
const isValid = selectedClass && suiteName && testName;
const changeClassOption = (val) => {
if (val?.value) {
setSelectedClass(val.value);
}
else {
setSelectedClass(undefined);
}
};
// model
const close = () => mappingTestableState.closeCreateModal();
const create = () => {
if (selectedClass && suiteName && testName) {
flowResult(creatorState.createAndAddTestSuite(selectedClass, suiteName, testName)).catch(editorStore.applicationStore.alertUnhandledError);
}
};
return (_jsx(Dialog, { open: true, onClose: close, classes: { container: 'search-modal__container' }, slotProps: {
transition: {
onEnter: handleEnter,
},
paper: {
classes: { root: 'search-modal__inner-container' },
},
}, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, children: [_jsx(ModalHeader, { children: _jsx(ModalTitle, { title: "Create Mapping Test Suite" }) }), _jsxs(ModalBody, { children: [_jsx(PanelLoadingIndicator, { className: "panel-loading-indicator--in__modal", isLoading: creatorState.isCreatingSuiteState.isInProgress }), creatorState.isCreatingSuiteState.message && (_jsx(PanelFormSection, { children: _jsx("div", { className: "service-registration-editor__progress-msg", children: `${creatorState.isCreatingSuiteState.message}...` }) })), _jsx(PanelFormTextField, { ref: inputRef, name: "Test Suite Name", prompt: "Unique Identifier for Test suite i.e Person_suite", value: suiteName, placeholder: "Suite Name", update: (value) => setSuiteName(value ?? ''), errorMessage: validateTestableId(suiteName, undefined) }), _jsx(PanelFormTextField, { name: "Test Name", prompt: "Unique Identifier for first test in suite", placeholder: "Test Name", value: testName, update: (value) => setTestName(value ?? ''), errorMessage: validateTestableId(testName, undefined) }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Class Mapping" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Mapped Class for which you would like to build test suite for" }), _jsx(CustomSelectorInput, { options: mappedClassOptions, onChange: changeClassOption, value: selectedClassOption, formatOptionLabel: getPackageableElementOptionFormatter({}), darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled, placeholder: "Choose a class...", isClearable: true })] })] }), _jsxs(ModalFooter, { children: [_jsx(ModalFooterButton, { disabled: !isValid || creatorState.isCreatingSuiteState.isInProgress, title: !isValid
? 'Suite Name and Test Name Required'
: 'Create Test Suite', onClick: create, text: "Create" }), _jsx(ModalFooterButton, { onClick: close, text: "Close", type: "secondary" })] })] }) }));
});
const CreateTestModal = observer((props) => {
const { mappingSuiteState } = props;
const mapping = mappingSuiteState.mappingTestableState.mapping;
const suite = mappingSuiteState.suite;
const testData = suite.tests.filter(filterByType(MappingTest))[0]
?.storeTestData[0];
const editorStore = mappingSuiteState.editorStore;
const applicationStore = editorStore.applicationStore;
// test name
const [id, setId] = useState(undefined);
const isValid = id && !id.includes(' ');
const errorMessage = validateTestableId(id, suite.tests.map((t) => t.id));
const mappedClassSelectorRef = useRef(null);
// const firstTest = mapp
// Class mapping selector
const compatibleClasses = getMappingCompatibleClasses(mapping, editorStore.graphManagerState.usableClasses);
const mappedClassOptions = uniq(compatibleClasses)
.map((e) => ({
label: e.name,
value: e,
}))
.sort(compareLabelFn);
// class if required
const [selectedClass, setSelectedClass] = useState(compatibleClasses[0]);
const changeClassOption = (val) => {
setSelectedClass(val?.value);
};
const selectedClassOption = selectedClass
? {
value: selectedClass,
label: selectedClass.name,
}
: null;
// model
const close = () => mappingSuiteState.setShowModal(false);
const create = () => {
if (id) {
mappingSuiteState.addNewTest(id, selectedClass);
close();
}
};
return (_jsx(Dialog, { open: mappingSuiteState.showCreateModal, onClose: close, classes: { container: 'search-modal__container' }, slotProps: {
paper: {
classes: { root: 'search-modal__inner-container' },
},
}, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, children: [_jsx(ModalHeader, { children: _jsx(ModalTitle, { title: "Create Mapping Test" }) }), _jsxs(ModalBody, { children: [_jsx(PanelFormTextField, { name: "Name", prompt: "", value: id, update: (value) => setId(value ?? ''), errorMessage: errorMessage }), !testData && (_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Class Mapping" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Mapped Class for which you would like to build test suite for" }), _jsx(CustomSelectorInput, { inputRef: mappedClassSelectorRef, options: mappedClassOptions, onChange: changeClassOption, value: selectedClassOption, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled, placeholder: "Choose a class...", isClearable: true })] }))] }), _jsxs(ModalFooter, { children: [_jsx(ModalFooterButton, { disabled: !isValid, onClick: create, text: "Create" }), _jsx(ModalFooterButton, { onClick: close, text: "Close", type: "secondary" })] })] }) }));
});
const CreateStoreTestDataModal = observer((props) => {
const { mappingTestState } = props;
const mappingTestableDataState = mappingTestState.dataState;
const editorStore = mappingTestableDataState.editorStore;
const applicationStore = editorStore.applicationStore;
const mapping = mappingTestableDataState.mappingTestableState.mapping;
const isReadOnly = mappingTestableDataState.mappingTestableState.mappingEditorState
.isReadOnly;
// options
const dataElementOptions = editorStore.graphManagerState.usableDataElements.map(buildElementOption);
const extraOptionTypes = editorStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraEmbeddedDataTypeOptions?.() ?? []);
const embeddedOptions = [
...Object.values(EmbeddedDataType)
.filter((e) => e !== EmbeddedDataType.DATA_ELEMENT || dataElementOptions.length)
.map((typeOption) => ({
label: prettyCONSTName(typeOption),
value: typeOption,
})),
...extraOptionTypes,
];
const getDefaultTypeFromStore = (_store) => {
if (_store instanceof ModelStore) {
return EmbeddedDataType.EXTERNAL_FORMAT_DATA;
}
else if (_store instanceof Database) {
return EmbeddedDataType.RELATIONAL_CSV;
}
return undefined;
};
const compatibleStores = Array.from(getMappingStores(mapping, editorStore.pluginManager.getApplicationPlugins()));
// set states
const [selectedStore, setSelectedStore] = useState(compatibleStores[0]);
const [embeddedDataType, setEmbeddedDataType] = useState(getDefaultTypeFromStore(selectedStore) ?? embeddedOptions[0]?.value);
// data reference
const [dataElement, setDataElement] = useState(dataElementOptions[0]?.value);
const selectedDataElement = dataElement
? buildElementOption(dataElement)
: null;
const onDataElementChange = (val) => {
setDataElement(val?.value);
};
// data type
const onEmbeddedTypeChange = (val) => {
setEmbeddedDataType(val?.value);
};
const embeddedDataTypeOption = embeddedDataType
? {
value: embeddedDataType,
label: prettyCONSTName(embeddedDataType),
}
: undefined;
// store
const mappedStoreRef = useRef(null);
const selectedStoreOptions = compatibleStores
.map((e) => ({
label: e.name,
value: e,
}))
.sort(compareLabelFn);
const selectedStoreOption = selectedStore
? {
value: selectedStore,
label: selectedStore.name,
}
: null;
const changeStoreOption = (val) => {
setSelectedStore(val?.value);
const store = val?.value;
if (store instanceof ModelStore) {
setEmbeddedDataType(EmbeddedDataType.EXTERNAL_FORMAT_DATA);
}
else if (store instanceof Database) {
setEmbeddedDataType(EmbeddedDataType.RELATIONAL_CSV);
}
};
// validation
const isValid = (Boolean(selectedStore) && Boolean(embeddedDataType)) ||
(embeddedDataType === EmbeddedDataType.DATA_ELEMENT && dataElement);
const close = () => mappingTestableDataState.setShowModal(false);
const create = () => {
if (selectedStore && embeddedDataType) {
mappingTestableDataState.addStoreTestData(selectedStore, embeddedDataType, dataElement);
close();
}
};
return (_jsx(Dialog, { open: mappingTestableDataState.showNewModal, onClose: close, classes: { container: 'search-modal__container' }, slotProps: {
paper: {
classes: { root: 'search-modal__inner-container' },
},
}, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "search-modal", children: [_jsx(ModalTitle, { title: "Create Store Test Data" }), _jsxs(ModalBody, { children: [_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Store to add test data" }), _jsx(CustomSelectorInput, { inputRef: mappedStoreRef, options: selectedStoreOptions, onChange: changeStoreOption, formatOptionLabel: getPackageableElementOptionFormatter({}), value: selectedStoreOption, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled, placeholder: "Choose a store...", isClearable: true })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Data Type" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Test data type that will be used to mock store (defaulted based on store)" }), _jsx("div", { className: "explorer__new-element-modal__driver", children: _jsx(CustomSelectorInput, { className: "explorer__new-element-modal__driver__dropdown", options: embeddedOptions, onChange: onEmbeddedTypeChange, value: embeddedDataTypeOption, isClearable: false, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled }) })] }), embeddedDataType === EmbeddedDataType.DATA_ELEMENT && (_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: isReadOnly, options: dataElementOptions, onChange: onDataElementChange, value: selectedDataElement, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled }) })] }))] }), _jsxs(ModalFooter, { children: [_jsx(ModalFooterButton, { disabled: !isValid, onClick: create, text: "Create" }), _jsx(ModalFooterButton, { onClick: close, text: "Close", type: "secondary" })] })] }) }));
});
const MappingTestSuiteQueryEditor = observer((props) => {
const { testSuiteState, mappingTestableState, isReadOnly } = props;
const testableQueryState = testSuiteState.queryState;
const mapping = mappingTestableState.mapping;
const editorStore = mappingTestableState.mappingEditorState.editorStore;
const applicationStore = useApplicationStore();
// actions
const editWithQueryBuilder = (openInTextMode = false) => applicationStore.guardUnhandledError(async () => {
const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
await flowResult(embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
setupQueryBuilderState: async () => {
const queryBuilderState = new MappingExecutionQueryBuilderState(embeddedQueryBuilderState.editorStore.applicationStore, embeddedQueryBuilderState.editorStore.graphManagerState, mapping, editorStore.applicationStore.config.options.queryBuilderConfig, editorStore.editorMode.getSourceInfo());
queryBuilderState.initializeWithQuery(testableQueryState.query);
if (openInTextMode) {
queryBuilderState.textEditorState.openModal(QueryBuilderTextEditorMode.TEXT);
}
return queryBuilderState;
},
actionConfigs: [
{
key: 'save-query-btn',
renderer: (queryBuilderState) => {
const save = applicationStore.guardUnhandledError(async () => {
try {
const rawLambda = queryBuilderState.buildQuery();
await flowResult(testableQueryState.updateLamba(rawLambda));
applicationStore.notificationService.notifySuccess(`Mapping testable query is updated`);
embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(undefined);
}
catch (error) {
assertErrorThrown(error);
applicationStore.notificationService.notifyError(`Can't save query: ${error.message}`);
}
});
return (_jsx("button", { className: "query-builder__dialog__header__custom-action", tabIndex: -1, disabled: isReadOnly, onClick: save, children: "Save Query" }));
},
},
],
disableCompile: isStubbed_RawLambda(testableQueryState.query),
}));
});
const clearQuery = applicationStore.guardUnhandledError(() => flowResult(testableQueryState.updateLamba(stub_RawLambda())));
// debug
const disableDebug = !testSuiteState.selectTestState;
const debugQuery = () => {
flowResult(testSuiteState.debug()).catch(testSuiteState.editorStore.applicationStore.alertUnhandledError);
};
const debugState = testSuiteState.selectTestState?.debugTestResultState;
const renderDebug = (val) => {
const closeDebug = () => testSuiteState.selectTestState?.setDebugState(undefined);
if (val instanceof TestExecutionPlanDebugState) {
return (_jsx(ExecutionPlanViewer, { executionPlanState: val.executionPlanState }));
}
if (val instanceof TestUnknownDebugState) {
return (_jsx(Dialog, { open: Boolean(debugState), onClose: closeDebug, classes: {
root: 'editor-modal__root-container',
container: 'editor-modal__container',
paper: 'editor-modal__content',
}, children: _jsxs(Modal, { className: clsx('editor-modal query-builder-text-mode__modal'), children: [_jsx(ModalHeader, { children: _jsx("div", { className: "modal__title", children: `Debug` }) }), _jsx(ModalBody, { children: _jsx("div", { className: clsx('query-builder-text-mode__modal__content'), children: _jsx(CodeEditor, { language: CODE_EDITOR_LANGUAGE.JSON, inputValue: JSON.stringify(val.testDebug.value), isReadOnly: true }) }) }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { onClick: closeDebug, type: "primary", children: "Close" }) })] }) }));
}
return null;
};
return (_jsxs("div", { className: "panel mapping-test-editor__query-panel", children: [_jsx(PanelLoadingIndicator, { isLoading: Boolean(testSuiteState.selectTestState?.debuggingTestAction.isInProgress) }), _jsxs("div", { className: "panel__header", children: [_jsx("div", { className: "panel__header__title", children: _jsx("div", { className: "panel__header__title__label", children: "query" }) }), _jsxs("div", { className: "panel__header__actions", children: [_jsxs("div", { className: "btn__dropdown-combo", children: [_jsxs("button", { className: "btn__dropdown-combo__label", onClick: editWithQueryBuilder(), title: "Edit Query", tabIndex: -1, children: [_jsx(PencilIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Edit Query" })] }), _jsx(ControlledDropdownMenu, { className: "btn__dropdown-combo__dropdown-btn", content: _jsxs(MenuContent, { children: [_jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: editWithQueryBuilder(true), children: "Text Mode" }), _jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: clearQuery, children: "Clear Query" })] }), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'right' },
}, children: _jsx(CaretDownIcon, {}) })] }), _jsx("div", { className: "btn__dropdown-combo btn__dropdown-combo--primary", children: _jsxs("button", { className: "btn__dropdown-combo__label", onClick: debugQuery, title: "Debug Test With Exec Plan", disabled: disableDebug, tabIndex: -1, children: [_jsx(PlayIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Debug" })] }) })] })] }), !isStubbed_RawLambda(testableQueryState.query) && (_jsx(PanelContent, { children: _jsx("div", { className: "mapping-test-editor__query-panel__query", children: _jsx(CodeEditor, { inputValue: testableQueryState.lambdaString, isReadOnly: true, language: CODE_EDITOR_LANGUAGE.PURE, hideMinimap: true }) }) })), debugState && renderDebug(debugState)] }));
});
const StoreTestDataEditor = observer((props) => {
const { mappingTestState, storeTestDataState } = props;
const isReadOnly = mappingTestState.mappingTestableState.mappingEditorState.isReadOnly;
const dataElements = storeTestDataState.editorStore.graphManagerState.graph.dataElements;
const currentData = storeTestDataState.storeTestData.data;
const isUsingReference = currentData instanceof DataElementReference;
const open = () => storeTestDataState.setDataElementModal(true);
const close = () => storeTestDataState.setDataElementModal(false);
const changeToUseMyOwn = () => {
if (isUsingReference) {
const newBare = returnUndefOnError(() => currentData.accept_EmbeddedDataVisitor(new EmbeddedDataCreatorFromEmbeddedData(mappingTestState.editorStore)));
if (newBare) {
storeTestDataState.changeEmbeddedData(newBare);
}
}
};
const sharedDataHandler = (val) => {
const dataRef = new DataElementReference();
dataRef.dataElement = PackageableElementExplicitReference.create(val);
const dataElementValue = val.data;
let embeddedData = dataRef;
if (currentData instanceof ModelStoreData &&
dataElementValue instanceof ExternalFormatData) {
const modelStoreVal = currentData.modelData?.[0];
if (modelStoreVal instanceof ModelEmbeddedData) {
const newModelEmbeddedData = new ModelEmbeddedData();
newModelEmbeddedData.model =
PackageableElementExplicitReference.create(modelStoreVal.model.value);
newModelEmbeddedData.data = dataRef;
const modelStoreData = new ModelStoreData();
modelStoreData.modelData = [newModelEmbeddedData];
embeddedData = modelStoreData;
}
}
storeTestDataState.changeEmbeddedData(embeddedData);
};
const filter = (val) => {
const dataElementData = val.data;
if (currentData instanceof RelationalCSVData) {
if (dataElementData instanceof RelationalCSVData) {
return true;
}
return false;
}
else if (currentData instanceof ModelStoreData) {
if (dataElementData instanceof ExternalFormatData ||
dataElementData instanceof ModelStoreData) {
return true;
}
return false;
}
// TODO add extensions
return true;
};
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: "input data" }) }), _jsx("div", { className: "panel__header__actions", children: isUsingReference ? (_jsx("button", { className: "panel__header__action service-execution-editor__test-data__generate-btn", onClick: changeToUseMyOwn, disabled: !isUsingReference, title: "Use own data", tabIndex: -1, children: _jsx("div", { className: "service-execution-editor__test-data__generate-btn__label", children: _jsx("div", { className: "service-execution-editor__test-data__generate-btn__label__title", children: "Own Data" }) }) })) : (_jsx("button", { className: "panel__header__action service-execution-editor__test-data__generate-btn", onClick: open, title: "Use Shared Data via Defined Data Element", disabled: !dataElements.length, tabIndex: -1, children: _jsx("div", { className: "service-execution-editor__test-data__generate-btn__label", children: _jsx("div", { className: "service-execution-editor__test-data__generate-btn__label__title", children: "Shared Data" }) }) })) })] }), storeTestDataState.dataElementModal && (_jsx(SharedDataElementModal, { isReadOnly: false, editorStore: storeTestDataState.editorStore, close: close, filterBy: filter, handler: sharedDataHandler })), _jsx(EmbeddedDataEditor, { isReadOnly: isReadOnly, embeddedDataEditorState: storeTestDataState.embeddedEditorState })] }));
});
const MappingTestEditor = observer((props) => {
const { mappingTestState } = props;
const mappingTest = mappingTestState.test;
const mappingTestableDataState = mappingTestState.dataState;
const addStoreTestData = () => {
mappingTestableDataState.setShowModal(true);
};
return (_jsx("div", { className: "service-test-editor panel", children: _jsx("div", { className: "panel mapping-testable-editor", children: _jsx("div", { className: "mapping-testable-editor__content", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { size: 120, children: _jsx("div", { className: "service-test-data-editor panel", children: _jsx("div", { className: "service-test-editor__setup__configuration", children: _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Test Documentation" }), _jsx("textarea", { className: "panel__content__form__section__textarea mapping-testable-editor__doc__textarea", spellCheck: false, value: mappingTest.doc ?? '', onChange: (event) => {
atomicTest_setDoc(mappingTest, event.target.value ? event.target.value : undefined);
} })] }) }) }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { children: _jsxs("div", { className: "service-test-data-editor panel", children: [mappingTestableDataState.dataHolder.storeTestData
.length ? (_jsx(_Fragment, { children: mappingTestableDataState.selectedDataState && (_jsx(StoreTestDataEditor, { storeTestDataState: mappingTestableDataState.selectedDataState, mappingTestState: mappingTestState })) })) : (_jsx(BlankPanelPlaceholder, { text: "Add Store Test Data", onClick: addStoreTestData, clickActionType: "add", tooltipText: "Click to add store test data" })), mappingTestableDataState.showNewModal && (_jsx(CreateStoreTestDataModal, { mappingTestState: mappingTestState }))] }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { children: mappingTestState.selectedAsertionState && (_jsx(TestAssertionEditor, { testAssertionState: mappingTestState.selectedAsertionState })) })] }) })] }) }) }) }));
});
const MappingTestableContextMenu = observer(forwardRef(function TestContainerContextMenu(props, ref) {
const { addName, add, rename, _delete } = props;
const addTest = () => {
add?.();
};
const remove = () => _delete?.();
const handleRename = () => rename?.();
return (_jsxs(MenuContent, { ref: ref, children: [rename && (_jsx(MenuContentItem, { onClick: handleRename, children: "Rename" })), _delete && _jsx(MenuContentItem, { onClick: remove, children: "Delete" }), addName && rename && (_jsx(MenuContentItem, { onClick: addTest, children: `Add ${addName}` }))] }));
}));
const MappingTestItem = observer((props) => {
const { mappingTestState, suiteState } = props;
const mappingTest = mappingTestState.test;
const isRunning = mappingTestState.runningTestAction.isInProgress;
const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] = useState(false);
const isReadOnly = suiteState.mappingTestableState.mappingEditorState.isReadOnly;
const openTest = () => suiteState.changeTest(mappingTest);
const isActive = suiteState.selectTestState?.test === mappingTest;
const _testableResult = getTestableResultFromTestResult(mappingTestState.testResultState.result);
const testableResult = isRunning
? TESTABLE_RESULT.IN_PROGRESS
: _testableResult;
const resultIcon = getTestableResultIcon(testableResult);
const onContextMenuOpen = () => setIsSelectedFromContextMenu(true);
const onContextMenuClose = () => setIsSelectedFromContextMenu(false);
const add = () => {
suiteState.setShowModal(true);
};
const _delete = () => {
suiteState.deleteTest(mappingTest);
};
const rename = () => {
suiteState.mappingTestableState.setRenameComponent(mappingTest);
};
const runTest = () => {
flowResult(mappingTestState.runTest()).catch(mappingTestState.editorStore.applicationStore.alertUnhandledError);
};
return (_jsx(ContextMenu, { className: clsx('testable-test-explorer__item', {
'testable-test-explorer__item--selected-from-context-menu': !isActive && isSelectedFromContextMenu,
}, { 'testable-test-explorer__item--active': isActive }), disabled: isReadOnly, content: _jsx(MappingTestableContextMenu, { addName: "Test", add: add, _delete: _delete, rename: rename }), menuProps: { elevation: 7 }, onOpen: onContextMenuOpen, onClose: onContextMenuClose, children: _jsxs("button", { className: clsx('testable-test-explorer__item__label'), onClick: openTest, tabIndex: -1, children: [_jsx("div", { className: "testable-test-explorer__item__label__icon", children: resultIcon }), _jsx("div", { className: "testable-test-explorer__item__label__text", children: mappingTest.id }), _jsx("div", { className: "mapping-test-explorer__item__actions", children: _jsx("button", { className: "mapping-test-explorer__item__action mapping-test-explorer__run-test-btn", onClick: runTest, disabled: mappingTestState.runningTestAction.isInProgress, tabIndex: -1, title: `Run ${mappingTestState.test.id}`, children: _jsx(PlayIcon, {}) }) })] }) }));
});
const MappingTestSuiteEditor = observer((props) => {
const { mappingTestSuiteState } = props;
const editorStore = mappingTestSuiteState.editorStore;
const selectedTestState = mappingTestSuiteState.selectTestState;
const isReadOnly = mappingTestSuiteState.mappingTestableState.mappingEditorState.isReadOnly;
const addTest = () => mappingTestSuiteState.setShowModal(true);
const runTests = () => {
flowResult(mappingTestSuiteState.runSuite()).catch(editorStore.applicationStore.alertUnhandledError);
};
const runFailingTests = () => {
flowResult(mappingTestSuiteState.runFailingTests()).catch(editorStore.applicationStore.alertUnhandledError);
};
const renderMappingTestEditor = () => {
if (selectedTestState) {
return _jsx(MappingTestEditor, { mappingTestState: selectedTestState });
}
else if (!mappingTestSuiteState.suite.tests.length) {
return (_jsx(BlankPanelPlaceholder, { text: "Add Mapping Test", onClick: addTest, clickActionType: "add", tooltipText: "Click to add mapping test" }));
}
return null;
};
return (_jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { size: 300, minSize: 28, children: _jsx(MappingTestSuiteQueryEditor, { testSuiteState: mappingTestSuiteState, mappingTestableState: mappingTestSuiteState.mappingTestableState, isReadOnly: isReadOnly }, mappingTestSuiteState.queryState.uuid) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { minSize: 56, children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsxs(ResizablePanel, { size: 200, minSize: 28, children: [_jsxs("div", { className: "binding-editor__header", children: [_jsx("div", { className: "binding-editor__header__title", children: _jsx("div", { className: "panel__header__title__content", children: "Tests" }) }), _jsxs("div", { className: "panel__header__actions", children: [_jsx("button", { className: "panel__header__action testable-test-explorer__play__all__icon", tabIndex: -1, onClick: runTests, title: "Run All Tests", children: _jsx(RunAllIcon, {}) }), _jsx("button", { className: "panel__header__action testable-test-explorer__play__all__icon", tabIndex: -1, onClick: runFailingTests, title: "Run All Failing Tests", children: _jsx(RunErrorsIcon, {}) }), _jsx("button", { className: "panel__header__action", tabIndex: -1, onClick: addTest, title: "Add Mapping Test", children: _jsx(PlusIcon, {}) })] })] }), _jsxs(PanelContent, { children: [mappingTestSuiteState.testStates.map((test) => (_jsx(MappingTestItem, { mappingTestState: test, suiteState: mappingTestSuiteState }, test.uuid))), mappingTestSuiteState.showCreateModal && (_jsx(CreateTestModal, { mappingSuiteState: mappingTestSuiteState }))] })] }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { minSize: 28, children: renderMappingTestEditor() })] }) })] }));
});
const MappingTestSuiteItem = observer((props) => {
const { suite, mappingTestableState } = props;
const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] = useState(false);
const isReadOnly = mappingTestableState.mappingEditorState.isReadOnly;
const openSuite = () => mappingTestableState.changeSuite(suite);
const results = mappingTestableState.testableResults?.filter((t) => t.parentSuite?.id === suite.id);
const isRunning = mappingTestableState.isRunningTestableSuitesState.isInProgress ||
(mappingTestableState.isRunningFailingSuitesState.isInProgress &&
mappingTestableState.failingSuites.includes(suite)) ||
mappingTestableState.runningSuite === suite;
const isActive = mappingTestableState.selectedTestSuite?.suite === suite;
const _testableResult = getTestableResultFromTestResults(results);
const testableResult = isRunning
? TESTABLE_RESULT.IN_PROGRESS
: _testableResult;
const resultIcon = getTestableResultIcon(testableResult);
const onContextMenuOpen = () => setIsSelectedFromContextMenu(true);
const onContextMenuClose = () => setIsSelectedFromContextMenu(false);
const add = () => {
mappingTestableState.openCreateModal();
};
const _delete = () => {
mappingTestableState.deleteTestSuite(suite);
};
const rename = () => {
mappingTestableState.setRenameComponent(suite);
};
const runSuite = () => {
flowResult(mappingTestableState.runSuite(suite)).catch(mappingTestableState.editorStore.applicationStore.alertUnhandledError);
};
return (_jsx(ContextMenu, { className: clsx('testable-test-explorer__item', {
'testable-test-explorer__item--selected-from-context-menu': !isActive && isSelectedFromContextMenu,
}, { 'testable-test-explorer__item--active': isActive }), disabled: isReadOnly, content: _jsx(MappingTestableContextMenu, { addName: "Suite", add: add, _delete: _delete, rename: rename }), menuProps: { elevation: 7 }, onOpen: onContextMenuOpen, onClose: onContextMenuClose, children: _jsxs("button", { className: clsx('testable-test-explorer__item__label'), onClick: openSuite, tabIndex: -1, children: [_jsx("div", { className: "testable-test-explorer__item__label__icon", children: resultIcon }), _jsx("div", { className: "testable-test-explorer__item__label__text", children: suite.id }), _jsx("div", { className: "mapping-test-explorer__item__actions", children: _jsx("button", { className: "mapping-test-explorer__item__action mapping-test-explorer__run-test-btn", onClick: runSuite, disabled: isRunning, tabIndex: -1, title: `Run ${suite.id}`, children: _jsx(PlayIcon, {}) }) })] }) }));
});
export const MappingTestableEditor = observer((props) => {
const { mappingTestableState } = props;
const mappingEditorState = mappingTestableState.mappingEditorState;
useEffect(() => {
mappingTestableState.init();
}, [mappingTestableState]);
const isReadOnly = mappingEditorState.isReadOnly;
const suites = mappingTestableState.mapping.tests;
const selectedSuiteState = mappingTestableState.selectedTestSuite;
const addSuite = () => mappingTestableState.openCreateModal();
const runSuites = () => {
mappingTestableState.runTestable();
};
const runFailingTests = () => {
mappingTestableState.runAllFailingSuites();
};
const renderSuiteState = () => {
if (selectedSuiteState) {
return (_jsx(MappingTestSuiteEditor, { mappingTestSuiteState: selectedSuiteState }));
}
else if (!suites.length) {
return (_jsx(BlankPanelPlaceholder, { text: "Add Test Suite", onClick: addSuite, clickActionType: "add", tooltipText: "Click to add test suite" }));
}
return null;
};
const renameTestingComponent = (val) => {
mappingTestableState.renameTestableComponent(val);
};
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_EDITOR_TEST);
return (_jsx("div", { className: "service-test-suite-editor panel", children: _jsxs("div", { className: "service-test-suite-editor", children: [_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsxs(ResizablePanel, { size: 200, minSize: 28, children: [_jsxs("div", { className: "binding-editor__header", children: [_jsx("div", { className: "binding-editor__header__title", children: _jsx("div", { className: "panel__header__title__content", children: "Test Suites" }) }), _jsxs("div", { className: "panel__header__actions", children: [_jsx("button", { className: "panel__header__action testable-test-explorer__play__all__icon", tabIndex: -1, onClick: runSuites, title: "Run All Suites", children: _jsx(RunAllIcon, {}) }), _jsx("button", { className: "panel__header__action testable-test-explorer__play__all__icon", tabIndex: -1, onClick: runFailingTests, title: "Run All Failing Tests", children: _jsx(RunErrorsIcon, {}) }), _jsx("button", { className: "panel__header__action", tabIndex: -1, onClick: addSuite, title: "Add Mapping Suite", children: _jsx(PlusIcon, {}) })] })] }), _jsxs(PanelContent, { children: [suites.map((suite) => (_jsx(MappingTestSuiteItem, { mappingTestableState: mappingTestableState, suite: suite }, suite.id))), !suites.length && (_jsx(BlankPanelPlaceholder, { text: "Add Test Suite", onClick: addSuite, clickActionType: "add", tooltipText: "Click to add test suite" }))] }), !suites.length && (_jsx(BlankPanelPlaceholder, { disabled: mappingEditorState.isReadOnly, onClick: addSuite, text: "Add a Test Suite", clickActionType: "add", tooltipText: "Click to add a new mapping test suite" }))] }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { minSize: 56, children: _jsx("div", { className: "panel mapping-testable-editorr", children: _jsx("div", { className: "mapping-testable-editor__content", children: renderSuiteState() }) }) })] }), mappingTestableState.createSuiteState && (_jsx(CreateTestSuiteModal, { creatorState: mappingTestableState.createSuiteState })), mappingTestableState.testableComponentToRename && (_jsx(RenameModal, { val: mappingTestableState.testableComponentToRename.id, isReadOnly: isReadOnly, showModal: true, closeModal: () => mappingTestableState.setRenameComponent(undefined), setValue: (val) => renameTestingComponent(val), errorMessageFunc: (_val) => validateTestableId(_val, undefined) }))] }) }));
});
//# sourceMappingURL=MappingTestableEditor.js.map