feat: adds new experimental.allLocaleStatus flag

docs/configuration/localization.mdx

@@ -150,9 +150,10 @@ export default buildConfig({
 
 The following experimental options are available related to localization:
 
-| Option               | Description                                                                                                                                                                                 |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`localizeStatus`** | **Boolean.** When `true`, shows document status per locale in the admin panel instead of always showing the latest overall status. Opt-in for backwards compatibility. Defaults to `false`. |
+| Option                | Description                                                                                                                                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`localizeStatus`**  | **Boolean.** When `true`, shows document status per locale in the admin panel instead of always showing the latest overall status. Opt-in for backwards compatibility. Defaults to `false`.              |
+| **`allLocaleStatus`** | **Boolean.** When `true`, adds an `_allLocaleStatus` field that stores the status of each locale. In list views, this field is rendered as a custom cell with colored status pills. Defaults to `false`. |
 
 ## Field Localization
 

docs/experimental/overview.mdx

@@ -27,9 +27,10 @@ const config = buildConfig({
 
 The following options are available:
 
-| Option               | Description                                                                                                                                                                                 |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`localizeStatus`** | **Boolean.** When `true`, shows document status per locale in the admin panel instead of always showing the latest overall status. Opt-in for backwards compatibility. Defaults to `false`. |
+| Option                | Description                                                                                                                                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`localizeStatus`**  | **Boolean.** When `true`, shows document status per locale in the admin panel instead of always showing the latest overall status. Opt-in for backwards compatibility. Defaults to `false`.              |
+| **`allLocaleStatus`** | **Boolean.** When `true`, adds an `_allLocaleStatus` field that stores the status of each locale. In list views, this field is rendered as a custom cell with colored status pills. Defaults to `false`. |
 
 This list may change without notice.
 

packages/payload/src/collections/config/sanitize.ts

@@ -9,6 +9,7 @@ import type {
 import { authCollectionEndpoints } from '../../auth/endpoints/index.js'
 import { getBaseAuthFields } from '../../auth/getAuthFields.js'
 import { TimestampsRequired } from '../../errors/TimestampsRequired.js'
+import { baseAllLocaleStatusField } from '../../fields/baseFields/baseAllLocaleStatusField.js'
 import { sanitizeFields } from '../../fields/config/sanitize.js'
 import { fieldAffectsData } from '../../fields/config/types.js'
 import { mergeBaseFields } from '../../fields/mergeBaseFields.js'
@@ -256,6 +257,10 @@ export const sanitizeCollection = async (
     sanitized.fields = mergeBaseFields(sanitized.fields, getBaseAuthFields(sanitized.auth))
   }
 
+  if (config.experimental?.allLocaleStatus) {
+    sanitized.fields = mergeBaseFields(sanitized.fields, baseAllLocaleStatusField)
+  }
+
   if (collection?.admin?.pagination?.limits?.length) {
     sanitized.admin!.pagination!.limits = collection.admin.pagination.limits
   }

packages/payload/src/config/client.ts

@@ -165,6 +165,10 @@ export const createClientConfig = ({
           if (config.experimental?.localizeStatus) {
             clientConfig.experimental.localizeStatus = config.experimental.localizeStatus
           }
+
+          if (config.experimental?.allLocaleStatus) {
+            clientConfig.experimental.allLocaleStatus = config.experimental.allLocaleStatus
+          }
         }
 
         break

packages/payload/src/config/types.ts

@@ -726,6 +726,15 @@ export type ImportMapGenerators = Array<
  * These may be unstable and may change or be removed in future releases.
  */
 export type ExperimentalConfig = {
+  /**
+   * Adds `_allLocaleStatus` group field which maintains the statuses of all locales.
+   * @default false
+   */
+  allLocaleStatus?: boolean
+  /**
+   * Returns status of the current locale instead of overall document.
+   * @default false
+   */
   localizeStatus?: boolean
 }
 

packages/payload/src/fields/baseFields/baseAllLocaleStatusField.ts

@@ -0,0 +1,38 @@
+import type { Field } from '../config/types.js'
+
+export const baseAllLocaleStatusField: Field[] = [
+  {
+    name: '_allLocaleStatus',
+    type: 'json',
+    admin: {
+      components: {
+        Cell: '@payloadcms/ui/rsc#AllLocaleStatusCell',
+      },
+      hidden: true,
+    },
+    hooks: {
+      afterRead: [
+        async (args) => {
+          const { collection, data, req } = args
+          const id = data?.id
+          if (id && collection && collection.versions) {
+            const version = await req.payload.findVersions({
+              collection: collection.slug,
+              limit: 1,
+              where: {
+                parent: {
+                  equals: id,
+                },
+              },
+            })
+
+            if (version.docs && version.docs[0]?.localeStatus) {
+              return version.docs[0].localeStatus
+            }
+          }
+        },
+      ],
+    },
+    label: 'Status - All Locales',
+  },
+]

packages/payload/src/versions/buildCollectionFields.ts

@@ -63,7 +63,7 @@ export const buildVersionCollectionFields = <T extends boolean = false>(
         }),
       })
 
-      if (config.experimental?.localizeStatus) {
+      if (config.experimental?.localizeStatus || config.experimental?.allLocaleStatus) {
         const localeStatusFields = buildLocaleStatusField(config)
 
         fields.push({

packages/payload/src/versions/buildGlobalFields.ts

@@ -57,7 +57,7 @@ export const buildVersionGlobalFields = <T extends boolean = false>(
         }),
       })
 
-      if (config.experimental.localizeStatus) {
+      if (config.experimental.localizeStatus || config.experimental?.allLocaleStatus) {
         const localeStatusFields = buildLocaleStatusField(config)
 
         fields.push({

packages/payload/src/versions/saveVersion.ts

@@ -137,7 +137,8 @@ export const saveVersion = async ({
       if (
         localizationEnabled &&
         payload.config.localization !== false &&
-        payload.config.experimental?.localizeStatus
+        (payload.config.experimental?.localizeStatus ||
+          payload.config.experimental?.allLocaleStatus)
       ) {
         const allLocales = (
           (payload.config.localization && payload.config.localization?.locales) ||

packages/ui/src/elements/Status/AllLocaleStatusCell/index.client.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import type { Data } from 'payload'
+
+import React from 'react'
+
+import { Pill } from '../../Pill/index.js'
+import './index.scss'
+
+type Props = {
+  readonly availableLocales: string[]
+  readonly data: Data
+}
+
+const baseClass = 'locale-status-cell'
+
+export const AllLocaleStatusCellClient = ({ availableLocales, data }: Props) => {
+  const localesToRender = Object.fromEntries(
+    Object.entries(data).filter(([key]) => availableLocales.includes(key))
+  )
+
+  if (Object.keys(localesToRender).length === 0) {
+    return null
+  }
+
+  return (
+    <div className={baseClass}>
+      {Object.entries(localesToRender).map(([locale, status]) => (
+        <Pill key={locale} pillStyle={status === 'published' ? 'success' : 'light-gray'} size="small">
+          {locale}
+        </Pill>
+      ))}
+    </div>
+  )
+}

packages/ui/src/elements/Status/AllLocaleStatusCell/index.scss

@@ -0,0 +1,10 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .locale-status-cell {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
+    flex-wrap: wrap;
+  }
+}

packages/ui/src/elements/Status/AllLocaleStatusCell/index.server.tsx

@@ -0,0 +1,29 @@
+import { createLocalReq, type DefaultServerCellComponentProps } from 'payload'
+import React from 'react'
+
+import { AllLocaleStatusCellClient } from './index.client.js'
+
+export const AllLocaleStatusCell = async ({ cellData, payload }: DefaultServerCellComponentProps) => {
+  const { localization } = payload.config
+  const req = await createLocalReq({}, payload)
+
+  let availableLocales: string[] = []
+
+
+  if (localization) {
+    const filtered =
+      (await localization.filterAvailableLocales?.({
+        locales: localization.locales,
+        req,
+      })) ?? localization.locales
+
+    availableLocales = filtered.map((locale) => locale.code)
+  }
+
+  return (
+    <AllLocaleStatusCellClient
+      availableLocales={availableLocales}
+      data={cellData}
+    />
+  )
+}

packages/ui/src/exports/rsc/index.ts

@@ -3,6 +3,7 @@ export { FieldDiffLabel } from '../../elements/FieldDiffLabel/index.js'
 export { FolderTableCell } from '../../elements/FolderView/Cell/index.server.js'
 export { FolderField } from '../../elements/FolderView/FolderField/index.server.js'
 export { getHTMLDiffComponents } from '../../elements/HTMLDiff/index.js'
+export { AllLocaleStatusCell } from '../../elements/Status/AllLocaleStatusCell/index.server.js'
 export { File } from '../../graphics/File/index.js'
 export { CheckIcon } from '../../icons/Check/index.js'
 export { copyDataFromLocaleHandler } from '../../utilities/copyDataFromLocale.js'

test/localization/config.ts

@@ -430,6 +430,7 @@ export default buildConfigWithDefaults({
   ],
   experimental: {
     localizeStatus: true,
+    allLocaleStatus: true,
   },
   localization: {
     filterAvailableLocales: ({ locales }) => {