@finos/legend-studio
Version:
123 lines • 9.82 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 { Dialog, ResizablePanelGroup, ResizablePanel, ResizablePanelSplitter, PanelLoadingIndicator, SaveIcon, FireIcon, clsx, TreeView, PURE_DatabaseSchemaIcon, PURE_DatabaseTableIcon, CircleIcon, ChevronDownIcon, ChevronRightIcon, CheckCircleIcon, EmptyCircleIcon, } from '@finos/legend-art';
import { useEffect } from 'react';
import { ColumnDatabaseBuilderTreeNodeData, SchemaDatabaseBuilderTreeNodeData, TableDatabaseBuilderTreeNodeData, } from '../../../../stores/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
import { capitalize } from '@finos/legend-shared';
import { EDITOR_LANGUAGE, useApplicationStore, } from '@finos/legend-application';
import { generateColumnTypeLabel, renderColumnTypeIcon, } from '../../../../stores/editor-state/element-editor-state/mapping/relational/DatabaseEditorHelper.js';
import { flowResult } from 'mobx';
import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
const getNodeIcon = (node) => {
if (node instanceof SchemaDatabaseBuilderTreeNodeData) {
return _jsx(PURE_DatabaseSchemaIcon, {});
}
else if (node instanceof TableDatabaseBuilderTreeNodeData) {
return _jsx(PURE_DatabaseTableIcon, {});
}
else if (node instanceof ColumnDatabaseBuilderTreeNodeData) {
return renderColumnTypeIcon(node.column.type);
}
return null;
};
const DatabaseBuilderTreeNodeContainer = (props) => {
const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
const { toggleCheckedNode, isPartiallySelected } = innerProps;
const isExpandable = Boolean(!node.childrenIds || node.childrenIds.length) &&
!(node instanceof ColumnDatabaseBuilderTreeNodeData);
const nodeExpandIcon = isExpandable ? (node.isOpen ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx("div", {}));
const nodeTypeIcon = getNodeIcon(node);
const toggleCheck = () => toggleCheckedNode(node);
const toggleExpandNode = () => {
onNodeSelect?.(node);
if (!isExpandable) {
toggleCheck();
}
};
const renderCheckedIcon = (_node) => {
if (_node instanceof ColumnDatabaseBuilderTreeNodeData) {
return null;
}
else if (isPartiallySelected(_node)) {
return _jsx(CircleIcon, {});
}
else if (_node.isChecked) {
return _jsx(CheckCircleIcon, {});
}
return _jsx(EmptyCircleIcon, {});
};
return (_jsxs("div", { className: clsx('tree-view__node__container'), style: {
paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
display: 'flex',
}, children: [_jsxs("div", { className: "tree-view__node__icon database-builder-tree__node__icon", children: [_jsx("div", { className: "database-builder-tree__expand-icon", onClick: toggleExpandNode, children: nodeExpandIcon }), _jsx("div", { className: clsx('database-builder-tree__checker-icon'), onClick: toggleCheck, children: renderCheckedIcon(node) }), _jsx("div", { className: "database-builder-tree__type-icon", onClick: toggleExpandNode, children: nodeTypeIcon })] }), _jsxs("div", { className: "tree-view__node__label database-builder-tree__node__label", onClick: toggleExpandNode, children: [node.label, node instanceof ColumnDatabaseBuilderTreeNodeData && (_jsx("div", { className: "database-builder-tree__node__type", children: _jsx("div", { className: "database-builder-tree__node__type__label", children: generateColumnTypeLabel(node.column.type) }) }))] })] }));
};
export const DatabaseBuilderExplorer = observer((props) => {
const { treeData, databaseBuilderState } = props;
const applicationStore = useApplicationStore();
const onNodeSelect = (node) => {
flowResult(databaseBuilderState.onNodeSelect(node, treeData)).catch(applicationStore.alertUnhandledError);
};
const isPartiallySelected = (node) => {
if (node instanceof SchemaDatabaseBuilderTreeNodeData &&
!node.isChecked) {
return Boolean(databaseBuilderState
.getChildNodes(node, treeData)
?.find((s) => s.isChecked === true));
}
return false;
};
const getChildNodes = (node) => databaseBuilderState
.getChildNodes(node, treeData)
?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
const toggleCheckedNode = (node) => {
databaseBuilderState.toggleCheckedNode(node, treeData);
};
return (_jsx(TreeView, { components: {
TreeNodeContainer: DatabaseBuilderTreeNodeContainer,
}, innerProps: {
toggleCheckedNode,
isPartiallySelected,
}, treeData: treeData, onNodeSelect: onNodeSelect, getChildNodes: getChildNodes }));
});
export const DatabaseBuilder = observer((props) => {
const { databaseBuilderState, isReadOnly } = props;
const applicationStore = useApplicationStore();
const buildDb = applicationStore.guardUnhandledError(() => flowResult(databaseBuilderState.buildDatabaseWithTreeData()));
const saveOrUpdateDatabase = applicationStore.guardUnhandledError(() => flowResult(databaseBuilderState.createOrUpdateDatabase()));
const closeModal = () => {
databaseBuilderState.setShowModal(false);
};
const isExecutingAction = databaseBuilderState.isBuildingDatabase ||
databaseBuilderState.isSavingDatabase;
useEffect(() => {
flowResult(databaseBuilderState.fetchSchemaDefinitions()).catch(applicationStore.alertUnhandledError);
}, [databaseBuilderState, applicationStore]);
const changeValue = (event) => {
if (!databaseBuilderState.currentDatabase) {
const stringValue = event.target.value;
const updatedValue = stringValue ? stringValue : undefined;
databaseBuilderState.setTargetDatabasePath(updatedValue ?? '');
}
};
return (_jsx(Dialog, { open: databaseBuilderState.showModal, onClose: closeModal, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs("div", { className: "modal modal--dark database-builder", children: [_jsx("div", { className: "database-builder__heading", children: _jsx("div", { className: "database-builder__heading__label", children: "Build Database" }) }), _jsxs("div", { className: "database-builder__content", children: [_jsx(PanelLoadingIndicator, { isLoading: isExecutingAction }), _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { size: 450, children: _jsxs("div", { className: "database-builder__config", children: [_jsx("div", { className: "panel__header", children: _jsx("div", { className: "panel__header__title", children: _jsx("div", { className: "panel__header__title__label", children: "database explorer" }) }) }), _jsxs("div", { className: "panel__content database-builder__config__content", children: [_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: capitalize('target database path') }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: 'path of target database' }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, disabled: isReadOnly ||
Boolean(databaseBuilderState.currentDatabase), value: databaseBuilderState.currentDatabase?.path ??
databaseBuilderState.targetDatabasePath, onChange: changeValue })] }), databaseBuilderState.treeData && (_jsx(DatabaseBuilderExplorer, { treeData: databaseBuilderState.treeData, isReadOnly: false, databaseBuilderState: databaseBuilderState }))] })] }) }), _jsx(ResizablePanelSplitter, {}), _jsx(ResizablePanel, { children: _jsxs("div", { className: "panel database-builder__generated", children: [_jsxs("div", { className: "panel__header", children: [_jsx("div", { className: "panel__header__title", children: _jsx("div", { className: "panel__header__title__label", children: "builder" }) }), _jsxs("div", { className: "panel__header__actions", children: [_jsx("button", { className: "panel__header__action", disabled: isReadOnly || isExecutingAction, tabIndex: -1, onClick: buildDb, title: 'Build Database...', children: _jsx(FireIcon, {}) }), _jsx("button", { className: "panel__header__action", disabled: isReadOnly || isExecutingAction, tabIndex: -1, onClick: saveOrUpdateDatabase, title: databaseBuilderState.currentDatabase
? 'Update database...'
: 'Import database...', children: _jsx(SaveIcon, {}) })] })] }), _jsx("div", { className: "panel__content", children: _jsx(StudioTextInputEditor, { language: EDITOR_LANGUAGE.PURE, inputValue: databaseBuilderState.databaseGrammarCode, isReadOnly: true }) })] }) })] })] })] }) }));
});
//# sourceMappingURL=DatabaseBuilder.js.map