@finos/legend-application-studio
Version:
Legend Studio application core
149 lines • 14.9 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 { Panel, PanelHeader, PanelContent, PanelForm, PURE_FunctionIcon, LongArrowRightIcon, PanelLoadingIndicator, PanelFormBooleanField, PanelFormValidatedTextField, TimesIcon, clsx, PlusIcon, } from '@finos/legend-art';
import { Profile, StereotypeExplicitReference, generateFunctionPrettyName, stub_Profile, stub_Stereotype, stub_Tag, stub_TaggedValue, validate_ServicePattern, } from '@finos/legend-graph';
import { observer } from 'mobx-react-lite';
import { useApplicationStore } from '@finos/legend-application';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { HostedServiceFunctionActivatorEditorState, ACTIVATOR_EDITOR_TAB, } from '../../../../stores/editor/editor-state/element-editor-state/function-activator/HostedServiceFunctionActivatorEditorState.js';
import { hostedService_setAutoActivateUpdates, hostedService_setDocumentation, hostedService_setPattern, hostedService_removePatternParameter, hostedService_setStoreModel, } from '../../../../stores/graph-modifier/DSL_FunctionActivator_GraphModifierHelper.js';
import { useCallback, useEffect, useRef, useState } from 'react';
import { prettyCONSTName } from '@finos/legend-shared';
import { flowResult } from 'mobx';
import { ActivatorOwnershipForm } from './ActivatorFormComponents.js';
import { annotatedElement_addStereotype, annotatedElement_addTaggedValue, annotatedElement_deleteStereotype, annotatedElement_deleteTaggedValue, } from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
import { CORE_DND_TYPE, } from '../../../../stores/editor/utils/DnDUtils.js';
import { useDrop } from 'react-dnd';
import { TaggedValueDragPreviewLayer, TaggedValueEditor, } from '../uml-editor/TaggedValueEditor.js';
import { StereotypeDragPreviewLayer, StereotypeSelector, } from '../uml-editor/StereotypeSelector.js';
export const HostedServiceFunctionActivatorEditor = observer(() => {
const editorStore = useEditorStore();
const applicationStore = useApplicationStore();
const editorState = editorStore.tabManagerState.getCurrentEditorState(HostedServiceFunctionActivatorEditorState);
const activatorElement = editorState.element;
const isReadOnly = editorState.isReadOnly;
const selectedTab = editorState.selectedTab;
let addButtonTitle = '';
switch (selectedTab) {
case ACTIVATOR_EDITOR_TAB.TAGGED_VALUES:
addButtonTitle = 'Add tagged value';
break;
case ACTIVATOR_EDITOR_TAB.STEREOTYPES:
addButtonTitle = 'Add stereotype';
break;
default:
break;
}
// Tagged Values
const add = () => {
if (!isReadOnly) {
if (selectedTab === ACTIVATOR_EDITOR_TAB.TAGGED_VALUES) {
annotatedElement_addTaggedValue(activatorElement, stub_TaggedValue(stub_Tag(stub_Profile())));
}
else if (selectedTab === ACTIVATOR_EDITOR_TAB.STEREOTYPES) {
annotatedElement_addStereotype(activatorElement, StereotypeExplicitReference.create(stub_Stereotype(stub_Profile())));
}
}
};
const handleDropTaggedValue = useCallback((item) => {
if (!isReadOnly && item.data.packageableElement instanceof Profile) {
annotatedElement_addTaggedValue(activatorElement, stub_TaggedValue(stub_Tag(item.data.packageableElement)));
}
}, [activatorElement, 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(activatorElement, StereotypeExplicitReference.create(stub_Stereotype(item.data.packageableElement)));
}
}, [activatorElement, 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(activatorElement, val);
const _deleteTaggedValue = (val) => () => annotatedElement_deleteTaggedValue(activatorElement, val);
const changeTab = (tab) => () => editorState.setSelectedTab(tab);
const activator = editorState.activator;
const visitFunction = () => editorState.editorStore.graphEditorMode.openElement(activator.function.value);
const validate = () => {
flowResult(editorState.validate()).catch(applicationStore.alertUnhandledError);
};
const deploy = () => {
flowResult(editorState.deployToSandbox()).catch(applicationStore.alertUnhandledError);
};
const changeDocumentation = (event) => {
if (!isReadOnly) {
hostedService_setDocumentation(activator, event.target.value);
}
};
const toggleUseStoreModel = () => {
hostedService_setStoreModel(activator, !activator.storeModel);
};
const toggleAutoActivateUpdates = () => {
hostedService_setAutoActivateUpdates(activator, !activator.autoActivateUpdates);
};
const getValidationMessage = (inputPattern) => {
const patternValidationResult = validate_ServicePattern(inputPattern);
return patternValidationResult
? patternValidationResult.messages[0]
: undefined;
};
//Pattern
const patternRef = useRef(null);
const [pattern, setPattern] = useState(activator.pattern);
const updatePattern = (newPattern) => {
if (!isReadOnly) {
hostedService_setPattern(activator, newPattern);
}
};
const removePatternParameter = (val) => () => {
hostedService_removePatternParameter(activator, val);
setPattern(activator.pattern);
};
useEffect(() => {
patternRef.current?.focus();
}, [editorState]);
return (_jsx("div", { className: "hosted-service-function-activator-editor", children: _jsxs(Panel, { children: [_jsx(PanelHeader, { title: "Rest Service Application" }), _jsx(PanelLoadingIndicator, { isLoading: Boolean(editorState.validateState.isInProgress ||
editorState.deployState.isInProgress) }), _jsxs("div", { className: "panel__header function-editor__tabs__header", children: [_jsx("div", { className: "function-editor__tabs", children: Object.values(ACTIVATOR_EDITOR_TAB).map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('function-editor__tab', {
'function-editor__tab--active': tab === selectedTab,
}), children: prettyCONSTName(tab) }, tab))) }), selectedTab !== ACTIVATOR_EDITOR_TAB.DEFINITION && (_jsx("button", { className: "panel__header__action", disabled: isReadOnly, onClick: add, tabIndex: -1, title: addButtonTitle, children: _jsx(PlusIcon, {}) }))] }), _jsxs(PanelContent, { children: [selectedTab === ACTIVATOR_EDITOR_TAB.DEFINITION && (_jsxs("div", { children: [_jsxs("div", { className: "hosted-service-function-activator-editor__header", children: [_jsx("div", { className: "hosted-service-function-activator-editor__header__label", children: "Rest Service Activator" }), _jsxs("div", { className: "hosted-service-function-activator-editor__header__actions", children: [_jsx("button", { className: "hosted-service-function-activator-editor__header__actions__action hosted-service-function-activator-editor__header__actions__action--primary", onClick: validate, disabled: editorState.validateState.isInProgress, tabIndex: -1, title: "Click Validate to verify your activator before deployment", children: "Validate" }), _jsx("button", { className: "hosted-service-function-activator-editor__header__actions__action hosted-service-function-activator-editor__header__actions__action--primary", onClick: deploy, disabled: editorState.deployState.isInProgress, title: "Deploy to sandbox", tabIndex: -1, children: "Deploy to Sandbox" })] })] }), _jsx(PanelForm, { children: _jsx(PanelFormValidatedTextField, { ref: patternRef, name: "URL Pattern", isReadOnly: isReadOnly, className: "service-editor__pattern__input", errorMessageClassName: "service-editor__pattern__input", prompt: _jsxs(_Fragment, { children: ["Specifies the URL pattern of the service (e.g. /myService/", _jsx("span", { className: "service-editor__pattern__example__param", children: `{param}` }), ")"] }), update: (value) => {
updatePattern(value ?? '');
}, validate: getValidationMessage, value: pattern }) }), _jsx(PanelForm, { children: _jsxs("div", { className: "panel__content__form__section service-editor__parameters", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Parameters" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "URL parameters (each must be surrounded by curly braces) will be passed as arguments for the execution query. Note that if the service is configured to use multi-execution, one of the URL parameters must be chosen as the execution key." }), _jsxs("div", { className: "service-editor__parameters__list", children: [!activator.patternParameters.length && (_jsx("div", { className: "service-editor__parameters__list__empty", children: "No parameter" })), Boolean(activator.patternParameters.length) &&
activator.patternParameters.map((parameter) => (_jsxs("div", { className: "service-editor__parameter", children: [_jsx("div", { className: "service-editor__parameter__text", children: parameter }), _jsx("div", { className: "service-editor__parameter__actions", children: _jsx("button", { className: "service-editor__parameter__action", disabled: isReadOnly, onClick: removePatternParameter(parameter), title: "Remove parameter", tabIndex: -1, children: _jsx(TimesIcon, {}) }) })] }, parameter)))] })] }) }), _jsxs(PanelForm, { children: [_jsx("div", { className: "panel__content__form__section", children: _jsx("div", { className: "panel__content__form__section__header__label", children: "Function" }) }), _jsx("div", { className: "hosted-service-function-activator-editor__configuration__items", children: _jsxs("div", { className: "hosted-service-function-activator-editor__configuration__item", children: [_jsx("div", { className: "btn--sm hosted-service-function-activator-editor__configuration__item__label", children: _jsx(PURE_FunctionIcon, {}) }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, disabled: true, value: generateFunctionPrettyName(activator.function.value, {
fullPath: true,
spacing: false,
}) }), _jsx("button", { className: "btn--dark btn--sm hosted-service-function-activator-editor__configuration__item__btn", onClick: visitFunction, tabIndex: -1, title: "See Function", children: _jsx(LongArrowRightIcon, {}) })] }) })] }), _jsx(PanelForm, { children: _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Documentation" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: `Provide a brief description of the service's functionalities and usage` }), _jsx("textarea", { className: "panel__content__form__section__textarea service-editor__documentation__input", spellCheck: false, disabled: isReadOnly, value: activator.documentation, onChange: changeDocumentation })] }) }), _jsx(PanelForm, { children: _jsx(PanelFormBooleanField, { isReadOnly: isReadOnly, value: activator.autoActivateUpdates, name: "Auto Activate Updates", prompt: "Specifies if the new generation should be automatically activated;\n only valid when latest revision is selected upon service\n registration", update: toggleAutoActivateUpdates }) }), _jsx(PanelForm, { children: _jsx(PanelFormBooleanField, { isReadOnly: isReadOnly, value: activator.storeModel, name: "Store Model", prompt: "Use Store Model (slower)", update: toggleUseStoreModel }) }), _jsx(PanelForm, { children: _jsx(ActivatorOwnershipForm, { activator: activator, isReadOnly: isReadOnly }) })] })), selectedTab === ACTIVATOR_EDITOR_TAB.TAGGED_VALUES && (_jsxs("div", { ref: taggedValueRef, className: clsx('panel__content__lists', {
'panel__content__lists--dnd-over': isTaggedValueDragOver && !isReadOnly,
}), children: [_jsx(TaggedValueDragPreviewLayer, {}), activatorElement.taggedValues.map((taggedValue) => (_jsx(TaggedValueEditor, { annotatedElement: activatorElement, taggedValue: taggedValue, deleteValue: _deleteTaggedValue(taggedValue), isReadOnly: isReadOnly, darkTheme: true }, taggedValue._UUID)))] })), selectedTab === ACTIVATOR_EDITOR_TAB.STEREOTYPES && (_jsxs("div", { ref: stereotypeRef, className: clsx('panel__content__lists', {
'panel__content__lists--dnd-over': isStereotypeDragOver && !isReadOnly,
}), children: [_jsx(StereotypeDragPreviewLayer, {}), activatorElement.stereotypes.map((stereotype) => (_jsx(StereotypeSelector, { annotatedElement: activatorElement, stereotype: stereotype, deleteStereotype: _deleteStereotype(stereotype), isReadOnly: isReadOnly, darkTheme: true }, stereotype.value._UUID)))] }))] })] }) }));
});
//# sourceMappingURL=HostedServiceFunctionActivatorEditor.js.map