Merge pull request #34395 from overleaf/mj-tabs-disable-close-button

[web] Disable close tab button on last tab

GitOrigin-RevId: 2d4600162696b07848311e75154d9d86aac0b315

services/web/frontend/js/features/source-editor/components/tabs/tab.tsx

@@ -26,6 +26,7 @@ type TabProps = {
   tab: EditorFileTab
   openTab: (id: string) => void
   closeTab: (id: string) => void
+  canCloseTab: boolean
   makeTabPermanent: (id: string) => void
   openContextMenu: (
     coords: { top: number; left: number },
@@ -56,6 +57,7 @@ export const Tab = memo(function Tab({
   tab,
   openTab,
   closeTab,
+  canCloseTab,
   makeTabPermanent,
   openContextMenu,
   closeContextMenu,
@@ -233,6 +235,7 @@ export const Tab = memo(function Tab({
         <div className="editor-file-tab-action">
           <button
             onClick={onCloseClick}
+            disabled={!canCloseTab}
             className="editor-file-tab-close-action"
             aria-label={t('close')}
           >

services/web/frontend/js/features/source-editor/components/tabs/tabs-container.tsx

@@ -106,6 +106,7 @@ export const TabsContainer = () => {
             tab={tab}
             openTab={openTab}
             closeTab={closeTab}
+            canCloseTab={tabs.length > 1}
             isSelected={openEntity?.entity._id === tab.id}
             onTabDrop={moveTab}
             makeTabPermanent={makeTabPermanent}

services/web/frontend/stylesheets/pages/editor/tabs.scss

@@ -177,10 +177,23 @@
     padding: 0;
     display: flex;
     align-items: center;
+    border-radius: 100%;
+    justify-content: center;
 
     &:hover {
+      background-color: var(--bg-secondary-themed);
       color: var(--content-primary-themed);
     }
+
+    &:disabled {
+      cursor: default;
+      color: var(--content-disabled-themed);
+
+      &:hover {
+        background-color: transparent;
+        color: var(--content-disabled-themed);
+      }
+    }
   }
 
   &:hover,

services/web/test/frontend/features/source-editor/components/tabs.spec.tsx

@@ -463,14 +463,9 @@ describe('File Tabs', function () {
       cy.then(() => selectDoc(DOC_IDS.main))
       cy.findAllByRole('tab').should('have.length', 1)
 
-      // Attempt to close the only tab
       cy.findByRole('tab', { name: /main\.tex/ }).within(() => {
-        cy.findByRole('button', { name: 'Close' }).click()
+        cy.findByRole('button', { name: 'Close' }).should('be.disabled')
       })
-
-      // Tab must still exist
-      cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
-      cy.findAllByRole('tab').should('have.length', 1)
     })
 
     it('switches to an adjacent tab when closing the currently active tab', function () {
@@ -1152,11 +1147,8 @@ describe('File Tabs', function () {
       cy.findByRole('tab', { name: /appendix\.tex/ }).should('exist')
 
       cy.findByRole('tab', { name: /appendix\.tex/ }).within(() => {
-        cy.findByRole('button', { name: 'Close' }).click()
+        cy.findByRole('button', { name: 'Close' }).should('be.disabled')
       })
-
-      cy.findAllByRole('tab').should('have.length', 1)
-      cy.findByRole('tab', { name: /appendix\.tex/ }).should('exist')
     })
   })