@finos/legend-studio
Version:
146 lines • 13.4 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 { observer } from 'mobx-react-lite';
import { clsx, CustomSelectorInput, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, ResizablePanelSplitterLine, TimesIcon, LockIcon, } from '@finos/legend-art';
import { filterByType, guaranteeNonNullable, prettyCONSTName, } from '@finos/legend-shared';
import { BINDING_TAB_TYPE, BindingEditorState, } from '../../../../stores/editor-state/element-editor-state/external-format/BindingEditorState.js';
import { PackageableElementExplicitReference, SchemaSet, } from '@finos/legend-graph';
import { useCallback, useRef } from 'react';
import { useDrop } from 'react-dnd';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { getElementIcon } from '../../../shared/ElementIconUtils.js';
import { CORE_DND_TYPE, } from '../../../../stores/shared/DnDUtil.js';
import { externalFormat_Binding_setContentType, externalFormat_Binding_setSchemaId, externalFormat_Binding_setSchemaSet, externalFormat_modelUnit_addPackageableElementExcludes, externalFormat_modelUnit_addPackageableElementIncludes, externalFormat_modelUnit_deletePackageableElementExcludes, externalFormat_modelUnit_deletePackageableElementIncludes, } from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
const BindingScopeEntryEditor = observer((props) => {
const { elementRef, removeElement, isReadOnly } = props;
const editorStore = useEditorStore();
return (_jsx("div", { className: "panel__content__form__section__list__item", children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "panel__content__form__section__list__item__value binding-scope-entry-editor__element", children: [_jsx("div", { className: "binding-scope-entry-editor__element__icon", children: getElementIcon(editorStore, elementRef.value) }), _jsx("div", { className: "binding-scope-entry-editor__element__path", children: elementRef.value.path })] }), _jsx("div", { className: "panel__content__form__section__list__item__actions", children: _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", disabled: isReadOnly, onClick: () => removeElement(elementRef), tabIndex: -1, children: _jsx(TimesIcon, {}) }) })] }) }, elementRef.value.path));
});
const BindingScopeEditor = observer((props) => {
const { elements, addElement, removeElement, allowAddingElement, handleDropElement, isReadOnly, } = props;
const [{ isElementDragOver }, dropElementRef] = useDrop(() => ({
accept: [
CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
CORE_DND_TYPE.PROJECT_EXPLORER_PACKAGE,
CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE,
CORE_DND_TYPE.PROJECT_EXPLORER_ASSOCIATION,
CORE_DND_TYPE.PROJECT_EXPLORER_FUNCTION,
],
drop: (item) => handleDropElement(item),
collect: (monitor) => ({
isElementDragOver: monitor.isOver({ shallow: true }),
}),
}), [handleDropElement]);
return (_jsx("div", { className: "binding-scope-editor", children: _jsxs("div", { ref: dropElementRef, className: "binding-scope-editor__panel__content dnd__overlay__container", children: [_jsx("div", { className: clsx({ dnd__overlay: isElementDragOver && !isReadOnly }) }), _jsx("div", { className: "binding-scope-editor__panel__content__form", children: _jsx("div", { className: "binding-scope-editor__panel__content__form__section", children: _jsxs("div", { className: "binding-scope-editor__panel__content__form__section__list", children: [elements.map((elementRef) => (_jsx(BindingScopeEntryEditor, { elementRef: elementRef, removeElement: removeElement, isReadOnly: isReadOnly }, elementRef.value._UUID))), _jsx("div", { className: "binding-scope-editor__panel__content__form__section__list__new-item__add", children: _jsx("button", { className: "binding-scope-editor__panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: !allowAddingElement, tabIndex: -1, onClick: addElement, title: "Add Element", children: "Add Value" }) })] }) }) })] }) }));
});
const BindingGeneralEditor = observer((props) => {
const { editorState, isReadOnly } = props;
const editorStore = useEditorStore();
const binding = editorState.binding;
const schemaSets = Array.from(editorStore.graphManagerState.graph.allOwnElements).filter(filterByType(SchemaSet));
const schemaSetOptions = schemaSets.map((e) => ({
value: e,
label: e.path,
}));
const onSchemaSetChange = (val) => {
externalFormat_Binding_setSchemaId(binding, undefined);
return externalFormat_Binding_setSchemaSet(binding, PackageableElementExplicitReference.create(val.value));
};
const selectedSchemaSet = {
value: binding.schemaSet,
label: binding.schemaSet?.valueForSerialization,
};
const schemaIdOptions = selectedSchemaSet.value?.value.schemas.map((e) => ({
value: e.id,
label: e.id,
}));
const onSchemaIdChange = (val) => externalFormat_Binding_setSchemaId(binding, val?.value);
const selectedSchemaId = {
value: binding.schemaId,
label: binding.schemaId,
};
const projectSelectorRef = useRef(null);
const contentTypeOptions = editorStore.graphState.graphGenerationState.externalFormatState.formatContentTypes.map((e) => ({
value: e,
label: e,
}));
const onContentTypeChange = (val) => externalFormat_Binding_setContentType(binding, val.value);
const selectedContentType = {
value: binding.contentType,
label: binding.contentType,
};
return (_jsxs("div", { className: "binding-general-editor", children: [_jsx("div", { className: "binding-general-editor__section__header__label", children: "Content Type" }), _jsx("div", { children: _jsx(CustomSelectorInput, { className: "binding-general-editor__section__dropdown", disabled: isReadOnly, options: contentTypeOptions, onChange: onContentTypeChange, value: selectedContentType, placeholder: "Choose a content type", darkMode: true }) }), _jsx("div", { className: "binding-general-editor__section__header__label", children: "Schema Set" }), _jsx("div", { className: "binding-general-editor__content", children: _jsx(CustomSelectorInput, { className: "binding-general-editor__section__dropdown", disabled: isReadOnly, ref: projectSelectorRef, options: schemaSetOptions, onChange: onSchemaSetChange, value: selectedSchemaSet, isClearable: true, placeholder: "Choose a schema set", darkMode: true }) }), _jsx("div", { className: "binding-general-editor__section__header__label", children: "Schema ID" }), _jsx("div", { className: "binding-general-editor__content", children: _jsx(CustomSelectorInput, { className: "binding-general-editor__section__dropdown", disabled: isReadOnly, ref: projectSelectorRef, options: schemaIdOptions, onChange: onSchemaIdChange, value: selectedSchemaId, isClearable: true, placeholder: "Choose a schema ID", darkMode: true }) })] }));
});
export const BindingEditor = observer(() => {
const editorStore = useEditorStore();
const editorState = editorStore.getCurrentEditorState(BindingEditorState);
const binding = editorState.binding;
const modelUnit = binding.modelUnit;
const isReadOnly = editorState.isReadOnly;
const selectedTab = editorState.selectedTab;
const changeTab = (tab) => () => editorState.setSelectedTab(tab);
const graph = editorStore.graphManagerState.graph;
const allowedElements = [
...graph.ownProfiles,
...graph.ownEnumerations,
...graph.ownClasses,
...graph.ownAssociations,
...graph.ownFunctions,
];
const elements = allowedElements.filter((element) => !modelUnit.packageableElementIncludes
.map((e) => e.value)
.includes(element) &&
!modelUnit.packageableElementExcludes
.map((e) => e.value)
.includes(element));
const allowAddingElement = !isReadOnly && Boolean(elements.length);
const addInclusion = () => {
if (allowAddingElement) {
externalFormat_modelUnit_addPackageableElementIncludes(modelUnit, PackageableElementExplicitReference.create(guaranteeNonNullable(elements[0])));
}
};
const addExclusion = () => {
if (allowAddingElement) {
externalFormat_modelUnit_addPackageableElementExcludes(modelUnit, PackageableElementExplicitReference.create(guaranteeNonNullable(elements[0])));
}
};
const removeInclusion = (val) => externalFormat_modelUnit_deletePackageableElementIncludes(modelUnit, val);
const removeExclusion = (val) => externalFormat_modelUnit_deletePackageableElementExcludes(modelUnit, val);
const handleDropInclusion = useCallback((item) => {
const element = item.data.packageableElement;
if (!isReadOnly &&
!modelUnit.packageableElementIncludes
.map((e) => e.value)
.includes(element)) {
externalFormat_modelUnit_addPackageableElementIncludes(modelUnit, PackageableElementExplicitReference.create(element));
}
}, [isReadOnly, modelUnit]);
const handleDropExclusion = useCallback((item) => {
const element = item.data.packageableElement;
if (!isReadOnly &&
!modelUnit.packageableElementExcludes
.map((e) => e.value)
.includes(element)) {
externalFormat_modelUnit_addPackageableElementExcludes(modelUnit, PackageableElementExplicitReference.create(element));
}
}, [isReadOnly, modelUnit]);
return (_jsxs("div", { className: "binding-editor", children: [_jsx("div", { className: "binding-editor__header", children: _jsxs("div", { className: "binding-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "binding-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "binding-editor__header__title__label", children: "Binding" }), _jsx("div", { className: "binding-editor__header__title__content", children: binding.name })] }) }), _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(BINDING_TAB_TYPE).map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('relational-connection-editor__tab', {
'relational-connection-editor__tab--active': tab === selectedTab,
}), children: prettyCONSTName(tab) }, tab))) }), _jsxs("div", { className: "binding-editor_content", children: [selectedTab === BINDING_TAB_TYPE.GENERAL && (_jsxs(_Fragment, { children: [_jsx("div", { className: "binding-editor__header", children: _jsxs("div", { className: "binding-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "binding-editor__header__title__label", children: "General" })] }) }), _jsx("div", { className: "binding-editor__content", children: _jsx("div", { className: "binding-editor__content__lists", children: _jsx(BindingGeneralEditor, { editorState: editorState, isReadOnly: isReadOnly }) }) })] })), selectedTab === BINDING_TAB_TYPE.MODELS && (_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsxs(ResizablePanel, { minSize: 280, maxSize: 550, children: [_jsx("div", { className: "binding-editor__header", children: _jsx("div", { className: "binding-editor__header__title", children: _jsx("div", { className: "binding-editor__header__title__label", children: "Model Includes" }) }) }), _jsx("div", { className: "binding-editor__header__prompt", children: "Specifies the list of models included" }), _jsx(BindingScopeEditor, { elements: modelUnit.packageableElementIncludes, addElement: addInclusion, removeElement: removeInclusion, allowAddingElement: allowAddingElement, handleDropElement: handleDropInclusion, isReadOnly: isReadOnly }, editorState.uuid)] }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsxs(ResizablePanel, { children: [_jsx("div", { className: "binding-editor__header", children: _jsx("div", { className: "binding-editor__header__title", children: _jsx("div", { className: "binding-editor__header__title__label", children: "Model Excludes" }) }) }), _jsx("div", { className: "binding-editor__header__prompt", children: "Specifies the list of models excluded" }), _jsx(BindingScopeEditor, { elements: modelUnit.packageableElementExcludes, addElement: addExclusion, removeElement: removeExclusion, allowAddingElement: allowAddingElement, handleDropElement: handleDropExclusion, isReadOnly: isReadOnly }, editorState.uuid)] })] }))] })] }));
});
//# sourceMappingURL=BindingElementEditor.js.map