UNPKG

@finos/legend-application-studio

Version:
260 lines 26.9 kB
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 { useEffect, useState } from 'react'; import { observer } from 'mobx-react-lite'; import { clsx, ControlledDropdownMenu, MenuContent, MenuContentItem, PlusIcon, ArrowsAltHIcon, useResizeDetector, GenericTextFileIcon, } from '@finos/legend-art'; import { MappingEditor } from './mapping-editor/MappingEditor.js'; import { UMLEditor } from './uml-editor/UMLEditor.js'; import { MappingEditorState } from '../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js'; import { UMLEditorState } from '../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js'; import { ElementEditorState, ELEMENT_GENERATION_MODE, ExternalFormatElementGenerationViewModeState, FileGenerationViewModeState, } from '../../../stores/editor/editor-state/element-editor-state/ElementEditorState.js'; import { LEGEND_STUDIO_TEST_ID } from '../../../__lib__/LegendStudioTesting.js'; import { ELEMENT_NATIVE_VIEW_MODE } from '../../../stores/editor/EditorConfig.js'; import { DIFF_VIEW_MODE, EntityDiffViewState, } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js'; import { EntityDiffView } from './diff-editor/EntityDiffView.js'; import { ModelImporter } from './ModelImporter.js'; import { ModelImporterState } from '../../../stores/editor/editor-state/ModelImporterState.js'; import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js'; import { ServiceEditorState } from '../../../stores/editor/editor-state/element-editor-state/service/ServiceEditorState.js'; import { ProjectConfigurationEditorState } from '../../../stores/editor/editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js'; import { ProjectConfigurationEditor } from './project-configuration-editor/ProjectConfigurationEditor.js'; import { ElementGenerationEditor } from './element-generation-editor/ElementGenerationEditor.js'; import { FunctionEditor } from './function-activator/FunctionEditor.js'; import { ElementNativeView } from './element-generation-editor/ElementNativeView.js'; import { ServiceEditor } from './service-editor/ServiceEditor.js'; import { PackageableRuntimeEditor } from './RuntimeEditor.js'; import { PackageableRuntimeEditorState } from '../../../stores/editor/editor-state/element-editor-state/RuntimeEditorState.js'; import { PackageableConnectionEditorState } from '../../../stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.js'; import { PackageableConnectionEditor } from './connection-editor/ConnectionEditor.js'; import { FileGenerationEditorState } from '../../../stores/editor/editor-state/element-editor-state/FileGenerationEditorState.js'; import { FileGenerationEditor } from './element-generation-editor/FileGenerationEditor.js'; import { EntityChangeConflictEditorState } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js'; import { EntityChangeConflictEditor } from './diff-editor/EntityChangeConflictEditor.js'; import { UnsupportedElementEditorState } from '../../../stores/editor/editor-state/UnsupportedElementEditorState.js'; import { UnsupportedElementEditor } from './UnsupportedElementEditor.js'; import { getPrettyLabelForRevision } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffEditorState.js'; import { GenerationSpecificationEditorState } from '../../../stores/editor/editor-state/GenerationSpecificationEditorState.js'; import { GenerationSpecificationEditor } from './GenerationSpecificationEditor.js'; import { ArtifactGenerationViewer } from './ArtifactGenerationViewer.js'; import { useEditorStore } from '../EditorStoreProvider.js'; import { PackageableDataEditorState } from '../../../stores/editor/editor-state/element-editor-state/data/DataEditorState.js'; import { DataElementEditor } from './data-editor/DataElementEditor.js'; import { ElementXTGenerationEditor } from './element-generation-editor/ElementXTGenerationEditor.js'; import { TabManager } from '@finos/legend-lego/application'; import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/function-activator/INTERNAL__UnknownFunctionActivatorEditorState.js'; import { INTERNAL__UnknownFunctionActivatorEdtior } from './function-activator/INTERNAL__UnknownFunctionActivatorEdtior.js'; import { getElementIcon } from '../../ElementIconUtils.js'; import { ArtifactGenerationViewerState } from '../../../stores/editor/editor-state/ArtifactGenerationViewerState.js'; import { QueryConnectionWorflowEditor } from './end-to-end-flow-editor/ConnectionToQueryWorkflowEditor.js'; import { QueryConnectionEndToEndWorkflowEditorState } from '../../../stores/editor/editor-state/end-to-end-workflow-state/QueryConnectionEndToEndWorkflowEditorState.js'; import { SnowflakeAppFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/function-activator/SnowflakeAppFunctionActivatorEditorState.js'; import { SnowflakeAppFunctionActivatorEditor } from './function-activator/SnowflakeAppFunctionActivatorEditor.js'; import { SnowflakeM2MUdfFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/function-activator/SnowflakeM2MUdfFunctionActivatorEditorState.js'; import { SnowflakeM2MUdfFunctionActivatorEditor } from './function-activator/SnowflakeM2MUdfFunctionActivatorEditor.js'; import { ShowcaseCard, RuleEngagementCard, DocumentationCard, } from '../../workspace-setup/WorkspaceSetup.js'; import { HostedServiceFunctionActivatorEditorState } from '../../../stores/editor/editor-state/element-editor-state/function-activator/HostedServiceFunctionActivatorEditorState.js'; import { HostedServiceFunctionActivatorEditor } from './function-activator/HostedServiceFunctionActivatorEditor.js'; import { DataProductEditorState } from '../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js'; import { DataProductEditor } from './dataProduct/DataProductEditor.js'; import { IngestDefinitionEditorState } from '../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js'; import { IngestDefinitionEditor } from './ingest-editor/IngestDefinitionEditor.js'; import { MemSQLFunctionActivatorEditor, MemSQLFunctionActivatorEdtiorState, } from './EditorGroup.js'; export { MemSQLFunctionActivatorEditorState as MemSQLFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/function-activator/MemSQLFunctionActivatorEditorState.js'; export { MemSQLFunctionActivatorEditor } from './function-activator/MemSQLFunctionActivatorEditor.js'; export const ViewerEditorGroupSplashScreen = () => { const commandListWidth = 300; const commandListHeight = 50; const [showCommandList, setShowCommandList] = useState(false); const { ref, width, height } = useResizeDetector(); useEffect(() => { setShowCommandList((width ?? 0) > commandListWidth && (height ?? 0) > commandListHeight); }, [width, height]); return (_jsx("div", { ref: ref, className: "editor-group__splash-screen", children: _jsx("div", { className: clsx('editor-group__splash-screen__content', { 'editor-group__splash-screen__content--hidden': !showCommandList, }), children: _jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Open or Search for an Element" }), _jsxs("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: [_jsx("div", { className: "hotkey__key", children: "Ctrl" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "P" })] })] }) }) })); }; export const EditorGroupSplashScreen = () => { const commandListWidth = 300; const commandListHeight = 180; const [showCommandList, setShowCommandList] = useState(false); const { ref, width, height } = useResizeDetector(); useEffect(() => { setShowCommandList((width ?? 0) > commandListWidth && (height ?? 0) > commandListHeight); }, [width, height]); return (_jsx("div", { ref: ref, className: "editor-group__splash-screen", children: _jsxs("div", { className: clsx('editor-group__splash-screen__content', { 'editor-group__splash-screen__content--hidden': !showCommandList, }), children: [_jsx("div", { className: "editor-group__splash-screen__content__cards", children: _jsxs("div", { className: "editor-group__splash-screen__content__cards__container", children: [_jsx(RuleEngagementCard, {}), _jsx(ShowcaseCard, { hideDocumentation: true }), _jsx(DocumentationCard, {})] }) }), _jsx("div", { className: "editor-group__splash-screen__content__divider" }), _jsxs("div", { className: "editor-group__splash-screen__content__actions", children: [_jsx("div", { className: "editor-group__splash-screen__content__header", children: "Essential Keyboard Shortcuts" }), _jsxs("div", { className: "editor-group__splash-screen__content__items", children: [_jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Open or Search for an Element" }), _jsxs("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: [_jsx("div", { className: "hotkey__key", children: "Ctrl" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "P" })] })] }), _jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Push Local Changes" }), _jsxs("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: [_jsx("div", { className: "hotkey__key", children: "Ctrl" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "S" })] })] }), _jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Open Showcases" }), _jsx("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: _jsx("div", { className: "hotkey__key", children: "F7" }) })] }), _jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Go To Text Mode" }), _jsx("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: _jsx("div", { className: "hotkey__key", children: "F8" }) })] }), _jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Compile" }), _jsx("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: _jsx("div", { className: "hotkey__key", children: "F9" }) })] })] })] })] }) })); }; export const EditorGroup = observer(() => { const editorStore = useEditorStore(); const currentTabState = editorStore.tabManagerState.currentTab; const nativeViewModes = currentTabState instanceof ElementEditorState ? Object.values(ELEMENT_NATIVE_VIEW_MODE) : []; const externalformatViewModes = currentTabState instanceof ElementEditorState ? editorStore.graphState.graphGenerationState.externalFormatState.externalFormatDescriptions .filter((f) => f.supportsSchemaGeneration) .toSorted((a, b) => a.name.localeCompare(b.name)) : []; const generationViewModes = (currentTabState instanceof ElementEditorState ? editorStore.graphState.graphGenerationState.globalFileGenerationState.fileGenerationConfigurations.toSorted((a, b) => a.label.localeCompare(b.label)) : []).filter((file) => !externalformatViewModes .map((e) => e.name.toLowerCase()) .includes(file.key.toLowerCase())); const renderActiveElementTab = () => { if (currentTabState instanceof ElementEditorState) { const generationViewState = currentTabState.generationModeState; if (generationViewState) { if (generationViewState instanceof FileGenerationViewModeState) { return (_jsx(ElementGenerationEditor, { elementGenerationState: generationViewState.elementGenerationState, currentElementState: currentTabState }, generationViewState.elementGenerationState.uuid)); } else if (generationViewState instanceof ExternalFormatElementGenerationViewModeState) { return (_jsx(ElementXTGenerationEditor, { elementXTState: generationViewState.generationState, currentElementState: currentTabState }, generationViewState.generationState.uuid)); } } switch (currentTabState.editMode) { case ELEMENT_NATIVE_VIEW_MODE.FORM: { if (currentTabState instanceof UMLEditorState) { return _jsx(UMLEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof FunctionEditorState) { return _jsx(FunctionEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof MappingEditorState) { return _jsx(MappingEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof IngestDefinitionEditorState) { return _jsx(IngestDefinitionEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof ServiceEditorState) { return _jsx(ServiceEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof DataProductEditorState) { return _jsx(DataProductEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof PackageableRuntimeEditorState) { return _jsx(PackageableRuntimeEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof PackageableConnectionEditorState) { return _jsx(PackageableConnectionEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof FileGenerationEditorState) { return _jsx(FileGenerationEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof PackageableDataEditorState) { return _jsx(DataElementEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof GenerationSpecificationEditorState) { return _jsx(GenerationSpecificationEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof SnowflakeAppFunctionActivatorEdtiorState) { return (_jsx(SnowflakeAppFunctionActivatorEditor, {}, currentTabState.uuid)); } else if (currentTabState instanceof SnowflakeM2MUdfFunctionActivatorEdtiorState) { return (_jsx(SnowflakeM2MUdfFunctionActivatorEditor, {}, currentTabState.uuid)); } else if (currentTabState instanceof HostedServiceFunctionActivatorEditorState) { return (_jsx(HostedServiceFunctionActivatorEditor, {}, currentTabState.uuid)); } else if (currentTabState instanceof MemSQLFunctionActivatorEdtiorState) { return _jsx(MemSQLFunctionActivatorEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof UnsupportedElementEditorState) { return _jsx(UnsupportedElementEditor, {}, currentTabState.uuid); } else if (currentTabState instanceof INTERNAL__UnknownFunctionActivatorEdtiorState) { return (_jsx(INTERNAL__UnknownFunctionActivatorEdtior, {}, currentTabState.uuid)); } const extraElementEditorCreators = editorStore.pluginManager .getApplicationPlugins() .flatMap((plugin) => plugin.getExtraElementEditorRenderers?.() ?? []); for (const elementEditorCreators of extraElementEditorCreators) { const elementEditor = elementEditorCreators(currentTabState); if (elementEditor) { return elementEditor; } } break; } case ELEMENT_NATIVE_VIEW_MODE.JSON: case ELEMENT_NATIVE_VIEW_MODE.GRAMMAR: return (_jsx(ElementNativeView, { currentElementState: currentTabState }, currentTabState.uuid)); default: return null; } } else if (currentTabState instanceof EntityDiffViewState) { return (_jsx(EntityDiffView, { entityDiffViewState: currentTabState }, currentTabState.uuid)); } else if (currentTabState instanceof EntityChangeConflictEditorState) { return (_jsx(EntityChangeConflictEditor, { conflictEditorState: currentTabState }, currentTabState.uuid)); } else if (currentTabState instanceof ArtifactGenerationViewerState) { return _jsx(ArtifactGenerationViewer, {}, currentTabState.uuid); } else if (currentTabState instanceof ModelImporterState) { return _jsx(ModelImporter, {}); } else if (currentTabState instanceof ProjectConfigurationEditorState) { return _jsx(ProjectConfigurationEditor, {}); } else if (currentTabState instanceof QueryConnectionEndToEndWorkflowEditorState) { if (editorStore.globalEndToEndWorkflowState .queryToConnectionWorkflowEditorState.packageableConnection ?.connectionValue.store) { return (_jsx(QueryConnectionWorflowEditor, { connectionToQueryWorkflowState: editorStore.globalEndToEndWorkflowState .queryToConnectionWorkflowEditorState })); } else { editorStore.applicationStore.notificationService.notifyError(`Cannot open query to connection workflow editor because the connection does not have a store`); return null; } } // TODO: create an editor for unsupported tab return null; }; const renderTab = (editorState) => { if (editorState instanceof EntityDiffViewState) { return (_jsxs("div", { className: "diff-tab", children: [_jsx("div", { className: "diff-tab__element-icon", children: editorState.element ? ((getElementIcon(editorState.element, editorStore, { returnEmptyForUnknown: true, }) ?? _jsx(GenericTextFileIcon, {}))) : (_jsx(GenericTextFileIcon, {})) }), _jsx("div", { className: "diff-tab__element-name", children: editorState.label }), _jsxs("div", { className: "diff-tab__text", children: ["(", getPrettyLabelForRevision(editorState.fromRevision)] }), _jsx("div", { className: "diff-tab__icon", children: _jsx(ArrowsAltHIcon, {}) }), _jsxs("div", { className: "diff-tab__text", children: [getPrettyLabelForRevision(editorState.toRevision), ")"] })] })); } else if (editorState instanceof EntityChangeConflictEditorState) { return (_jsxs("div", { className: "diff-tab", children: [_jsx("div", { className: "diff-tab__element-icon", children: _jsx(GenericTextFileIcon, {}) }), _jsx("div", { className: "diff-tab__element-name", children: editorState.label }), _jsx("div", { className: "diff-tab__text", children: editorState.isReadOnly ? '(Merge Preview)' : '(Merged)' })] })); } return (_jsxs("div", { className: "editor-group__header__tab", children: [_jsx("div", { className: "editor-group__header__tab__icon", children: editorState instanceof ElementEditorState ? ((getElementIcon(editorState.element, editorStore, { returnEmptyForUnknown: true, }) ?? _jsx(GenericTextFileIcon, {}))) : (_jsx(GenericTextFileIcon, {})) }), _jsx("div", { className: "editor-group__header__tab__label", children: editorState.label }), editorState instanceof ElementEditorState && editorStore.tabManagerState.tabs.filter((tab) => tab instanceof ElementEditorState && tab.label === editorState.label).length > 1 && (_jsx("div", { className: "editor-group__header__tab__path", children: editorState.element.path }))] })); }; if (!currentTabState) { return editorStore.isInViewerMode ? (_jsx(ViewerEditorGroupSplashScreen, {})) : (_jsx(EditorGroupSplashScreen, {})); } return (_jsxs("div", { "data-testid": LEGEND_STUDIO_TEST_ID.EDITOR_GROUP, className: "panel editor-group", children: [_jsxs("div", { className: "panel__header editor-group__header", children: [_jsx("div", { "data-testid": LEGEND_STUDIO_TEST_ID.EDITOR_GROUP__HEADER_TABS, className: "editor-group__header__tabs", children: _jsx(TabManager, { tabManagerState: editorStore.tabManagerState, tabRenderer: renderTab }) }), _jsxs("div", { className: "editor-group__header__actions", children: [currentTabState instanceof ElementEditorState && (_jsx(ControlledDropdownMenu, { className: "editor-group__view-mode__type", title: "View as...", content: _jsxs(MenuContent, { "data-testid": LEGEND_STUDIO_TEST_ID.EDITOR_GROUP__ELEMENT_VIEW__OPTIONS, className: "editor-group__view-mode__options editor-group__view-mode__options--with-group", children: [_jsxs("div", { className: "editor-group__view-mode__option__group editor-group__view-mode__option__group--native", children: [_jsx("div", { className: "editor-group__view-mode__option__group__name", children: "native" }), _jsx("div", { className: "editor-group__view-mode__option__group__options", children: nativeViewModes.map((mode) => (_jsx(MenuContentItem, { className: "editor-group__view-mode__option", onClick: () => currentTabState.setEditMode(mode), children: mode }, mode))) })] }), Boolean(externalformatViewModes.length) && (_jsxs(_Fragment, { children: [_jsx("div", { className: "editor-group__view-mode__option__group__separator" }), _jsxs("div", { className: "editor-group__view-mode__option__group editor-group__view-mode__option__group--generation", children: [_jsx("div", { className: "editor-group__view-mode__option__group__name", children: "external format" }), _jsx("div", { className: "editor-group__view-mode__option__group__options", children: externalformatViewModes.map((mode) => (_jsx(MenuContentItem, { className: "editor-group__view-mode__option", onClick: () => currentTabState.changeGenerationModeState(mode.name, ELEMENT_GENERATION_MODE.EXTERNAL_FORMAT), children: mode.name }, mode.name))) })] })] })), Boolean(generationViewModes.length) && (_jsxs(_Fragment, { children: [_jsx("div", { className: "editor-group__view-mode__option__group__separator" }), _jsxs("div", { className: "editor-group__view-mode__option__group editor-group__view-mode__option__group--generation", children: [_jsx("div", { className: "editor-group__view-mode__option__group__name", children: "file" }), _jsx("div", { className: "editor-group__view-mode__option__group__options", children: generationViewModes.map((mode) => (_jsx(MenuContentItem, { className: "editor-group__view-mode__option", disabled: !editorStore.graphState.graphGenerationState.globalFileGenerationState.supportedFileGenerationConfigurationsForCurrentElement.includes(mode), onClick: () => currentTabState.changeGenerationModeState(mode.key, ELEMENT_GENERATION_MODE.FILE_GENERATION), children: mode.label }, mode.key))) })] })] }))] }), menuProps: { anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, }, children: _jsx("div", { className: "editor-group__view-mode__type__label", children: currentTabState.generationModeState?.label ?? currentTabState.editMode }) })), currentTabState instanceof EntityDiffViewState && (_jsx(ControlledDropdownMenu, { className: "editor-group__view-mode__type", title: "View as...", content: _jsxs(MenuContent, { "data-testid": LEGEND_STUDIO_TEST_ID.EDITOR_GROUP__ELEMENT_VIEW__OPTIONS, className: "editor-group__view-mode__options", children: [_jsx(MenuContentItem, { className: "editor-group__view-mode__option", onClick: () => currentTabState.setDiffMode(DIFF_VIEW_MODE.GRAMMAR), children: DIFF_VIEW_MODE.GRAMMAR }), _jsx(MenuContentItem, { className: "editor-group__view-mode__option", onClick: () => currentTabState.setDiffMode(DIFF_VIEW_MODE.JSON), children: DIFF_VIEW_MODE.JSON })] }), menuProps: { anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, }, children: _jsx("div", { className: "editor-group__view-mode__type__label", children: currentTabState.diffMode }) }))] })] }), _jsx("div", { className: "panel__content editor-group__content", "data-testid": LEGEND_STUDIO_TEST_ID.EDITOR_GROUP_CONTENT, children: renderActiveElementTab() }, currentTabState.uuid)] })); }); //# sourceMappingURL=EditorGroup.js.map