diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.tsx index dc8e113a68..6b617e1bd9 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.tsx +++ b/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) => { + event.preventDefault() + const text = event.clipboardData?.getData('text/plain') ?? '' + const pastedText = text.replace(/\.*\s*$/, '') + setUrl(pastedText) + }, []) + return (
diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx b/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx index 6ef921598e..95cce1e2ba 100644 --- a/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx +++ b/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx @@ -387,6 +387,100 @@ describe('', function () { }) }) + it('imports from a pasted URL and removes a trailing dot', function () { + cy.intercept('/project/*/linked_file', { + statusCode: 204, + }).as('createLinkedFile') + + cy.mount( + + + + + + ) + + 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( + + + + + + ) + + 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,