@finos/legend-application-studio 18.0.0 → 18.0.2

package/src/components/editor/edit-panel/uml-editor/TaggedValueEditor.tsx

@@ -41,7 +41,7 @@ import {
   taggedValue_setValue,
   taggedValue_setTag,
   annotatedElement_swapTaggedValues,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import {
   buildElementOption,
   type PackageableElementOption,
@@ -198,7 +198,7 @@ export const TaggedValueEditor = observer(
                 options={profileOptions}
                 onChange={changeProfile}
                 value={selectedProfile}
-                placeholder={'Choose a profile'}
+                placeholder="Choose a profile"
                 filterOption={profileFilterOption}
                 darkMode={darkTheme ?? false}
               />
@@ -211,7 +211,7 @@ export const TaggedValueEditor = observer(
                 )}
                 onClick={visitProfile}
                 tabIndex={-1}
-                title={'Visit profile'}
+                title="Visit profile"
               >
                 <ArrowCircleRightIcon />
               </button>
@@ -222,7 +222,7 @@ export const TaggedValueEditor = observer(
               options={tagOptions}
               onChange={changeTag}
               value={selectedTag}
-              placeholder={'Choose a tag'}
+              placeholder="Choose a tag"
               filterOption={tagFilterOption}
               darkMode={Boolean(darkTheme)}
             />
@@ -232,7 +232,7 @@ export const TaggedValueEditor = observer(
                 disabled={isReadOnly}
                 onClick={deleteValue}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>
@@ -251,7 +251,7 @@ export const TaggedValueEditor = observer(
                   disabled={isReadOnly}
                   value={taggedValue.value}
                   onChange={changeValue}
-                  placeholder={`Value`}
+                  placeholder="Value"
                 />
               )}
               {!isExpanded && (
@@ -263,7 +263,7 @@ export const TaggedValueEditor = observer(
                   disabled={isReadOnly}
                   value={taggedValue.value}
                   onChange={changeValue}
-                  placeholder={`Value`}
+                  placeholder="Value"
                 />
               )}
               <button
@@ -272,7 +272,7 @@ export const TaggedValueEditor = observer(
                 }`}
                 onClick={toggleExpandedMode}
                 tabIndex={-1}
-                title={'Expand/Collapse'}
+                title="Expand/Collapse"
               >
                 {isExpanded ? <LongArrowAltUpIcon /> : <MoreVerticalIcon />}
               </button>

package/src/components/editor/side-bar/Explorer.tsx

@@ -233,8 +233,8 @@ const ExplorerContextMenu = observer(
     };
     const openElementInViewerMode = (): void => {
       if (node && projectId) {
-        applicationStore.navigator.openNewWindow(
-          applicationStore.navigator.generateLocation(
+        applicationStore.navigator.visitAddress(
+          applicationStore.navigator.generateAddress(
             generateViewEntityRoute(projectId, node.packageableElement.path),
           ),
         );
@@ -244,7 +244,7 @@ const ExplorerContextMenu = observer(
       if (node) {
         applicationStore
           .copyTextToClipboard(
-            applicationStore.navigator.generateLocation(
+            applicationStore.navigator.generateAddress(
               editorStore.editorMode.generateElementLink(
                 node.packageableElement.path,
               ),
@@ -343,7 +343,7 @@ const ProjectConfig = observer(() => {
       <button
         className="tree-view__node__label explorer__package-tree__node__label"
         tabIndex={-1}
-        title={'Project configuration'}
+        title="Project configuration"
       >
         config
       </button>

package/src/components/editor/side-bar/ProjectOverview.tsx

@@ -17,7 +17,6 @@
 import { forwardRef, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
-import { Link } from 'react-router-dom';
 import {
   clsx,
   CustomSelectorInput,
@@ -66,10 +65,10 @@ const ShareProjectModal = observer(
     >();
     const projectId = editorStore.sdlcState.activeProject.projectId;
     const projectLink = selectedVersion
-      ? applicationStore.navigator.generateLocation(
+      ? applicationStore.navigator.generateAddress(
           generateViewVersionRoute(projectId, selectedVersion.id.id),
         )
-      : applicationStore.navigator.generateLocation(
+      : applicationStore.navigator.generateAddress(
           generateViewProjectRoute(projectId),
         );
     const copyProjectLink = (): void => {
@@ -178,6 +177,7 @@ const WorkspaceViewerContextMenu = observer(
 const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
   const { workspace } = props;
   const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
   const isActive = areWorkspacesEquivalent(
     editorStore.sdlcState.activeWorkspace,
     workspace,
@@ -193,7 +193,7 @@ const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
       onOpen={onContextMenuOpen}
       onClose={onContextMenuClose}
     >
-      <Link
+      <button
         className={clsx(
           'side-bar__panel__item project-overview__item__link',
           {
@@ -202,14 +202,19 @@ const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
           },
           { 'project-overview__item__link--active': isActive },
         )}
-        rel="noopener noreferrer"
-        target="_blank"
-        to={generateEditorRoute(
-          workspace.projectId,
-          workspace.workspaceId,
-          workspace.workspaceType,
-        )}
-        title={'Go to workspace detail'}
+        tabIndex={-1}
+        onClick={(): void =>
+          applicationStore.navigator.visitAddress(
+            applicationStore.navigator.generateAddress(
+              generateEditorRoute(
+                workspace.projectId,
+                workspace.workspaceId,
+                workspace.workspaceType,
+              ),
+            ),
+          )
+        }
+        title="See workspace"
       >
         <div className="project-overview__item__link__content project-overview__workspace__viewer">
           <div className="project-overview__workspace__viewer-icon">
@@ -223,7 +228,7 @@ const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
             {workspace.workspaceId}
           </div>
         </div>
-      </Link>
+      </button>
     </ContextMenu>
   );
 });
@@ -337,7 +342,7 @@ const ReleaseEditor = observer(() => {
             disabled={!canCreateVersion}
             value={revisionInput.notes}
             onChange={changeNotes}
-            placeholder={'Release notes'}
+            placeholder="Release notes"
           />
           <div className="project-overview__release__editor__actions">
             <button
@@ -385,14 +390,20 @@ const ReleaseEditor = observer(() => {
               <PanelContent>
                 {latestProjectVersion && (
                   <div className="project-overview__release__info__current-version">
-                    <Link
+                    <button
                       className="project-overview__release__info__current-version__link"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      to={generateViewVersionRoute(
-                        latestProjectVersion.projectId,
-                        latestProjectVersion.id.id,
-                      )}
+                      tabIndex={-1}
+                      onClick={(): void =>
+                        applicationStore.navigator.visitAddress(
+                          applicationStore.navigator.generateAddress(
+                            generateViewVersionRoute(
+                              latestProjectVersion.projectId,
+                              latestProjectVersion.id.id,
+                            ),
+                          ),
+                        )
+                      }
+                      title="See version"
                     >
                       <div className="project-overview__release__info__current-version__link__content">
                         <span className="project-overview__release__info__current-version__link__content__name">
@@ -402,7 +413,7 @@ const ReleaseEditor = observer(() => {
                           {latestProjectVersion.notes}
                         </span>
                       </div>
-                    </Link>
+                    </button>
                   </div>
                 )}
                 {!latestProjectVersion && (
@@ -438,13 +449,18 @@ const ReleaseEditor = observer(() => {
               </div>
               <PanelContent>
                 {commitedReviews.map((review) => (
-                  <Link
+                  <button
                     key={review.id}
                     className="side-bar__panel__item workspace-updater__review__link"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    to={generateReviewRoute(review.projectId, review.id)}
-                    title={'See review detail'}
+                    tabIndex={-1}
+                    onClick={(): void =>
+                      applicationStore.navigator.visitAddress(
+                        applicationStore.navigator.generateAddress(
+                          generateReviewRoute(review.projectId, review.id),
+                        ),
+                      )
+                    }
+                    title="See review"
                   >
                     <div className="workspace-updater__review">
                       <span className="workspace-updater__review__name">
@@ -454,7 +470,7 @@ const ReleaseEditor = observer(() => {
                         {review.author.name}
                       </span>
                     </div>
-                  </Link>
+                  </button>
                 ))}
               </PanelContent>
             </div>
@@ -499,13 +515,18 @@ const VersionsViewer = observer(() => {
         <PanelLoadingIndicator isLoading={isDispatchingAction} />
         <div className="panel__content__list">
           {versions.map((version) => (
-            <Link
+            <button
               key={version.id.id}
               className="side-bar__panel__item project-overview__item__link"
-              rel="noopener noreferrer"
-              target="_blank"
-              to={generateViewVersionRoute(version.projectId, version.id.id)}
-              title={'See version detail'}
+              tabIndex={-1}
+              onClick={(): void =>
+                applicationStore.navigator.visitAddress(
+                  applicationStore.navigator.generateAddress(
+                    generateViewVersionRoute(version.projectId, version.id.id),
+                  ),
+                )
+              }
+              title="See version"
             >
               <div className="project-overview__item__link__content">
                 <span className="project-overview__item__link__content__name">
@@ -515,7 +536,7 @@ const VersionsViewer = observer(() => {
                   {version.notes}
                 </span>
               </div>
-            </Link>
+            </button>
           ))}
         </div>
       </div>
@@ -829,7 +850,7 @@ export const ProjectOverview = observer(() => {
   const hideShareModal = (): void => setOpenShareModal(false);
   const projectOverviewState = editorStore.projectOverviewState;
   const openProjectWebUrl = (): void =>
-    applicationStore.navigator.openNewWindow(
+    applicationStore.navigator.visitAddress(
       editorStore.sdlcState.activeProject.webUrl,
     );
   const renderOverview = (): React.ReactNode => {

package/src/components/editor/side-bar/WorkflowManager.tsx

@@ -281,9 +281,9 @@ const WorkflowExplorerContextMenu = observer(
     };
     const visitWeburl = (): void => {
       if (node instanceof WorkflowJobTreeNodeData) {
-        applicationStore.navigator.openNewWindow(node.workflowJob.webURL);
+        applicationStore.navigator.visitAddress(node.workflowJob.webURL);
       } else if (node instanceof WorkflowTreeNodeData) {
-        applicationStore.navigator.openNewWindow(node.workflow.webURL);
+        applicationStore.navigator.visitAddress(node.workflow.webURL);
       }
     };
 
@@ -374,7 +374,7 @@ const WorkflowTreeNodeContainer: React.FC<
             rel="noopener noreferrer"
             target="_blank"
             href={node.workflow.webURL}
-            title={'See workflow detail'}
+            title="See workflow detail"
           >
             <div className="workflow-manager__item__link__content">
               <span className="workflow-manager__item__link__content__id">
@@ -396,7 +396,7 @@ const WorkflowTreeNodeContainer: React.FC<
             rel="noopener noreferrer"
             target="_blank"
             href={node.workflowJob.webURL}
-            title={'See job detail'}
+            title="See job detail"
           >
             <div className="workflow-manager__item__link__content">
               <span className="workflow-manager__item__link__content__id">

package/src/components/editor/side-bar/WorkspaceReview.tsx

@@ -16,7 +16,6 @@
 
 import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Link } from 'react-router-dom';
 import { EntityDiffViewState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffSideBarItem } from '../../editor/edit-panel/diff-editor/EntityDiffView.js';
 import {
@@ -141,7 +140,7 @@ export const WorkspaceReview = observer(() => {
           workspaceReviewState.commitWorkspaceReview(workspaceReview),
         ).catch(applicationStore.alertUnhandledError);
       };
-      if (editorStore.hasUnpushedChanges) {
+      if (editorStore.localChangesState.hasUnpushedChanges) {
         editorStore.setActionAlertInfo({
           message: 'You have unpushed changes',
           prompt:
@@ -154,7 +153,6 @@ export const WorkspaceReview = observer(() => {
               label: 'Proceed to commit review',
               type: ActionAlertActionType.PROCEED_WITH_CAUTION,
               handler: (): void => {
-                editorStore.setIgnoreNavigationBlocking(true);
                 commit();
               },
             },
@@ -284,16 +282,21 @@ export const WorkspaceReview = observer(() => {
                 <div className="workspace-review__title__content">
                   <div
                     className="workspace-review__title__content__input workspace-review__title__content__input--with-link"
-                    title={'See review detail'}
+                    title="See review detail"
                   >
-                    <Link
+                    <button
                       className="workspace-review__title__content__input__link"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      to={generateReviewRoute(
-                        workspaceReview.projectId,
-                        workspaceReview.id,
-                      )}
+                      tabIndex={-1}
+                      onClick={(): void =>
+                        applicationStore.navigator.visitAddress(
+                          applicationStore.navigator.generateAddress(
+                            generateReviewRoute(
+                              workspaceReview.projectId,
+                              workspaceReview.id,
+                            ),
+                          ),
+                        )
+                      }
                     >
                       <span className="workspace-review__title__content__input__link__review-name">
                         {workspaceReview.title}
@@ -301,7 +304,7 @@ export const WorkspaceReview = observer(() => {
                       <div className="workspace-review__title__content__input__link__btn">
                         <ExternalLinkSquareIcon />
                       </div>
-                    </Link>
+                    </button>
                   </div>
                 </div>
                 <button

package/src/components/editor/side-bar/WorkspaceSyncConflictResolver.tsx

@@ -221,7 +221,7 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                             className="workspace-sync-conflict-resolver__header__tab__close-btn"
                             onClick={closeTab(mergedState)}
                             tabIndex={-1}
-                            title={'Close'}
+                            title="Close"
                           >
                             <TimesIcon />
                           </button>

package/src/components/editor/side-bar/WorkspaceUpdater.tsx

@@ -30,7 +30,6 @@ import {
   InfoCircleIcon,
   PanelContent,
 } from '@finos/legend-art';
-import { Link } from 'react-router-dom';
 import { EntityChangeConflictSideBarItem } from '../../editor/edit-panel/diff-editor/EntityChangeConflictEditor.js';
 import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
 import { generateReviewRoute } from '../../../stores/LegendStudioRouter.js';
@@ -56,7 +55,7 @@ export const WorkspaceUpdater = observer(() => {
   const workspaceUpdaterState = editorStore.workspaceUpdaterState;
   // Actions
   const updateWorkspace = (): void => {
-    if (editorStore.hasUnpushedChanges) {
+    if (editorStore.localChangesState.hasUnpushedChanges) {
       editorStore.setActionAlertInfo({
         message: 'You have unpushed changes',
         prompt:
@@ -69,7 +68,6 @@ export const WorkspaceUpdater = observer(() => {
             label: 'Proceed to update workspace',
             type: ActionAlertActionType.PROCEED_WITH_CAUTION,
             handler: (): void => {
-              editorStore.setIgnoreNavigationBlocking(true);
               flowResult(workspaceUpdaterState.updateWorkspace()).catch(
                 applicationStore.alertUnhandledError,
               );
@@ -252,13 +250,18 @@ export const WorkspaceUpdater = observer(() => {
               </div>
               <PanelContent>
                 {commitedReviews.map((review) => (
-                  <Link
+                  <button
                     key={review.id}
                     className="side-bar__panel__item workspace-updater__review__link"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    to={generateReviewRoute(review.projectId, review.id)}
-                    title={'See review detail'}
+                    title="See review"
+                    tabIndex={-1}
+                    onClick={(): void =>
+                      applicationStore.navigator.visitAddress(
+                        applicationStore.navigator.generateAddress(
+                          generateReviewRoute(review.projectId, review.id),
+                        ),
+                      )
+                    }
                   >
                     <div className="workspace-updater__review">
                       <span className="workspace-updater__review__name">
@@ -268,7 +271,7 @@ export const WorkspaceUpdater = observer(() => {
                         {review.author.name}
                       </span>
                     </div>
-                  </Link>
+                  </button>
                 ))}
               </PanelContent>
             </div>

package/src/components/project-viewer/ProjectViewer.tsx

@@ -16,11 +16,8 @@
 
 import { useEffect, Fragment } from 'react';
 import { observer } from 'mobx-react-lite';
-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,
@@ -40,6 +37,7 @@ import {
   WrenchIcon,
   FileTrayIcon,
   AssistantIcon,
+  useResizeDetector,
 } from '@finos/legend-art';
 import { isNonNullable } from '@finos/legend-shared';
 import { GlobalHotKeys } from 'react-hotkeys';
@@ -57,7 +55,7 @@ import {
   useEditorStore,
   withEditorStore,
 } from '../editor/EditorStoreProvider.js';
-import { useApplicationStore } from '@finos/legend-application';
+import { useApplicationStore, useParams } from '@finos/legend-application';
 import {
   ActivityBarMenu,
   type ActivityDisplay,
@@ -110,9 +108,18 @@ const ProjectViewerStatusBar = observer(() => {
               <CodeBranchIcon />
             </div>
             <div className="editor__status-bar__workspace__project">
-              <Link to={generateSetupRoute(projectId)}>
+              <button
+                className="editor__status-bar__workspace__project"
+                title="Go back to workspace setup using the specified project"
+                tabIndex={-1}
+                onClick={(): void =>
+                  applicationStore.navigator.goToLocation(
+                    generateSetupRoute(projectId),
+                  )
+                }
+              >
                 {currentProject.name}
-              </Link>
+              </button>
             </div>
             /
             <div className="editor__status-bar__workspace__workspace">
@@ -137,7 +144,7 @@ const ProjectViewerStatusBar = observer(() => {
           )}
           onClick={handleTextModeClick}
           tabIndex={-1}
-          title={'Toggle text mode (F8)'}
+          title="Toggle text mode (F8)"
         >
           <HackerIcon />
         </button>

package/src/components/shared/DiffView.tsx

@@ -17,7 +17,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { editor as monacoEditorAPI, KeyCode } from 'monaco-editor';
-import { useResizeDetector } from 'react-resize-detector';
 import {
   EDITOR_THEME,
   EDITOR_LANGUAGE,
@@ -28,6 +27,7 @@ import {
   disposeDiffEditor,
   disableEditorHotKeys,
   baseTextEditorSettings,
+  useResizeDetector,
 } from '@finos/legend-art';
 import {
   isString,

package/src/components/shared/ProjectSelectorUtils.tsx

@@ -34,8 +34,8 @@ export const getProjectOptionLabelFormatter = (
 ): ((option: ProjectOption) => React.ReactNode) =>
   function ProjectOptionLabel(option: ProjectOption): React.ReactNode {
     const viewProject = (): void =>
-      applicationStore.navigator.openNewWindow(
-        applicationStore.navigator.generateLocation(
+      applicationStore.navigator.visitAddress(
+        applicationStore.navigator.generateAddress(
           generateViewProjectRoute(option.value.projectId),
         ),
       );

package/src/components/shared/StudioLambdaEditor.tsx

@@ -17,15 +17,15 @@
 import { useMemo, useCallback } from 'react';
 import { type IKeyboardEvent, KeyCode } from 'monaco-editor';
 import { observer } from 'mobx-react-lite';
-import {
-  LambdaEditor,
-  useApplicationStore,
-  type LambdaEditorOnKeyDownEventHandler,
-  type LambdaEditorState,
-} from '@finos/legend-application';
+import { useApplicationStore } from '@finos/legend-application';
 import { flowResult } from 'mobx';
 import type { Type } from '@finos/legend-graph';
 import { useEditorStore } from '../editor/EditorStoreProvider.js';
+import {
+  type LambdaEditorState,
+  type LambdaEditorOnKeyDownEventHandler,
+  LambdaEditor,
+} from '@finos/legend-query-builder';
 
 export const StudioLambdaEditor = observer(
   (props: {
@@ -67,8 +67,8 @@ export const StudioLambdaEditor = observer(
     const editorStore = useEditorStore();
 
     const backdropSetter = useCallback(
-      (val: boolean) => editorStore.setBackdrop(val),
-      [editorStore],
+      (val: boolean) => applicationStore.setShowBackdrop(val),
+      [applicationStore],
     );
     const onKeyDownEventHandlers: LambdaEditorOnKeyDownEventHandler[] = useMemo(
       () => [