@finos/legend-application-studio
Version:
Legend Studio application core
203 lines • 15.5 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, EDITOR_MODE, PANEL_MODE, USER_JOURNEYS, } from '../../stores/editor/EditorConfig.js';
import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
import { clsx, ControlledDropdownMenu, RepoIcon, MenuContent, MenuContentItem, MenuContentItemLabel, GitPullRequestIcon, GitMergeIcon, CloudDownloadIcon, CogIcon, CodeBranchIcon, EmptyClockIcon, WrenchIcon, FileTrayIcon, MenuIcon, MenuContentDivider, FlaskIcon, RobotIcon, WorkflowIcon, ReadMeIcon, } from '@finos/legend-art';
import { useEditorStore } from './EditorStoreProvider.js';
import { forwardRef, useEffect, useState } from 'react';
import { ReleaseLogManager, ReleaseNotesManager, VIRTUAL_ASSISTANT_TAB, } from '@finos/legend-application';
import { LegendStudioAppInfo } from '../LegendStudioAppInfo.js';
import { generateSetupRoute } from '../../__lib__/LegendStudioNavigation.js';
import { useLegendStudioApplicationStore } from '../LegendStudioFrameworkProvider.js';
import { ActivityBarItemExperimentalBadge, } from '@finos/legend-lego/application';
import { ShowcaseManagerState, openShowcaseManager, } from '../../stores/ShowcaseManagerState.js';
import { toggleShowcasePanel } from './ShowcaseSideBar.js';
const SettingsMenu = observer(forwardRef(function SettingsMenu(props, ref) {
const editorStore = useEditorStore();
const showDeveloperTool = () => {
editorStore.panelGroupDisplayState.open();
editorStore.setActivePanelMode(PANEL_MODE.DEV_TOOL);
};
return (_jsx(MenuContent, { ref: ref, className: "activity-bar__setting__menu", children: _jsx(MenuContentItem, { onClick: showDeveloperTool, children: _jsx(MenuContentItemLabel, { children: "Show Developer Tool" }) }) }));
}));
export const ActivityBarMenu = ({ openShowcasePanel }) => {
const applicationStore = useLegendStudioApplicationStore();
const appDocUrl = applicationStore.documentationService.url;
const docLinks = applicationStore.documentationService.links;
// about modal
const [openAppInfo, setOpenAppInfo] = useState(false);
const showAppInfo = () => setOpenAppInfo(true);
const hideAppInfo = () => setOpenAppInfo(false);
// documentation
const goToDocumentation = () => {
if (appDocUrl) {
applicationStore.navigationService.navigator.visitAddress(appDocUrl);
}
};
const goToDocLink = (url) => {
applicationStore.navigationService.navigator.visitAddress(url);
};
// go to setup page
const goToWorkspaceSetup = () => applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(generateSetupRoute(undefined, undefined)));
// help
const openHelp = () => {
applicationStore.assistantService.setIsHidden(false);
applicationStore.assistantService.setIsOpen(true);
applicationStore.assistantService.setSelectedTab(VIRTUAL_ASSISTANT_TAB.SEARCH);
};
// showcases
const showcaseManagerState = ShowcaseManagerState.retrieveNullableState(applicationStore);
// release notification
useEffect(() => {
applicationStore.releaseNotesService.updateViewedVersion();
}, [applicationStore]);
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "activity-bar__menu", children: _jsx(ControlledDropdownMenu, { className: "activity-bar__menu-item", menuProps: {
anchorOrigin: { vertical: 'top', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'left' },
elevation: 7,
}, content: _jsxs(MenuContent, { children: [_jsx(MenuContentItem, { onClick: showAppInfo, children: "About" }), showcaseManagerState?.isEnabled && (_jsx(MenuContentItem, { onClick: () => openShowcasePanel
? openShowcasePanel()
: openShowcaseManager(applicationStore), children: "See Showcases" })), _jsx(MenuContentItem, { disabled: !appDocUrl, onClick: goToDocumentation, children: "Documentation" }), docLinks?.map((entry) => (_jsx(MenuContentItem, { onClick: () => goToDocLink(entry.url), children: entry.label }, entry.key))), _jsx(MenuContentItem, { onClick: openHelp, children: "Help..." }), _jsx(MenuContentDivider, {}), _jsx(MenuContentItem, { onClick: goToWorkspaceSetup, children: "Back to workspace setup" })] }), children: _jsx(MenuIcon, {}) }) }), _jsx(LegendStudioAppInfo, { open: openAppInfo, closeModal: hideAppInfo }), _jsx(ReleaseLogManager, {}), _jsx(ReleaseNotesManager, {})] }));
};
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 }));
const lazyTextModeEnabled = editorStore.mode === EDITOR_MODE.LAZY_TEXT_EDITOR;
// tabs
const activities = [
{
mode: ACTIVITY_MODE.EXPLORER,
title: 'Explorer (Ctrl + Shift + X)',
icon: _jsx(FileTrayIcon, { className: "activity-bar__explorer-icon" }),
},
{
mode: ACTIVITY_MODE.TEST_RUNNER,
title: 'Test Runner',
icon: _jsx(FlaskIcon, {}),
disabled: editorStore.isInConflictResolutionMode || lazyTextModeEnabled,
},
{
mode: ACTIVITY_MODE.LOCAL_CHANGES,
title: `Local Changes (Ctrl + Shift + G)${localChanges ? ` - ${localChanges} unpushed changes` : ''}`,
icon: (_jsxs("div", { className: "activity-bar__local-change-icon activity-bar__item__icon-with-indicator", children: [_jsx(CodeBranchIcon, {}), localChangesIndicatorStatusIcon] })),
disabled: editorStore.isInConflictResolutionMode,
},
{
mode: ACTIVITY_MODE.WORKSPACE_UPDATER,
title: `Update Workspace (Ctrl + Shift + U)${workspaceUpdateChanges
? ` - Update available${workspaceUpdatePotentialConflicts
? ' with potential conflicts'
: ''}`
: ''}`,
icon: (_jsxs("div", { className: "activity-bar__workspace-updater-icon activity-bar__item__icon-with-indicator", children: [_jsx(CloudDownloadIcon, {}), projectLatestChangesIndicatorStatusIcon] })),
disabled: editorStore.isInConflictResolutionMode,
},
{
mode: ACTIVITY_MODE.WORKSPACE_REVIEW,
title: `Review (Ctrl + Shift + M)${reviewChanges ? ` - ${reviewChanges} changes` : ''}`,
icon: (_jsxs("div", { className: "activity-bar__review-icon activity-bar__item__icon-with-indicator", children: [_jsx(GitPullRequestIcon, {}), reviewChangesIndicatorStatusIcon] })),
disabled: editorStore.isInConflictResolutionMode,
},
{
mode: ACTIVITY_MODE.CONFLICT_RESOLUTION,
title: `Conflict Resolution${conflictResolutionChanges
? ` - ${conflictResolutionChanges} changes${conflictResolutionConflicts
? ` (${conflictResolutionConflicts} unresolved conflicts)`
: ''}`
: ''}`,
icon: (_jsxs("div", { className: "activity-bar__conflict-resolution-icon activity-bar__item__icon-with-indicator", children: [_jsx(GitMergeIcon, {}), conflictResolutionChangesIndicatorStatusIcon] })),
disabled: !editorStore.isInConflictResolutionMode || lazyTextModeEnabled,
},
{
mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
title: 'Project',
icon: _jsx(RepoIcon, { className: "activity-bar__project-overview-icon" }),
disabled: editorStore.isInConflictResolutionMode,
},
{
mode: ACTIVITY_MODE.WORKFLOW_MANAGER,
title: 'Workflow Manager',
icon: _jsx(WrenchIcon, {}),
disabled: editorStore.isInConflictResolutionMode,
},
{
mode: ACTIVITY_MODE.REGISTER_SERVICES,
title: 'Register Service (Beta)',
icon: (_jsxs(_Fragment, { children: [_jsx(RobotIcon, { className: "activity-bar__icon--service-registrar" }), _jsx(ActivityBarItemExperimentalBadge, {})] })),
disabled: editorStore.isInConflictResolutionMode || lazyTextModeEnabled,
},
].filter((activity) => !activity.disabled);
const userJourneys = [
{
mode: USER_JOURNEYS.END_TO_END_WORKFLOWS,
title: 'End to End Workflows (Beta)',
icon: (_jsxs("div", { children: [_jsx(WorkflowIcon, { className: "activity-bar__icon--service-registrar" }), _jsx(ActivityBarItemExperimentalBadge, {})] })),
disabled: editorStore.isInConflictResolutionMode ||
!editorStore.applicationStore.config.options.NonProductionFeatureFlag,
},
].filter((activity) => !activity.disabled);
const openShowcasePanel = () => {
toggleShowcasePanel(editorStore);
};
return (_jsxs("div", { className: "activity-bar", children: [_jsx(ActivityBarMenu, { openShowcasePanel: openShowcasePanel }), _jsxs("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, children: activity.icon }, activity.mode))), Boolean(userJourneys.length) && _jsx(MenuContentDivider, {}), userJourneys.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, children: activity.icon }, activity.mode)))] }), _jsx("button", { className: clsx('activity-bar__item'), onClick: () => openShowcasePanel(), tabIndex: -1, title: 'Open Showcases', children: _jsx(ReadMeIcon, {}) }), _jsx(ControlledDropdownMenu, { className: "activity-bar__item", title: "Settings", content: _jsx(SettingsMenu, {}), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'bottom', horizontal: 'left' },
elevation: 7,
}, children: _jsx(CogIcon, {}) })] }));
});
//# sourceMappingURL=ActivityBar.js.map