feat(plugin-import-export)!: refactor plugin and add import functionality (#14782)

This PR works to refactor the entire plugin so it's easier for us to
work with it going forward and also implements import functionality.

It expands the int tests and adds some e2e tests as well.

## Previous config

Previously the config for the plugin looked like this. If you wanted to
disable jobs queue you'd have to do it for all collections, the
`collections` config was optional and the plugin applied both import and
export functionality to _all_ collections which isn't normally how our
plugins work.

If you want to customise certain behaviour you need to instantiate the
plugin multiple times, which causes additional problems by doubling up
providers, UI components and endpoints.

As such we're committing some breaking changes while the plugin is in
beta to standardise the config and allow more customisation.

```ts
importExportPlugin({
  overrideExportCollection: (collection) => {
    collection.admin.group = 'System'
    collection.upload.staticDir = path.resolve(dirname, 'uploads')
    return collection
  },
  overrideImportCollection: (collection) => {
    collection.admin.group = 'System'
    collection.upload.staticDir = path.resolve(dirname, 'uploads')
    return collection
  },
  disableJobsQueue: true,
  debug: true,
  // collections: ['posts'] // optionally provided - defaults to all collections
}),
```

## New config

The new config pushes most customisation to a per collection level so
that you only ever need to instantiate the plugin once.

You can now provide export/import collections per collection config if
needed, do not instantiate the plugin multiple times.

`collections` is now required.

```ts
importExportPlugin({
   overrideExportCollection: (collection) => {
    collection.admin.group = 'System'
    collection.upload.staticDir = path.resolve(dirname, 'uploads')
    return collection
  },
  overrideImportCollection: (collection) => {
    collection.admin.group = 'System'
    collection.upload.staticDir = path.resolve(dirname, 'uploads')
    return collection
  },
  collections: [
    {
      slug: 'posts',
      import: false, // disables import functionality, export enabled by default
    },
    {
      slug: 'pages',
      // customise the export collection per collection if needed
      export: ({ collection }) => {
        collection.admin.group = 'System'
        collection.upload.staticDir = path.resolve(dirname, 'uploads')
        return collection
      },
      disableJobsQueue: true, // disable jobs queue for this collection only
    },
  ],
  debug: true, // debug remains top level
})
```

This PR also fixes the following:
- Drafts being exported even if 'no' is selected to include them
- Fetch endpoints from preview not respecting the API routes
- Downloads not respecting drafts
- Dependencies on `csv-parse` and `csv-stringify` are now pinned

Todo:
- [x] Regenerate all translations
- [x] Add docs for import
- [x] Review code structure/patterns
- [x] Polish the preview UI to allow for pagination, show loading states
and make it clear what data is being previewed

Author: paulpopus

docs/plugins/import-export.mdx

@@ -17,7 +17,9 @@ export const beforeChangeCart: (args: Props) => CollectionBeforeChangeHook =
       data.secret = secret
 
       // Store in context so afterRead hook can include it in the creation response
-      if (!req.context) { req.context = {} }
+      if (!req.context) {
+        req.context = {}
+      }
       req.context.newCartSecret = secret
     }
 

packages/plugin-ecommerce/src/collections/carts/beforeChange.ts

@@ -73,8 +73,8 @@
     "@faceless-ui/modal": "3.0.0",
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",
-    "csv-parse": "^5.6.0",
-    "csv-stringify": "^6.5.2",
+    "csv-parse": "5.6.0",
+    "csv-stringify": "6.5.2",
     "qs-esm": "7.0.2"
   },
   "devDependencies": {

packages/plugin-import-export/package.json

@@ -7,16 +7,20 @@ import { useEffect } from 'react'
 import { useImportExport } from '../ImportExportProvider/index.js'
 
 export const CollectionField: React.FC = () => {
-  const { id } = useDocumentInfo()
+  const { id, collectionSlug } = useDocumentInfo()
   const { setValue } = useField({ path: 'collectionSlug' })
   const { collection } = useImportExport()
 
   useEffect(() => {
     if (id) {
       return
     }
-    setValue(collection)
-  }, [id, collection, setValue])
+    if (collection) {
+      setValue(collection)
+    } else if (collectionSlug) {
+      setValue(collectionSlug)
+    }
+  }, [id, collection, setValue, collectionSlug])
 
   return null
 }

packages/plugin-import-export/src/components/CollectionField/index.tsx

@@ -6,6 +6,7 @@ import {
   Translation,
   useConfig,
   useDocumentDrawer,
+  useDocumentInfo,
   useTranslation,
 } from '@payloadcms/ui'
 import React, { useEffect } from 'react'
@@ -16,7 +17,6 @@ import type {
 } from '../../translations/index.js'
 
 import { useImportExport } from '../ImportExportProvider/index.js'
-import './index.scss'
 
 const baseClass = 'export-list-menu-item'
 
@@ -25,10 +25,12 @@ export const ExportListMenuItem: React.FC<{
   exportCollectionSlug: string
 }> = ({ collectionSlug, exportCollectionSlug }) => {
   const { getEntityConfig } = useConfig()
+
   const { i18n, t } = useTranslation<
     PluginImportExportTranslations,
     PluginImportExportTranslationKeys
   >()
+
   const currentCollectionConfig = getEntityConfig({ collectionSlug })
 
   const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({

packages/plugin-import-export/src/components/ExportListMenuItem/index.scss

@@ -0,0 +1,36 @@
+@layer payload-default {
+  .export-preview {
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-bottom: 10px;
+    }
+
+    &__export-count {
+      font-size: var(--font-size-small);
+      color: var(--theme-elevation-500);
+    }
+
+    &__pagination {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--base);
+      margin-top: var(--base);
+      padding-top: var(--base);
+      border-top: 1px solid var(--theme-elevation-100);
+
+      // When only PerPage is present (no Pagination), keep it on the right
+      .per-page:only-child {
+        margin-left: auto;
+      }
+    }
+
+    &__page-info {
+      font-size: var(--font-size-small);
+      color: var(--theme-elevation-500);
+      white-space: nowrap;
+    }
+  }
+}