@finos/legend-studio
Version:
166 lines • 13.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { observer } from 'mobx-react-lite';
import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
import { CheckIcon, clsx, DropdownMenu, RepoIcon, MenuContent, MenuContentItem, MenuContentItemIcon, MenuContentItemLabel, GitPullRequestIcon, GitMergeIcon, CloudDownloadIcon, CogIcon, CodeBranchIcon, EmptyClockIcon, WrenchIcon, FileTrayIcon, MenuIcon, MenuContentDivider, FlaskIcon, } from '@finos/legend-art';
import { useEditorStore } from './EditorStoreProvider.js';
import { forwardRef, useState } from 'react';
import { VIRTUAL_ASSISTANT_TAB } from '@finos/legend-application';
import { LegendStudioAppInfo } from '../LegendStudioAppInfo.js';
import { generateSetupRoute } from '../../stores/LegendStudioRouter.js';
import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
const SettingsMenu = observer(forwardRef(function SettingsMenu(props, ref) {
const editorStore = useEditorStore();
const toggleDevTool = () => {
editorStore.setDevTool(!editorStore.isDevToolEnabled);
};
return (_jsx(MenuContent, { ref: ref, className: "activity-bar__setting__menu", children: _jsxs(MenuContentItem, { onClick: toggleDevTool, children: [_jsx(MenuContentItemIcon, { children: editorStore.isDevToolEnabled ? _jsx(CheckIcon, {}) : null }), _jsx(MenuContentItemLabel, { children: "Show Developer Tool" })] }) }));
}));
export const ActivityBarMenu = () => {
const applicationStore = useLegendStudioApplicationStore();
const appDocUrl = applicationStore.documentationService.url;
// menu
const [openMenuDropdown, setOpenMenuDropdown] = useState(false);
const showMenuDropdown = () => setOpenMenuDropdown(true);
const hideMenuDropdown = () => setOpenMenuDropdown(false);
// about modal
const [openAppInfo, setOpenAppInfo] = useState(false);
const showAppInfo = () => setOpenAppInfo(true);
const hideAppInfo = () => setOpenAppInfo(false);
// documentation
const goToDocumentation = () => {
if (appDocUrl) {
applicationStore.navigator.openNewWindow(appDocUrl);
}
};
// go to setup page
const goToSetupPage = () => applicationStore.navigator.openNewWindow(applicationStore.navigator.generateLocation(generateSetupRoute(undefined)));
// help
const openHelp = () => {
applicationStore.assistantService.setIsHidden(false);
applicationStore.assistantService.setIsOpen(true);
applicationStore.assistantService.setSelectedTab(VIRTUAL_ASSISTANT_TAB.SEARCH);
};
return (_jsxs(_Fragment, { children: [_jsx(DropdownMenu, { className: clsx('app__header__action', {
'menu__trigger--on-menu-open': openMenuDropdown,
}), onClose: hideMenuDropdown, menuProps: {
anchorOrigin: { vertical: 'top', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'left' },
elevation: 7,
}, content: _jsxs(MenuContent, { className: "app__header__menu", children: [_jsx(MenuContentItem, { className: "app__header__menu__item", onClick: showAppInfo, children: "About" }), _jsx(MenuContentItem, { className: "app__header__menu__item", onClick: openHelp, children: "Help..." }), _jsx(MenuContentItem, { className: "app__header__menu__item", disabled: !appDocUrl, onClick: goToDocumentation, children: "See Documentation" }), _jsx(MenuContentDivider, {}), _jsx(MenuContentItem, { className: "app__header__menu__item", onClick: goToSetupPage, children: "Back to Setup" })] }), children: _jsx("div", { className: "activity-bar__menu", children: _jsx("button", { className: "activity-bar__menu-item", tabIndex: -1, onClick: showMenuDropdown, title: "Menu", children: _jsx(MenuIcon, {}) }) }) }), _jsx(LegendStudioAppInfo, { open: openAppInfo, closeModal: hideAppInfo })] }));
};
export const ActivityBar = observer(() => {
const editorStore = useEditorStore();
const changeActivity = (activity) => () => editorStore.setActiveActivity(activity);
// local changes
const localChanges = editorStore.changeDetectionState.workspaceLocalLatestRevisionState.changes
.length;
const localChangesDisplayLabel = localChanges > 99 ? '99+' : localChanges;
const localChangesIndicatorStatusIcon = editorStore.graphManagerState.graphBuildState.hasFailed ||
editorStore.changeDetectionState.initState.hasFailed ? (_jsx("div", {})) : !editorStore.changeDetectionState.initState.hasSucceeded ||
editorStore.changeDetectionState.workspaceLocalLatestRevisionState
.isBuildingEntityHashesIndex ||
editorStore.localChangesState.pushChangesState.isInProgress ? (_jsx("div", { className: "activity-bar__item__icon__indicator activity-bar__local-change-counter activity-bar__local-change-counter--waiting", "data-testid": LEGEND_STUDIO_TEST_ID.ACTIVITY_BAR_ITEM_ICON_INDICATOR, children: _jsx(EmptyClockIcon, {}) })) : localChanges ? (_jsx("div", { className: "activity-bar__item__icon__indicator activity-bar__local-change-counter", "data-testid": LEGEND_STUDIO_TEST_ID.ACTIVITY_BAR_ITEM_ICON_INDICATOR, children: localChangesDisplayLabel })) : (_jsx("div", {}));
// conflict resolution changes
const conflictResolutionChanges = editorStore.conflictResolutionState.conflicts.length +
editorStore.conflictResolutionState.changes.length;
const conflictResolutionConflicts = editorStore.conflictResolutionState.conflicts.length;
const conflictResolutionChangesDisplayLabel = conflictResolutionChanges > 99 ? '99+' : conflictResolutionChanges;
const conflictResolutionChangesIndicatorStatusIcon = !editorStore.isInConflictResolutionMode ? (_jsx("div", {})) : !editorStore.changeDetectionState.initState.hasSucceeded ||
editorStore.changeDetectionState.workspaceBaseRevisionState
.isBuildingEntityHashesIndex ? (_jsx("div", { className: "activity-bar__item__icon__indicator activity-bar__conflict-resolution-change-counter activity-bar__conflict-resolution-change-counter--waiting", "data-testid": LEGEND_STUDIO_TEST_ID.ACTIVITY_BAR_ITEM_ICON_INDICATOR, children: _jsx(EmptyClockIcon, {}) })) : conflictResolutionChanges ? (_jsx("div", { className: "activity-bar__item__icon__indicator activity-bar__conflict-resolution-change-counter", "data-testid": LEGEND_STUDIO_TEST_ID.ACTIVITY_BAR_ITEM_ICON_INDICATOR, children: conflictResolutionChangesDisplayLabel })) : (_jsx("div", {}));
// review changes
const reviewChanges = editorStore.changeDetectionState.aggregatedWorkspaceChanges.length;
const reviewChangesIndicatorStatusIcon = !reviewChanges ? (_jsx("div", {})) : !editorStore.changeDetectionState.initState.hasSucceeded ||
editorStore.changeDetectionState.workspaceBaseRevisionState
.isBuildingEntityHashesIndex ||
editorStore.changeDetectionState.workspaceLocalLatestRevisionState
.isBuildingEntityHashesIndex ? (_jsx("div", {})) : (_jsx("div", { className: "activity-bar__item__icon__indicator activity-bar__item__icon__indicator__dot activity-bar__item__icon__review-changes__indicator", "data-testid": LEGEND_STUDIO_TEST_ID.ACTIVITY_BAR_ITEM_ICON_INDICATOR }));
// project latest changes
const workspaceUpdateChanges = editorStore.changeDetectionState.aggregatedProjectLatestChanges.length;
const workspaceUpdatePotentialConflicts = editorStore.changeDetectionState.potentialWorkspaceUpdateConflicts.length;
const projectLatestChangesIndicatorStatusIcon = !workspaceUpdateChanges ? (_jsx("div", {})) : !editorStore.changeDetectionState.initState.hasSucceeded ||
editorStore.changeDetectionState.workspaceBaseRevisionState
.isBuildingEntityHashesIndex ||
editorStore.changeDetectionState.projectLatestRevisionState
.isBuildingEntityHashesIndex ? (_jsx("div", {})) : (_jsx("div", { className: `activity-bar__item__icon__indicator activity-bar__item__icon__indicator__dot activity-bar__item__icon__project-latest-changes__indicator ${workspaceUpdatePotentialConflicts
? 'activity-bar__item__icon__project-latest-changes__indicator--has-conflicts'
: ''}`, "data-testid": LEGEND_STUDIO_TEST_ID.ACTIVITY_BAR_ITEM_ICON_INDICATOR }));
// tabs
const activities = [
{
mode: ACTIVITY_MODE.EXPLORER,
title: 'Explorer (Ctrl + Shift + X)',
icon: _jsx(FileTrayIcon, { className: "activity-bar__explorer-icon" }),
},
!editorStore.isInConflictResolutionMode && {
mode: ACTIVITY_MODE.GLOBAL_TEST_RUNNER,
title: 'Global Test Runner',
icon: _jsx(FlaskIcon, {}),
},
!editorStore.isInConflictResolutionMode && {
mode: ACTIVITY_MODE.LOCAL_CHANGES,
title: 'Local Changes (Ctrl + Shift + G)',
info: localChanges ? `${localChanges} unpushed changes` : undefined,
icon: (_jsxs("div", { className: "activity-bar__local-change-icon activity-bar__item__icon-with-indicator", children: [_jsx(CodeBranchIcon, {}), localChangesIndicatorStatusIcon] })),
},
!editorStore.isInConflictResolutionMode && {
mode: ACTIVITY_MODE.WORKSPACE_UPDATER,
title: 'Update Workspace (Ctrl + Shift + U)',
info: workspaceUpdateChanges
? `Update available${workspaceUpdatePotentialConflicts ? ' with potential conflicts' : ''}`
: undefined,
icon: (_jsxs("div", { className: "activity-bar__workspace-updater-icon activity-bar__item__icon-with-indicator", children: [_jsx(CloudDownloadIcon, {}), projectLatestChangesIndicatorStatusIcon] })),
},
!editorStore.isInConflictResolutionMode && {
mode: ACTIVITY_MODE.WORKSPACE_REVIEW,
title: 'Review (Ctrl + Shift + M)',
info: reviewChanges ? `${reviewChanges} changes` : undefined,
icon: (_jsxs("div", { className: "activity-bar__review-icon activity-bar__item__icon-with-indicator", children: [_jsx(GitPullRequestIcon, {}), reviewChangesIndicatorStatusIcon] })),
},
editorStore.isInConflictResolutionMode && {
mode: ACTIVITY_MODE.CONFLICT_RESOLUTION,
title: 'Conflict Resolution',
info: conflictResolutionChanges
? `${conflictResolutionChanges} changes${conflictResolutionConflicts
? ` (${conflictResolutionConflicts} unresolved conflicts)`
: ''}`
: conflictResolutionChanges,
icon: (_jsxs("div", { className: "activity-bar__conflict-resolution-icon activity-bar__item__icon-with-indicator", children: [_jsx(GitMergeIcon, {}), conflictResolutionChangesIndicatorStatusIcon] })),
},
!editorStore.isInConflictResolutionMode && {
mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
title: 'Project',
icon: (_jsx("div", { className: "activity-bar__project-overview-icon", children: _jsx(RepoIcon, {}) })),
},
!editorStore.isInConflictResolutionMode && {
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))) }), _jsx(DropdownMenu, { className: "activity-bar__setting", content: _jsx(SettingsMenu, {}), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'bottom', horizontal: 'left' },
elevation: 7,
}, children: _jsx("button", { className: "activity-bar__item", tabIndex: -1, title: "Settings...", children: _jsx(CogIcon, {}) }) })] }));
});
//# sourceMappingURL=ActivityBar.js.map