@finos/legend-application-studio 18.1.0 → 19.0.0

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

@@ -464,10 +464,6 @@ export const CreateNewElementModal = observer(() => {
     newElementState.setName('');
     elementNameInputRef.current?.focus();
   };
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
-    save();
-  };
 
   if (!newElementState.showModal) {
     return null;
@@ -484,7 +480,10 @@ export const CreateNewElementModal = observer(() => {
     >
       <form
         data-testid={LEGEND_STUDIO_TEST_ID.NEW_ELEMENT_MODAL}
-        onSubmit={handleSubmit}
+        onSubmit={(event) => {
+          event.preventDefault();
+          save();
+        }}
         className="modal modal--dark search-modal"
       >
         <div className="modal__title">

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

@@ -76,6 +76,7 @@ import {
   isDependencyElement,
   isElementReadOnly,
   Class,
+  isMainGraphElement,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelClassifierUtils.js';
@@ -98,8 +99,16 @@ const ElementRenamer = observer(() => {
     element instanceof Package || path.includes(ELEMENT_PATH_DELIMITER);
   const isValidElementPath =
     (element instanceof Package && isValidPath(path)) || isValidFullPath(path);
-  const existingElement =
-    editorStore.graphManagerState.graph.getNullableElement(path, true);
+  let existingElement = editorStore.graphManagerState.graph.getNullableElement(
+    path,
+    true,
+  );
+  existingElement =
+    existingElement instanceof Package
+      ? isMainGraphElement(existingElement)
+        ? existingElement
+        : undefined
+      : existingElement;
   const isElementUnique = !existingElement || existingElement === element;
   const elementRenameValidationErrorMessage = !isElementPathNonEmpty
     ? `Element path cannot be empty`
@@ -713,36 +722,26 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
           <FileImportIcon />
         </button>
       )}
-      <DropdownMenu
-        disabled={
-          disabled ||
-          isInGrammarMode ||
-          (selectedTreeNode &&
-            isElementReadOnly(selectedTreeNode.packageableElement))
-        }
-        content={<ExplorerDropdownMenu />}
-        menuProps={{
-          anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-          transformOrigin: { vertical: 'top', horizontal: 'left' },
-          elevation: 7,
-        }}
-      >
-        {!editorStore.isInViewerMode && (
-          <button
-            disabled={
-              disabled ||
-              isInGrammarMode ||
-              (selectedTreeNode &&
-                isElementReadOnly(selectedTreeNode.packageableElement))
-            }
-            className="panel__header__action"
-            tabIndex={-1}
-            title="New Element... (Ctrl + Shift + N)"
-          >
-            <PlusIcon />
-          </button>
-        )}
-      </DropdownMenu>
+      {!editorStore.isInViewerMode && (
+        <DropdownMenu
+          className="panel__header__action"
+          title="New Element... (Ctrl + Shift + N)"
+          disabled={
+            disabled ||
+            isInGrammarMode ||
+            (selectedTreeNode &&
+              isElementReadOnly(selectedTreeNode.packageableElement))
+          }
+          content={<ExplorerDropdownMenu />}
+          menuProps={{
+            anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+            transformOrigin: { vertical: 'top', horizontal: 'left' },
+            elevation: 7,
+          }}
+        >
+          <PlusIcon />
+        </DropdownMenu>
+      )}
       <button
         className="panel__header__action"
         disabled={disabled}

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

@@ -37,12 +37,12 @@ import {
   BanIcon,
   PanelContent,
 } from '@finos/legend-art';
-import { formatDistanceToNow } from 'date-fns';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { flowResult } from 'mobx';
 import { WorkflowJobStatus, WorkflowStatus } from '@finos/legend-server-sdlc';
 import {
   EDITOR_LANGUAGE,
+  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -54,11 +54,11 @@ import {
   WorkflowTreeNodeData,
 } from '../../../stores/sidebar-state/WorkflowManagerState.js';
 import {
+  formatDistanceToNow,
   guaranteeNonNullable,
   guaranteeType,
   isNonNullable,
 } from '@finos/legend-shared';
-import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
 
 const getWorkflowStatusIcon = (
   workflowStatus: WorkflowStatus,
@@ -231,7 +231,7 @@ const WorkflowJobLogsViewer = observer(
             </div>
           </div>
           <div className="modal__body">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={logs}
               isReadOnly={true}
               language={EDITOR_LANGUAGE.TEXT}

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

@@ -30,18 +30,14 @@ import {
   PanelContent,
 } from '@finos/legend-art';
 import { ACTIVITY_MODE } from '../../../stores/EditorConfig.js';
-import { formatDistanceToNow } from 'date-fns';
 import { generateReviewRoute } from '../../../stores/LegendStudioRouter.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { flowResult } from 'mobx';
 import type { EntityDiff } from '@finos/legend-server-sdlc';
 import { entityDiffSorter } from '../../../stores/EditorSDLCState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import {
-  ActionAlertType,
-  ActionAlertActionType,
-} from '@finos/legend-application';
 import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
+import { formatDistanceToNow } from '@finos/legend-shared';
 
 export const WorkspaceReviewDiffs = observer(() => {
   const editorStore = useEditorStore();
@@ -134,38 +130,12 @@ export const WorkspaceReview = observer(() => {
   };
   const commitReview = (): void => {
     if (workspaceReview && !isDispatchingAction) {
-      const commit = (): void => {
+      editorStore.localChangesState.alertUnsavedChanges((): void => {
         workspaceReviewState.setReviewTitle('');
         flowResult(
           workspaceReviewState.commitWorkspaceReview(workspaceReview),
         ).catch(applicationStore.alertUnhandledError);
-      };
-      if (editorStore.localChangesState.hasUnpushedChanges) {
-        editorStore.setActionAlertInfo({
-          message: 'You have unpushed changes',
-          prompt:
-            'This action will discard these changes and refresh the application',
-          type: ActionAlertType.CAUTION,
-          onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-          onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
-          actions: [
-            {
-              label: 'Proceed to commit review',
-              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-              handler: (): void => {
-                commit();
-              },
-            },
-            {
-              label: 'Abort',
-              type: ActionAlertActionType.PROCEED,
-              default: true,
-            },
-          ],
-        });
-      } else {
-        commit();
-      }
+      });
     }
   };
   const createReview = (): void => {
@@ -239,8 +209,8 @@ export const WorkspaceReview = observer(() => {
             <>
               <form
                 className="workspace-review__title"
-                onSubmit={(e): void => {
-                  e.preventDefault();
+                onSubmit={(event) => {
+                  event.preventDefault();
                 }}
               >
                 <div className="workspace-review__title__content">

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

@@ -41,10 +41,6 @@ import type {
 } from '@finos/legend-server-sdlc';
 import { entityDiffSorter } from '../../../stores/EditorSDLCState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import {
-  ActionAlertType,
-  ActionAlertActionType,
-} from '@finos/legend-application';
 import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
 
 export const WorkspaceUpdater = observer(() => {
@@ -55,36 +51,11 @@ export const WorkspaceUpdater = observer(() => {
   const workspaceUpdaterState = editorStore.workspaceUpdaterState;
   // Actions
   const updateWorkspace = (): void => {
-    if (editorStore.localChangesState.hasUnpushedChanges) {
-      editorStore.setActionAlertInfo({
-        message: 'You have unpushed changes',
-        prompt:
-          'This action will discard these changes and refresh the application',
-        type: ActionAlertType.CAUTION,
-        onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-        onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
-        actions: [
-          {
-            label: 'Proceed to update workspace',
-            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-            handler: (): void => {
-              flowResult(workspaceUpdaterState.updateWorkspace()).catch(
-                applicationStore.alertUnhandledError,
-              );
-            },
-          },
-          {
-            label: 'Abort',
-            type: ActionAlertActionType.PROCEED,
-            default: true,
-          },
-        ],
-      });
-    } else {
+    editorStore.localChangesState.alertUnsavedChanges((): void => {
       flowResult(workspaceUpdaterState.updateWorkspace()).catch(
         applicationStore.alertUnhandledError,
       );
-    }
+    });
   };
   const refreshWorkspaceUpdater = applicationStore.guardUnhandledError(() =>
     flowResult(workspaceUpdaterState.refreshWorkspaceUpdater()),

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EDITOR_LANGUAGE } from '@finos/legend-application';
+import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
 import {
   type TreeData,
   type TreeNodeContainerProps,
@@ -62,7 +62,6 @@ import {
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { TextDiffView } from '../../../shared/DiffView.js';
 import { getElementTypeIcon } from '../../../shared/ElementIconUtils.js';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 
 export const getTestableResultIcon = (
@@ -169,7 +168,7 @@ const TestFailViewer = observer(
           </div>
           <div className="modal__body">
             {failure instanceof TestError && (
-              <StudioTextInputEditor
+              <TextInputEditor
                 inputValue={failure.error}
                 isReadOnly={true}
                 language={EDITOR_LANGUAGE.TEXT}
@@ -185,7 +184,7 @@ const TestFailViewer = observer(
             )}
             {failure instanceof AssertFail &&
               !(failure instanceof EqualToJsonAssertFail) && (
-                <StudioTextInputEditor
+                <TextInputEditor
                   inputValue={failure.message ?? ''}
                   isReadOnly={true}
                   language={EDITOR_LANGUAGE.TEXT}

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

@@ -19,18 +19,14 @@ import { observer } from 'mobx-react-lite';
 import { EditPanel } from '../editor/edit-panel/EditPanel.js';
 import { GrammarTextEditor } from '../editor/edit-panel/GrammarTextEditor.js';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
-import {
-  ACTIVITY_MODE,
-  LEGEND_STUDIO_HOTKEY,
-  LEGEND_STUDIO_HOTKEY_MAP,
-} from '../../stores/EditorConfig.js';
+import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
 import {
   type ResizablePanelHandlerProps,
   clsx,
   ResizablePanel,
   ResizablePanelGroup,
   ResizablePanelSplitter,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   RepoIcon,
   CodeBranchIcon,
   HackerIcon,
@@ -40,7 +36,6 @@ import {
   useResizeDetector,
 } from '@finos/legend-art';
 import { isNonNullable } from '@finos/legend-shared';
-import { GlobalHotKeys } from 'react-hotkeys';
 import {
   useProjectViewerStore,
   withProjectViewerStore,
@@ -55,7 +50,11 @@ import {
   useEditorStore,
   withEditorStore,
 } from '../editor/EditorStoreProvider.js';
-import { useApplicationStore, useParams } from '@finos/legend-application';
+import {
+  useApplicationStore,
+  useCommands,
+  useParams,
+} from '@finos/legend-application';
 import {
   ActivityBarMenu,
   type ActivityDisplay,
@@ -63,7 +62,10 @@ import {
 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';
+import {
+  useLegendStudioApplicationStore,
+  useLegendStudioBaseStore,
+} from '../LegendStudioBaseStoreProvider.js';
 import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
 
 const ProjectViewerStatusBar = observer(() => {
@@ -113,8 +115,10 @@ const ProjectViewerStatusBar = observer(() => {
                 title="Go back to workspace setup using the specified project"
                 tabIndex={-1}
                 onClick={(): void =>
-                  applicationStore.navigator.goToLocation(
-                    generateSetupRoute(projectId),
+                  applicationStore.navigator.visitAddress(
+                    applicationStore.navigator.generateAddress(
+                      generateSetupRoute(projectId),
+                    ),
                   )
                 }
               >
@@ -169,7 +173,7 @@ const ProjectViewerStatusBar = observer(() => {
 
 const ProjectViewerSideBar = observer(() => {
   const viewerStore = useProjectViewerStore();
-  const editorStore = viewerStore.editorStore;
+  const editorStore = useEditorStore();
   const renderSideBar = (): React.ReactNode => {
     switch (editorStore.activeActivity) {
       case ACTIVITY_MODE.EXPLORER:
@@ -195,7 +199,9 @@ const ProjectViewerSideBar = observer(() => {
 
 const ProjectViewerActivityBar = observer(() => {
   const viewerStore = useProjectViewerStore();
-  const editorStore = viewerStore.editorStore;
+  const baseStore = useLegendStudioBaseStore();
+  const editorStore = useEditorStore();
+
   const changeActivity =
     (activity: ACTIVITY_MODE): (() => void) =>
     (): void =>
@@ -207,7 +213,7 @@ const ProjectViewerActivityBar = observer(() => {
       title: 'Explorer (Ctrl + Shift + X)',
       icon: <FileTrayIcon />,
     },
-    !editorStore.isInConflictResolutionMode && {
+    baseStore.isSDLCAuthorized !== undefined && {
       mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
       title: 'Project',
       icon: (
@@ -256,14 +262,7 @@ export const ProjectViewer = withEditorStore(
       const viewerStore = useProjectViewerStore();
       const editorStore = useEditorStore();
       const applicationStore = useApplicationStore();
-      const allowOpeningElement =
-        editorStore.sdlcState.currentProject &&
-        editorStore.graphManagerState.graphBuildState.hasSucceeded;
-      const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
-        editorStore.sideBarDisplayState.setSize(
-          (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
-            .width,
-        );
+
       // Extensions
       const extraEditorExtensionComponents = editorStore.pluginManager
         .getApplicationPlugins()
@@ -276,40 +275,31 @@ export const ProjectViewer = withEditorStore(
         .map((config) => (
           <Fragment key={config.key}>{config.renderer(editorStore)}</Fragment>
         ));
-      // Resize
-      const { ref, width, height } = useResizeDetector<HTMLDivElement>();
-      // 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,
-            );
-          }),
-      };
 
+      // layout
+      const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
+        editorStore.sideBarDisplayState.setSize(
+          (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+            .width,
+        );
+      const sideBarCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.sideBarDisplayState.size === 0,
+        {
+          onStopResize: resizeSideBar,
+          size: editorStore.sideBarDisplayState.size,
+        },
+      );
+      const { ref, width, height } = useResizeDetector<HTMLDivElement>();
       useEffect(() => {
         if (ref.current) {
           editorStore.auxPanelDisplayState.setMaxSize(ref.current.offsetHeight);
         }
       }, [ref, editorStore, width, height]);
 
+      // initialize
       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(() => {
@@ -318,43 +308,40 @@ export const ProjectViewer = withEditorStore(
         );
       }, [applicationStore, viewerStore, params]);
 
+      useCommands(editorStore);
+
       return (
         <div className="app__page">
           <div className="editor viewer">
-            <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
-              <div className="editor__body">
-                <ProjectViewerActivityBar />
-                <div ref={ref} className="editor__content-container">
-                  <div className="editor__content">
-                    <ResizablePanelGroup orientation="vertical">
-                      <ResizablePanel
-                        {...getControlledResizablePanelProps(
-                          editorStore.sideBarDisplayState.size === 0,
-                          {
-                            onStopResize: resizeSideBar,
-                            size: editorStore.sideBarDisplayState.size,
-                          },
-                        )}
-                        direction={1}
-                      >
-                        <ProjectViewerSideBar />
-                      </ResizablePanel>
-                      <ResizablePanelSplitter />
-                      <ResizablePanel minSize={300}>
-                        {editorStore.isInFormMode && <EditPanel />}
-                        {editorStore.isInGrammarTextMode && (
-                          <GrammarTextEditor />
-                        )}
-                      </ResizablePanel>
-                    </ResizablePanelGroup>
-                  </div>
+            <div className="editor__body">
+              <ProjectViewerActivityBar />
+              <div ref={ref} className="editor__content-container">
+                <div className="editor__content">
+                  <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel
+                      {...sideBarCollapsiblePanelGroupProps.collapsiblePanel}
+                      direction={1}
+                    >
+                      <ProjectViewerSideBar />
+                    </ResizablePanel>
+                    <ResizablePanelSplitter />
+                    <ResizablePanel
+                      {...sideBarCollapsiblePanelGroupProps.remainingPanel}
+                      minSize={300}
+                    >
+                      {editorStore.isInFormMode && <EditPanel />}
+                      {editorStore.isInGrammarTextMode && <GrammarTextEditor />}
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
                 </div>
               </div>
-              {allowOpeningElement && <ProjectSearchCommand />}
-              <ProjectViewerStatusBar />
-              <EmbeddedQueryBuilder />
-              {extraEditorExtensionComponents}
-            </GlobalHotKeys>
+            </div>
+            {editorStore.graphManagerState.graphBuildState.hasSucceeded && (
+              <ProjectSearchCommand />
+            )}
+            <ProjectViewerStatusBar />
+            <EmbeddedQueryBuilder />
+            {extraEditorExtensionComponents}
           </div>
         </div>
       );

package/src/components/shared/DiffView.tsx

@@ -16,16 +16,16 @@
 
 import { useEffect, useState, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
-import { editor as monacoEditorAPI, KeyCode } from 'monaco-editor';
+import { editor as monacoEditorAPI } from 'monaco-editor';
 import {
   EDITOR_THEME,
   EDITOR_LANGUAGE,
   TAB_SIZE,
   useApplicationStore,
+  createPassThroughOnKeyHandler,
 } from '@finos/legend-application';
 import {
   disposeDiffEditor,
-  disableEditorHotKeys,
   baseTextEditorSettings,
   useResizeDetector,
 } from '@finos/legend-art';
@@ -35,7 +35,6 @@ import {
   tryToFormatJSONString,
   tryToFormatLosslessJSONString,
 } from '@finos/legend-shared';
-import { flowResult } from 'mobx';
 import { useEditorStore } from '../editor/EditorStoreProvider.js';
 
 export const TextDiffView = observer(
@@ -69,25 +68,7 @@ export const TextDiffView = observer(
           theme: EDITOR_THEME.LEGEND,
           readOnly: true,
         });
-        _editor.getOriginalEditor().onKeyDown((event) => {
-          if (event.keyCode === KeyCode.F8) {
-            event.preventDefault();
-            event.stopPropagation();
-            flowResult(editorStore.toggleTextMode()).catch(
-              applicationStore.alertUnhandledError,
-            );
-          }
-        });
-        _editor.getModifiedEditor().onKeyDown((event) => {
-          if (event.keyCode === KeyCode.F8) {
-            event.preventDefault();
-            event.stopPropagation();
-            flowResult(editorStore.toggleTextMode()).catch(
-              applicationStore.alertUnhandledError,
-            );
-          }
-        });
-        disableEditorHotKeys(_editor);
+        _editor.getOriginalEditor().onKeyDown(createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     }, [applicationStore, editorStore, editor]);

package/src/components/workspace-review/WorkspaceReview.tsx

@@ -25,7 +25,7 @@ import { WorkspaceReviewPanel } from './WorkspaceReviewPanel.js';
 import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
 import {
   type ResizablePanelHandlerProps,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   clsx,
   PanelLoadingIndicator,
   ResizablePanel,
@@ -84,8 +84,10 @@ const WorkspaceReviewStatusBar = observer(() => {
             title="Go back to workspace setup using the specified project"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(reviewStore.projectId),
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(reviewStore.projectId),
+                ),
               )
             }
           >
@@ -97,11 +99,13 @@ const WorkspaceReviewStatusBar = observer(() => {
             title="Go back to workspace setup using the specified workspace"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(
-                  reviewStore.projectId,
-                  review.workspaceId,
-                  review.workspaceType,
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(
+                    reviewStore.projectId,
+                    review.workspaceId,
+                    review.workspaceType,
+                  ),
                 ),
               )
             }
@@ -148,10 +152,19 @@ const WorkspaceReviewExplorer = observer(() => {
   const reviewStore = useWorkspaceReviewStore();
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
+
+  // layout
   const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
     editorStore.sideBarDisplayState.setSize(
       (handleProps.domElement as HTMLDivElement).getBoundingClientRect().width,
     );
+  const sideBarCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+    editorStore.sideBarDisplayState.size === 0,
+    {
+      onStopResize: resizeSideBar,
+      size: editorStore.sideBarDisplayState.size,
+    },
+  );
 
   useEffect(() => {
     flowResult(reviewStore.fetchReviewComparison()).catch(
@@ -162,19 +175,16 @@ const WorkspaceReviewExplorer = observer(() => {
   return (
     <ResizablePanelGroup orientation="vertical">
       <ResizablePanel
-        {...getControlledResizablePanelProps(
-          editorStore.sideBarDisplayState.size === 0,
-          {
-            onStopResize: resizeSideBar,
-            size: editorStore.sideBarDisplayState.size,
-          },
-        )}
+        {...sideBarCollapsiblePanelGroupProps.collapsiblePanel}
         direction={1}
       >
         <WorkspaceReviewSideBar />
       </ResizablePanel>
       <ResizablePanelSplitter />
-      <ResizablePanel minSize={300}>
+      <ResizablePanel
+        {...sideBarCollapsiblePanelGroupProps.remainingPanel}
+        minSize={300}
+      >
         <WorkspaceReviewPanel />
       </ResizablePanel>
     </ResizablePanelGroup>