@finos/legend-application-studio
Version:
Legend Studio application core
343 lines • 30.5 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 { BlankPanelPlaceholder, CaretDownIcon, clsx, ContextMenu, CustomSelectorInput, Dialog, ControlledDropdownMenu, InfoCircleIcon, MaskIcon, MenuContent, MenuContentItem, Modal, ModalBody, ModalFooter, ModalFooterButton, ModalHeader, PanelLoadingIndicator, PlusIcon, PURE_ConnectionIcon, RefreshIcon, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, ResizablePanelSplitterLine, TimesIcon, } from '@finos/legend-art';
import { getAllIdentifiedServiceConnections, DataElementReference, PackageableElementExplicitReference, Column, } from '@finos/legend-graph';
import { observer } from 'mobx-react-lite';
import { forwardRef, useState } from 'react';
import { createMockPrimitiveValueSpecificationFromRelationalDataType, } from '../../../../../stores/editor/editor-state/element-editor-state/service/testable/ServiceTestDataState.js';
import { EmbeddedDataEditor } from '../../data-editor/EmbeddedDataEditor.js';
import { EmbeddedDataType } from '../../../../../stores/editor/editor-state/ExternalFormatState.js';
import { flowResult } from 'mobx';
import { ActionAlertActionType, ActionAlertType, useApplicationStore, } from '@finos/legend-application';
import { buildElementOption } from '@finos/legend-lego/graph-editor';
import { filterByType, guaranteeNonNullable, prettyCONSTName, } from '@finos/legend-shared';
import { useEditorStore } from '../../../EditorStoreProvider.js';
import { BasicValueSpecificationEditor, LambdaParameterValuesEditor, } from '@finos/legend-query-builder';
import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../../__lib__/LegendStudioDocumentation.js';
import { getPrimitiveTypeFromRelationalType } from '../../../../../stores/editor/utils/MockDataUtils.js';
export const RowIdentifierEditor = observer((props) => {
const { tableRowIdentifierState, rowIdentifierState } = props;
const applicationStore = useApplicationStore();
const columnOptions = tableRowIdentifierState.table.columns
.filter(filterByType(Column))
.map((_c) => ({
label: _c.name,
value: _c,
}));
const changeColumn = (val) => {
if (rowIdentifierState.column.name !== val.value.name) {
const valueSpec = createMockPrimitiveValueSpecificationFromRelationalDataType(guaranteeNonNullable(rowIdentifierState.column.type), tableRowIdentifierState.connectionTestDataState.editorStore
.graphManagerState.graph, tableRowIdentifierState.connectionTestDataState.editorStore
.changeDetectionState.observerContext);
if (valueSpec) {
rowIdentifierState.updateRowIdentifierValue(valueSpec);
rowIdentifierState.updateRowIdentifierColumn(val.value);
}
}
};
const resetNode = () => {
const valueSpec = createMockPrimitiveValueSpecificationFromRelationalDataType(guaranteeNonNullable(rowIdentifierState.column.type), tableRowIdentifierState.connectionTestDataState.editorStore
.graphManagerState.graph, tableRowIdentifierState.connectionTestDataState.editorStore
.changeDetectionState.observerContext);
if (valueSpec) {
rowIdentifierState.updateRowIdentifierValue(valueSpec);
}
};
return (_jsx("div", { className: "panel__content__form__section__list", children: _jsxs("div", { className: "panel__content__form__section__list__new-item", children: [_jsx(CustomSelectorInput, { className: "service-editor__owner__selector", placeholder: "Choose a column...", options: columnOptions, onChange: changeColumn, value: {
label: rowIdentifierState.column.name,
value: rowIdentifierState.column,
}, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled }), _jsx(BasicValueSpecificationEditor, { valueSpecification: rowIdentifierState.value, setValueSpecification: (val) => {
rowIdentifierState.updateRowIdentifierValue(val);
}, graph: tableRowIdentifierState.connectionTestDataState.editorStore
.graphManagerState.graph, observerContext: tableRowIdentifierState.connectionTestDataState.editorStore
.changeDetectionState.observerContext, typeCheckOption: {
expectedType: guaranteeNonNullable(getPrimitiveTypeFromRelationalType(guaranteeNonNullable(rowIdentifierState.column.type))),
}, resetValue: resetNode }), _jsx("button", { className: "btn--icon btn--dark btn--sm", onClick: () => tableRowIdentifierState.removeRowIdentifierState(rowIdentifierState), tabIndex: -1, title: 'Remove Row', children: _jsx(TimesIcon, {}) })] }) }));
});
export const TableRowIdentifierEditor = observer((props) => {
const { connectionTestDataState, tableRowIdentifierState } = props;
const applicationStore = useApplicationStore();
const tables = connectionTestDataState.getAvailableTables();
const tableOptions = tables.map((_t) => ({
label: `${_t.schema.name}.${_t.name}`,
value: _t,
}));
const changeTable = (val) => {
if (tableRowIdentifierState.table !== val.value) {
tableRowIdentifierState.updateTable(val.value);
tableRowIdentifierState.setNewRowIdentifierState([]);
}
};
const addNewRow = () => {
tableRowIdentifierState.addNewRowIdentifierState(guaranteeNonNullable(tableRowIdentifierState.table.columns.filter(filterByType(Column))[0]));
};
return (_jsxs(ModalBody, { className: "lambda-parameter-values__modal__body", children: [_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Table" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "create seed data below based on root tables" }), _jsx(CustomSelectorInput, { placeholder: "Choose a root table...", options: tableOptions, onChange: changeTable, value: {
label: `${tableRowIdentifierState.table.schema.name}.${tableRowIdentifierState.table.name}`,
value: tableRowIdentifierState.table,
}, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Seed Data" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "create value for primary key column" }), tableRowIdentifierState.rowIdentifierStates.map((rowIdentifierState) => (_jsx(RowIdentifierEditor, { tableRowIdentifierState: tableRowIdentifierState, rowIdentifierState: rowIdentifierState }, rowIdentifierState._UUID))), _jsx("div", { className: "panel__content__form__section__list__new-item__add", children: _jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", onClick: addNewRow, tabIndex: -1, title: "Add Seed Data for column", children: "Add Row" }) })] })] }));
});
export const SeedDataInputModal = observer((props) => {
const { connectionTestDataState } = props;
const applicationStore = useApplicationStore();
const useSeedDataInputModal = connectionTestDataState.useSeedDataInputModal;
const closeModal = () => connectionTestDataState.setUseSeedDataInputModal(false);
const generateWithSeedData = () => {
closeModal();
flowResult(connectionTestDataState.generateTestDataWithSeedData()).catch(applicationStore.alertUnhandledError);
};
const addNewTable = () => {
const tables = connectionTestDataState.getAvailableTables();
if (tables[0]) {
connectionTestDataState.addNewTableIdentifierState(tables[0]);
}
};
return (_jsx(Dialog, { open: useSeedDataInputModal, onClose: closeModal, 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 lambda-parameter-values__modal", children: [_jsx(ModalHeader, { title: "Create Seed Data Input (BETA)" }), _jsxs(ModalBody, { className: "lambda-parameter-values__modal__body", children: [connectionTestDataState.tableRowIdentifierStates.map((tableRowIdentifierState) => (_jsx(TableRowIdentifierEditor, { connectionTestDataState: connectionTestDataState, tableRowIdentifierState: tableRowIdentifierState }, tableRowIdentifierState._UUID))), _jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", onClick: addNewTable, tabIndex: -1, title: "Add Seed Data for table", children: "Add a Different Table" })] }), _jsxs(ModalFooter, { children: [_jsx(ModalFooterButton, { onClick: closeModal, text: "Close", type: "secondary" }), _jsx(ModalFooterButton, { onClick: generateWithSeedData, text: "Generate" })] })] }) }));
});
export const UseDataElementModal = observer((props) => {
const { connectionTestDataState } = props;
const editorStore = connectionTestDataState.editorStore;
const applicationStore = editorStore.applicationStore;
const useSharedModal = connectionTestDataState.useSharedModal;
const closeModal = () => connectionTestDataState.setUseSharedModal(false);
const dataElements = connectionTestDataState.editorStore.graphManagerState.graph.dataElements;
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) {
const value = new DataElementReference();
value.dataElement =
PackageableElementExplicitReference.create(dataElement);
connectionTestDataState.changeEmbeddedData(value);
}
closeModal();
};
const isReadOnly = connectionTestDataState.testDataState.testSuiteState.testableState
.serviceEditorState.isReadOnly;
return (_jsx(Dialog, { open: useSharedModal, onClose: closeModal, classes: { container: 'search-modal__container' }, slotProps: {
paper: {
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, 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 Shared Data", children: "Change" }) })] }) }));
});
export const ConnectionTestDataEditor = observer((props) => {
const { connectionTestDataState } = props;
const applicationStore = useApplicationStore();
const USER_ATTESTATION_MESSAGE = 'Data generated has not been anonmyized. I attest that I am aware of the sensitive data leakage risk when using real data in tests.';
const isReadOnly = connectionTestDataState.testDataState.testSuiteState.testableState
.serviceEditorState.isReadOnly;
const dataElements = connectionTestDataState.editorStore.graphManagerState.graph.dataElements;
const openShared = () => {
if (dataElements.length) {
connectionTestDataState.setUseSharedModal(true);
}
};
// test data
const anonymizeGeneratedData = connectionTestDataState.anonymizeGeneratedData;
const toggleAnonymizeGeneratedData = () => {
connectionTestDataState.setAnonymizeGeneratedData(!anonymizeGeneratedData);
};
const confirmGenerateUnAnonmyizedData = () => {
applicationStore.alertService.setActionAlertInfo({
message: USER_ATTESTATION_MESSAGE,
type: ActionAlertType.CAUTION,
actions: [
{
label: 'Accept',
type: ActionAlertActionType.PROCEED_WITH_CAUTION,
handler: applicationStore.guardUnhandledError(() => flowResult(connectionTestDataState.generateTestData())),
},
{
label: 'Decline',
type: ActionAlertActionType.PROCEED,
default: true,
},
],
});
};
const generateTestData = () => {
if (!anonymizeGeneratedData) {
confirmGenerateUnAnonmyizedData();
}
else {
flowResult(connectionTestDataState.generateTestData()).catch(applicationStore.alertUnhandledError);
}
};
const generateTestDataWithSeedData = () => {
connectionTestDataState.setUseSeedDataInputModal(true);
connectionTestDataState.setNewTableIdentifierState([]);
const table = connectionTestDataState.getAvailableTables()[0];
if (table) {
connectionTestDataState.addNewTableIdentifierState(table);
}
};
const generateQuerySchemas = () => {
flowResult(connectionTestDataState.generateQuerySchemas()).catch(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: "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, {}) }) }), _jsxs("div", { className: "btn__dropdown-combo btn__dropdown-combo--primary", children: [_jsxs("button", { className: "btn__dropdown-combo__label", onClick: generateTestData, title: "Generate test data if possible", disabled: connectionTestDataState.generatingTestDataState.isInProgress, tabIndex: -1, children: [_jsx(RefreshIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Generate" })] }), _jsx(ControlledDropdownMenu, { className: "btn__dropdown-combo__dropdown-btn", content: _jsxs(MenuContent, { children: [_jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: generateQuerySchemas, disabled: connectionTestDataState.generateSchemaQueryState
.isInProgress, children: "Generate Query Schemas" }), _jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: generateTestDataWithSeedData, disabled: connectionTestDataState
.generatingTestDataWithSeedDataState.isInProgress, children: "Generate with Seed Data (Beta)" })] }), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'right' },
}, children: _jsx(CaretDownIcon, {}) })] }), _jsx("button", { className: "panel__header__action service-execution-editor__test-data__generate-btn", onClick: openShared, title: "Use Shared Data via Defined Data Element", disabled: connectionTestDataState.generatingTestDataState.isInProgress ||
!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" }) }) })] })] }), _jsx(EmbeddedDataEditor, { isReadOnly: isReadOnly, embeddedDataEditorState: connectionTestDataState.embeddedEditorState }), connectionTestDataState.parametersState.parameterValuesEditorState
.showModal && (_jsx(LambdaParameterValuesEditor, { graph: connectionTestDataState.editorStore.graphManagerState.graph, observerContext: connectionTestDataState.editorStore.changeDetectionState
.observerContext, lambdaParametersState: connectionTestDataState.parametersState })), connectionTestDataState.useSharedModal && (_jsx(UseDataElementModal, { connectionTestDataState: connectionTestDataState })), connectionTestDataState.useSeedDataInputModal && (_jsx(SeedDataInputModal, { connectionTestDataState: connectionTestDataState }))] }));
});
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 editorStore = useEditorStore();
const applicationStore = editorStore.applicationStore;
const dataElementOptions = editorStore.graphManagerState.usableDataElements.map(buildElementOption);
const newConnectionState = testDataState.newConnectionDataState;
const dataElement = newConnectionState.dataElement;
const selectedDataElement = dataElement
? buildElementOption(dataElement)
: null;
const onDataElementChange = (val) => {
if (val.value !== selectedDataElement?.value && val.value) {
newConnectionState.setDataElement(val.value);
}
};
const isReadOnly = testDataState.testSuiteState.testableState.serviceEditorState.isReadOnly;
const service = testDataState.testSuiteState.testableState.serviceEditorState.service;
const closeModal = () => newConnectionState.setModal(false);
const allIdentifiedConnections = getAllIdentifiedServiceConnections(service);
const connectionOptions = allIdentifiedConnections.map((e) => ({
label: e.id,
value: e,
}));
const selectedConnection = newConnectionState.connection
? {
label: newConnectionState.connection.id,
value: newConnectionState.connection,
}
: undefined;
const isDisabled = isReadOnly ||
!allIdentifiedConnections.length ||
Boolean(testDataState.testData.connectionsTestData.find((c) => c.connectionId === selectedConnection?.value.id));
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.value),
value: newConnectionState.embeddedDataType.value,
}
: undefined;
const extraOptionTypes = 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' }, slotProps: {
paper: {
classes: { root: 'search-modal__inner-container' },
},
}, children: _jsxs("form", { onSubmit: (event) => {
event.preventDefault();
const connection = newConnectionState.connection;
const data = newConnectionState.embeddedDataType;
if (connection && data) {
testDataState.createConnectionTestData();
closeModal();
}
}, className: "modal service-test-data-modal modal--dark", children: [_jsx(ModalHeader, { title: "Create A Connection Test Data" }), _jsxs(ModalBody, { children: [_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Connection ID" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Connection in runtime to povide test data for" }), _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: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled }) })] }), _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 loaded to your test connection" }), _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: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled }) })] }), selectedEmbeddedType?.value === 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, { onClick: closeModal, text: "Cancel", type: "secondary", preventFormSubmit: true }), _jsx(ModalFooterButton, { text: "Create", disabled: isDisabled })] })] }) }));
});
export const ServiceTestDataEditor = observer((props) => {
const { testDataState } = props;
const applicationStore = useApplicationStore();
const testData = testDataState.testData;
const newConnectionDataState = testDataState.newConnectionDataState;
const identifedConnections = getAllIdentifiedServiceConnections(testDataState.testSuiteState.testableState.service);
const selectedDataState = testDataState.selectedDataState;
const hideExplorer = identifedConnections.length === 1 &&
testData.connectionsTestData.length === 1 &&
testData.connectionsTestData[0]?.connectionId ===
identifedConnections[0]?.id;
const addConnectionTestData = () => {
testDataState.newConnectionDataState.openModal();
};
const seeDocumentation = () => applicationStore.assistantService.openDocumentationEntry(LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_WRITE_SERVICE_CONNECTION_TEST_DATA);
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: "Test DATA" }) }) }), _jsxs("div", { className: "service-test-data-editor__data", children: [!testData.connectionsTestData.length && (_jsx(BlankPanelPlaceholder, { text: "Add Connection Test Data", onClick: addConnectionTestData, clickActionType: "add", tooltipText: "Click to add connection test data" })), _jsx(PanelLoadingIndicator, { isLoading: Boolean(testDataState.selectedDataState?.generatingTestDataState
.isInProgress) ||
Boolean(testDataState.selectedDataState?.generateSchemaQueryState
.isInProgress) ||
Boolean(testDataState.selectedDataState
?.generatingTestDataWithSeedDataState.isInProgress) }), hideExplorer && selectedDataState ? (_jsx(_Fragment, { children: _jsx(ConnectionTestDataEditor, { connectionTestDataState: selectedDataState }) })) : (_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: _jsxs("div", { className: "binding-editor__header__title__label", children: ["connections", _jsx("button", { className: "binding-editor__header__title__label__hint", tabIndex: -1, onClick: seeDocumentation, title: "click to see more details on connection test data", children: _jsx(InfoCircleIcon, {}) })] }) }), _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: [testDataState.selectedDataState && (_jsx(ConnectionTestDataEditor, { connectionTestDataState: testDataState.selectedDataState })), newConnectionDataState.showModal && (_jsx(NewConnectionDataModal, { testDataState: testDataState }))] })] }))] })] }));
});
//# sourceMappingURL=ServiceTestDataEditor.js.map