Merge pull request #27040 from overleaf/dp-file-tree-close-button

Add close button to file tree rail panel

GitOrigin-RevId: d8abac122e266922b9ca914bc5df6ae7895b3796

services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs

@@ -7,6 +7,7 @@ export default /** @type {const} */ ([
   'auto_delete',
   'book_5',
   'brush',
+  'close',
   'code',
   'content_copy',
   'create_new_folder',

services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-action-buttons.tsx

@@ -6,11 +6,13 @@ import React from 'react'
 import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import FileTreeActionButton from './file-tree-action-button'
+import { useRailContext } from '../../contexts/rail-context'
 
 export default function FileTreeActionButtons() {
   const { t } = useTranslation()
   const { fileTreeReadOnly } = useFileTreeData()
   const { write } = usePermissionsContext()
+  const { handlePaneCollapse } = useRailContext()
 
   const {
     canCreate,
@@ -102,6 +104,12 @@ export default function FileTreeActionButtons() {
           iconType="delete"
         />
       )}
+      <FileTreeActionButton
+        id="close"
+        description={t('close')}
+        onClick={handlePaneCollapse}
+        iconType="close"
+      />
     </div>
   )
 }

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

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { useRailContext } from '../contexts/rail-context'
 import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
 import React from 'react'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 
 export default function RailPanelHeader({
   title,
@@ -18,13 +19,19 @@ export default function RailPanelHeader({
 
       <div className="rail-panel-header-actions">
         {actions}
-        <OLIconButton
-          onClick={handlePaneCollapse}
-          className="rail-panel-header-button-subdued"
-          icon="close"
-          accessibilityLabel={t('close')}
-          size="sm"
-        />
+        <OLTooltip
+          id="close-rail-panel"
+          description={t('close')}
+          overlayProps={{ placement: 'bottom' }}
+        >
+          <OLIconButton
+            onClick={handlePaneCollapse}
+            className="rail-panel-header-button-subdued"
+            icon="close"
+            accessibilityLabel={t('close')}
+            size="sm"
+          />
+        </OLTooltip>
       </div>
     </header>
   )

services/web/frontend/js/shared/components/panel-heading.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react'
 import SplitTestBadge from '@/shared/components/split-test-badge'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 
 export const PanelHeading: FC<
   React.PropsWithChildren<{
@@ -26,15 +27,20 @@ export const PanelHeading: FC<
       </div>
 
       {children}
-
-      <button
-        type="button"
-        className="btn panel-heading-close-button"
-        aria-label={t('close')}
-        onClick={handleClose}
+      <OLTooltip
+        id="close-panel"
+        description={t('close')}
+        overlayProps={{ placement: 'bottom' }}
       >
-        <MaterialIcon type="close" />
-      </button>
+        <button
+          type="button"
+          className="btn panel-heading-close-button"
+          aria-label={t('close')}
+          onClick={handleClose}
+        >
+          <MaterialIcon type="close" />
+        </button>
+      </OLTooltip>
     </div>
   )
 }