@finos/legend-application-studio
Version:
Legend Studio application core
78 lines • 7.78 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 { Fragment } from 'react';
import { observer } from 'mobx-react-lite';
import { flowResult } from 'mobx';
import { guaranteeNonNullable } from '@finos/legend-shared';
import { ResizablePanelGroup, ResizablePanel, ResizablePanelSplitter, ResizablePanelSplitterLine, clsx, TreeView, BlankPanelContent, PanelLoadingIndicator, RefreshIcon, ChevronDownIcon, ChevronRightIcon, FolderOpenIcon, FolderIcon, FileCodeIcon, PanelContent, PanelHeader, PanelHeaderActionItem, PanelHeaderActions, Panel, } from '@finos/legend-art';
import { FileSystem_Directory, FileSystem_File, getFileSystemChildNodes, } from '../../../../stores/editor/utils/FileSystemTreeUtils.js';
import { useApplicationStore } from '@finos/legend-application';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { getEditorLanguageForFormat, getTextContent, } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
export const FileSystemTreeNodeContainer = (props) => {
const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
const { selectedNode } = innerProps;
const isSelected = selectedNode === node;
const isDirectory = node.fileNode instanceof FileSystem_Directory;
const expandIcon = !isDirectory ? (_jsx("div", {})) : node.isOpen ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronRightIcon, {}));
const iconPackageColor = 'color--generated';
const nodeIcon = isDirectory ? (node.isOpen ? (_jsx("div", { className: iconPackageColor, children: _jsx(FolderOpenIcon, {}) })) : (_jsx("div", { className: iconPackageColor, children: _jsx(FolderIcon, {}) }))) : (_jsx("div", { className: "icon", children: _jsx(FileCodeIcon, {}) }));
const selectNode = (event) => onNodeSelect?.(node);
return (_jsxs("div", { className: clsx('tree-view__node__container generation-result-viewer__explorer__package-tree__node__container', {
'generation-result-viewer__explorer__package-tree__node__container--selected': isSelected,
}), onClick: selectNode, style: {
paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
display: 'flex',
}, children: [_jsxs("div", { className: "tree-view__node__icon generation-result-viewer__explorer__package-tree__node__icon", children: [_jsx("div", { className: "generation-result-viewer__explorer__package-tree__node__icon__expand", children: expandIcon }), _jsx("div", { className: "generation-result-viewer__explorer__package-tree__node__icon__type", children: nodeIcon })] }), _jsx("button", { className: "tree-view__node__label generation-result-viewer__explorer__package-tree__node__label", tabIndex: -1, title: node.fileNode.path, children: node.label })] }));
};
export const FileSystemTree = observer((props) => {
const { directoryTreeData, onNodeSelect, getFileElementTreeChildNodes, selectedNode, } = props;
return (_jsx(TreeView, { components: {
TreeNodeContainer: FileSystemTreeNodeContainer,
}, treeData: directoryTreeData, onNodeSelect: onNodeSelect, getChildNodes: getFileElementTreeChildNodes, innerProps: {
selectedNode: selectedNode,
} }));
});
export const FileSystemExplorer = observer((props) => {
const { generatedFileState } = props;
const fileSystemState = generatedFileState.fileSystemState;
const treeData = guaranteeNonNullable(fileSystemState.directoryTreeData);
const onNodeSelect = (node) => fileSystemState.onTreeNodeSelect(node, treeData);
const getMappingElementTreeChildNodes = (node) => getFileSystemChildNodes(node, treeData);
if (!treeData.nodes.size) {
return _jsx(BlankPanelContent, { children: "No content" });
}
return (_jsx("div", { className: "generation-result-viewer__explorer__content", children: _jsx(FileSystemTree, { selectedNode: fileSystemState.selectedNode, directoryTreeData: treeData, onNodeSelect: onNodeSelect, getFileElementTreeChildNodes: getMappingElementTreeChildNodes }) }));
});
export const FileSystemViewer = observer((props) => {
const { generatedFileState } = props;
const applicationStore = useApplicationStore();
const selectedNode = generatedFileState.fileSystemState.selectedNode;
const fileNode = selectedNode?.fileNode;
const regenerate = applicationStore.guardUnhandledError(() => flowResult(generatedFileState.generate()));
const extraFileGenerationResultViewerActions = fileNode instanceof FileSystem_File
? generatedFileState.editorStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraFileGenerationResultViewerActionConfigurations?.() ??
[])
.map((config) => (_jsx(Fragment, { children: config.renderer(generatedFileState) }, config.key)))
: null;
return (_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { size: 250, minSize: 250, children: _jsx("div", { className: "generation-result-viewer__side-bar", children: _jsxs(Panel, { className: "generation-result-viewer__explorer", children: [_jsx(PanelHeader, { title: "result", children: _jsx(PanelHeaderActions, { children: _jsx(PanelHeaderActionItem, { className: clsx('generation-result-viewer__regenerate-btn', {
'generation-result-viewer__regenerate-btn--loading': generatedFileState.generatingAction.isInProgress,
}), disabled: generatedFileState.generatingAction.isInProgress, onClick: regenerate, title: "Regenerate", children: _jsx(RefreshIcon, {}) }) }) }), _jsxs(PanelContent, { children: [_jsx(PanelLoadingIndicator, { isLoading: generatedFileState.generatingAction.isInProgress }), Boolean(generatedFileState.fileSystemState.directoryTreeData) && (_jsx(FileSystemExplorer, { generatedFileState: generatedFileState })), Boolean(!generatedFileState.fileSystemState.directoryTreeData) && (_jsx(BlankPanelContent, { children: "Generation result not available" }))] })] }) }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { children: _jsxs("div", { className: "panel generation-result-viewer__file", children: [_jsxs("div", { className: "panel__header", children: [fileNode && !(fileNode instanceof FileSystem_Directory) && (_jsxs("div", { className: "panel__header__title", children: [_jsx("div", { className: "panel__header__title__label", children: "file" }), _jsx("div", { className: "panel__header__title__content generation-result-viewer__file__header__name", children: fileNode.name })] })), _jsx("div", { className: "panel__header__actions", children: extraFileGenerationResultViewerActions })] }), _jsxs(PanelContent, { children: [fileNode instanceof FileSystem_File && (_jsx(CodeEditor, { inputValue: getTextContent(fileNode.content, fileNode.format), isReadOnly: true, language: getEditorLanguageForFormat(fileNode.format) })), !(fileNode instanceof FileSystem_File) && (_jsx(BlankPanelContent, { children: "No file selected" }))] })] }) })] }));
});
//# sourceMappingURL=FileSystemViewer.js.map