Merge pull request #29797 from overleaf/mj-rail-tab-hiding-refactor

[web] Refactor tab hiding

GitOrigin-RevId: 29b4d1e67348a51e3c575ab2dda6e0931a90d504

services/web/frontend/js/features/ide-redesign/components/rail/rail-overflow-dropdown.tsx

@@ -2,6 +2,7 @@ import { DropdownMenu } from '@/shared/components/dropdown/dropdown-menu'
 import { RailTabKey } from '../../contexts/rail-context'
 import { RailElement } from '../../utils/rail-types'
 import RailTab from './rail-tab'
+import { shouldIncludeRailTab } from '../../utils/rail-utils'
 
 export default function RailOverflowDropdown({
   tabs,
@@ -15,7 +16,7 @@ export default function RailOverflowDropdown({
   return (
     <DropdownMenu className="ide-rail-overflow-dropdown">
       {tabs
-        .filter(({ hide }) => !hide)
+        .filter(shouldIncludeRailTab)
         .map(({ icon, key, indicator, title, disabled }) => (
           <RailTab
             open={isOpen && selectedTab === key}

services/web/frontend/js/features/ide-redesign/components/rail/rail-panel.tsx

@@ -6,6 +6,7 @@ import usePreviousValue from '@/shared/hooks/use-previous-value'
 import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
 import { Tab } from 'react-bootstrap'
 import { RailElement } from '../../utils/rail-types'
+import { shouldIncludeRailTab } from '../../utils/rail-utils'
 
 export default function RailPanel({
   isReviewPanelOpen,
@@ -52,9 +53,7 @@ export default function RailPanel({
       >
         <Tab.Content className="ide-rail-tab-content">
           {railTabs
-            .filter(({ hide }) => {
-              return typeof hide === 'function' ? !hide() : !hide
-            })
+            .filter(shouldIncludeRailTab)
             .map(({ key, component, mountOnFirstLoad }) => (
               <Tab.Pane
                 eventKey={key}

services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx

@@ -30,6 +30,7 @@ import EditorTourRailTooltip from '../editor-tour/editor-tour-rail-tooltip'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 import EditorTourThemeTooltip from '../editor-tour/editor-tour-theme-tooltip'
 import EditorTourSwitchBackTooltip from '../editor-tour/editor-tour-switch-back-tooltip'
+import { shouldIncludeRailTab } from '../../utils/rail-utils'
 
 const moduleRailEntries = (
   importOverleafModules('railEntries') as {
@@ -174,7 +175,7 @@ export const RailLayout = () => {
 
   useEffect(() => {
     const validTabKeys = railTabs
-      .filter(tab => (typeof tab.hide === 'function' ? !tab.hide() : !tab.hide))
+      .filter(shouldIncludeRailTab)
       .map(tab => tab.key)
     if (!validTabKeys.includes(selectedTab) && isOpen) {
       // If the selected tab is no longer valid (e.g. due to permissions changes),
@@ -224,9 +225,7 @@ export const RailLayout = () => {
         <Nav activeKey={selectedTab} className="ide-rail-tabs-nav">
           <div className="ide-rail-tabs-wrapper" ref={tabWrapperRef}>
             {tabsInRail
-              .filter(({ hide }) =>
-                typeof hide === 'function' ? !hide() : !hide
-              )
+              .filter(shouldIncludeRailTab)
               .map(({ icon, key, indicator, title, disabled, ref }) => (
                 <RailTab
                   open={isOpen && selectedTab === key}

services/web/frontend/js/features/ide-redesign/utils/rail-utils.ts

@@ -0,0 +1,8 @@
+import { RailElement } from './rail-types'
+
+export function shouldIncludeRailTab({ hide }: RailElement): boolean {
+  if (typeof hide === 'function') {
+    return !hide()
+  }
+  return !hide
+}