Additional API timeout for bulk operations (#12676)

src/frontend/src/components/forms/ApiForm.tsx

@@ -46,6 +46,9 @@ import { constructField, extractAvailableFields } from '../../functions/forms';
 import { KeepFormOpenSwitch } from './KeepFormOpenSwitch';
 import { ApiFormField } from './fields/ApiFormField';
 
+// Additional per-item allowance for bulk operations (create / update / delete multiple records)
+const BULK_OPERATION_TIMEOUT_PER_ITEM = 100;
+
 export function OptionsApiForm({
   props: _props,
   opened,
@@ -468,12 +471,26 @@ export function ApiForm({
       jsonData = props.processFormData(jsonData, form);
     }
 
+    // Bulk operations (bulk create / update / delete) submit their target
+    // records as an array under the 'items' field - scale the timeout with
+    // the number of items being processed, since larger requests take the
+    // backend longer to handle.
+    const itemCount = Array.isArray(jsonData.items) ? jsonData.items.length : 0;
+
     /* Set the timeout for the request:
      * - If a timeout is provided in the props, use that
      * - If the form contains files, use a longer timeout
+     * - If this is a bulk operation, extend the default timeout based on the number of items
      * - Otherwise, use the default timeout
      */
-    const timeout = props.timeout ?? (hasFiles ? 30000 : undefined);
+    const timeout =
+      props.timeout ??
+      (hasFiles
+        ? 30000
+        : itemCount > 1
+          ? (api.defaults.timeout ?? 5000) +
+            itemCount * BULK_OPERATION_TIMEOUT_PER_ITEM
+          : undefined);
 
     return api({
       method: method,