@finos/legend-studio
Version:
127 lines • 15.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useState, useRef, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { MINIMUM_SERVICE_OWNERS, ServiceEditorState, SERVICE_TAB, } from '../../../../stores/editor-state/element-editor-state/service/ServiceEditorState.js';
import { clsx, PencilIcon, LockIcon, CheckSquareIcon, SquareIcon, TimesIcon, SaveIcon, InfoCircleIcon, ErrorIcon, } from '@finos/legend-art';
import { prettyCONSTName } from '@finos/legend-shared';
import { ServiceExecutionEditor } from './ServiceExecutionEditor.js';
import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
import { ServiceRegistrationEditor } from './ServiceRegistrationEditor.js';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { service_addOwner, service_deleteOwner, service_removePatternParameter, service_setAutoActivateUpdates, service_setDocumentation, service_setPattern, service_updateOwner, } from '../../../../stores/graphModifier/DSLService_GraphModifierHelper.js';
import { validate_ServicePattern } from '@finos/legend-graph';
import { ServiceTestableEditor } from './testable/ServiceTestableEditor.js';
import { useApplicationNavigationContext } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
const ServiceGeneralEditor = observer(() => {
const editorStore = useEditorStore();
const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
const service = serviceState.service;
const isReadOnly = serviceState.isReadOnly;
// Pattern
const patternRef = useRef(null);
const [pattern, setPattern] = useState(service.pattern);
const changePattern = (event) => setPattern(event.target.value);
const updatePattern = () => {
if (!isReadOnly) {
service_setPattern(service, pattern);
}
};
const patternValidationResult = validate_ServicePattern(pattern);
const allowUpdatingPattern = !patternValidationResult ||
(!patternValidationResult.messages.length && pattern !== service.pattern);
const removePatternParameter = (val) => () => {
service_removePatternParameter(service, val);
setPattern(service.pattern);
};
// Owners
const owners = service.owners;
const [showOwnerEditInput, setShowOwnerEditInput] = useState(false);
const [ownerInputValue, setOwnerInputValue] = useState('');
const showAddOwnerInput = () => setShowOwnerEditInput(true);
const showEditOwnerInput = (value, idx) => () => {
setOwnerInputValue(value);
setShowOwnerEditInput(idx);
};
const hideAddOrEditOwnerInput = () => {
setShowOwnerEditInput(false);
setOwnerInputValue('');
};
const changeOwnerInputValue = (event) => setOwnerInputValue(event.target.value);
const addOwner = () => {
if (ownerInputValue && !isReadOnly && !owners.includes(ownerInputValue)) {
service_addOwner(service, ownerInputValue);
}
hideAddOrEditOwnerInput();
};
const updateOwner = (idx) => () => {
if (ownerInputValue && !isReadOnly && !owners.includes(ownerInputValue)) {
service_updateOwner(service, ownerInputValue, idx);
}
};
const deleteOwner = (idx) => () => {
if (!isReadOnly) {
service_deleteOwner(service, idx);
// Since we keep track of the value currently being edited using the index, we have to account for it as we delete entry
if (typeof showOwnerEditInput === 'number' &&
showOwnerEditInput > idx) {
setShowOwnerEditInput(showOwnerEditInput - 1);
}
}
};
// Other
const changeDocumentation = (event) => {
if (!isReadOnly) {
service_setDocumentation(service, event.target.value);
}
};
const toggleAutoActivateUpdates = () => {
service_setAutoActivateUpdates(service, !service.autoActivateUpdates);
};
useEffect(() => {
patternRef.current?.focus();
}, [serviceState]);
return (_jsxs("div", { className: "panel__content__lists service-editor__general", children: [_jsx("div", { className: "panel__content__form", children: _jsxs("div", { className: "panel__content__form__section service-editor__pattern", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "URL Pattern" }), _jsxs("div", { className: "panel__content__form__section__header__prompt", children: ["Specifies the URL pattern of the service (e.g. /myService/", _jsx("span", { className: "service-editor__pattern__example__param", children: `{param}` }), ")"] }), _jsxs("div", { className: "input-group service-editor__pattern__edit", children: [_jsxs("div", { className: "input-group service-editor__pattern__input__group", children: [_jsx("input", { ref: patternRef, className: "input-group__input panel__content__form__section__input service-editor__pattern__input", spellCheck: false, disabled: isReadOnly, value: pattern, onChange: changePattern }), patternValidationResult?.messages.length && (_jsx("div", { className: "input-group__error-message", children: patternValidationResult.messages.map((error) => (_jsx("div", { className: "input-group__error-message__item", children: error }, error))) }))] }), _jsx("button", { className: "service-editor__pattern__input__save-btn btn--dark", tabIndex: -1, disabled: isReadOnly || !allowUpdatingPattern, onClick: updatePattern, title: "Save change", children: _jsx(SaveIcon, {}) })] })] }) }), _jsxs("div", { className: "service-editor__pattern__parameters", children: [_jsxs("div", { className: "service-editor__pattern__parameters__header", children: [_jsx("div", { className: "service-editor__pattern__parameters__header__label", children: "Parameters" }), _jsx("div", { className: "service-editor__pattern__parameters__header__info", title: `URL parameters (each must be surrounded by curly braces) will be passed as arguments for the execution query.\nNote that if the service is configured to use multi-execution, one of the URL parameters must be chosen as the execution key.`, children: _jsx(InfoCircleIcon, {}) })] }), _jsxs("div", { className: "service-editor__pattern__parameters__list", children: [!service.patternParameters.length && (_jsx("div", { className: "service-editor__pattern__parameters__list__empty", children: "No parameter" })), Boolean(service.patternParameters.length) &&
service.patternParameters.map((parameter) => (_jsxs("div", { className: "service-editor__pattern__parameter", children: [_jsx("div", { className: "service-editor__pattern__parameter__text", children: parameter }), _jsx("div", { className: "service-editor__pattern__parameter__actions", children: _jsx("button", { className: "service-editor__pattern__parameter__action", disabled: isReadOnly, onClick: removePatternParameter(parameter), title: 'Remove parameter', tabIndex: -1, children: _jsx(TimesIcon, {}) }) })] }, parameter)))] })] }), _jsx("div", { className: "panel__content__form", 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: `Provides 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: service.documentation, onChange: changeDocumentation })] }) }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Auto Activate Updates" }), _jsxs("div", { className: clsx('panel__content__form__section__toggler', {
'panel__content__form__section__toggler--disabled': isReadOnly,
}), onClick: toggleAutoActivateUpdates, children: [_jsx("button", { className: clsx('panel__content__form__section__toggler__btn', {
'panel__content__form__section__toggler__btn--toggled': service.autoActivateUpdates,
}), disabled: isReadOnly, tabIndex: -1, children: service.autoActivateUpdates ? _jsx(CheckSquareIcon, {}) : _jsx(SquareIcon, {}) }), _jsx("div", { className: "panel__content__form__section__toggler__prompt", children: "Specifies if the new generation should be automatically activated; only valid when latest revision is selected upon service registration" })] })] }), _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Owners" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: `Specifies who can manage and operate the service (requires minimum ${MINIMUM_SERVICE_OWNERS}
owners).` }), _jsxs("div", { className: "panel__content__form__section__list", children: [_jsxs("div", { className: "panel__content__form__section__list__items", "data-testid": LEGEND_STUDIO_TEST_ID.PANEL_CONTENT_FORM_SECTION_LIST_ITEMS, children: [owners.map((value, idx) => (_jsx("div", { className: showOwnerEditInput === idx
? 'panel__content__form__section__list__new-item'
: 'panel__content__form__section__list__item', children: showOwnerEditInput === idx ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "panel__content__form__section__input panel__content__form__section__list__new-item__input", spellCheck: false, disabled: isReadOnly, value: ownerInputValue, onChange: changeOwnerInputValue }), _jsxs("div", { className: "panel__content__form__section__list__new-item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: isReadOnly || owners.includes(ownerInputValue), onClick: updateOwner(idx), tabIndex: -1, children: "Save" }), _jsx("button", { className: "panel__content__form__section__list__new-item__cancel-btn btn btn--dark", disabled: isReadOnly, onClick: hideAddOrEditOwnerInput, tabIndex: -1, children: "Cancel" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "panel__content__form__section__list__item__value", children: value }), _jsxs("div", { className: "panel__content__form__section__list__item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__item__edit-btn", disabled: isReadOnly, onClick: showEditOwnerInput(value, idx), tabIndex: -1, children: _jsx(PencilIcon, {}) }), _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", disabled: isReadOnly, onClick: deleteOwner(idx), tabIndex: -1, children: _jsx(TimesIcon, {}) })] })] })) }, value))), showOwnerEditInput === true && (_jsxs("div", { className: "panel__content__form__section__list__new-item", children: [_jsx("input", { className: "panel__content__form__section__input panel__content__form__section__list__new-item__input", spellCheck: false, disabled: isReadOnly, value: ownerInputValue, onChange: changeOwnerInputValue, placeholder: "Enter an owner..." }), _jsxs("div", { className: "panel__content__form__section__list__new-item__actions", children: [_jsx("button", { className: "panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: isReadOnly || owners.includes(ownerInputValue), onClick: addOwner, tabIndex: -1, children: "Save" }), _jsx("button", { className: "panel__content__form__section__list__new-item__cancel-btn btn btn--dark", disabled: isReadOnly, onClick: hideAddOrEditOwnerInput, tabIndex: -1, children: "Cancel" })] })] }))] }), owners.length < MINIMUM_SERVICE_OWNERS &&
showOwnerEditInput !== true && (_jsxs("div", { className: "service-editor__owner__validation", title: `${MINIMUM_SERVICE_OWNERS} owners required`, children: [_jsx(ErrorIcon, {}), _jsxs("div", { className: "service-editor__owner__validation-label", children: ["Service requires at least ", MINIMUM_SERVICE_OWNERS, " owners"] })] })), showOwnerEditInput !== true && (_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", disabled: isReadOnly, onClick: showAddOwnerInput, tabIndex: -1, title: "Add owner", children: "Add Value" }) }))] })] })] }));
});
export const ServiceEditor = observer(() => {
const editorStore = useEditorStore();
const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
const service = serviceState.service;
const isReadOnly = serviceState.isReadOnly;
// Tab
const selectedTab = serviceState.selectedTab;
const changeTab = (tab) => () => serviceState.setSelectedTab(tab);
const canRegisterService = Boolean(editorStore.applicationStore.config.options
.TEMPORARY__serviceRegistrationConfig.length);
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SERVICE_EDITOR);
return (_jsx("div", { className: "service-editor", children: _jsxs("div", { className: "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: "service" }), _jsx("div", { className: "panel__header__title__content", children: service.name })] }) }), _jsx("div", { className: "panel__header service-editor__header--with-tabs", children: _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(SERVICE_TAB)
.filter((tab) => tab !== SERVICE_TAB.REGISTRATION || canRegisterService)
.map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('service-editor__tab', {
'service-editor__tab--active': tab === selectedTab,
}), children: prettyCONSTName(tab) }, tab))) }) }), _jsxs("div", { className: "panel__content service-editor__content", children: [selectedTab === SERVICE_TAB.GENERAL && _jsx(ServiceGeneralEditor, {}), selectedTab === SERVICE_TAB.EXECUTION && _jsx(ServiceExecutionEditor, {}), selectedTab === SERVICE_TAB.REGISTRATION && (_jsx(ServiceRegistrationEditor, {})), selectedTab === SERVICE_TAB.TEST && (_jsx(ServiceTestableEditor, { serviceTestableState: serviceState.testableState }))] })] }) }));
});
//# sourceMappingURL=ServiceEditor.js.map