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 React, { useState, useEffect, useCallback, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { FunctionEditorState, FUNCTION_EDITOR_TAB, } from '../../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
import { CORE_DND_TYPE, } from '../../../../stores/editor/utils/DnDUtils.js';
import { assertErrorThrown, assertTrue, prettyCONSTName, returnUndefOnError, UnsupportedOperationError, } from '@finos/legend-shared';
import { useDrag, useDrop } from 'react-dnd';
import { clsx, CustomSelectorInput, createFilter, LockIcon, PlusIcon, TimesIcon, ArrowCircleRightIcon, PanelEntryDragHandle, DragPreviewLayer, useDragPreviewLayer, Panel, PanelContent, PanelDnDEntry, Dialog, ModalBody, ModalFooter, CaretDownIcon, ControlledDropdownMenu, BlankPanelContent, MenuContent, MenuContentItem, Modal, PauseCircleIcon, PlayIcon, PanelLoadingIndicator, PencilIcon, RocketIcon, ModalFooterButton, BaseCard, Snowflake_BrandIcon, InputWithInlineValidation, LongArrowRightIcon, CheckSquareIcon, SquareIcon, SinglestoreIcon, } from '@finos/legend-art';
import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
import { StereotypeDragPreviewLayer, StereotypeSelector, } from '../uml-editor/StereotypeSelector.js';
import { TaggedValueDragPreviewLayer, TaggedValueEditor, } from '../uml-editor/TaggedValueEditor.js';
import { flowResult } from 'mobx';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { Profile, MULTIPLICITY_INFINITE, Unit, Type, Enumeration, Class, PrimitiveType, StereotypeExplicitReference, stub_Tag, stub_Profile, stub_TaggedValue, stub_Stereotype, stub_RawVariableExpression, getFunctionNameWithPath, getFunctionSignature, RawExecutionResult, extractExecutionResultValues, RawLambda, DatabaseType, RelationalDatabaseConnection, GenericType, requireTypeArugments, GenericTypeExplicitReference, CORE_PURE_PATH, TDSExecutionResult, } from '@finos/legend-graph';
import { useApplicationNavigationContext, useApplicationStore, DEFAULT_TAB_SIZE, } from '@finos/legend-application';
import { buildElementOption, } from '@finos/legend-lego/graph-editor';
import { getElementIcon } from '../../../ElementIconUtils.js';
import { function_setReturnGenericType, function_setReturnMultiplicity, function_addParameter, function_deleteParameter, annotatedElement_addTaggedValue, annotatedElement_addStereotype, annotatedElement_deleteStereotype, annotatedElement_deleteTaggedValue, function_swapParameters, } from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
import { rawVariableExpression_setMultiplicity, rawVariableExpression_setName, rawVariableExpression_setType, } from '../../../../stores/graph-modifier/RawValueSpecificationGraphModifierHelper.js';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { ExecutionPlanViewer, LineageViewer, FunctionQueryBuilderState, getTDSColumnCustomizations, LambdaEditor, LambdaParameterValuesEditor, QUERY_BUILDER_TEST_ID, QueryBuilderAdvancedWorkflowState, getRowDataFromExecutionResult, } from '@finos/legend-query-builder';
import { graph_renameElement } from '../../../../stores/graph-modifier/GraphModifierHelper.js';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { PanelGroupItemExperimentalBadge } from '../../panel-group/PanelGroup.js';
import { FunctionTestableEditor } from './testable/FunctionTestableEditor.js';
import { DocumentationLink } from '@finos/legend-lego/application';
import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';
import { DataGrid, } from '@finos/legend-lego/data-grid';
var FUNCTION_PARAMETER_TYPE;
(function (FUNCTION_PARAMETER_TYPE) {
    FUNCTION_PARAMETER_TYPE["CLASS"] = "CLASS";
    FUNCTION_PARAMETER_TYPE["ENUMERATION"] = "ENUMERATION";
    FUNCTION_PARAMETER_TYPE["PRIMITIVE"] = "PRIMITIVE";
})(FUNCTION_PARAMETER_TYPE || (FUNCTION_PARAMETER_TYPE = {}));
export var FUNCTION_ACTIVATE_TYPE;
(function (FUNCTION_ACTIVATE_TYPE) {
    FUNCTION_ACTIVATE_TYPE["SNOWFLAKE_NATIVE_APP"] = "Snowflake UDTF";
    FUNCTION_ACTIVATE_TYPE["SNOWFLAKE_M2M_UDF"] = "Snowflake M2M UDF";
    FUNCTION_ACTIVATE_TYPE["HOSTED_SERVICE"] = "REST Service";
    FUNCTION_ACTIVATE_TYPE["MEM_SQL_FUNCTION"] = "Mem SQL Function";
    FUNCTION_ACTIVATE_TYPE["SERVICE_JAR"] = "Service JAR";
    FUNCTION_ACTIVATE_TYPE["REFINER"] = "Refiner";
    FUNCTION_ACTIVATE_TYPE["BIG_QUERY_NATIVE_APP"] = "BigQuery Native App";
})(FUNCTION_ACTIVATE_TYPE || (FUNCTION_ACTIVATE_TYPE = {}));
const getFunctionParameterType = (type) => {
    if (type instanceof PrimitiveType) {
        return FUNCTION_PARAMETER_TYPE.PRIMITIVE;
    }
    else if (type instanceof Enumeration) {
        return FUNCTION_PARAMETER_TYPE.ENUMERATION;
    }
    else if (type instanceof Class) {
        return FUNCTION_PARAMETER_TYPE.CLASS;
    }
    throw new UnsupportedOperationError(`Can't classify function parameter`, type);
};
const FUNCTION_PARAMETER_DND_TYPE = 'FUNCTION_PARAMETER';
/**
 * NOTE: every time we update the function signature (parameters, return value), we need to adjust the function path,
 * therefore, we need to update the graph's function index.
 */
const updateFunctionName = (editorStore, applicationStore, func) => {
    try {
        graph_renameElement(editorStore.graphManagerState.graph, func, `${getFunctionNameWithPath(func)}${getFunctionSignature(func)}`, editorStore.changeDetectionState.observerContext);
    }
    catch (error) {
        assertErrorThrown(error);
        applicationStore.notificationService.notifyError(error);
    }
};
const ParameterBasicEditor = observer((props) => {
    const ref = useRef(null);
    const handleRef = useRef(null);
    const { parameter, _func, deleteParameter, isReadOnly } = props;
    const editorStore = useEditorStore();
    const applicationStore = useApplicationStore();
    // Name
    const changeValue = (event) => rawVariableExpression_setName(parameter, event.target.value);
    // Type
    const [isEditingType, setIsEditingType] = useState(false);
    const typeOptions = editorStore.graphManagerState.usableClassPropertyTypes.map(buildElementOption);
    const paramType = parameter.type.value;
    const typeName = getFunctionParameterType(paramType);
    const filterOption = createFilter({
        ignoreCase: true,
        ignoreAccents: false,
        stringify: (option) => option.data.value.path,
    });
    const selectedType = { value: paramType, label: paramType.name };
    const changeType = (val) => {
        if (val.value !== parameter.type.value) {
            rawVariableExpression_setType(parameter, val.value);
            if (requireTypeArugments(val.value)) {
                parameter.typeArguments = [
                    GenericTypeExplicitReference.create(new GenericType(editorStore.graphManagerState.graph.getType(CORE_PURE_PATH.ANY))),
                ];
            }
            updateFunctionName(editorStore, applicationStore, _func);
        }
        setIsEditingType(false);
    };
    const openElement = () => {
        if (!(paramType instanceof PrimitiveType)) {
            editorStore.graphEditorMode.openElement(paramType instanceof Unit ? paramType.measure : paramType);
        }
    };
    // Multiplicity
    const [lowerBound, setLowerBound] = useState(parameter.multiplicity.lowerBound);
    const [upperBound, setUpperBound] = useState(parameter.multiplicity.upperBound ?? MULTIPLICITY_INFINITE);
    const updateMultiplicity = (lower, upper) => {
        const lBound = typeof lower === 'number' ? lower : parseInt(lower, 10);
        const uBound = upper === MULTIPLICITY_INFINITE
            ? undefined
            : typeof upper === 'number'
                ? upper
                : parseInt(upper, 10);
        if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
            rawVariableExpression_setMultiplicity(parameter, editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound));
            updateFunctionName(editorStore, applicationStore, _func);
        }
    };
    const changeLowerBound = (event) => {
        setLowerBound(event.target.value);
        updateMultiplicity(event.target.value, upperBound);
    };
    const changeUpperBound = (event) => {
        setUpperBound(event.target.value);
        updateMultiplicity(lowerBound, event.target.value);
    };
    // Drag and Drop
    const handleHover = useCallback((item) => {
        const draggingParameter = item.parameter;
        const hoveredParameter = parameter;
        function_swapParameters(_func, draggingParameter, hoveredParameter);
    }, [_func, parameter]);
    const [{ isBeingDraggedParameter }, dropConnector] = useDrop(() => ({
        accept: [FUNCTION_PARAMETER_DND_TYPE],
        hover: (item) => handleHover(item),
        collect: (monitor) => ({
            isBeingDraggedParameter: monitor.getItem()?.parameter,
        }),
    }), [handleHover]);
    const isBeingDragged = parameter === isBeingDraggedParameter;
    const [, dragConnector, dragPreviewConnector] = useDrag(() => ({
        type: FUNCTION_PARAMETER_DND_TYPE,
        item: () => ({
            parameter: parameter,
        }),
    }), [parameter]);
    dragConnector(handleRef);
    dropConnector(ref);
    useDragPreviewLayer(dragPreviewConnector);
    return (_jsxs(PanelDnDEntry, { ref: ref, placeholder: _jsx("div", { className: "dnd__placeholder--light" }), className: "property-basic-editor__container", showPlaceholder: isBeingDragged, children: [_jsx(PanelEntryDragHandle, { dragSourceConnector: handleRef, isDragging: isBeingDragged }), _jsxs("div", { className: "property-basic-editor", children: [isReadOnly && (_jsx("div", { className: "property-basic-editor__lock", children: _jsx(LockIcon, {}) })), _jsx("input", { className: "property-basic-editor__name input--dark", disabled: isReadOnly, value: parameter.name, spellCheck: false, onChange: changeValue, placeholder: "Parameter name" }), !isReadOnly && isEditingType && (_jsx(CustomSelectorInput, { className: "property-basic-editor__type", options: typeOptions, onChange: changeType, value: selectedType, placeholder: "Choose a type...", filterOption: filterOption, darkMode: !applicationStore.layoutService
                            .TEMPORARY__isLightColorThemeEnabled })), !isReadOnly && !isEditingType && (_jsxs("div", { className: clsx('property-basic-editor__type', 'property-basic-editor__type--show-click-hint', `background--${typeName.toLowerCase()}`, {
                            'property-basic-editor__type--has-visit-btn': typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
                        }), children: [typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("div", { className: "property-basic-editor__type__abbr", children: getElementIcon(paramType, editorStore) })), _jsx("div", { className: "property-basic-editor__type__label", children: paramType.name }), _jsx("div", { className: "property-basic-editor__type__label property-basic-editor__type__label--hover", onClick: () => setIsEditingType(true), children: "Click to edit" }), typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("button", { "data-testid": LEGEND_STUDIO_TEST_ID.TYPE_VISIT, className: "property-basic-editor__type__visit-btn", onClick: openElement, tabIndex: -1, title: "Visit element", children: _jsx(ArrowCircleRightIcon, {}) }))] })), isReadOnly && (_jsxs("div", { className: clsx('property-basic-editor__type', `background--${typeName.toLowerCase()}`, {
                            'property-basic-editor__type--has-visit-btn': typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
                        }), children: [typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("div", { className: "property-basic-editor__type__abbr", children: getElementIcon(paramType, editorStore) })), _jsx("div", { className: "property-basic-editor__type__label", children: paramType.name }), typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("button", { "data-testid": LEGEND_STUDIO_TEST_ID.TYPE_VISIT, className: "property-basic-editor__type__visit-btn", onClick: openElement, tabIndex: -1, title: "Visit element", children: _jsx(ArrowCircleRightIcon, {}) }))] })), _jsxs("div", { className: "property-basic-editor__multiplicity", children: [_jsx("input", { className: "property-basic-editor__multiplicity-bound", disabled: isReadOnly, spellCheck: false, value: lowerBound, onChange: changeLowerBound }), _jsx("div", { className: "property-basic-editor__multiplicity__range", children: ".." }), _jsx("input", { className: "property-basic-editor__multiplicity-bound", disabled: isReadOnly, spellCheck: false, value: upperBound, onChange: changeUpperBound })] }), !isReadOnly && (_jsx("button", { className: "uml-element-editor__remove-btn btn--dark btn--caution", disabled: isReadOnly, onClick: deleteParameter, tabIndex: -1, title: "Remove", children: _jsx(TimesIcon, {}) }))] })] }));
});
const ReturnTypeEditor = observer((props) => {
    const { functionElement, isReadOnly } = props;
    const { returnType, returnMultiplicity } = functionElement;
    const editorStore = useEditorStore();
    const applicationStore = useApplicationStore();
    // Type
    const [isEditingType, setIsEditingType] = useState(false);
    const typeOptions = editorStore.graphManagerState.usableClassPropertyTypes.map(buildElementOption);
    const typeName = getFunctionParameterType(returnType.value.rawType);
    const filterOption = createFilter({
        ignoreCase: true,
        ignoreAccents: false,
        stringify: (option) => option.data.value.path,
    });
    const selectedType = {
        value: returnType.value.rawType,
        label: returnType.value.rawType.name,
    };
    const changeType = (val) => {
        const value = val.value;
        const genericType = new GenericType(value);
        if (requireTypeArugments(value)) {
            genericType.typeArguments = [
                GenericTypeExplicitReference.create(new GenericType(editorStore.graphManagerState.graph.getType(CORE_PURE_PATH.ANY))),
            ];
        }
        function_setReturnGenericType(functionElement, genericType);
        setIsEditingType(false);
        updateFunctionName(editorStore, applicationStore, functionElement);
    };
    const openElement = () => {
        if (!(returnType.value.rawType instanceof PrimitiveType)) {
            editorStore.graphEditorMode.openElement(returnType.value.rawType instanceof Unit
                ? returnType.value.rawType.measure
                : returnType.value.rawType);
        }
    };
    // Multiplicity
    const [lowerBound, setLowerBound] = useState(returnMultiplicity.lowerBound);
    const [upperBound, setUpperBound] = useState(returnMultiplicity.upperBound ?? MULTIPLICITY_INFINITE);
    const updateMultiplicity = (lower, upper) => {
        const lBound = typeof lower === 'number' ? lower : parseInt(lower, 10);
        const uBound = upper === MULTIPLICITY_INFINITE
            ? undefined
            : typeof upper === 'number'
                ? upper
                : parseInt(upper, 10);
        if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
            function_setReturnMultiplicity(functionElement, editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound));
            updateFunctionName(editorStore, applicationStore, functionElement);
        }
    };
    const changeLowerBound = (event) => {
        setLowerBound(event.target.value);
        updateMultiplicity(event.target.value, upperBound);
    };
    const changeUpperBound = (event) => {
        setUpperBound(event.target.value);
        updateMultiplicity(lowerBound, event.target.value);
    };
    return (_jsxs("div", { className: "function-editor__return__type-editor", children: [!isReadOnly && isEditingType && (_jsx(CustomSelectorInput, { className: "property-basic-editor__type", options: typeOptions, onChange: changeType, value: selectedType, placeholder: "Choose a type...", filterOption: filterOption, darkMode: !applicationStore.layoutService
                    .TEMPORARY__isLightColorThemeEnabled })), !isReadOnly && !isEditingType && (_jsxs("div", { className: clsx('property-basic-editor__type', 'property-basic-editor__type--show-click-hint', `background--${typeName.toLowerCase()}`, {
                    'property-basic-editor__type--has-visit-btn': typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
                }), children: [typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("div", { className: "property-basic-editor__type__abbr", children: getElementIcon(returnType.value.rawType, editorStore) })), _jsx("div", { className: "property-basic-editor__type__label", children: returnType.value.rawType.name }), _jsx("div", { className: "property-basic-editor__type__label property-basic-editor__type__label--hover", onClick: () => setIsEditingType(true), children: "Click to edit" }), typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("button", { "data-testid": LEGEND_STUDIO_TEST_ID.TYPE_VISIT, className: "property-basic-editor__type__visit-btn", onClick: openElement, tabIndex: -1, title: "Visit element", children: _jsx(ArrowCircleRightIcon, {}) }))] })), isReadOnly && (_jsxs("div", { className: clsx('property-basic-editor__type', `background--${typeName.toLowerCase()}`, {
                    'property-basic-editor__type--has-visit-btn': typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
                }), children: [typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("div", { className: "property-basic-editor__type__abbr", children: getElementIcon(returnType.value.rawType, editorStore) })), _jsx("div", { className: "property-basic-editor__type__label", children: returnType.value.rawType.name }), typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (_jsx("button", { "data-testid": LEGEND_STUDIO_TEST_ID.TYPE_VISIT, className: "property-basic-editor__type__visit-btn", onClick: openElement, tabIndex: -1, title: "Visit element", children: _jsx(ArrowCircleRightIcon, {}) }))] })), _jsxs("div", { className: "property-basic-editor__multiplicity", children: [_jsx("input", { className: "property-basic-editor__multiplicity-bound", disabled: isReadOnly, spellCheck: false, value: lowerBound, onChange: changeLowerBound }), _jsx("div", { className: "property-basic-editor__multiplicity__range", children: ".." }), _jsx("input", { className: "property-basic-editor__multiplicity-bound", disabled: isReadOnly, spellCheck: false, value: upperBound, onChange: changeUpperBound })] }), _jsx("button", { className: "uml-element-editor__remove-btn btn--dark btn--caution", disabled: true, tabIndex: -1, children: _jsx(TimesIcon, {}) })] }));
});
const FunctionPromoteEditor = observer((props) => {
    const { functionElement, activatorPromoteState } = props;
    const applicationStore = useApplicationStore();
    const elementAlreadyExistsMessage = activatorPromoteState.functionEditorState.editorStore.graphManagerState.graph.allElements
        .map((s) => s.path)
        .includes(activatorPromoteState.activatorPath)
        ? 'Element with same path already exists'
        : undefined;
    let validationMessage = '';
    const closeModal = () => {
        activatorPromoteState.closeFunctionActivateModal();
        activatorPromoteState.setAcitvateType(undefined);
    };
    const promoteFunction = () => {
        flowResult(activatorPromoteState.activate(functionElement))
            .then(() => {
            activatorPromoteState.closeFunctionActivateModal();
        })
            .catch(applicationStore.alertUnhandledError);
    };
    const onTargetPathChange = (event) => {
        activatorPromoteState.updateActivatorPath(event.target.value);
    };
    const validateFunctionActivator = (type) => {
        switch (type) {
            case FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP: {
                const availableConnections = activatorPromoteState.functionEditorState.editorStore.graphManagerState.usableConnections.filter((connection) => connection.connectionValue instanceof
                    RelationalDatabaseConnection &&
                    connection.connectionValue.type === DatabaseType.Snowflake);
                if (availableConnections.length > 0) {
                    return true;
                }
                else {
                    validationMessage =
                        'There is no available connection of type Snowflake';
                }
                return false;
            }
            case FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_M2M_UDF: {
                const availableConnections = activatorPromoteState.functionEditorState.editorStore.graphManagerState.usableConnections.filter((connection) => connection.connectionValue instanceof
                    RelationalDatabaseConnection &&
                    connection.connectionValue.type === DatabaseType.Snowflake);
                if (availableConnections.length > 0) {
                    return true;
                }
                else {
                    validationMessage =
                        'There is no available connection of type Snowflake';
                }
                return false;
            }
            case FUNCTION_ACTIVATE_TYPE.MEM_SQL_FUNCTION: {
                const availableConnections = activatorPromoteState.functionEditorState.editorStore.graphManagerState.usableConnections.filter((connection) => connection.connectionValue instanceof
                    RelationalDatabaseConnection &&
                    connection.connectionValue.type === DatabaseType.MemSQL);
                if (availableConnections.length > 0) {
                    return true;
                }
                else {
                    validationMessage =
                        'There is no available connection of type MemSQL';
                }
                return false;
            }
            default:
                return true;
        }
    };
    const renderFunctionPromoteTypes = (type) => {
        switch (type) {
            case FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP:
                return (_jsx(BaseCard, { cardMedia: _jsx(Snowflake_BrandIcon, { className: "function-promote-editor__type-icon" }), cardName: type, cardContent: "Deploy the function as a UDTF(user-defined table function) in snowflake", isActive: activatorPromoteState.activateType ===
                        FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP, onClick: () => {
                        activatorPromoteState.setAcitvateType(type);
                    } }, FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP));
            case FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_M2M_UDF:
                return (_jsx(BaseCard, { cardMedia: _jsx(Snowflake_BrandIcon, { className: "function-promote-editor__type-icon" }), cardName: type, cardContent: "Deploy the function as a UDF(user-defined function) in snowflake", isActive: activatorPromoteState.activateType ===
                        FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_M2M_UDF, onClick: () => {
                        activatorPromoteState.setAcitvateType(type);
                    } }, FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_M2M_UDF));
            case FUNCTION_ACTIVATE_TYPE.HOSTED_SERVICE:
                return (_jsx(BaseCard, { cardMedia: _jsx(RocketIcon, { className: "function-promote-editor__type-icon" }), cardName: type, cardContent: "Create a HostedService that will be deployed to a server environment and executed with a pattern", isActive: activatorPromoteState.activateType ===
                        FUNCTION_ACTIVATE_TYPE.HOSTED_SERVICE, onClick: () => {
                        activatorPromoteState.setAcitvateType(type);
                    } }, FUNCTION_ACTIVATE_TYPE.HOSTED_SERVICE));
            case FUNCTION_ACTIVATE_TYPE.MEM_SQL_FUNCTION:
                return (_jsx(BaseCard, { cardMedia: _jsx(SinglestoreIcon, { className: "function-promote-editor__type-icon" }), cardName: type, cardContent: "Deploy the function as a UDF (user-defined function) in Mem SQL", isActive: activatorPromoteState.activateType ===
                        FUNCTION_ACTIVATE_TYPE.MEM_SQL_FUNCTION, onClick: () => {
                        activatorPromoteState.setAcitvateType(type);
                    } }, FUNCTION_ACTIVATE_TYPE.MEM_SQL_FUNCTION));
            case FUNCTION_ACTIVATE_TYPE.SERVICE_JAR:
                return (_jsx(BaseCard, { cardMedia: _jsx("div", { className: "coming-soon-label", children: "Coming Soon" }), cardName: type, cardContent: "Deploy the function in the definition of a Store persistence", disabled: true, isActive: activatorPromoteState.activateType ===
                        FUNCTION_ACTIVATE_TYPE.SERVICE_JAR }, FUNCTION_ACTIVATE_TYPE.SERVICE_JAR));
            case FUNCTION_ACTIVATE_TYPE.REFINER:
                return (_jsx(BaseCard, { cardMedia: _jsx("div", { className: "coming-soon-label", children: "Coming Soon" }), cardName: type, cardContent: "Use the service in a refiner context", disabled: true, isActive: activatorPromoteState.activateType ===
                        FUNCTION_ACTIVATE_TYPE.REFINER }, FUNCTION_ACTIVATE_TYPE.REFINER));
            case FUNCTION_ACTIVATE_TYPE.BIG_QUERY_NATIVE_APP:
                return (_jsx(BaseCard, { cardMedia: _jsx("div", { className: "coming-soon-label", children: "Coming Soon" }), cardName: type, cardContent: "Deploy the function as a UDTF(user-defined table function) in BigQuery", disabled: true, isActive: activatorPromoteState.activateType ===
                        FUNCTION_ACTIVATE_TYPE.BIG_QUERY_NATIVE_APP }, FUNCTION_ACTIVATE_TYPE.BIG_QUERY_NATIVE_APP));
            default:
                return _jsx(_Fragment, {});
        }
    };
    return (_jsx(Dialog, { open: activatorPromoteState.isActivatingFunction, onClose: closeModal, classes: { container: 'search-modal__container' }, slotProps: {
            paper: {
                classes: { root: 'search-modal__inner-container' },
            },
        }, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "function-promote-editor", children: [_jsxs(ModalBody, { className: "function-promote-editor__content", children: [_jsx("div", { className: "function-promote-editor__content__prompt", children: "Select any one of the following activator types to continue" }), _jsx("div", { className: "function-promote-editor__content__activator-types", children: Object.values(FUNCTION_ACTIVATE_TYPE).map((type) => renderFunctionPromoteTypes(type)) }), _jsx("div", { className: "function-promote-editor__content__prompt", children: "Target Path" }), _jsx(InputWithInlineValidation, { className: "panel__content__form__section__input", spellCheck: false, onChange: onTargetPathChange, value: activatorPromoteState.activatorPath, error: elementAlreadyExistsMessage, showEditableIcon: true })] }), _jsxs(ModalFooter, { children: [_jsx(ModalFooterButton, { className: "function-promote-editor__action-btn", onClick: closeModal, title: "Close", type: "secondary", children: "Cancel" }), _jsx(ModalFooterButton, { className: "function-promote-editor__action-btn function-promote-editor__action-btn--primitive", disabled: !activatorPromoteState.activateType ||
                                !validateFunctionActivator(activatorPromoteState.activateType), title: activatorPromoteState.activateType &&
                                validateFunctionActivator(activatorPromoteState.activateType)
                                ? ''
                                : validationMessage, onClick: promoteFunction, children: "Activate" })] })] }) }));
});
const FunctionDefinitionEditor = observer((props) => {
    const { functionEditorState, isReadOnly } = props;
    const editorStore = useEditorStore();
    const applicationStore = useApplicationStore();
    const lambdaEditorState = functionEditorState.functionDefinitionEditorState;
    const functionElement = functionEditorState.functionElement;
    const execResult = functionEditorState.executionResult;
    // Parameters
    const addParameter = () => {
        function_addParameter(functionElement, stub_RawVariableExpression(PrimitiveType.STRING));
        updateFunctionName(editorStore, applicationStore, functionElement);
    };
    const deleteParameter = (val) => () => {
        function_deleteParameter(functionElement, val);
        updateFunctionName(editorStore, applicationStore, functionElement);
    };
    const handleDropParameter = useCallback((item) => {
        if (!isReadOnly && item.data.packageableElement instanceof Type) {
            function_addParameter(functionElement, stub_RawVariableExpression(item.data.packageableElement));
            updateFunctionName(editorStore, applicationStore, functionElement);
        }
    }, [applicationStore, editorStore, functionElement, isReadOnly]);
    const [{ isParameterDragOver }, dropConnector] = useDrop(() => ({
        accept: [
            CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
            CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
        ],
        drop: (item) => handleDropParameter(item),
        collect: (monitor) => ({
            isParameterDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDropParameter]);
    const ref = useRef(null);
    dropConnector(ref);
    const renderFuncResult = () => {
        if (execResult instanceof RawExecutionResult) {
            const val = execResult.value === null ? 'null' : execResult.value.toString();
            return (_jsx(CodeEditor, { language: CODE_EDITOR_LANGUAGE.TEXT, inputValue: val, isReadOnly: true }));
        }
        else if (execResult instanceof TDSExecutionResult) {
            const colDefs = execResult.result.columns.map((colName) => ({
                minWidth: 50,
                sortable: true,
                resizable: true,
                field: colName,
                flex: 1,
                headerName: colName,
                ...getTDSColumnCustomizations(execResult, colName),
            }));
            return (_jsx("div", { "data-testid": QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_VALUES_TDS, className: "query-builder__result__values__table", children: _jsx("div", { className: clsx('query-builder__result__tds-grid', {
                        'ag-theme-balham': true,
                        'ag-theme-balham-dark': true,
                    }), children: _jsx(DataGrid, { rowData: getRowDataFromExecutionResult(execResult), gridOptions: {
                            suppressScrollOnNewData: true,
                            getRowId: (data) => `${data.data.rowNumber}`,
                            rowSelection: {
                                mode: 'multiRow',
                                checkboxes: false,
                                headerCheckbox: false,
                            },
                        }, 
                        // NOTE: when column definition changed, we need to force refresh the cell to make sure the cell renderer is updated
                        // See https://stackoverflow.com/questions/56341073/how-to-refresh-an-ag-grid-when-a-change-occurs-inside-a-custom-cell-renderer-com
                        onRowDataUpdated: (params) => {
                            params.api.refreshCells({ force: true });
                        }, suppressFieldDotNotation: true, suppressContextMenu: false, columnDefs: colDefs }) }) }));
        }
        else if (execResult !== undefined) {
            const json = returnUndefOnError(() => JSON.stringify(extractExecutionResultValues(execResult), null, DEFAULT_TAB_SIZE)) ?? JSON.stringify(execResult);
            return (_jsx(CodeEditor, { language: CODE_EDITOR_LANGUAGE.JSON, inputValue: json, isReadOnly: true }));
        }
        return _jsx(BlankPanelContent, { children: "Function Did Not Run" });
    };
    return (_jsxs(_Fragment, { children: [_jsx(PanelLoadingIndicator, { isLoading: functionEditorState.isGeneratingPlan ||
                    functionEditorState.isRunningFunc }), _jsxs("div", { className: "function-editor__definition", children: [_jsxs("div", { className: "function-editor__definition__item function-editor__definition__item-params", children: [_jsxs("div", { className: "function-editor__definition__item__header", children: [_jsx("div", { className: "function-editor__definition__item__header__title", children: "PARAMETERS" }), _jsx("button", { className: "function-editor__definition__item__header__add-btn btn--dark", disabled: isReadOnly, onClick: addParameter, tabIndex: -1, title: "Add Parameter", children: _jsx(PlusIcon, {}) })] }), _jsx(DragPreviewLayer, { labelGetter: (item) => item.parameter.name === '' ? '(unknown)' : item.parameter.name, types: [FUNCTION_PARAMETER_DND_TYPE] }), _jsxs("div", { ref: ref, className: clsx('function-editor__definition__item__content', {
                                    'panel__content__lists--dnd-over': isParameterDragOver && !isReadOnly,
                                }), children: [functionElement.parameters.map((param) => (_jsx(ParameterBasicEditor, { parameter: param, _func: functionElement, deleteParameter: deleteParameter(param), isReadOnly: isReadOnly }, param._UUID))), functionElement.parameters.length === 0 && (_jsx("div", { className: "function-editor__definition__item__content--empty", children: "No parameters" }))] })] }), _jsxs("div", { className: "function-editor__definition__item function-editor__definition__item-lambda", children: [_jsxs("div", { className: "function-editor__definition__item__header", children: [_jsxs("div", { className: "function-editor__definition__item__header-wrapper", children: [_jsx("div", { className: "function-editor__definition__item__header__title", children: "LAMBDA" }), _jsxs("div", { className: "function-editor__definition__typeAhead", children: [_jsxs("div", { className: "function-editor__definition__typeAhead__label", children: ["(BETA) TypeAhead", _jsx(DocumentationLink, { title: "Enable TypeAhead for when typing your function. Caution when using against bigger projects as requires compilation to work", documentationKey: LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_ENABLE_TYPEAHEAD })] }), _jsx("button", { className: clsx('function-editor__definition__typeAhead__toggler__btn', {
                                                            'function-editor__definition__typeAhead__toggler__btn--toggled': lambdaEditorState.typeAheadEnabled,
                                                        }), onClick: () => lambdaEditorState.setTypeAhead(!lambdaEditorState.typeAheadEnabled), tabIndex: -1, children: lambdaEditorState.typeAheadEnabled ? (_jsx(CheckSquareIcon, {})) : (_jsx(SquareIcon, {})) })] })] }), _jsx("div", { children: _jsx(ReturnTypeEditor, { functionElement: functionElement, isReadOnly: isReadOnly }) })] }), _jsx("div", { className: clsx('function-editor__definition__item__content', {
                                    backdrop__element: Boolean(functionEditorState.functionDefinitionEditorState.parserError),
                                }), children: _jsx(LambdaEditor, { className: clsx('function-editor__definition__lambda-editor lambda-editor--dark', {
                                        'function-editor__definition__lambda-editor-error': Boolean(lambdaEditorState.parserError ??
                                            lambdaEditorState.compilationError),
                                    }), disabled: lambdaEditorState.isConvertingFunctionBodyToString ||
                                        isReadOnly, lambdaEditorState: lambdaEditorState, forceBackdrop: false, autoFocus: true }) })] }), _jsxs("div", { className: "function-editor__definition__item function-editor__definition__item-result function-editor__definition__result", children: [_jsx("div", { className: "function-editor__definition__item__header", children: _jsxs("div", { className: "function-editor__definition__item__header__title", children: ["RESULT", _jsx(PanelGroupItemExperimentalBadge, {})] }) }), _jsx("div", { className: "function-editor__definition__item__content", children: _jsx("div", { className: "function-editor__definition__result-viewer", children: renderFuncResult() }) })] })] })] }));
});
export const FunctionEditor = observer(() => {
    const editorStore = useEditorStore();
    const applicationStore = useApplicationStore();
    const functionEditorState = editorStore.tabManagerState.getCurrentEditorState(FunctionEditorState);
    const isReadOnly = functionEditorState.isReadOnly;
    const functionElement = functionEditorState.functionElement;
    const selectedTab = functionEditorState.selectedTab;
    let addButtonTitle = '';
    switch (selectedTab) {
        case FUNCTION_EDITOR_TAB.TAGGED_VALUES:
            addButtonTitle = 'Add stereotype';
            break;
        case FUNCTION_EDITOR_TAB.STEREOTYPES:
            addButtonTitle = 'Add tagged value';
            break;
        default:
            break;
    }
    // Tagged Values
    const add = () => {
        if (!isReadOnly) {
            if (selectedTab === FUNCTION_EDITOR_TAB.TAGGED_VALUES) {
                annotatedElement_addTaggedValue(functionElement, stub_TaggedValue(stub_Tag(stub_Profile())));
            }
            else if (selectedTab === FUNCTION_EDITOR_TAB.STEREOTYPES) {
                annotatedElement_addStereotype(functionElement, StereotypeExplicitReference.create(stub_Stereotype(stub_Profile())));
            }
        }
    };
    const handleDropTaggedValue = useCallback((item) => {
        if (!isReadOnly && item.data.packageableElement instanceof Profile) {
            annotatedElement_addTaggedValue(functionElement, stub_TaggedValue(stub_Tag(item.data.packageableElement)));
        }
    }, [functionElement, isReadOnly]);
    const [{ isTaggedValueDragOver }, taggedValueDropConnector] = useDrop(() => ({
        accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
        drop: (item) => handleDropTaggedValue(item),
        collect: (monitor) => ({
            isTaggedValueDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDropTaggedValue]);
    const taggedValueRef = useRef(null);
    taggedValueDropConnector(taggedValueRef);
    // Stereotype
    const handleDropStereotype = useCallback((item) => {
        if (!isReadOnly && item.data.packageableElement instanceof Profile) {
            annotatedElement_addStereotype(functionElement, StereotypeExplicitReference.create(stub_Stereotype(item.data.packageableElement)));
        }
    }, [functionElement, isReadOnly]);
    const [{ isStereotypeDragOver }, stereotypeDropConnector] = useDrop(() => ({
        accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
        drop: (item) => handleDropStereotype(item),
        collect: (monitor) => ({
            isStereotypeDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDropStereotype]);
    const stereotypeRef = useRef(null);
    stereotypeDropConnector(stereotypeRef);
    const _deleteStereotype = (val) => () => annotatedElement_deleteStereotype(functionElement, val);
    const _deleteTaggedValue = (val) => () => annotatedElement_deleteTaggedValue(functionElement, val);
    const changeTab = (tab) => () => functionEditorState.setSelectedTab(tab);
    const runFunc = applicationStore.guardUnhandledError(() => flowResult(functionEditorState.handleRunFunc()));
    const executionIsRunning = functionEditorState.isRunningFunc || functionEditorState.isGeneratingPlan;
    const cancelQuery = applicationStore.guardUnhandledError(() => flowResult(functionEditorState.cancelFuncRun()));
    const generatePlan = applicationStore.guardUnhandledError(() => flowResult(functionEditorState.generatePlan(false)));
    const generateLineage = applicationStore.guardUnhandledError(() => flowResult(functionEditorState.generateLineage()));
    const debugPlanGeneration = applicationStore.guardUnhandledError(() => flowResult(functionEditorState.generatePlan(true)));
    const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
    useEffect(() => {
        flowResult(functionEditorState.functionDefinitionEditorState.convertLambdaObjectToGrammarString({
            pretty: true,
            firstLoad: true,
        })).catch(applicationStore.alertUnhandledError);
    }, [applicationStore, functionEditorState]);
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.FUNCTION_EDITOR);
    const editWithQueryBuilder = () => applicationStore.guardUnhandledError(async () => {
        try {
            const functionQueryBuilderState = new FunctionQueryBuilderState(embeddedQueryBuilderState.editorStore.applicationStore, embeddedQueryBuilderState.editorStore.graphManagerState, QueryBuilderAdvancedWorkflowState.INSTANCE, functionEditorState.functionElement, editorStore.applicationStore.config.options.queryBuilderConfig);
            functionQueryBuilderState.initializeWithQuery(new RawLambda(functionEditorState.functionElement.parameters.map((_param) => functionEditorState.editorStore.graphManagerState.graphManager.serializeRawValueSpecification(_param)), functionEditorState.functionElement.expressionSequence));
            assertTrue(Boolean(functionQueryBuilderState.isQuerySupported &&
                functionQueryBuilderState.executionContextState.mapping &&
                functionQueryBuilderState.executionContextState.runtimeValue), `Only functions returning TDS/graph fetch using the from() function can be edited via query builder`);
            await flowResult(embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
                setupQueryBuilderState: async () => functionQueryBuilderState,
                actionConfigs: [
                    {
                        key: 'save-query-btn',
                        renderer: (queryBuilderState) => {
                            const save = applicationStore.guardUnhandledError(async () => {
                                try {
                                    const rawLambda = queryBuilderState.buildQuery();
                                    await flowResult(functionEditorState.updateFunctionWithQuery(rawLambda));
                                    applicationStore.notificationService.notifySuccess(`Function 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" }));
                        },
                    },
                ],
            }));
        }
        catch (error) {
            assertErrorThrown(error);
            applicationStore.notificationService.notifyError(`Unable to edit via query builder: ${error.message}`);
        }
    });
    const openFunctionCubeViewer = editorStore.applicationStore.guardUnhandledError(async () => {
        await functionEditorState.handleOpeningDataCube(functionEditorState.element, editorStore);
    });
    const visitActivator = (activator) => functionEditorState.editorStore.graphEditorMode.openElement(activator);
    const openFunctionActivateModal = () => {
        functionEditorState.activatorPromoteState.showFunctionActivateModal();
    };
    return (_jsx("div", { "data-testid": LEGEND_STUDIO_TEST_ID.FUNCTION_EDITOR, className: "function-editor uml-editor uml-editor--dark", children: _jsxs(Panel, { children: [_jsx("div", { className: "panel__header", children: _jsxs("div", { className: "panel__header__title", children: [isReadOnly && (_jsx("div", { className: "uml-element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "panel__header__title__label", children: "function" }), _jsx("div", { className: "panel__header__title__content", children: functionElement.functionName })] }) }), _jsxs("div", { className: "panel__header function-editor__tabs__header", children: [_jsx("div", { className: "function-editor__tabs", children: Object.values(FUNCTION_EDITOR_TAB).map((tab) => (_jsxs("div", { onClick: changeTab(tab), className: clsx('function-editor__tab', {
                                    'function-editor__tab--active': tab === selectedTab,
                                }), children: [prettyCONSTName(tab), tab === FUNCTION_EDITOR_TAB.TEST_SUITES && (_jsx(DocumentationLink, { documentationKey: LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_WRITE_A_FUNCTION_TEST }))] }, tab))) }), _jsxs("div", { className: "panel__header__actions", children: [selectedTab === FUNCTION_EDITOR_TAB.DEFINITION && (_jsxs(_Fragment, { children: [_jsx("div", { className: "btn__dropdown-combo btn__dropdown-combo--primary", 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" })] }) }), _jsx("div", { className: "btn__dropdown-combo btn__dropdown-combo--primary", children: functionEditorState.isRunningFunc ? (_jsx("button", { className: "btn__dropdown-combo__canceler", onClick: cancelQuery, tabIndex: -1, children: _jsxs("div", { className: "btn--dark btn--caution btn__dropdown-combo__canceler__label", children: [_jsx(PauseCircleIcon, { className: "btn__dropdown-combo__canceler__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__canceler__label__title", children: "Stop" })] }) })) : (_jsxs(_Fragment, { children: [_jsxs("button", { className: "btn__dropdown-combo__label", onClick: runFunc, title: "Run Function", disabled: executionIsRunning, tabIndex: -1, children: [_jsx(PlayIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Run" })] }), _jsx(ControlledDropdownMenu, { className: "btn__dropdown-combo__dropdown-btn", disabled: executionIsRunning, content: _jsxs(MenuContent, { children: [_jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: generatePlan, children: "Generate Plan" }), _jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: debugPlanGeneration, children: "Debug" }), _jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: generateLineage, children: "View Lineage" })] }), 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: _jsx("button", { className: "btn__dropdown-combo__label", onClick: openFunctionCubeViewer, title: "Data Cube (BETA)", tabIndex: -1, children: _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Data Cube" }) }) }), _jsx("div", { className: "btn__dropdown-combo btn__dropdown-combo--primary", children: _jsxs("button", { className: "btn__dropdown-combo__label", onClick: openFunctionActivateModal, title: "Activate function", tabIndex: -1, children: [_jsx(RocketIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Activate" })] }) })] })), _jsx("button", { className: "panel__header__action", disabled: isReadOnly ||
                                        selectedTab === FUNCTION_EDITOR_TAB.DEFINITION ||
                                        selectedTab === FUNCTION_EDITOR_TAB.LAMBDAS, onClick: add, tabIndex: -1, title: addButtonTitle, children: _jsx(PlusIcon, {}) })] })] }), _jsxs(PanelContent, { children: [selectedTab === FUNCTION_EDITOR_TAB.DEFINITION && (_jsx(FunctionDefinitionEditor, { functionEditorState: functionEditorState, isReadOnly: isReadOnly })), selectedTab === FUNCTION_EDITOR_TAB.TAGGED_VALUES && (_jsxs("div", { ref: taggedValueRef, className: clsx('panel__content__lists', {
                                'panel__content__lists--dnd-over': isTaggedValueDragOver && !isReadOnly,
                            }), children: [_jsx(TaggedValueDragPreviewLayer, {}), functionElement.taggedValues.map((taggedValue) => (_jsx(TaggedValueEditor, { annotatedElement: functionElement, taggedValue: taggedValue, deleteValue: _deleteTaggedValue(taggedValue), isReadOnly: isReadOnly, darkTheme: true }, taggedValue._UUID)))] })), selectedTab === FUNCTION_EDITOR_TAB.STEREOTYPES && (_jsxs("div", { ref: stereotypeRef, className: clsx('panel__content__lists', {
                                'panel__content__lists--dnd-over': isStereotypeDragOver && !isReadOnly,
                            }), children: [_jsx(StereotypeDragPreviewLayer, {}), functionElement.stereotypes.map((stereotype) => (_jsx(StereotypeSelector, { annotatedElement: functionElement, stereotype: stereotype, deleteStereotype: _deleteStereotype(stereotype), isReadOnly: isReadOnly, darkTheme: true }, stereotype.value._UUID)))] })), selectedTab === FUNCTION_EDITOR_TAB.TEST_SUITES && (_jsx(FunctionTestableEditor, { functionTestableState: functionEditorState.functionTestableEditorState })), selectedTab === FUNCTION_EDITOR_TAB.LAMBDAS && (_jsx("div", { children: _jsx("div", { className: "hosted-service-function-activator-editor__configuration__items", children: functionEditorState.activators.map((activator) => (_jsxs("div", { className: "hosted-service-function-activator-editor__configuration__item", children: [_jsx("div", { className: "btn--sm btn--icon--dark hosted-service-function-activator-editor__configuration__item__label", children: getElementIcon(activator, editorStore) }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, disabled: true, value: activator.path }), _jsx("button", { className: "btn--dark btn--sm hosted-service-function-activator-editor__configuration__item__btn", onClick: () => visitActivator(activator), tabIndex: -1, title: "See Lambda", children: _jsx(LongArrowRightIcon, {}) })] }, activator.name))) }) })), _jsx(ExecutionPlanViewer, { executionPlanState: functionEditorState.executionPlanState }), _jsx(LineageViewer, { lineageState: functionEditorState.lineageState }), functionEditorState.parametersState.parameterValuesEditorState
                            .showModal && (_jsx(LambdaParameterValuesEditor, { graph: functionEditorState.editorStore.graphManagerState.graph, observerContext: functionEditorState.editorStore.changeDetectionState
                                .observerContext, lambdaParametersState: functionEditorState.parametersState }))] }), functionEditorState.activatorPromoteState.isActivatingFunction && (_jsx(FunctionPromoteEditor, { functionElement: functionElement, activatorPromoteState: functionEditorState.activatorPromoteState }))] }) }));
});
//# sourceMappingURL=FunctionEditor.js.map