github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Disable the file tree "create file" name input while a request is in flight (#18001)

Browse source 
GitOrigin-RevId: ef505220e8cff1dce4c84483edacd96cc87bb1aa
This commit is contained in:
Alf Eaton 2024-04-24 11:11:27 +01:00 committed by Copybot
parent 2e634e665d
commit a697f9e7b0
6 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.jsx
View file

@ -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}
/>
<FormControl.Feedback />
@ -74,6 +76,7 @@ FileTreeCreateNameInput.propTypes = {
}),
placeholder: PropTypes.string,
error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
inFlight: PropTypes.bool.isRequired,
}
function ErrorMessage({ error }) {

4
services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.jsx
View file

@ -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 (
<form noValidate id="create-file" onSubmit={handleSubmit}>
<FileTreeCreateNameInput focusName error={error} />
<FileTreeCreateNameInput focusName error={error} inFlight={inFlight} />
{error && <ErrorMessage error={error} />}
</form>

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

@ -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<Project>()
const [selectedProjectEntity, setSelectedProjectEntity] = useState<Entity>()
@ -168,6 +168,7 @@ export default function FileTreeImportFromProject() {
}}
placeholder="example.tex"
error={error}
inFlight={inFlight}
/>
{error && <ErrorMessage error={error} />}

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

@ -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 && <ErrorMessage error={error} />}

3
services/web/frontend/stories/modals/create-file/create-file-name-input.stories.jsx
View file

@ -61,4 +61,7 @@ export default {
title: 'Editor / Modals / Create File / File Name Input',
component: FileTreeCreateNameInput,
decorators: [ModalBodyDecorator, ModalContentDecorator],
args: {
inFlight: false,
},
}

29
services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-create-name-input.spec.tsx
View file

@ -5,7 +5,7 @@ describe('<FileTreeCreateNameInput/>', function () {
it('renders an empty input', function () {
cy.mount(
<FileTreeCreateNameProvider>
<FileTreeCreateNameInput />
<FileTreeCreateNameInput inFlight={false} />
</FileTreeCreateNameProvider>
)
@ -19,6 +19,7 @@ describe('<FileTreeCreateNameInput/>', function () {
<FileTreeCreateNameInput
label="File name in this project"
placeholder="Enter a file name…"
inFlight={false}
/>
</FileTreeCreateNameProvider>
)
@ -30,7 +31,7 @@ describe('<FileTreeCreateNameInput/>', function () {
it('uses an initial name', function () {
cy.mount(
<FileTreeCreateNameProvider initialName="test.tex">
<FileTreeCreateNameInput />
<FileTreeCreateNameInput inFlight={false} />
</FileTreeCreateNameProvider>
)
@ -42,7 +43,7 @@ describe('<FileTreeCreateNameInput/>', function () {
cy.mount(
<FileTreeCreateNameProvider initialName="test.tex">
<FileTreeCreateNameInput focusName />
<FileTreeCreateNameInput focusName inFlight={false} />
</FileTreeCreateNameProvider>
)
@ -66,4 +67,26 @@ describe('<FileTreeCreateNameInput/>', function () {
expect(element.get(0).selectionEnd).to.equal(4)
})
})
it('disables the input when in flight', function () {
cy.mount(
<FileTreeCreateNameProvider initialName="test.tex">
<FileTreeCreateNameInput inFlight={false} />
</FileTreeCreateNameProvider>
).then(({ rerender }) => {
cy.findByLabelText('File Name').should('not.be.disabled')
rerender(
<FileTreeCreateNameProvider initialName="test.tex">
<FileTreeCreateNameInput inFlight />
</FileTreeCreateNameProvider>
)
cy.findByLabelText('File Name').should('be.disabled')
rerender(
<FileTreeCreateNameProvider initialName="test.tex">
<FileTreeCreateNameInput inFlight={false} />
</FileTreeCreateNameProvider>
)
cy.findByLabelText('File Name').should('not.be.disabled')
})
})
})