feat: enhance form submission handling to prevent duplicate submits and improve async support

Author: marosvolgyiz

apps/sensenet/src/components/editor/json-editor.tsx

@@ -24,9 +24,9 @@ export const JsonEditor: React.FunctionComponent<TextEditorProps> = (props) => {
   const logger = useLogger('JSONEditor')
   const [error, setError] = useState<Error | undefined>()
 
-  const saveContent = () => {
+  const saveContent = async () => {
     try {
-      props.saveContent(JSON.parse(textValue))
+      await props.saveContent(JSON.parse(textValue))
       logger.information({
         message: localization.textEditor.saveSuccessNotification.replace(
           '{0}',
@@ -41,6 +41,7 @@ export const JsonEditor: React.FunctionComponent<TextEditorProps> = (props) => {
           },
         },
       })
+      setSavedTextValue(textValue)
     } catch (err) {
       setHasChanges(true)
       logger.error({

apps/sensenet/src/components/editor/sn-monaco-editor.tsx

@@ -1,6 +1,6 @@
 import { Button, createStyles, makeStyles, useTheme } from '@material-ui/core'
 import { clsx } from 'clsx'
-import React, { lazy, useContext, useRef } from 'react'
+import React, { lazy, useContext, useEffect, useRef, useState } from 'react'
 import { Prompt, useHistory } from 'react-router'
 import { PATHS } from '../../application-paths'
 import { ResponsiveContext } from '../../context'
@@ -66,7 +66,7 @@ export interface SnMonacoEditorProps {
   savedTextValue: string
   hasChanges: boolean
   uri: import('react-monaco-editor').monaco.Uri
-  handleSubmit: Function
+  handleSubmit: () => void | Promise<unknown>
   renderTitle: () => JSX.Element
   additionalButtons?: JSX.Element
   handleCancel?: () => void
@@ -81,6 +81,34 @@ export const SnMonacoEditor: React.FunctionComponent<SnMonacoEditorProps> = (pro
   const classes = useStyles()
   const globalClasses = useGlobalStyles()
   const formSubmitButton = useRef<HTMLButtonElement>(null)
+  const isMountedRef = useRef(true)
+  const isSubmittingRef = useRef(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
+    ev.preventDefault()
+    if (isSubmittingRef.current) {
+      return
+    }
+
+    isSubmittingRef.current = true
+    setIsSubmitting(true)
+
+    try {
+      await props.handleSubmit()
+    } finally {
+      isSubmittingRef.current = false
+      if (isMountedRef.current) {
+        setIsSubmitting(false)
+      }
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
 
   const renderPresets = () => {
     if (props.preset?.includes(PATHS.contentTypes.snPath)) {
@@ -98,10 +126,7 @@ export const SnMonacoEditor: React.FunctionComponent<SnMonacoEditorProps> = (pro
     <div data-test="editor-wrapper" className={classes.editorWrapper}>
       <form
         className={classes.form}
-        onSubmit={(ev) => {
-          ev.preventDefault()
-          props.handleSubmit()
-        }}
+        onSubmit={handleSubmit}
         onKeyDown={async (ev) => {
           if (ev.key.toLowerCase() === 's' && ev.ctrlKey) {
             try {
@@ -135,11 +160,12 @@ export const SnMonacoEditor: React.FunctionComponent<SnMonacoEditorProps> = (pro
             <Button
               data-test="monaco-editor-submit"
               aria-label={localization.forms.submit}
+              aria-busy={isSubmitting}
               variant="contained"
               color="primary"
               type="submit"
               ref={formSubmitButton}
-              disabled={!props.hasChanges}>
+              disabled={!props.hasChanges || isSubmitting}>
               {localization.forms.submit}
             </Button>
           </div>

docker-compose.dev.yml

@@ -18,7 +18,7 @@ services:
       - sensenet-app-node-modules:/app/apps/sensenet/node_modules
     command: sh -c "yarn build && yarn snapp start"
     healthcheck:
-      test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:4052/" ]
+      test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:8080/" ]
       interval: 30s
       timeout: 3s
       start_period: 120s

packages/sn-controls-react/src/viewcontrols/edit-view.tsx

@@ -23,7 +23,7 @@ export interface EditViewProps {
   actionName?: ActionName
   content?: GenericContent
   contentTypeName: string
-  onSubmit?: (content: Partial<GenericContent>, contentTypeName?: string) => void
+  onSubmit?: (content: Partial<GenericContent>, contentTypeName?: string) => void | Promise<unknown>
   renderIcon?: (name: string) => ReactElement
   renderTitle?: () => ReactElement
   handleCancel?: () => void
@@ -105,7 +105,10 @@ export const EditView: React.FC<EditViewProps> = (props) => {
   const [advancedFields, setAdvancedFields] = useState<AdvancedFieldGroup[]>([])
   const [advancedFieldStateGroup, setAdvancedFieldStateGroup] = useState<Array<{ key: string; isOpened: boolean }>>([])
   const contentRef = useRef({})
+  const isMountedRef = useRef(true)
+  const isSubmittingRef = useRef(false)
   const [content, setContent] = useState(contentRef.current)
+  const [isSubmitting, setIsSubmitting] = useState(false)
   contentRef.current = content
   const classes = useStyles(props)
   const repository = useRepository()
@@ -114,9 +117,23 @@ export const EditView: React.FC<EditViewProps> = (props) => {
 
   let isAutofocusSet = false
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    props.onSubmit?.(content, schema.schema.ContentTypeName)
+    if (isSubmittingRef.current) {
+      return
+    }
+
+    isSubmittingRef.current = true
+    setIsSubmitting(true)
+
+    try {
+      await props.onSubmit?.(content, schema.schema.ContentTypeName)
+    } finally {
+      isSubmittingRef.current = false
+      if (isMountedRef.current) {
+        setIsSubmitting(false)
+      }
+    }
   }
 
   const handleInputChange = (field: string, value: unknown) => {
@@ -130,6 +147,12 @@ export const EditView: React.FC<EditViewProps> = (props) => {
     return () => schemaObservable.dispose()
   }, [repository.schemas, actionName, controlMapper, props.contentTypeName])
 
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
   useEffect(() => {
     if (actionName && schema) {
       const groups: AdvancedFieldGroup[] = [
@@ -280,8 +303,10 @@ export const EditView: React.FC<EditViewProps> = (props) => {
         </MediaQuery>
         <Button
           aria-label={props.localization?.submit || 'Submit'}
+          aria-busy={isSubmitting}
           type="submit"
           data-test="submit"
+          disabled={isSubmitting}
           form={`edit-form-${uniqueId}`}
           variant="contained"
           color="primary">

packages/sn-controls-react/test/edit-view.test.tsx

@@ -90,6 +90,37 @@ describe('Edit view component', () => {
     wrapper.find('[component="form"]').simulate('submit', { preventDefault: jest.fn() })
     expect(onSubmit).toBeCalledWith({ VersioningMode: '1' }, 'GenericContent')
   })
+
+  it('should prevent duplicate submits while submit is pending', async () => {
+    let resolveSubmit: () => void = () => undefined
+    const onSubmit = jest.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSubmit = resolve
+        }),
+    )
+    const wrapper = shallow(
+      <EditView repository={testRepository} onSubmit={onSubmit} content={testFile} contentTypeName={testFile.Type} />,
+    )
+    const event = { preventDefault: jest.fn() }
+
+    act(() => {
+      wrapper.find('[component="form"]').simulate('submit', event)
+      wrapper.find('[component="form"]').simulate('submit', event)
+    })
+    wrapper.update()
+
+    expect(onSubmit).toBeCalledTimes(1)
+    expect(wrapper.find('[data-test="submit"]').prop('disabled')).toBe(true)
+
+    await act(async () => {
+      resolveSubmit()
+      await Promise.resolve()
+    })
+    wrapper.update()
+
+    expect(wrapper.find('[data-test="submit"]').prop('disabled')).toBe(false)
+  })
   //Advanced field tests
   it('Advanced field inputs in a group should be invisible by default', () => {
     const wrapper = mount(