@finos/legend-application-studio
Version:
Legend Studio application core
72 lines • 7.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } 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 { BlankPanelContent, Dialog, InputWithInlineValidation, Modal, ModalBody, ModalFooter, ModalFooterButton, ModalHeader, ModalHeaderActions, ModalTitle, Panel, PanelContent, PanelHeader, PanelLoadingIndicator, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, TimesIcon, } from '@finos/legend-art';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { useApplicationStore, useConditionedApplicationNavigationContext, } from '@finos/legend-application';
import { flowResult } from 'mobx';
import { useEffect, useMemo } from 'react';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { debounce, noop } from '@finos/legend-shared';
import { isValidPath } from '@finos/legend-graph';
export const DatabaseModelPackageInput = observer((props) => {
const { databaseModelBuilderState } = props;
const applicationStore = useApplicationStore();
const debouncedRegenerate = useMemo(() => debounce(() => flowResult(databaseModelBuilderState.previewDatabaseModels()), 500), [databaseModelBuilderState]);
const changeTargetPackage = (event) => {
databaseModelBuilderState.setTargetPackage(event.target.value);
debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
};
const targetPackageValidationMessage = !databaseModelBuilderState.targetPackage
? `Target package path can't be empty`
: !isValidPath(databaseModelBuilderState.targetPackage)
? 'Invalid target package path'
: undefined;
return (_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Target Package" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Target Package of Mapping and Models Generated" }), _jsx(InputWithInlineValidation, { className: "query-builder__variables__variable__name__input input-group__input", spellCheck: false, value: databaseModelBuilderState.targetPackage, onChange: changeTargetPackage, placeholder: "Target package path", error: targetPackageValidationMessage, showEditableIcon: true })] }));
});
export const DatabaseModelPreviewEditor = observer((props) => {
const { databaseModelBuilderState, grammarCode } = props;
const isExecutingAction = databaseModelBuilderState.generatingModelState.isInProgress ||
databaseModelBuilderState.saveModelState.isInProgress;
return (_jsxs(Panel, { className: "database-builder__model", children: [_jsx(PanelHeader, { title: "database model" }), _jsxs(PanelContent, { children: [_jsx(PanelLoadingIndicator, { isLoading: isExecutingAction }), _jsx("div", { className: "database-builder__modeler", children: _jsxs("div", { className: "database-builder__modeler__preview", children: [_jsx("div", { className: "database-builder__modeler__preview__header", children: "readonly" }), databaseModelBuilderState.generatedGrammarCode && (_jsx(CodeEditor, { language: CODE_EDITOR_LANGUAGE.PURE, inputValue: grammarCode, isReadOnly: true })), !databaseModelBuilderState.generatedGrammarCode && (_jsx(BlankPanelContent, { children: "No model preview" }))] }) })] })] }));
});
export const DatabaseModelBuilder = observer((props) => {
const { databaseModelBuilderState, isReadOnly } = props;
const applicationStore = useApplicationStore();
const debouncedRegenerate = useMemo(() => debounce(() => flowResult(databaseModelBuilderState.previewDatabaseModels()), 500), [databaseModelBuilderState]);
const preview = () => {
debouncedRegenerate.cancel();
debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
};
const saveModels = applicationStore.guardUnhandledError(() => flowResult(databaseModelBuilderState.saveModels()));
const closeModal = () => {
databaseModelBuilderState.close();
};
const isExecutingAction = databaseModelBuilderState.generatingModelState.isInProgress ||
databaseModelBuilderState.saveModelState.isInProgress;
useEffect(() => {
flowResult(databaseModelBuilderState.previewDatabaseModels()).catch(applicationStore.alertUnhandledError);
}, [applicationStore, databaseModelBuilderState]);
useConditionedApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_MODEL_BUILDER, databaseModelBuilderState.showModal);
return (_jsx(Dialog, { open: databaseModelBuilderState.showModal, classes: { container: 'search-modal__container' }, onClose: noop, PaperProps: {
classes: {
root: 'search-modal__inner-container database-builder__container',
},
}, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "database-builder", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { title: "Database Model Builder" }), _jsx(ModalHeaderActions, { children: _jsx("button", { className: "modal__header__action", tabIndex: -1, onClick: closeModal, children: _jsx(TimesIcon, {}) }) })] }), _jsx(ModalBody, { className: "database-builder__content", children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { size: 450, children: _jsxs("div", { className: "database-builder__config", children: [_jsx(PanelHeader, { title: "schema explorer" }), _jsx(PanelContent, { className: "database-builder__config__content", children: _jsx(DatabaseModelPackageInput, { databaseModelBuilderState: databaseModelBuilderState }) })] }) }), _jsx(ResizablePanelSplitter, {}), _jsx(ResizablePanel, { children: _jsx(DatabaseModelPreviewEditor, { databaseModelBuilderState: databaseModelBuilderState, grammarCode: databaseModelBuilderState.generatedGrammarCode }) })] }) }), _jsxs(ModalFooter, { children: [_jsx(ModalFooterButton, { className: "database-builder__action--btn", disabled: isReadOnly || isExecutingAction, onClick: preview, title: "Preview models...", children: "Preview" }), _jsx(ModalFooterButton, { className: "database-builder__action--btn", disabled: isReadOnly || isExecutingAction, onClick: saveModels, children: "Save Models" })] })] }) }));
});
//# sourceMappingURL=DatabaseModelBuilder.js.map