@finos/legend-studio
Version:
166 lines • 11.1 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, Fragment } from 'react';
import { observer } from 'mobx-react-lite';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { useResizeDetector } from 'react-resize-detector';
import { EditPanel } from '../editor/edit-panel/EditPanel.js';
import { GrammarTextEditor } from '../editor/edit-panel/GrammarTextEditor.js';
import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
import { ACTIVITY_MODE, LEGEND_STUDIO_HOTKEY, LEGEND_STUDIO_HOTKEY_MAP, } from '../../stores/EditorConfig.js';
import { clsx, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, getControlledResizablePanelProps, RepoIcon, CodeBranchIcon, HackerIcon, WrenchIcon, FileTrayIcon, AssistantIcon, } from '@finos/legend-art';
import { isNonNullable } from '@finos/legend-shared';
import { GlobalHotKeys } from 'react-hotkeys';
import { useProjectViewerStore, withProjectViewerStore, } from './ProjectViewerStoreProvider.js';
import { generateSetupRoute, } from '../../stores/LegendStudioRouter.js';
import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
import { flowResult } from 'mobx';
import { useEditorStore, withEditorStore, } from '../editor/EditorStoreProvider.js';
import { useApplicationStore } from '@finos/legend-application';
import { ActivityBarMenu, } from '../editor/ActivityBar.js';
import { Explorer } from '../editor/side-bar/Explorer.js';
import { ProjectOverview } from '../editor/side-bar/ProjectOverview.js';
import { WorkflowManager } from '../editor/side-bar/WorkflowManager.js';
import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
const ProjectViewerStatusBar = observer(() => {
const params = useParams();
const viewerStore = useProjectViewerStore();
const editorStore = useEditorStore();
const applicationStore = useLegendStudioApplicationStore();
const latestVersion = viewerStore.onLatestVersion;
const currentRevision = viewerStore.onCurrentRevision;
const extraSDLCInfo = params.revisionId ?? params.versionId ?? 'HEAD';
const projectId = params.projectId;
const currentProject = editorStore.sdlcState.currentProject;
const versionBehindProjectHead = viewerStore.currentRevision &&
viewerStore.version &&
params.versionId &&
viewerStore.currentRevision.id !== viewerStore.version.revisionId;
const description = `${latestVersion
? versionBehindProjectHead
? 'latest behind project'
: 'latest'
: currentRevision
? 'current'
: ''}`;
const handleTextModeClick = applicationStore.guardUnhandledError(() => flowResult(editorStore.toggleTextMode()));
const toggleAssistant = () => applicationStore.assistantService.toggleAssistant();
return (_jsxs("div", { "data-testid": LEGEND_STUDIO_TEST_ID.STATUS_BAR, className: "editor__status-bar project-viewer__status-bar", children: [_jsx("div", { className: "editor__status-bar__left", children: currentProject && (_jsxs("div", { className: "editor__status-bar__workspace", children: [_jsx("div", { className: "editor__status-bar__workspace__icon", children: _jsx(CodeBranchIcon, {}) }), _jsx("div", { className: "editor__status-bar__workspace__project", children: _jsx(Link, { to: generateSetupRoute(projectId), children: currentProject.name }) }), "/", _jsx("div", { className: "editor__status-bar__workspace__workspace", children: extraSDLCInfo }), description && (_jsxs("div", { className: "editor__status-bar__workspace__workspace", children: ["(", description, ")"] }))] })) }), _jsxs("div", { className: "editor__status-bar__right", children: [_jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
'editor__status-bar__action__toggler--active': editorStore.isInGrammarTextMode,
}), onClick: handleTextModeClick, tabIndex: -1, title: 'Toggle text mode (F8)', children: _jsx(HackerIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
'editor__status-bar__action__toggler--active': !applicationStore.assistantService.isHidden,
}), onClick: toggleAssistant, tabIndex: -1, title: "Toggle assistant", children: _jsx(AssistantIcon, {}) })] })] }));
});
const ProjectViewerSideBar = observer(() => {
const viewerStore = useProjectViewerStore();
const editorStore = viewerStore.editorStore;
const renderSideBar = () => {
switch (editorStore.activeActivity) {
case ACTIVITY_MODE.EXPLORER:
return _jsx(Explorer, {});
case ACTIVITY_MODE.PROJECT_OVERVIEW:
return _jsx(ProjectOverview, {});
case ACTIVITY_MODE.WORKFLOW_MANAGER:
return viewerStore.workflowManagerState ? (_jsx(WorkflowManager, { workflowManagerState: viewerStore.workflowManagerState })) : null;
default:
return null;
}
};
return (_jsx("div", { className: "side-bar", children: _jsx("div", { className: "side-bar__view", children: renderSideBar() }) }));
});
const ProjectViewerActivityBar = observer(() => {
const viewerStore = useProjectViewerStore();
const editorStore = viewerStore.editorStore;
const changeActivity = (activity) => () => editorStore.setActiveActivity(activity);
// tabs
const activities = [
{
mode: ACTIVITY_MODE.EXPLORER,
title: 'Explorer (Ctrl + Shift + X)',
icon: _jsx(FileTrayIcon, {}),
},
!editorStore.isInConflictResolutionMode && {
mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
title: 'Project',
icon: (_jsx("div", { className: "activity-bar__project-overview-icon", children: _jsx(RepoIcon, {}) })),
},
viewerStore.workflowManagerState && {
mode: ACTIVITY_MODE.WORKFLOW_MANAGER,
title: 'WORKFLOW MANAGER',
icon: _jsx(WrenchIcon, {}),
},
].filter((activity) => Boolean(activity));
return (_jsxs("div", { className: "activity-bar", children: [_jsx(ActivityBarMenu, {}), _jsx("div", { className: "activity-bar__items", children: activities.map((activity) => (_jsx("button", { className: clsx('activity-bar__item', {
'activity-bar__item--active': editorStore.sideBarDisplayState.isOpen &&
editorStore.activeActivity === activity.mode,
}), onClick: changeActivity(activity.mode), tabIndex: -1, title: `${activity.title}${activity.info ? ` - ${activity.info}` : ''}`, children: activity.icon }, activity.mode))) })] }));
});
export const ProjectViewer = withEditorStore(withProjectViewerStore(observer(() => {
const params = useParams();
const viewerStore = useProjectViewerStore();
const editorStore = useEditorStore();
const applicationStore = useApplicationStore();
const allowOpeningElement = editorStore.sdlcState.currentProject &&
editorStore.graphManagerState.graphBuildState.hasSucceeded;
const resizeSideBar = (handleProps) => editorStore.sideBarDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
.width);
// Extensions
const extraEditorExtensionComponents = editorStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraEditorExtensionComponentRendererConfigurations?.() ??
[])
.filter(isNonNullable)
.map((config) => (_jsx(Fragment, { children: config.renderer(editorStore) }, config.key)));
// Resize
const { ref, width, height } = useResizeDetector();
// Hotkeys
const keyMap = {
[LEGEND_STUDIO_HOTKEY.OPEN_ELEMENT]: [
LEGEND_STUDIO_HOTKEY_MAP.OPEN_ELEMENT,
],
[LEGEND_STUDIO_HOTKEY.TOGGLE_TEXT_MODE]: [
LEGEND_STUDIO_HOTKEY_MAP.TOGGLE_TEXT_MODE,
],
};
const handlers = {
[LEGEND_STUDIO_HOTKEY.OPEN_ELEMENT]: editorStore.createGlobalHotKeyAction(() => editorStore.searchElementCommandState.open()),
[LEGEND_STUDIO_HOTKEY.TOGGLE_TEXT_MODE]: editorStore.createGlobalHotKeyAction(() => {
flowResult(editorStore.toggleTextMode()).catch(applicationStore.alertUnhandledError);
}),
};
useEffect(() => {
if (ref.current) {
editorStore.auxPanelDisplayState.setMaxSize(ref.current.offsetHeight);
}
}, [ref, editorStore, width, height]);
useEffect(() => {
viewerStore.internalizeEntityPath(params);
}, [viewerStore, params]);
// NOTE: since we internalize the entity path in the route, we should not re-initialize the graph
// on the second call when we remove entity path from the route
useEffect(() => {
flowResult(viewerStore.initialize(params)).catch(applicationStore.alertUnhandledError);
}, [applicationStore, viewerStore, params]);
return (_jsx(DndProvider, { backend: HTML5Backend, children: _jsx("div", { className: "app__page", children: _jsx("div", { className: "editor viewer", children: _jsxs(GlobalHotKeys, { keyMap: keyMap, handlers: handlers, children: [_jsxs("div", { className: "editor__body", children: [_jsx(ProjectViewerActivityBar, {}), _jsx("div", { ref: ref, className: "editor__content-container", children: _jsx("div", { className: "editor__content", children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { ...getControlledResizablePanelProps(editorStore.sideBarDisplayState.size === 0, {
onStopResize: resizeSideBar,
size: editorStore.sideBarDisplayState.size,
}), direction: 1, children: _jsx(ProjectViewerSideBar, {}) }), _jsx(ResizablePanelSplitter, {}), _jsxs(ResizablePanel, { minSize: 300, children: [editorStore.isInFormMode && _jsx(EditPanel, {}), editorStore.isInGrammarTextMode && (_jsx(GrammarTextEditor, {}))] })] }) }) })] }), _jsx(ProjectViewerStatusBar, {}), extraEditorExtensionComponents, allowOpeningElement && _jsx(ProjectSearchCommand, {})] }) }) }) }));
})));
//# sourceMappingURL=ProjectViewer.js.map