@finos/legend-application-studio
Version:
Legend Studio application core
106 lines • 12 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 { useEditorStore } from '../../EditorStoreProvider.js';
import { DATA_TAB_TYPE, PackageableDataEditorState, } from '../../../../stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
import { CaretDownIcon, clsx, ControlledDropdownMenu, InfoCircleIcon, LockIcon, MenuContent, MenuContentItem, PanelContentLists, PanelDropZone, PlusIcon, } from '@finos/legend-art';
import { prettyCONSTName } from '@finos/legend-shared';
import { StereotypeExplicitReference, Profile, stub_Stereotype, stub_Profile, stub_TaggedValue, stub_Tag, } from '@finos/legend-graph';
import { annotatedElement_addStereotype, annotatedElement_addTaggedValue, annotatedElement_deleteStereotype, annotatedElement_deleteTaggedValue, } from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
import { useDrop } from 'react-dnd';
import { CORE_DND_TYPE, } from '../../../../stores/editor/utils/DnDUtils.js';
import { TaggedValueDragPreviewLayer, TaggedValueEditor, } from '../uml-editor/TaggedValueEditor.js';
import { useCallback, useEffect, useRef } from 'react';
import { StereotypeDragPreviewLayer, StereotypeSelector, } from '../uml-editor/StereotypeSelector.js';
import { externalFormatData_setContentType, externalFormatData_setData, } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
import { renderEmbeddedDataEditor } from './EmbeddedDataEditor.js';
import { useApplicationNavigationContext, useApplicationStore, } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
export const ExternalFormatDataEditor = observer((props) => {
const { externalFormatDataState, isReadOnly } = props;
const editorStore = useEditorStore();
const typeNameRef = useRef(null);
const changeData = (val) => externalFormatData_setData(externalFormatDataState.embeddedData, val);
useEffect(() => {
if (!isReadOnly) {
typeNameRef.current?.focus();
}
}, [isReadOnly]);
const contentTypeOptions = editorStore.graphState.graphGenerationState.externalFormatState
.formatContentTypes;
const onContentTypeChange = (val) => externalFormatData_setContentType(externalFormatDataState.embeddedData, val);
const language = getEditorLanguageForFormat(editorStore.graphState.graphGenerationState.externalFormatState.getFormatTypeForContentType(externalFormatDataState.embeddedData.contentType));
return (_jsxs("div", { className: "panel external-format-data-editor", children: [_jsxs("div", { className: "external-format-data-editor__header", children: [_jsxs("div", { className: "external-format-data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "external-format-editor-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "external-format-data-editor__header__title__label", children: externalFormatDataState.label() })] }), _jsx("div", { className: "external-format-data-editor__header__actions", children: _jsxs(ControlledDropdownMenu, { className: "external-format-data-editor__type", disabled: isReadOnly, content: _jsx(MenuContent, { className: "external-format-data-editor__dropdown", children: contentTypeOptions.map((contentType) => (_jsx(MenuContentItem, { className: "external-format-data-editor__option", onClick: () => onContentTypeChange(contentType), children: contentType }, contentType))) }), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'right' },
}, children: [_jsx("div", { className: "external-format-data-editor__type__label", children: externalFormatDataState.embeddedData.contentType }), _jsx("div", { className: "external-format-data-editor__type__icon", children: _jsx(CaretDownIcon, {}) })] }) })] }), _jsx("div", { className: clsx('external-format-data-editor__content'), children: _jsx("div", { className: "external-format-data-editor__content__input", children: _jsx(CodeEditor, { language: language, inputValue: externalFormatDataState.embeddedData.data, updateInput: changeData, hideGutter: true }) }) })] }));
});
export const EmbeddedDataEditor = observer((props) => {
const { embeddedDataEditorState, isReadOnly } = props;
const embeddedDataState = embeddedDataEditorState.embeddedDataState;
return (_jsx("div", { className: "panel connection-editor", children: renderEmbeddedDataEditor(embeddedDataState, isReadOnly) }));
});
export const DataElementEditor = observer(() => {
const editorStore = useEditorStore();
const applicationStore = useApplicationStore();
const editorState = editorStore.tabManagerState.getCurrentEditorState(PackageableDataEditorState);
const dataElement = editorState.data;
const isReadOnly = editorState.isReadOnly;
const selectedTab = editorState.selectedTab;
const changeTab = (tab) => () => editorState.setSelectedTab(tab);
const addStereotype = () => {
annotatedElement_addStereotype(dataElement, StereotypeExplicitReference.create(stub_Stereotype(stub_Profile())));
};
const addTaggedValue = () => {
annotatedElement_addTaggedValue(dataElement, stub_TaggedValue(stub_Tag(stub_Profile())));
};
const deleteTaggedValue = (val) => () => annotatedElement_deleteTaggedValue(dataElement, val);
const _deleteStereotype = (val) => () => annotatedElement_deleteStereotype(dataElement, val);
const handleDropTaggedValue = useCallback((item) => {
if (!isReadOnly && item.data.packageableElement instanceof Profile) {
annotatedElement_addTaggedValue(dataElement, stub_TaggedValue(stub_Tag(item.data.packageableElement)));
}
}, [dataElement, 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 handleDropStereotype = useCallback((item) => {
if (!isReadOnly && item.data.packageableElement instanceof Profile) {
annotatedElement_addStereotype(dataElement, StereotypeExplicitReference.create(stub_Stereotype(item.data.packageableElement)));
}
}, [dataElement, 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 seeDocumentation = () => applicationStore.assistantService.openDocumentationEntry(LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_CREATE_A_DATA_ELEMENT);
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATA_ELEMENT_EDITOR);
return (_jsxs("div", { className: "data-editor", children: [_jsx("div", { className: "data-editor__header", children: _jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "data-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsxs("div", { className: "data-editor__header__title__label", children: ["Data Element", _jsx("button", { className: "binding-editor__header__title__label__hint", tabIndex: -1, onClick: seeDocumentation, title: "click to see more details on creating a data element", children: _jsx(InfoCircleIcon, {}) })] }), _jsx("div", { className: "data-editor__header__title__content", children: dataElement.name })] }) }), _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(DATA_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: "data-editor__content", children: [selectedTab === DATA_TAB_TYPE.GENERAL && (_jsx(EmbeddedDataEditor, { embeddedDataEditorState: editorState.embeddedDataState, isReadOnly: isReadOnly })), selectedTab === DATA_TAB_TYPE.STEREOTYPES && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "data-editor__header", children: [_jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-editor__header__title__label", children: "Stereotypes" })] }), _jsx("div", { className: "data-editor__header__actions", children: _jsx("button", { className: "data-editor__header__action", onClick: addStereotype, disabled: isReadOnly, tabIndex: -1, title: "Add Stereotype", children: _jsx(PlusIcon, {}) }) })] }), _jsx("div", { className: "data-editor__content", children: _jsx("div", { className: "data-editor__content__lists", children: _jsx(PanelDropZone, { isDragOver: isStereotypeDragOver && !isReadOnly, dropTargetConnector: stereotypeDropConnector, children: _jsxs(PanelContentLists, { children: [_jsx(StereotypeDragPreviewLayer, {}), dataElement.stereotypes.map((stereotype) => (_jsx(StereotypeSelector, { annotatedElement: dataElement, stereotype: stereotype, deleteStereotype: _deleteStereotype(stereotype), isReadOnly: isReadOnly, darkTheme: true }, stereotype.value._UUID)))] }) }) }) })] })), selectedTab === DATA_TAB_TYPE.TAGGED_VALUES && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "data-editor__header", children: [_jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "data-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-editor__header__title__label", children: "Tagged Values" })] }), _jsx("div", { className: "data-editor__header__actions", children: _jsx("button", { className: "data-editor__header__action", onClick: addTaggedValue, disabled: isReadOnly, tabIndex: -1, title: "Add Tagged value", children: _jsx(PlusIcon, {}) }) })] }), _jsx("div", { className: "data-editor__content", children: _jsx("div", { className: "data-editor__content__lists", children: _jsx(PanelDropZone, { isDragOver: isTaggedValueDragOver && !isReadOnly, dropTargetConnector: taggedValueDropConnector, children: _jsxs(PanelContentLists, { children: [_jsx(TaggedValueDragPreviewLayer, {}), dataElement.taggedValues.map((taggedValue) => (_jsx(TaggedValueEditor, { annotatedElement: dataElement, taggedValue: taggedValue, deleteValue: deleteTaggedValue(taggedValue), isReadOnly: isReadOnly, darkTheme: true }, taggedValue._UUID)))] }) }) }) })] }))] })] }));
});
//# sourceMappingURL=DataElementEditor.js.map