Merge pull request #34364 from overleaf/mj-tabs-tweaks

[web] Tweaks for editor tabs release preparation

GitOrigin-RevId: 83de2fddc5410454fa0d55a517cedc7a455b807f

services/web/frontend/js/features/ide-react/components/editor/editor-panel.tsx

@@ -5,11 +5,11 @@ import FileView from '@/features/file-view/components/file-view'
 import { fileViewFile } from '@/features/ide-react/util/file-view'
 import MultipleSelectionPane from '@/features/ide-react/components/editor/multiple-selection-pane'
 import { TabsContainer } from '@/features/source-editor/components/tabs/tabs-container'
-import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import { useAreTabsEnabled } from '../../hooks/use-are-tabs-enabled'
 
 export default function EditorPanel() {
   const { selectedEntityCount, openEntity } = useFileTreeOpenContext()
-  const tabsEnabled = isSplitTestEnabled('editor-tabs')
+  const tabsEnabled = useAreTabsEnabled()
 
   return (
     <div className="ide-redesign-editor-container">

services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx

@@ -25,6 +25,7 @@ import getMeta from '@/utils/meta'
 import EditorCloneProjectModalWrapper from '@/features/clone-project-modal/components/editor-clone-project-modal-wrapper'
 import useOpenProject from '@/shared/hooks/use-open-project'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 const menubarExtraComponents = importOverleafModules(
   'menubarExtraComponents'
@@ -46,6 +47,8 @@ export const ToolbarMenuBar = () => {
   const showSupport = getMeta('ol-showSupport')
   const showDocumentation = getMeta('ol-wikiEnabled')
 
+  const hasEditorTabs = useFeatureFlag('editor-tabs')
+
   useCommandProvider(
     () => [
       {
@@ -204,8 +207,14 @@ export const ToolbarMenuBar = () => {
     [t]
   )
 
-  const { mathPreview, setMathPreview, breadcrumbs, setBreadcrumbs } =
-    useProjectSettingsContext()
+  const {
+    mathPreview,
+    setMathPreview,
+    breadcrumbs,
+    setBreadcrumbs,
+    editorTabs,
+    setEditorTabs,
+  } = useProjectSettingsContext()
 
   const toggleMathPreview = useCallback(() => {
     setMathPreview(!mathPreview)
@@ -215,6 +224,10 @@ export const ToolbarMenuBar = () => {
     setBreadcrumbs(!breadcrumbs)
   }, [setBreadcrumbs, breadcrumbs])
 
+  const toggleEditorTabs = useCallback(() => {
+    setEditorTabs(!editorTabs)
+  }, [setEditorTabs, editorTabs])
+
   const { setActiveModal } = useRailContext()
   const openKeyboardShortcutsModal = useCallback(() => {
     setActiveModal('keyboard-shortcuts')
@@ -252,6 +265,16 @@ export const ToolbarMenuBar = () => {
             }
             onClick={toggleBreadcrumbs}
           />
+          {hasEditorTabs && (
+            <MenuBarOption
+              eventKey="show_editor_tabs"
+              title={t('show_editor_tabs')}
+              leadingIcon={
+                editorTabs ? 'check' : <DropdownItem.EmptyLeadingIcon />
+              }
+              onClick={toggleEditorTabs}
+            />
+          )}
           <MenuBarOption
             eventKey="show_equation_preview"
             title={t('show_equation_preview')}