@finos/legend-application-pure-ide
Version:
Legend Pure IDE application core
79 lines • 5.42 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 { Console } from './TerminalPanel.js';
import { PANEL_MODE } from '../../stores/PureIDEConfig.js';
import { TextSearchPanel } from './TextSearchPanel.js';
import { TestRunnerPanel } from './TestRunnerPanel.js';
import { isNonNullable } from '@finos/legend-shared';
import { ChevronDownIcon, ChevronUpIcon, clsx, FlaskIcon, Panel, PanelContent, PanelHeader, ReferencesIcon, SearchIcon, TerminalIcon, WandIcon, XIcon, } from '@finos/legend-art';
import { usePureIDEStore } from '../PureIDEStoreProvider.js';
import { CodeFixSuggestionsPanel } from './CodeFixSuggestionsPanel.js';
import { ReferenceUsagePanel } from './ReferenceUsagePanel.js';
export const PanelGroup = observer(() => {
const ideStore = usePureIDEStore();
const changeMode = (mode) => () => ideStore.setActivePanelMode(mode);
const closePanel = () => ideStore.panelGroupDisplayState.toggle();
const toggleExpandPanel = () => ideStore.panelGroupDisplayState.toggleMaximize();
const tabs = {
[PANEL_MODE.TERMINAL]: {
mode: PANEL_MODE.TERMINAL,
name: 'TERMINAL',
icon: (_jsx(TerminalIcon, { className: "panel-group__header__tab__icon--terminal" })),
isVisible: true,
},
[PANEL_MODE.SEARCH]: {
mode: PANEL_MODE.SEARCH,
name: 'SEARCH',
icon: _jsx(SearchIcon, { className: "panel-group__header__tab__icon--search" }),
isVisible: true,
},
[PANEL_MODE.TEST_RUNNER]: {
mode: PANEL_MODE.TEST_RUNNER,
name: 'TEST',
icon: _jsx(FlaskIcon, { className: "panel-group__header__tab__icon--test" }),
isVisible: true,
},
[PANEL_MODE.REFERENCES]: {
mode: PANEL_MODE.REFERENCES,
name: 'REFERENCES',
icon: (_jsx(ReferencesIcon, { className: "panel-group__header__tab__icon--references" })),
isVisible: true,
},
[PANEL_MODE.CODE_FIX_SUGGESTION]: {
mode: PANEL_MODE.CODE_FIX_SUGGESTION,
name: 'SUGGESTIONS',
icon: _jsx(WandIcon, { className: "panel-group__header__tab__icon--suggestion" }),
isVisible: Boolean(ideStore.codeFixSuggestion),
},
};
const tabsToShow = Object.values(PANEL_MODE).filter((tab) => isNonNullable(tabs[tab]) && tabs[tab].isVisible);
const isTabVisible = (tabType) => ideStore.activePanelMode === tabType && tabsToShow.includes(tabType);
useEffect(() => {
if (!tabsToShow.includes(ideStore.activePanelMode)) {
ideStore.setActivePanelMode(PANEL_MODE.TERMINAL);
}
}, [ideStore, tabsToShow, ideStore.activePanelMode]);
return (_jsxs(Panel, { className: "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': ideStore.activePanelMode === tab.mode,
}), onClick: changeMode(tab.mode), children: [_jsx("div", { className: "panel-group__header__tab__icon", children: tab.icon }), _jsx("div", { className: "panel-group__header__tab__title", children: tab.name })] }, tab.mode))) }), _jsxs("div", { className: "panel-group__header__actions", children: [_jsx("button", { className: "panel-group__header__action", onClick: toggleExpandPanel, tabIndex: -1, title: "Toggle Expand/Collapse", children: ideStore.panelGroupDisplayState.isMaximized ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronUpIcon, {})) }), _jsx("button", { className: "panel-group__header__action", onClick: closePanel, tabIndex: -1, title: "Close", children: _jsx(XIcon, {}) })] })] }), _jsxs(PanelContent, { children: [isTabVisible(PANEL_MODE.TERMINAL) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(Console, {}) })), isTabVisible(PANEL_MODE.SEARCH) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(TextSearchPanel, {}) })), isTabVisible(PANEL_MODE.TEST_RUNNER) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(TestRunnerPanel, {}) })), isTabVisible(PANEL_MODE.CODE_FIX_SUGGESTION) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(CodeFixSuggestionsPanel, {}) })), isTabVisible(PANEL_MODE.REFERENCES) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(ReferenceUsagePanel, {}) }))] })] }));
});
//# sourceMappingURL=PanelGroup.js.map