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