Disable "PDF in separate tab" menu item when native BroadcastChannel is missing (#7954)

GitOrigin-RevId: a90c89296caeb5333c62150249dc4125a47a899a

services/web/frontend/extracted-translations.json

@@ -488,6 +488,7 @@
   "word_count": "",
   "work_offline": "",
   "work_with_non_overleaf_users": "",
+  "your_browser_does_not_support_this_feature": "",
   "your_message": "",
   "zotero_groups_loading_error": "",
   "zotero_groups_relink": "",

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

@@ -45,6 +45,31 @@ function IconCheckmark({ iconFor, pdfLayout, view, detachRole }) {
   return <IconPlaceholder />
 }
 
+function PdfDetachMenuItem({ handleDetach, children }) {
+  const { t } = useTranslation()
+
+  if (!('BroadcastChannel' in window)) {
+    return (
+      <OverlayTrigger
+        placement="left"
+        overlay={
+          <Tooltip id="detach-disabled-tooltip">
+            {t('your_browser_does_not_support_this_feature')}
+          </Tooltip>
+        }
+      >
+        <MenuItem disabled>{children}</MenuItem>
+      </OverlayTrigger>
+    )
+  }
+
+  return <MenuItem onSelect={handleDetach}>{children}</MenuItem>
+}
+PdfDetachMenuItem.propTypes = {
+  handleDetach: PropTypes.func.isRequired,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+}
+
 function LayoutDropdownButton() {
   const { t } = useTranslation()
 
@@ -174,11 +199,11 @@ function LayoutDropdownButton() {
               {t('pdf_in_separate_tab')}
             </MenuItem>
           ) : (
-            <MenuItem onSelect={handleDetach}>
+            <PdfDetachMenuItem handleDetach={handleDetach}>
               <IconPlaceholder />
               <IconDetach />
               {t('pdf_in_separate_tab')}
-            </MenuItem>
+            </PdfDetachMenuItem>
           )}
 
           <MenuItem divider />

services/web/locales/en.json

@@ -1633,6 +1633,7 @@
   "tab_connecting": "Connecting with the editor",
   "redirect_to_editor": "Redirect to editor",
   "layout_processing": "Layout processing",
+  "your_browser_does_not_support_this_feature": "Sorry, your browser doesn’t support this feature. Please update your browser to its latest version.",
   "show_in_code": "Show in code",
   "show_in_pdf": "Show in PDF",
   "fold_line": "Fold line",
@@ -1661,7 +1662,7 @@
   "keep_your_email_updated": "Keep your email updated so that you don’t lose access to your account and data.",
   "learn_more_about_emails": "<0>Learn more</0> about managing your __appName__ emails.",
   "thank_you_email_checked": "Thank you, we’re now taking you back to the projects page",
-  "change_primary_email_address_instructions": "To change your primary email, please add your new primary email address first (by clicking <0>Add another email</0>) and confirm it. Then click the <0>Make Primary</0> button. <1>Learn more</1> about managing your __appName__ emails.", 
+  "change_primary_email_address_instructions": "To change your primary email, please add your new primary email address first (by clicking <0>Add another email</0>) and confirm it. Then click the <0>Make Primary</0> button. <1>Learn more</1> about managing your __appName__ emails.",
   "help_improve_overleaf_fill_out_this_survey": "If you would like to help us improve Overleaf, please take a moment to fill out <0>this survey</0>.",
   "number_of_users": "Number of users",
   "number_of_users_info": "The number of users that can upgrade their Overleaf account if you purchase this plan.",

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

@@ -86,7 +86,10 @@ describe('<LayoutDropdownButton />', function () {
   })
 
   describe('on detach', function () {
+    let originalBroadcastChannel
     beforeEach(function () {
+      window.BroadcastChannel = originalBroadcastChannel || true // ensure that window.BroadcastChannel is truthy
+
       renderWithEditorContext(<LayoutDropdownButton />, {
         ui: { ...defaultUi, view: 'editor' },
       })
@@ -97,6 +100,10 @@ describe('<LayoutDropdownButton />', function () {
       fireEvent.click(menuItem)
     })
 
+    afterEach(function () {
+      window.BroadcastChannel = originalBroadcastChannel
+    })
+
     it('should show processing', function () {
       screen.getByText('Layout processing')
     })