Merge pull request #29997 from overleaf/acf-remove-trailing-dots-on-fetch

remove trailing dots on paste

GitOrigin-RevId: 486158afbec9822fd089a46d147994451d9fec65

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.tsx

@@ -1,5 +1,6 @@
 import {
   ChangeEvent,
+  ClipboardEvent,
   FormEventHandler,
   useCallback,
   useEffect,
@@ -55,6 +56,13 @@ export default function FileTreeImportFromUrl() {
     })
   }
 
+  const handlePaste = useCallback((event: ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault()
+    const text = event.clipboardData?.getData('text/plain') ?? ''
+    const pastedText = text.replace(/\.*\s*$/, '')
+    setUrl(pastedText)
+  }, [])
+
   return (
     <form
       className="form-controls"
@@ -70,6 +78,7 @@ export default function FileTreeImportFromUrl() {
           required
           value={url}
           onChange={handleChange}
+          onPaste={handlePaste}
         />
       </OLFormGroup>
 

services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx

@@ -387,6 +387,100 @@ describe('<FileTreeModalCreateFile/>', function () {
       })
   })
 
+  it('imports from a pasted URL and removes a trailing dot', function () {
+    cy.intercept('/project/*/linked_file', {
+      statusCode: 204,
+    }).as('createLinkedFile')
+
+    cy.mount(
+      <EditorProviders>
+        <FileTreeProvider>
+          <OpenWithMode mode="url" />
+        </FileTreeProvider>
+      </EditorProviders>
+    )
+
+    cy.wrap(null).then(() => {
+      const clipboardData = new DataTransfer()
+      clipboardData.setData('text/plain', 'https://example.com/example.tex.')
+
+      cy.findByLabelText('URL to fetch the file from').trigger('paste', {
+        clipboardData,
+      })
+    })
+
+    cy.findByLabelText('URL to fetch the file from').should(
+      'have.value',
+      'https://example.com/example.tex'
+    )
+
+    cy.findByLabelText('File Name In This Project').should(
+      'have.value',
+      'example.tex'
+    )
+
+    cy.findByLabelText('File Name In This Project').clear()
+    cy.findByLabelText('File Name In This Project').type('test.tex')
+
+    cy.findByRole('button', { name: 'Create' }).click()
+
+    cy.get('@createLinkedFile')
+      .its('request.body')
+      .should('deep.equal', {
+        name: 'test.tex',
+        provider: 'url',
+        parent_folder_id: 'root-folder-id',
+        data: { url: 'https://example.com/example.tex' },
+      })
+  })
+
+  it('imports from a pasted URL without a trailing dot and keeps it unchanged', function () {
+    cy.intercept('/project/*/linked_file', {
+      statusCode: 204,
+    }).as('createLinkedFile')
+
+    cy.mount(
+      <EditorProviders>
+        <FileTreeProvider>
+          <OpenWithMode mode="url" />
+        </FileTreeProvider>
+      </EditorProviders>
+    )
+
+    cy.wrap(null).then(() => {
+      const clipboardData = new DataTransfer()
+      clipboardData.setData('text/plain', 'https://example.com/example.tex')
+
+      cy.findByLabelText('URL to fetch the file from').trigger('paste', {
+        clipboardData,
+      })
+    })
+
+    cy.findByLabelText('URL to fetch the file from').should(
+      'have.value',
+      'https://example.com/example.tex'
+    )
+
+    cy.findByLabelText('File Name In This Project').should(
+      'have.value',
+      'example.tex'
+    )
+
+    cy.findByLabelText('File Name In This Project').clear()
+    cy.findByLabelText('File Name In This Project').type('test.tex')
+
+    cy.findByRole('button', { name: 'Create' }).click()
+
+    cy.get('@createLinkedFile')
+      .its('request.body')
+      .should('deep.equal', {
+        name: 'test.tex',
+        provider: 'url',
+        parent_folder_id: 'root-folder-id',
+        data: { url: 'https://example.com/example.tex' },
+      })
+  })
+
   it('uploads a dropped file', function () {
     cy.intercept('post', '/project/*/upload?folder_id=root-folder-id', {
       statusCode: 204,