From a697f9e7b07bdcaa76ca759ac40bb5da1523fcea Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Wed, 24 Apr 2024 11:11:27 +0100 Subject: [PATCH] Disable the file tree "create file" name input while a request is in flight (#18001) GitOrigin-RevId: ef505220e8cff1dce4c84483edacd96cc87bb1aa --- .../file-tree-create-name-input.jsx | 3 ++ .../modes/file-tree-create-new-doc.jsx | 4 +-- .../modes/file-tree-import-from-project.tsx | 3 +- .../modes/file-tree-import-from-url.jsx | 3 +- .../create-file-name-input.stories.jsx | 3 ++ .../file-tree-create-name-input.spec.tsx | 29 +++++++++++++++++-- 6 files changed, 38 insertions(+), 7 deletions(-) diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.jsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.jsx index 7201527d5e..1a26d12a8a 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.jsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.jsx @@ -21,6 +21,7 @@ export default function FileTreeCreateNameInput({ classes = {}, placeholder, error, + inFlight, }) { const { t } = useTranslation() @@ -51,6 +52,7 @@ export default function FileTreeCreateNameInput({ value={name} onChange={event => setName(event.target.value)} inputRef={inputRef} + disabled={inFlight} /> @@ -74,6 +76,7 @@ FileTreeCreateNameInput.propTypes = { }), placeholder: PropTypes.string, error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + inFlight: PropTypes.bool.isRequired, } function ErrorMessage({ error }) { diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.jsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.jsx index 2f72234c0a..c47a8b5f8e 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.jsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.jsx @@ -9,7 +9,7 @@ import ErrorMessage from '../error-message' export default function FileTreeCreateNewDoc() { const { name, validName } = useFileTreeCreateName() const { setValid } = useFileTreeCreateForm() - const { error, finishCreatingDoc } = useFileTreeActionable() + const { error, finishCreatingDoc, inFlight } = useFileTreeActionable() // form validation: name is valid useEffect(() => { @@ -32,7 +32,7 @@ export default function FileTreeCreateNewDoc() { return (
- + {error && } diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.tsx index c8f181ab9c..ddf2f9e679 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.tsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.tsx @@ -31,7 +31,7 @@ export default function FileTreeImportFromProject() { const { name, setName, validName } = useFileTreeCreateName() const { setValid } = useFileTreeCreateForm() - const { error, finishCreatingLinkedFile } = useFileTreeActionable() + const { error, finishCreatingLinkedFile, inFlight } = useFileTreeActionable() const [selectedProject, setSelectedProject] = useState() const [selectedProjectEntity, setSelectedProjectEntity] = useState() @@ -168,6 +168,7 @@ export default function FileTreeImportFromProject() { }} placeholder="example.tex" error={error} + inFlight={inFlight} /> {error && } diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.jsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.jsx index 23aac7d7e1..7318aec78e 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.jsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.jsx @@ -12,7 +12,7 @@ export default function FileTreeImportFromUrl() { const { t } = useTranslation() const { name, setName, validName } = useFileTreeCreateName() const { setValid } = useFileTreeCreateForm() - const { finishCreatingLinkedFile, error } = useFileTreeActionable() + const { finishCreatingLinkedFile, error, inFlight } = useFileTreeActionable() const [url, setUrl] = useState('') @@ -70,6 +70,7 @@ export default function FileTreeImportFromUrl() { label={t('file_name_in_this_project')} placeholder="my_file" error={error} + inFlight={inFlight} /> {error && } diff --git a/services/web/frontend/stories/modals/create-file/create-file-name-input.stories.jsx b/services/web/frontend/stories/modals/create-file/create-file-name-input.stories.jsx index f61e7ab723..8f68e2d7b8 100644 --- a/services/web/frontend/stories/modals/create-file/create-file-name-input.stories.jsx +++ b/services/web/frontend/stories/modals/create-file/create-file-name-input.stories.jsx @@ -61,4 +61,7 @@ export default { title: 'Editor / Modals / Create File / File Name Input', component: FileTreeCreateNameInput, decorators: [ModalBodyDecorator, ModalContentDecorator], + args: { + inFlight: false, + }, } diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-create-name-input.spec.tsx b/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-create-name-input.spec.tsx index 8a7b41b167..be721e86f4 100644 --- a/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-create-name-input.spec.tsx +++ b/services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-create-name-input.spec.tsx @@ -5,7 +5,7 @@ describe('', function () { it('renders an empty input', function () { cy.mount( - + ) @@ -19,6 +19,7 @@ describe('', function () { ) @@ -30,7 +31,7 @@ describe('', function () { it('uses an initial name', function () { cy.mount( - + ) @@ -42,7 +43,7 @@ describe('', function () { cy.mount( - + ) @@ -66,4 +67,26 @@ describe('', function () { expect(element.get(0).selectionEnd).to.equal(4) }) }) + + it('disables the input when in flight', function () { + cy.mount( + + + + ).then(({ rerender }) => { + cy.findByLabelText('File Name').should('not.be.disabled') + rerender( + + + + ) + cy.findByLabelText('File Name').should('be.disabled') + rerender( + + + + ) + cy.findByLabelText('File Name').should('not.be.disabled') + }) + }) })