From c904ab38179f4026fdbe3d151cc9d3cc7fd5c184 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 30 Oct 2023 10:12:18 +0000
Subject: [PATCH] [visual] Hide/disable editing features in href tooltip when
 doc is read-only (#15451)

GitOrigin-RevId: 22f07849c0a09a4536f7bbbe16a43514520cba8b
---
 .../command-tooltip/href-tooltip.tsx          | 33 ++++++++++---------
 ...codemirror-editor-visual-readonly.spec.tsx | 14 ++++++++
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx b/services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx
index 88b05b4623..221a0f3add 100644
--- a/services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx
+++ b/services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx
@@ -93,6 +93,7 @@ export const HrefTooltipContent: FC = () => {
                 view.dispatch(spec)
               }
             }}
+            disabled={state.readOnly}
           />
         </FormGroup>
       </form>
@@ -110,21 +111,23 @@ export const HrefTooltipContent: FC = () => {
         {t('open_link')}
       </Button>
 
-      <Button
-        type="button"
-        bsStyle="link"
-        className="ol-cm-command-tooltip-link"
-        onClick={() => {
-          const spec = removeLink(state)
-          if (spec) {
-            view.dispatch(spec)
-            view.focus()
-          }
-        }}
-      >
-        <Icon type="chain-broken" fw />
-        {t('remove_link')}
-      </Button>
+      {!state.readOnly && (
+        <Button
+          type="button"
+          bsStyle="link"
+          className="ol-cm-command-tooltip-link"
+          onClick={() => {
+            const spec = removeLink(state)
+            if (spec) {
+              view.dispatch(spec)
+              view.focus()
+            }
+          }}
+        >
+          <Icon type="chain-broken" fw />
+          {t('remove_link')}
+        </Button>
+      )}
     </div>
   )
 }
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx
index 331cc898d6..8f26ab8f6f 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx
+++ b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx
@@ -118,4 +118,18 @@ describe('<CodeMirrorEditor/> in Visual mode with read-only permission', functio
     cy.get('img.ol-cm-graphics').should('have.length', 1)
     cy.findByRole('button', { name: 'Edit figure' }).should('not.exist')
   })
+
+  it('does not display editing features in the href tooltip', function () {
+    mountEditor('\\href{https://example.com/}{foo}\n\n')
+
+    // move the selection outside the link
+    cy.get('.cm-line').eq(2).click()
+
+    // put the selection inside the href command
+    cy.findByText('foo').click()
+
+    cy.findByRole('button', { name: 'Go to page' })
+    cy.findByLabelText('URL').should('be.disabled')
+    cy.findByRole('button', { name: 'Remove link' }).should('not.exist')
+  })
 })