@finos/legend-application-studio
Version:
Legend Studio application core
141 lines • 12.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 { observer } from 'mobx-react-lite';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { CaretDownIcon, clsx, CustomSelectorInput, ControlledDropdownMenu, LockIcon, LongArrowRightIcon, MenuContent, MenuContentItem, PanelContent, PURE_ClassIcon, PURE_DataIcon, WrenchIcon, createFilter, } from '@finos/legend-art';
import React, { useEffect, useRef } from 'react';
import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
import { externalFormatData_setContentType, externalFormatData_setData, modelStoreData_setDataModelModel, } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
import { DataElementReferenceState, ExternalFormatDataState, RelationalCSVDataState, ModelStoreDataState, ModelEmbeddedDataState, } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
import { PackageableElementExplicitReference, } from '@finos/legend-graph';
import { buildElementOption, getPackageableElementOptionFormatter, } from '@finos/legend-lego/graph-editor';
import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
import { useApplicationNavigationContext } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.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));
const format = () => externalFormatDataState.format();
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_EXTERNAL_FORMAT_EDITOR);
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() })] }), _jsxs("div", { className: "external-format-data-editor__header__actions", children: [_jsx("button", { className: "panel__header__action", disabled: !externalFormatDataState.supportsFormatting || isReadOnly, tabIndex: -1, onClick: format, title: "Format External Format", children: _jsx(WrenchIcon, {}) }), _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(PanelContent, { className: "model-loader__editor", children: _jsx(CodeEditor, { language: language, inputValue: externalFormatDataState.embeddedData.data, updateInput: changeData, hideGutter: true }) })] }));
});
export const DataElementReferenceDataEditor = observer((props) => {
const { dataElementReferenceState, isReadOnly } = props;
const dataElement = dataElementReferenceState.embeddedData.dataElement.value;
const editorStore = dataElementReferenceState.editorStore;
const applicationStore = editorStore.applicationStore;
const options = editorStore.graphManagerState.usableDataElements.map(buildElementOption);
const selectedOption = buildElementOption(dataElement);
const onDataElementChange = (val) => {
if (val.value !== selectedOption.value) {
dataElementReferenceState.setDataElement(val.value);
}
};
const visitData = () => editorStore.graphEditorMode.openElement(dataElement);
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_DATA_ELEMENT_REFERENCE_EDITOR);
return (_jsxs("div", { className: "panel data-element-reference-editor", children: [_jsx("div", { className: "data-element-reference-editor__header", children: _jsxs("div", { className: "data-element-reference-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "external-format-editor-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-element-reference-editor__header__title__label", children: dataElementReferenceState.label() })] }) }), _jsxs("div", { className: clsx('data-element-reference-editor__content'), children: [_jsxs("div", { className: "data-element-reference-editor__value", children: [_jsx("div", { className: "btn--sm data-element-reference-editor__value__label", children: _jsx(PURE_DataIcon, {}) }), _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown data-element-reference-editor__value__dropdown", disabled: isReadOnly, options: options, onChange: onDataElementChange, value: selectedOption, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled }), _jsx("button", { className: "btn--dark btn--sm data-element-reference-editor__value-btn", onClick: visitData, tabIndex: -1, title: "See data element", children: _jsx(LongArrowRightIcon, {}) })] }), _jsx("div", { className: "data-element-reference-editor__content__value", children: renderEmbeddedDataEditor(dataElementReferenceState.embeddedDataValueState, isReadOnly) })] })] }));
});
export const ModelEmbeddedDataEditor = observer((props) => {
const { isReadOnly, modelStoreDataState, modelDataState } = props;
const modelData = modelDataState.modelData;
const hideClass = modelStoreDataState.hideClass;
const classSelectorRef = useRef(null);
const elementFilterOption = createFilter({
ignoreCase: true,
ignoreAccents: false,
stringify: (option) => option.data.value.path,
});
const editorStore = modelStoreDataState.editorStore;
const applicationStore = editorStore.applicationStore;
const _class = modelData.model.value;
const classOptions = editorStore.graphManagerState.usableClasses.map((_cl) => ({
value: _cl,
label: _cl.name,
}));
const selectedClassOption = {
value: _class,
label: _class.name,
};
const changeClass = (val) => {
if (val?.value) {
modelStoreData_setDataModelModel(modelData, PackageableElementExplicitReference.create(val.value));
}
};
return (_jsxs(_Fragment, { children: [!hideClass && (_jsxs("div", { className: "sample-data-generator__controller", children: [_jsx("div", { className: "sample-data-generator__controller__icon", title: "class", children: _jsx(PURE_ClassIcon, {}) }), _jsx(CustomSelectorInput, { inputRef: classSelectorRef, className: "sample-data-generator__controller__class-selector", options: classOptions, onChange: changeClass, value: selectedClassOption, darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled, filterOption: elementFilterOption, formatOptionLabel: getPackageableElementOptionFormatter({
darkMode: !applicationStore.layoutService
.TEMPORARY__isLightColorThemeEnabled,
}) })] })), renderEmbeddedDataEditor(modelDataState.embeddedDataState, isReadOnly)] }));
});
export const ModelStoreDataEditor = observer((props) => {
const { isReadOnly, modelStoreDataState } = props;
useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_MODEL_STORE_EDITOR);
return (_jsx("div", { className: "panel connection-editor", children: modelStoreDataState.modelDataStates.map((_modelDataState) => {
if (_modelDataState instanceof ModelEmbeddedDataState) {
return (_jsx(ModelEmbeddedDataEditor, { modelDataState: _modelDataState, modelStoreDataState: modelStoreDataState, isReadOnly: isReadOnly }, _modelDataState.uuid));
}
return (_jsx(UnsupportedEditorPanel, { text: 'Unsuppored Model Data Type', isReadOnly: false }, _modelDataState.uuid));
}) }));
});
export const EmbeddedDataEditor = observer((props) => {
const { embeddedDataEditorState, isReadOnly } = props;
return (_jsx("div", { className: "panel connection-editor", children: renderEmbeddedDataEditor(embeddedDataEditorState.embeddedDataState, isReadOnly) }));
});
export function renderEmbeddedDataEditor(embeddedDataState, isReadOnly) {
if (embeddedDataState instanceof ExternalFormatDataState) {
return (_jsx(ExternalFormatDataEditor, { externalFormatDataState: embeddedDataState, isReadOnly: isReadOnly }));
}
else if (embeddedDataState instanceof RelationalCSVDataState) {
return (_jsx(RelationalCSVDataEditor, { dataState: embeddedDataState, isReadOnly: isReadOnly }));
}
else if (embeddedDataState instanceof DataElementReferenceState) {
return (_jsx(DataElementReferenceDataEditor, { dataElementReferenceState: embeddedDataState, isReadOnly: isReadOnly }));
}
else if (embeddedDataState instanceof ModelStoreDataState) {
return (_jsx(ModelStoreDataEditor, { modelStoreDataState: embeddedDataState, isReadOnly: isReadOnly }));
}
else {
const extraEmbeddedDataEditorRenderers = embeddedDataState.editorStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraEmbeddedDataEditorRenderers?.() ?? []);
for (const editorRenderer of extraEmbeddedDataEditorRenderers) {
const editor = editorRenderer(embeddedDataState, isReadOnly);
if (editor) {
return editor;
}
}
return (_jsxs("div", { className: "panel connection-editor", children: [_jsx("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: embeddedDataState.label() })] }) }), _jsx(PanelContent, { children: _jsx(UnsupportedEditorPanel, { text: "Can't display this embedded data in form-mode", isReadOnly: isReadOnly }) })] }));
}
}
//# sourceMappingURL=EmbeddedDataEditor.js.map