@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

package/dist/elements/BulkUpload/FormsManager/index.js

@@ -2,12 +2,13 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import { formatAdminURL } from 'payload/shared';
+import { formatAdminURL, validateMimeType } from 'payload/shared';
 import * as qs from 'qs-esm';
 import React from 'react';
 import { toast } from 'sonner';
 import { fieldReducer } from '../../../forms/Form/fieldReducer.js';
 import { useEffectEvent } from '../../../hooks/useEffectEvent.js';
+import { useBranchParam } from '../../../providers/Branch/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useLocale } from '../../../providers/Locale/index.js';
 import { useServerFunctions } from '../../../providers/ServerFunctions/index.js';
@@ -22,8 +23,9 @@ import { createFormData } from './createFormData.js';
 import { formsManagementReducer } from './reducer.js';
 const Context = /*#__PURE__*/React.createContext({
   activeIndex: 0,
-  addFiles: () => Promise.resolve(),
+  addFiles: () => Promise.resolve(false),
   bulkUpdateForm: () => null,
+  changeCollectionSlug: () => null,
   collectionSlug: '',
   docPermissions: undefined,
   documentSlots: {},
@@ -59,9 +61,9 @@ export function FormsManagerProvider({
       api
     }
   } = config;
-  const {
-    code
-  } = useLocale();
+  const locale = useLocale();
+  const code = locale?.code;
+  const branch = useBranchParam();
   const {
     i18n,
     t
@@ -102,6 +104,8 @@ export function FormsManagerProvider({
     modalSlug: drawerSlug,
     onSuccess,
     parentID,
+    selectableCollections,
+    setCollectionSlug,
     setInitialFiles,
     setInitialForms,
     setSuccessfullyUploaded
@@ -114,18 +118,60 @@ export function FormsManagerProvider({
   const [loadingText, setLoadingText] = React.useState('');
   const hasInitializedWithFiles = React.useRef(false);
   const initialStateRef = React.useRef(null);
+  const initializedStateCollectionSlugRef = React.useRef(undefined);
+  const initializedPermissionsCollectionSlugRef = React.useRef(undefined);
+  const currentCollectionSlugRef = React.useRef(collectionSlug);
+  currentCollectionSlugRef.current = collectionSlug;
   const getFormDataRef = React.useRef(() => ({}));
-  const baseAPIPath = formatAdminURL({
+  const pendingCollectionChangeRef = React.useRef(null);
+  const collectionFormsCacheRef = React.useRef({});
+  const changeCollectionSlug = React.useCallback(slug => {
+    if (slug === collectionSlug || isInitializing || !selectableCollections?.includes(slug)) {
+      return;
+    }
+    const mimeTypes = getEntityConfig({
+      collectionSlug: slug
+    })?.upload?.mimeTypes;
+    if (mimeTypes?.length && forms.some(({
+      formState
+    }) => {
+      const file = formState?.file?.value;
+      return file instanceof File && !validateMimeType(file.type, mimeTypes);
+    })) {
+      toast.error(t('error:invalidFileType'));
+      return;
+    }
+    const activeFormState = getFormDataRef.current();
+    const currentForms = forms.map((form, index) => index === activeIndex ? {
+      ...form,
+      formState: activeFormState
+    } : form);
+    collectionFormsCacheRef.current[collectionSlug] = currentForms;
+    pendingCollectionChangeRef.current = {
+      slug,
+      forms: currentForms
+    };
+    setIsInitializing(true);
+    setHasInitializedState(false);
+    setHasInitializedDocPermissions(false);
+    setHasSavePermission(false);
+    setHasPublishPermission(false);
+    setCollectionSlug(slug);
+  }, [activeIndex, collectionSlug, forms, getEntityConfig, isInitializing, selectableCollections, setCollectionSlug, t]);
+  const actionURL = formatAdminURL({
     apiRoute: api,
-    path: ''
+    path: `/${collectionSlug}`
   });
-  const actionURL = `${baseAPIPath}/${collectionSlug}`;
   const initializeSharedDocPermissions = React.useCallback(async () => {
     const params = {
+      branch,
       locale: code || undefined
     };
-    const docAccessURL = `/${collectionSlug}/access`;
-    const res = await fetch(`${baseAPIPath}${docAccessURL}?${qs.stringify(params)}`, {
+    const docAccessPath = `/${collectionSlug}/access?${qs.stringify(params)}`;
+    const res = await fetch(formatAdminURL({
+      apiRoute: api,
+      path: docAccessPath
+    }), {
       credentials: 'include',
       headers: {
         'Accept-Language': i18n.language,
@@ -134,7 +180,10 @@ export function FormsManagerProvider({
       method: 'POST'
     });
     const json = await res.json();
-    const publishedAccessJSON = await fetch(`${baseAPIPath}${docAccessURL}?${qs.stringify(params)}`, {
+    const publishedAccessJSON = await fetch(formatAdminURL({
+      apiRoute: api,
+      path: docAccessPath
+    }), {
       body: JSON.stringify({
         _status: 'published'
       }),
@@ -145,6 +194,9 @@ export function FormsManagerProvider({
       },
       method: 'POST'
     }).then(res_0 => res_0.json());
+    if (currentCollectionSlugRef.current !== collectionSlug) {
+      return;
+    }
     setDocPermissions(json);
     setHasSavePermission(getHasSavePermission({
       collectionSlug,
@@ -152,8 +204,9 @@ export function FormsManagerProvider({
       isEditing: false
     }));
     setHasPublishPermission(publishedAccessJSON?.update);
+    initializedPermissionsCollectionSlugRef.current = collectionSlug;
     setHasInitializedDocPermissions(true);
-  }, [baseAPIPath, code, collectionSlug, i18n.language]);
+  }, [api, branch, code, collectionSlug, i18n.language]);
   const initializeSharedFormState = React.useCallback(async abortController => {
     if (abortController?.signal) {
       abortController.abort('aborting previous fetch for initial form state without files');
@@ -162,13 +215,12 @@ export function FormsManagerProvider({
     const documentSlots_0 = await getDocumentSlots({
       collectionSlug
     });
-    setDocumentSlots(documentSlots_0);
     try {
       const {
         state: formStateWithoutFiles
       } = await getFormState({
         collectionSlug,
-        docPermissions,
+        docPermissions: initializedPermissionsCollectionSlugRef.current === collectionSlug ? docPermissions : undefined,
         docPreferences: {
           fields: {}
         },
@@ -187,28 +239,35 @@ export function FormsManagerProvider({
           }
         };
       }
+      if (currentCollectionSlugRef.current !== collectionSlug) {
+        return null;
+      }
+      setDocumentSlots(documentSlots_0);
       initialStateRef.current = formStateWithoutFiles;
+      initializedStateCollectionSlugRef.current = collectionSlug;
       setHasInitializedState(true);
+      return formStateWithoutFiles;
     } catch (_err) {
       // swallow error
+      return null;
     }
   }, [getDocumentSlots, collectionSlug, getFormState, docPermissions, code, folderFieldName]);
-  const setActiveIndex = React.useCallback(index => {
+  const setActiveIndex = React.useCallback(index_0 => {
     const currentFormsData = getFormDataRef.current();
     dispatch({
       type: 'REPLACE',
       state: {
-        activeIndex: index,
-        forms: forms.map((form, i) => {
+        activeIndex: index_0,
+        forms: forms.map((form_0, i) => {
           if (i === activeIndex) {
             return {
-              errorCount: form.errorCount,
-              formID: form.formID,
+              errorCount: form_0.errorCount,
+              formID: form_0.formID,
               formState: currentFormsData,
-              uploadEdits: form.uploadEdits
+              uploadEdits: form_0.uploadEdits
             };
           }
-          return form;
+          return form_0;
         })
       }
     });
@@ -227,6 +286,16 @@ export function FormsManagerProvider({
     return baseState;
   }, [parentID, folderFieldName]);
   const addFiles = React.useCallback(async files => {
+    const mimeTypes_0 = getEntityConfig({
+      collectionSlug
+    })?.upload?.mimeTypes;
+    const acceptedFiles = Array.from(files).filter(file_0 => !mimeTypes_0?.length || validateMimeType(file_0.type, mimeTypes_0));
+    if (acceptedFiles.length !== files.length) {
+      toast.error(t('error:invalidFileType'));
+    }
+    if (!acceptedFiles.length) {
+      return false;
+    }
     if (forms.length) {
       // save the state of the current form before adding new files
       dispatch({
@@ -240,35 +309,52 @@ export function FormsManagerProvider({
       isLoading: true,
       key: 'addingDocs'
     });
-    if (!hasInitializedState) {
-      await initializeSharedFormState();
+    let initialFormState = initialStateRef.current;
+    if (initializedStateCollectionSlugRef.current !== collectionSlug) {
+      initialFormState = await initializeSharedFormState();
+    }
+    if (currentCollectionSlugRef.current !== collectionSlug || !initialFormState) {
+      toggleLoadingOverlay({
+        isLoading: false,
+        key: 'addingDocs'
+      });
+      return false;
     }
     dispatch({
       type: 'ADD_FORMS',
-      forms: Array.from(files).map(file => ({
-        file,
-        initialState: applyFolderToState(initialStateRef.current)
+      forms: acceptedFiles.map(file_1 => ({
+        file: file_1,
+        initialState: applyFolderToState(initialFormState)
       }))
     });
     toggleLoadingOverlay({
       isLoading: false,
       key: 'addingDocs'
     });
-  }, [initializeSharedFormState, hasInitializedState, toggleLoadingOverlay, activeIndex, forms, applyFolderToState]);
+    return true;
+  }, [initializeSharedFormState, collectionSlug, toggleLoadingOverlay, activeIndex, forms, applyFolderToState, getEntityConfig, t]);
   const addFilesEffectEvent = useEffectEvent(addFiles);
   const addInitialForms = useEffectEvent(async initialForms_0 => {
     toggleLoadingOverlay({
       isLoading: true,
       key: 'addingDocs'
     });
-    if (!hasInitializedState) {
-      await initializeSharedFormState();
+    let initialFormState_0 = initialStateRef.current;
+    if (initializedStateCollectionSlugRef.current !== collectionSlug) {
+      initialFormState_0 = await initializeSharedFormState();
+    }
+    if (currentCollectionSlugRef.current !== collectionSlug || !initialFormState_0) {
+      toggleLoadingOverlay({
+        isLoading: false,
+        key: 'addingDocs'
+      });
+      return;
     }
     dispatch({
       type: 'ADD_FORMS',
-      forms: initialForms_0.map(form_0 => ({
-        ...form_0,
-        initialState: applyFolderToState(form_0?.initialState || initialStateRef.current)
+      forms: initialForms_0.map(form_1 => ({
+        ...form_1,
+        initialState: applyFolderToState(form_1?.initialState || initialFormState_0)
       }))
     });
     toggleLoadingOverlay({
@@ -276,54 +362,57 @@ export function FormsManagerProvider({
       key: 'addingDocs'
     });
   });
-  const removeFile = React.useCallback(index_0 => {
+  const removeFile = React.useCallback(index_1 => {
     dispatch({
       type: 'REMOVE_FORM',
-      index: index_0
+      index: index_1
     });
   }, []);
   const setFormTotalErrorCount = React.useCallback(({
     errorCount,
-    index: index_1
+    index: index_2
   }) => {
     dispatch({
       type: 'UPDATE_ERROR_COUNT',
       count: errorCount,
-      index: index_1
+      index: index_2
     });
   }, []);
   const saveAllDocs = React.useCallback(async ({
     overrides
   } = {}) => {
     const currentFormsData_0 = getFormDataRef.current();
-    const currentForms = [...forms];
-    currentForms[activeIndex] = {
-      errorCount: currentForms[activeIndex].errorCount,
-      formID: currentForms[activeIndex].formID,
+    const currentForms_0 = [...forms];
+    currentForms_0[activeIndex] = {
+      errorCount: currentForms_0[activeIndex].errorCount,
+      formID: currentForms_0[activeIndex].formID,
       formState: currentFormsData_0,
-      uploadEdits: currentForms[activeIndex].uploadEdits
+      uploadEdits: currentForms_0[activeIndex].uploadEdits
     };
-    const activeFormID = currentForms[activeIndex]?.formID;
+    const activeFormID = currentForms_0[activeIndex]?.formID;
     const newDocs = [];
     setIsUploading(true);
-    for (let i_0 = 0; i_0 < currentForms.length; i_0++) {
+    for (let i_0 = 0; i_0 < currentForms_0.length; i_0++) {
       try {
-        const form_1 = currentForms[i_0];
-        const fileValue = form_1.formState?.file?.value;
+        const form_2 = currentForms_0[i_0];
+        const fileValue = form_2.formState?.file?.value;
         setLoadingText(t('general:uploadingBulk', {
           current: i_0 + 1,
-          total: currentForms.length
+          total: currentForms_0.length
         }));
         const actionURLWithParams = `${actionURL}${qs.stringify({
+          branch,
           locale: code,
-          uploadEdits: form_1?.uploadEdits || undefined
+          uploadEdits: form_2?.uploadEdits || undefined
         }, {
           addQueryPrefix: true
         })}`;
         const req = await fetch(actionURLWithParams, {
-          body: await createFormData(form_1.formState, overrides, getUploadHandler({
+          body: await createFormData(form_2.formState, overrides, getUploadHandler({
             collectionSlug
-          })),
+          }), config.collections.find(({
+            slug: slug_0
+          }) => slug_0 === collectionSlug)?.upload?.allowRestrictedFileTypes),
           credentials: 'include',
           method: 'POST'
         });
@@ -333,7 +422,7 @@ export function FormsManagerProvider({
           newDocs.push({
             collectionSlug,
             doc: json_0.doc,
-            formID: form_1.formID
+            formID: form_2.formID
           });
         }
         // should expose some sort of helper for this
@@ -358,21 +447,7 @@ export function FormsManagerProvider({
         const exceedsLimit = fileValue && req.status === 413;
         const missingFilename = fileValue && typeof fileValue === 'object' && 'name' in fileValue && (!fileValue.name || fileValue.name === '');
         if (missingFile || exceedsLimit || missingFilename) {
-          currentForms[i_0].formState.file.valid = false;
-          // File/Blob objects cannot be serialized via the RSC flight protocol,
-          // so replace with a plain object before calling the server function.
-          const originalFileValue = currentForms[i_0].formState.file?.value;
-          const formStateForServer = {
-            ...currentForms[i_0].formState
-          };
-          if (originalFileValue instanceof File) {
-            formStateForServer.file = {
-              ...formStateForServer.file,
-              value: {
-                name: originalFileValue.name
-              }
-            };
-          }
+          currentForms_0[i_0].formState.file.valid = false;
           // Need to get the field state to extract count since field errors
           // are not returned when file is missing or exceeds limit
           const {
@@ -381,20 +456,14 @@ export function FormsManagerProvider({
             collectionSlug,
             docPermissions,
             docPreferences: null,
-            formState: formStateForServer,
+            formState: currentForms_0[i_0].formState,
             operation: 'update',
             schemaPath: collectionSlug
           });
           if (newState) {
-            if (originalFileValue instanceof File && newState.file) {
-              newState.file = {
-                ...newState.file,
-                value: originalFileValue
-              };
-            }
-            currentForms[i_0] = {
+            currentForms_0[i_0] = {
               errorCount: Object.values(newState).reduce((acc, value) => value?.valid === false ? acc + 1 : acc, 0),
-              formID: currentForms[i_0].formID,
+              formID: currentForms_0[i_0].formID,
               formState: newState
             };
           }
@@ -406,10 +475,10 @@ export function FormsManagerProvider({
           if (!wasSuccessful && errorCount_0 === 0) {
             errorCount_0 = nonFieldErrors.length || 1;
           }
-          currentForms[i_0] = {
+          currentForms_0[i_0] = {
             errorCount: errorCount_0,
-            formID: currentForms[i_0].formID,
-            formState: fieldReducer(currentForms[i_0].formState, {
+            formID: currentForms_0[i_0].formID,
+            formState: fieldReducer(currentForms_0[i_0].formState, {
               type: 'ADD_SERVER_ERRORS',
               errors: fieldErrors
             })
@@ -431,15 +500,15 @@ export function FormsManagerProvider({
     setLoadingText('');
     setIsUploading(false);
     const remainingForms = [];
-    currentForms.forEach(({
+    currentForms_0.forEach(({
       errorCount: errorCount_1
     }, i_1) => {
       if (errorCount_1) {
-        remainingForms.push(currentForms[i_1]);
+        remainingForms.push(currentForms_0[i_1]);
       }
     });
-    const successCount = Math.max(0, currentForms.length - remainingForms.length);
-    const errorCount_2 = currentForms.length - successCount;
+    const successCount = Math.max(0, currentForms_0.length - remainingForms.length);
+    const errorCount_2 = currentForms_0.length - successCount;
     if (successCount) {
       toast.success(`Successfully saved ${successCount} files`);
       setSuccessfullyUploaded(true);
@@ -473,7 +542,7 @@ export function FormsManagerProvider({
       setInitialFiles(undefined);
       setInitialForms(undefined);
     }
-  }, [forms, activeIndex, t, actionURL, code, collectionSlug, getUploadHandler, getFormState, docPermissions, setSuccessfullyUploaded, onSuccess, closeModal, drawerSlug, setInitialFiles, setInitialForms]);
+  }, [branch, forms, activeIndex, t, actionURL, code, collectionSlug, config.collections, getUploadHandler, getFormState, docPermissions, setSuccessfullyUploaded, onSuccess, closeModal, drawerSlug, setInitialFiles, setInitialForms]);
   const bulkUpdateForm = React.useCallback(async (updatedFields, afterStateUpdate) => {
     for (let i_3 = 0; i_3 < forms.length; i_3++) {
       Object.entries(updatedFields).forEach(([path, value_0]) => {
@@ -491,13 +560,6 @@ export function FormsManagerProvider({
         afterStateUpdate();
       }
       if (hasSubmitted) {
-        // File/Blob objects cannot be serialized across the server-function
-        // boundary (RSC flight / TanStack seroval), so the `file` value is
-        // dropped during the `getFormState` round-trip. Capture it first and
-        // re-attach it afterwards so the file survives — mirroring the
-        // save-retry path below; without this the next save omits the file
-        // entirely and the server responds "No files were uploaded".
-        const originalFileValue_0 = forms[i_3].formState.file?.value;
         const {
           state: state_0
         } = await getFormState({
@@ -508,12 +570,6 @@ export function FormsManagerProvider({
           operation: 'create',
           schemaPath: collectionSlug
         });
-        if (originalFileValue_0 instanceof File && state_0.file) {
-          state_0.file = {
-            ...state_0.file,
-            value: originalFileValue_0
-          };
-        }
         const newFormErrorCount = Object.values(state_0).reduce((acc_2, value_1) => value_1?.valid === false ? acc_2 + 1 : acc_2, 0);
         dispatch({
           type: 'UPDATE_FORM',
@@ -537,8 +593,8 @@ export function FormsManagerProvider({
     dispatch({
       type: 'REPLACE',
       state: {
-        forms: forms.map(form_2 => ({
-          ...form_2,
+        forms: forms.map(form_3 => ({
+          ...form_3,
           uploadEdits: {}
         }))
       }
@@ -548,20 +604,55 @@ export function FormsManagerProvider({
     if (!collectionSlug) {
       return;
     }
-    if (!hasInitializedState) {
+    if (initializedStateCollectionSlugRef.current !== collectionSlug) {
       void initializeSharedFormState();
     }
-    if (!hasInitializedDocPermissions) {
+    if (initializedPermissionsCollectionSlugRef.current !== collectionSlug) {
       void initializeSharedDocPermissions();
     }
     if (initialFiles || initialForms) {
-      if (!hasInitializedState || !hasInitializedDocPermissions) {
+      if (initializedStateCollectionSlugRef.current !== collectionSlug || initializedPermissionsCollectionSlugRef.current !== collectionSlug) {
         setIsInitializing(true);
       } else {
         setIsInitializing(false);
       }
     }
-    if (hasInitializedState && (initialForms?.length || initialFiles?.length) && !hasInitializedWithFiles.current) {
+    if (hasInitializedState && hasInitializedDocPermissions && initializedStateCollectionSlugRef.current === collectionSlug && initializedPermissionsCollectionSlugRef.current === collectionSlug && pendingCollectionChangeRef.current?.slug === collectionSlug) {
+      const previousForms = pendingCollectionChangeRef.current.forms;
+      const nextTemplate = applyFolderToState(initialStateRef.current);
+      const cachedForms = collectionFormsCacheRef.current[collectionSlug];
+      dispatch({
+        type: 'REPLACE',
+        state: {
+          forms: previousForms.map(form_4 => {
+            const formState_0 = {};
+            const cachedForm = cachedForms?.find(({
+              formID: formID_0
+            }) => formID_0 === form_4.formID);
+            for (const [path_0, field] of Object.entries(nextTemplate)) {
+              const previousField = path_0 === folderFieldName && parentID ? undefined : cachedForm?.formState[path_0] ?? form_4.formState[path_0];
+              formState_0[path_0] = previousField ? {
+                ...field,
+                initialValue: previousField.value,
+                value: previousField.value
+              } : field;
+            }
+            formState_0.file = form_4.formState.file;
+            return {
+              ...form_4,
+              errorCount: 0,
+              formState: formState_0,
+              uploadEdits: {}
+            };
+          }),
+          totalErrorCount: 0
+        }
+      });
+      pendingCollectionChangeRef.current = null;
+      setHasSubmitted(false);
+      setIsInitializing(false);
+    }
+    if (hasInitializedState && hasInitializedDocPermissions && initializedStateCollectionSlugRef.current === collectionSlug && initializedPermissionsCollectionSlugRef.current === collectionSlug && (initialForms?.length || initialFiles?.length) && !hasInitializedWithFiles.current) {
       if (initialForms?.length) {
         void addInitialForms(initialForms);
       }
@@ -571,12 +662,13 @@ export function FormsManagerProvider({
       hasInitializedWithFiles.current = true;
     }
     return;
-  }, [initialFiles, initializeSharedFormState, initializeSharedDocPermissions, collectionSlug, hasInitializedState, hasInitializedDocPermissions, initialForms]);
+  }, [initialFiles, initializeSharedFormState, initializeSharedDocPermissions, collectionSlug, hasInitializedState, hasInitializedDocPermissions, initialForms, applyFolderToState]);
   return /*#__PURE__*/_jsxs(Context, {
     value: {
       activeIndex: state.activeIndex,
       addFiles,
       bulkUpdateForm,
+      changeCollectionSlug,
       collectionSlug,
       docPermissions,
       documentSlots,