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

GitOrigin-RevId: ef505220e8cff1dce4c84483edacd96cc87bb1aa

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}
       />
 
       <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 }) {

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

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<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} />}

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

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,
+  },
 }

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

@@ -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')
+    })
+  })
 })