Merge pull request #6294 from overleaf/ta-synctex-detach-icon

Remove Arrows from Synctex Button in Detach Mode

GitOrigin-RevId: 0b96ed29fd43308383c1db658f1d8d5143e3dd23

services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js

@@ -28,6 +28,17 @@ function GoToCodeButton({
     'detach-synctex-control': !!isDetachLayout,
   })
 
+  let buttonIcon = null
+  if (syncToCodeInFlight) {
+    buttonIcon = (
+      <Icon type="refresh" spin classes={{ icon: 'synctex-spin-icon' }} />
+    )
+  } else if (!isDetachLayout) {
+    buttonIcon = (
+      <Icon type="arrow-left" classes={{ icon: 'synctex-control-icon' }} />
+    )
+  }
+
   return (
     <OverlayTrigger
       placement={tooltipPlacement}
@@ -45,11 +56,7 @@ function GoToCodeButton({
         className={buttonClasses}
         aria-label={t('go_to_pdf_location_in_code')}
       >
-        {syncToCodeInFlight ? (
-          <Icon type="refresh" spin classes={{ icon: 'synctex-spin-icon' }} />
-        ) : (
-          <Icon type="arrow-left" classes={{ icon: 'synctex-control-icon' }} />
-        )}
+        {buttonIcon}
         {isDetachLayout ? <span>&nbsp;{t('show_in_code')}</span> : ''}
       </Button>
     </OverlayTrigger>
@@ -68,6 +75,17 @@ function GoToPdfButton({
     'detach-synctex-control': !!isDetachLayout,
   })
 
+  let buttonIcon = null
+  if (syncToPdfInFlight) {
+    buttonIcon = (
+      <Icon type="refresh" spin classes={{ icon: 'synctex-spin-icon' }} />
+    )
+  } else if (!isDetachLayout) {
+    buttonIcon = (
+      <Icon type="arrow-right" classes={{ icon: 'synctex-control-icon' }} />
+    )
+  }
+
   return (
     <OverlayTrigger
       placement={tooltipPlacement}
@@ -85,11 +103,7 @@ function GoToPdfButton({
         className={buttonClasses}
         aria-label={t('go_to_code_location_in_pdf')}
       >
-        {syncToPdfInFlight ? (
-          <Icon type="refresh" spin classes={{ icon: 'synctex-spin-icon' }} />
-        ) : (
-          <Icon type="arrow-right" classes={{ icon: 'synctex-control-icon' }} />
-        )}
+        {buttonIcon}
         {isDetachLayout ? <span>&nbsp;{t('show_in_pdf')}</span> : ''}
       </Button>
     </OverlayTrigger>

services/web/test/frontend/features/pdf-preview/components/pdf-synctex-controls.test.js

@@ -125,7 +125,7 @@ describe('<PdfSynctexControls/>', function () {
       return null
     }
 
-    renderWithEditorContext(
+    const { container } = renderWithEditorContext(
       <>
         <Inner />
         <PdfSynctexControls />
@@ -141,6 +141,10 @@ describe('<PdfSynctexControls/>', function () {
       name: 'Go to PDF location in code',
     })
 
+    expect(container.querySelectorAll('.synctex-control-icon').length).to.equal(
+      2
+    )
+
     // mock editor cursor position update
     fireEvent(
       window,
@@ -173,14 +177,18 @@ describe('<PdfSynctexControls/>', function () {
       window.metaAttributesCache.set('ol-detachRole', 'detacher')
     })
 
-    it('does not have go to PDF location button', async function () {
-      renderWithEditorContext(<PdfSynctexControls />, { scope })
+    it('does not have go to PDF location button nor arrow icon', async function () {
+      const { container } = renderWithEditorContext(<PdfSynctexControls />, {
+        scope,
+      })
 
       expect(
         await screen.queryByRole('button', {
           name: 'Go to PDF location in code',
         })
       ).to.not.exist
+
+      expect(container.querySelector('.synctex-control-icon')).to.not.exist
     })
 
     it('send go to PDF location action', async function () {
@@ -212,7 +220,9 @@ describe('<PdfSynctexControls/>', function () {
     })
 
     it('update inflight state', async function () {
-      renderWithEditorContext(<PdfSynctexControls />, { scope })
+      const { container } = renderWithEditorContext(<PdfSynctexControls />, {
+        scope,
+      })
       sysendTestHelper.resetHistory()
 
       const syncToPdfButton = await screen.findByRole('button', {
@@ -233,6 +243,9 @@ describe('<PdfSynctexControls/>', function () {
         data: { value: true },
       })
       expect(syncToPdfButton.disabled).to.be.true
+      expect(container.querySelectorAll('.synctex-spin-icon').length).to.equal(
+        1
+      )
 
       sysendTestHelper.receiveMessage({
         role: 'detached',
@@ -240,6 +253,9 @@ describe('<PdfSynctexControls/>', function () {
         data: { value: false },
       })
       expect(syncToPdfButton.disabled).to.be.false
+      expect(container.querySelectorAll('.synctex-spin-icon').length).to.equal(
+        0
+      )
     })
   })
 
@@ -248,18 +264,24 @@ describe('<PdfSynctexControls/>', function () {
       window.metaAttributesCache.set('ol-detachRole', 'detached')
     })
 
-    it('does not have go to code location button', async function () {
-      renderWithEditorContext(<PdfSynctexControls />, { scope })
+    it('does not have go to code location button nor arrow icon', async function () {
+      const { container } = renderWithEditorContext(<PdfSynctexControls />, {
+        scope,
+      })
 
       expect(
         await screen.queryByRole('button', {
           name: 'Go to code location in PDF',
         })
       ).to.not.exist
+
+      expect(container.querySelector('.synctex-control-icon')).to.not.exist
     })
 
     it('send go to code line action and update inflight state', async function () {
-      renderWithEditorContext(<PdfSynctexControls />, { scope })
+      const { container } = renderWithEditorContext(<PdfSynctexControls />, {
+        scope,
+      })
       sysendTestHelper.resetHistory()
 
       const syncToCodeButton = await screen.findByRole('button', {
@@ -268,9 +290,17 @@ describe('<PdfSynctexControls/>', function () {
 
       sysendTestHelper.resetHistory()
 
+      expect(syncToCodeButton.disabled).to.be.false
+      expect(container.querySelectorAll('.synctex-spin-icon').length).to.equal(
+        0
+      )
+
       fireEvent.click(syncToCodeButton)
 
       expect(syncToCodeButton.disabled).to.be.true
+      expect(container.querySelectorAll('.synctex-spin-icon').length).to.equal(
+        1
+      )
 
       await waitFor(() => {
         expect(fetchMock.called('express:/project/:projectId/sync/pdf')).to.be