Merge pull request #6911 from overleaf/ta-layout-dropdown-view-fix

Fix Layout Dropdown in History and File Views

GitOrigin-RevId: 17792e6ec516ac9d72c050d5e2b83066fa34ed6d

services/web/app/views/project/editor/editor-pane.pug

@@ -13,7 +13,10 @@
 		}"
 	)
 
+		include ./file-view
+
 		.editor-container.full-size(
+			ng-show="ui.view == 'editor'"
 			vertical-resizable-panes="symbol-palette-resizer"
 			vertical-resizable-panes-hidden-externally-on="symbol-palette-toggled"
 			vertical-resizable-panes-hidden-initially="true"

services/web/app/views/project/editor/editor.pug

@@ -1,5 +1,5 @@
 div.full-size(
-	ng-show="ui.view == 'editor'"
+	ng-show="ui.view == 'editor' || ui.view === 'file'"
 	layout="pdf"
 	layout-disabled="ui.pdfLayout != 'sideBySide'"
 	mask-iframes-on-resize="true"

services/web/app/views/project/editor/main.pug

@@ -37,8 +37,6 @@ include ./left-menu
 			.ui-layout-center
 				include ./editor
 
-				include ./file-view
-
 				include ./history
 
 	if !isRestrictedTokenMember

services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js

@@ -28,10 +28,14 @@ function IconDetach() {
 }
 
 function IconCheckmark({ iconFor, pdfLayout, view, detachRole }) {
-  if (detachRole === 'detacher') {
+  if (detachRole === 'detacher' || view === 'history') {
     return <IconPlaceholder />
   }
-  if (iconFor === 'editorOnly' && pdfLayout === 'flat' && view === 'editor') {
+  if (
+    iconFor === 'editorOnly' &&
+    pdfLayout === 'flat' &&
+    (view === 'editor' || view === 'file')
+  ) {
     return <IconChecked />
   } else if (iconFor === 'pdfOnly' && pdfLayout === 'flat' && view === 'pdf') {
     return <IconChecked />

services/web/frontend/js/ide/binary-files/BinaryFilesManager.js

@@ -18,6 +18,8 @@ export default BinaryFilesManager = class BinaryFilesManager {
     this.$scope.$on('entity:selected', (event, entity) => {
       if (this.$scope.ui.view !== 'track-changes' && entity.type === 'file') {
         return this.openFile(entity)
+      } else if (entity.type === 'doc') {
+        return this.closeFile()
       }
     })
   }
@@ -39,4 +41,16 @@ export default BinaryFilesManager = class BinaryFilesManager {
       this
     )
   }
+
+  closeFile() {
+    return window.setTimeout(
+      () => {
+        this.$scope.openFile = null
+        this.$scope.ui.view = 'editor'
+        this.$scope.$apply()
+      },
+      0,
+      this
+    )
+  }
 }

services/web/frontend/js/shared/context/layout-context.js

@@ -23,7 +23,7 @@ LayoutContext.Provider.propTypes = {
     detachIsLinked: PropTypes.bool,
     detachRole: PropTypes.string,
     changeLayout: PropTypes.func.isRequired,
-    view: PropTypes.string,
+    view: PropTypes.oneOf(['editor', 'file', 'pdf', 'history']),
     setView: PropTypes.func.isRequired,
     chatIsOpen: PropTypes.bool,
     setChatIsOpen: PropTypes.func.isRequired,
@@ -56,6 +56,14 @@ export function LayoutProvider({ children }) {
           $scope.toggleHistory()
         }
 
+        if (value === 'editor' && $scope.openFile) {
+          // if a file is currently opened, ensure the view is 'file' instead of
+          // 'editor' when the 'editor' view is requested. This is to ensure
+          // that the entity selected in the file tree is the one visible and
+          // that docs don't take precendence over files.
+          return 'file'
+        }
+
         return value
       })
     },

services/web/test/frontend/features/editor-navigation-toolbar/components/layout-dropdown-button.test.js

@@ -44,6 +44,47 @@ describe('<LayoutDropdownButton />', function () {
     })
   })
 
+  it('should not select any option in history view', function () {
+    // Selected is aria-label, visually we show a checkmark
+    renderWithEditorContext(<LayoutDropdownButton />, {
+      ui: { ...defaultUi, view: 'history' },
+    })
+    screen.getByRole('menuitem', {
+      name: 'Editor & PDF',
+    })
+    screen.getByRole('menuitem', {
+      name: 'PDF only (hide editor)',
+    })
+    screen.getByRole('menuitem', {
+      name: 'Editor only (hide PDF)',
+    })
+    screen.getByRole('menuitem', {
+      name: 'PDF in separate tab',
+    })
+  })
+
+  it('should treat file and editor views the same way', function () {
+    // Selected is aria-label, visually we show a checkmark
+    renderWithEditorContext(<LayoutDropdownButton />, {
+      ui: {
+        pdfLayout: 'flat',
+        view: 'file',
+      },
+    })
+    screen.getByRole('menuitem', {
+      name: 'Editor & PDF',
+    })
+    screen.getByRole('menuitem', {
+      name: 'PDF only (hide editor)',
+    })
+    screen.getByRole('menuitem', {
+      name: 'Selected Editor only (hide PDF)',
+    })
+    screen.getByRole('menuitem', {
+      name: 'PDF in separate tab',
+    })
+  })
+
   describe('on detach', function () {
     beforeEach(function () {
       renderWithEditorContext(<LayoutDropdownButton />, {