@finos/legend-application-studio
Version:
Legend Studio application core
77 lines • 5.37 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 { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { clsx, ChevronUpIcon, ChevronDownIcon, XIcon, PanelContent, Badge, PanelHeader, PanelHeaderActions, PanelHeaderActionItem, SparkleIcon, } from '@finos/legend-art';
import { ConsolePanel } from './ConsolePanel.js';
import { PANEL_MODE } from '../../../stores/editor/EditorConfig.js';
import { isNonNullable } from '@finos/legend-shared';
import { DevToolPanel } from './DevToolPanel.js';
import { useEditorStore } from '../EditorStoreProvider.js';
import { ProblemsPanel } from './ProblemsPanel.js';
import { SQLPlaygroundPanel } from './SQLPlaygroundPanel.js';
import { GraphEditFormModeState } from '../../../stores/editor/GraphEditFormModeState.js';
export const PanelGroupItemExperimentalBadge = () => (_jsx("div", { className: "panel-group__header__tab__experimental-badge", title: "This is an experimental feature", children: _jsx(SparkleIcon, {}) }));
export const PanelGroup = observer(() => {
const editorStore = useEditorStore();
const changeMode = (mode) => () => editorStore.setActivePanelMode(mode);
const closePanel = () => editorStore.panelGroupDisplayState.toggle();
const toggleExpandPanelGroup = () => editorStore.panelGroupDisplayState.toggleMaximize();
const tabs = {
[PANEL_MODE.CONSOLE]: {
mode: PANEL_MODE.CONSOLE,
name: 'CONSOLE',
icon: undefined,
isVisible: true,
experimental: true,
},
[PANEL_MODE.DEV_TOOL]: {
mode: PANEL_MODE.DEV_TOOL,
name: 'DEVELOPER TOOLS',
icon: undefined,
isVisible: true,
},
[PANEL_MODE.PROBLEMS]: {
mode: PANEL_MODE.PROBLEMS,
name: 'PROBLEMS',
icon: undefined,
isVisible: true,
counter: editorStore.graphState.problems.length,
},
[PANEL_MODE.SQL_PLAYGROUND]: {
mode: PANEL_MODE.SQL_PLAYGROUND,
name: 'SQL PLAYGROUND',
icon: undefined,
isVisible: editorStore.graphEditorMode instanceof GraphEditFormModeState,
experimental: true,
},
};
const tabsToShow = Object.values(PANEL_MODE).filter((tab) => isNonNullable(tabs[tab]) && tabs[tab].isVisible);
const isTabVisible = (tabType) => editorStore.activePanelMode === tabType && tabsToShow.includes(tabType);
useEffect(() => {
if (!tabsToShow.includes(editorStore.activePanelMode)) {
editorStore.setActivePanelMode(PANEL_MODE.CONSOLE);
}
}, [editorStore, tabsToShow, editorStore.activePanelMode]);
return (_jsxs("div", { className: "panel panel-group", children: [_jsxs(PanelHeader, { children: [_jsx("div", { className: "panel-group__header__tabs", children: tabsToShow
.map((tab) => tabs[tab])
.filter(isNonNullable)
.map((tab) => (_jsxs("button", { tabIndex: -1, className: clsx('panel-group__header__tab', {
'panel-group__header__tab--active': editorStore.activePanelMode === tab.mode,
}), onClick: changeMode(tab.mode), children: [tab.icon && (_jsx("div", { className: "panel-group__header__tab__icon", children: tab.icon })), _jsxs("div", { className: "panel-group__header__tab__title", children: [tab.name, tab.counter !== undefined && (_jsx(Badge, { title: tab.counter.toString(), className: "panel-group__header__tab__title__problem__count" }))] }), tab.experimental && _jsx(PanelGroupItemExperimentalBadge, {})] }, tab.mode))) }), _jsxs(PanelHeaderActions, { children: [_jsx(PanelHeaderActionItem, { className: "panel-group__header__action", onClick: toggleExpandPanelGroup, title: "Toggle expand/collapse", children: editorStore.panelGroupDisplayState.isMaximized ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronUpIcon, {})) }), _jsx(PanelHeaderActionItem, { className: "panel-group__header__action", onClick: closePanel, title: "Close", children: _jsx(XIcon, {}) })] })] }), _jsxs(PanelContent, { children: [isTabVisible(PANEL_MODE.PROBLEMS) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(ProblemsPanel, {}) })), isTabVisible(PANEL_MODE.CONSOLE) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(ConsolePanel, {}) })), isTabVisible(PANEL_MODE.DEV_TOOL) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(DevToolPanel, {}) })), isTabVisible(PANEL_MODE.SQL_PLAYGROUND) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(SQLPlaygroundPanel, {}) }))] })] }));
});
//# sourceMappingURL=PanelGroup.js.map