@finos/legend-studio
Version:
69 lines • 7.54 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } 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 { EDITOR_LANGUAGE } from '@finos/legend-application';
import { BlankPanelPlaceholder, clsx, ContextMenu, Dialog, MenuContent, MenuContentItem, PlusIcon, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, ResizablePanelSplitterLine, } from '@finos/legend-art';
import { observer } from 'mobx-react-lite';
import { forwardRef, useState } from 'react';
import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
const RelationalTableIdentifierModal = observer((props) => {
const { isReadOnly, dataState } = props;
const tableIdentifierState = dataState.tableIdentifierState;
const editableTable = tableIdentifierState.table;
const closeModal = () => dataState.closeModal();
const handleSubmit = () => {
tableIdentifierState.handleSubmit();
closeModal();
};
const changeTableValue = (event) => {
tableIdentifierState.setTableName(event.target.value);
};
const changeSchemaValue = (event) => {
tableIdentifierState.setSchemaName(event.target.value);
};
return (_jsx(Dialog, { open: dataState.showTableIdentifierModal, onClose: closeModal, classes: { container: 'search-modal__container' }, PaperProps: { classes: { root: 'search-modal__inner-container' } }, children: _jsxs("form", { onSubmit: handleSubmit, className: "modal modal--dark search-modal", children: [_jsxs("div", { className: "modal__title", children: [editableTable
? 'Rename Relational Data Table'
: 'Add Relational Data Table', ' '] }), _jsxs("div", { className: "relational-data-editor__identifier", children: [_jsx("div", { className: "relational-data-editor__identifier__values", children: _jsx("input", { className: "panel__content__form__section__input", disabled: isReadOnly, placeholder: 'schemaName', value: tableIdentifierState.schemaName, onChange: changeSchemaValue }) }), _jsx("div", { className: "relational-data-editor__identifier__values", children: _jsx("input", { className: "relational-data-editor__identifier__values panel__content__form__section__input", disabled: isReadOnly, placeholder: 'tableName', value: tableIdentifierState.tableName, onChange: changeTableValue }) })] }), _jsx("div", { className: "search-modal__actions", children: _jsx("button", { className: "btn btn--dark", disabled: tableIdentifierState.isEditingDisabled || isReadOnly, children: editableTable ? 'Rename' : 'Add' }) })] }) }));
});
const RelationalCSVTableContextMenu = observer(forwardRef(function TestContainerContextMenu(props, ref) {
const { dataState, table } = props;
const rename = () => dataState.openIdentifierModal(table);
const remove = () => dataState.deleteTable(table);
return (_jsxs(MenuContent, { ref: ref, children: [_jsx(MenuContentItem, { onClick: rename, children: "Rename" }), _jsx(MenuContentItem, { onClick: remove, children: "Delete" })] }));
}));
export const RelationalCSVDataEditor = observer((props) => {
const { dataState, isReadOnly } = props;
const currentTableState = dataState.selectedTable;
const openIdentifierModal = () => dataState.openIdentifierModal();
const changeSelectedTable = (table) => {
dataState.changeSelectedTable(table);
};
const updateTableValues = (val) => {
currentTableState?.updateTableValues(val);
};
const [selectedTableFromContextMenu, setSelectedTableFromContextMenu] = useState(undefined);
const onContextMenuOpen = (table) => setSelectedTableFromContextMenu(table);
const onContextMenuClose = () => setSelectedTableFromContextMenu(undefined);
const isTableActive = (table) => currentTableState?.table === table;
return (_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { minSize: 30, size: 300, children: _jsxs("div", { className: "relational-data-editor", children: [_jsxs("div", { className: "relational-data-editor__header", children: [_jsx("div", { className: "relational-data-editor__header__title", children: _jsx("div", { className: "relational-data-editor__header__title__label", children: "Relational Table Explorer" }) }), _jsx("div", { className: "relational-data-editor__header__actions", children: _jsx("button", { className: "relational-data-editor__header__action", onClick: openIdentifierModal, disabled: isReadOnly, tabIndex: -1, title: 'Add Relational Table Data', children: _jsx(PlusIcon, {}) }) })] }), _jsx(MenuContent, { className: "relational-data-editor__content", children: dataState.embeddedData.tables.map((_table) => (_jsx(ContextMenu, { className: clsx('relational-data-editor-explorer__item', {
'relational-data-editor-explorer__item--selected-from-context-menu': !isTableActive(_table) &&
selectedTableFromContextMenu ===
currentTableState?.table,
}, {
'relational-data-editor-explorer__item--active': isTableActive(_table),
}), disabled: isReadOnly, content: _jsx(RelationalCSVTableContextMenu, { dataState: dataState, table: _table }), menuProps: { elevation: 7 }, onOpen: () => onContextMenuOpen(_table), onClose: () => onContextMenuClose(), children: _jsx("button", { className: clsx('relational-data-editor-explorer__item__label'), onClick: () => changeSelectedTable(_table), tabIndex: -1, children: _jsx("div", { className: "relational-data-editor-explorer__item__label__text", children: `${_table.schema}.${_table.table}` }) }) }, `${_table.table}.${_table.schema}`))) })] }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { children: _jsxs("div", { className: "relational-data-editor", children: [_jsx("div", { className: "relational-data-editor__header", children: _jsx("div", { className: "relational-data-editor__header__title", children: _jsx("div", { className: "relational-data-editor__header__title__label", children: "CSV Values" }) }) }), _jsxs("div", { className: "relational-data-editor__content", children: [currentTableState && (_jsx("div", { className: "relational-data-editor__values", children: _jsx(StudioTextInputEditor, { inputValue: currentTableState.table.values, updateInput: updateTableValues, isReadOnly: isReadOnly, language: EDITOR_LANGUAGE.TEXT }) })), !currentTableState && (_jsx(BlankPanelPlaceholder, { onClick: () => openIdentifierModal(), placeholderText: "Add a relational data table", clickActionType: "add", tooltipText: 'Click to add new relational data table' })), dataState.showTableIdentifierModal && (_jsx(RelationalTableIdentifierModal, { dataState: dataState, isReadOnly: isReadOnly }))] })] }) })] }));
});
//# sourceMappingURL=RelationalCSVDataEditor.js.map