fix(ui): publish button shows locale-specific text without localized fields

packages/ui/src/elements/PublishButton/index.tsx

@@ -94,7 +94,7 @@ export function PublishButton({ label: labelProp }: PublishButtonClientProps) {
     setHasLocalizedFields(hasLocalizedField)
   }, [entityConfig?.fields])
 
-  const canPublishSpecificLocale = localization && hasLocalizedFields && hasPublishPermission
+  const isSpecificLocalePublishEnabled = localization && hasLocalizedFields && hasPublishPermission
 
   const operation = useOperation()
 
@@ -192,8 +192,10 @@ export function PublishButton({ label: labelProp }: PublishButtonClientProps) {
     [api, collectionSlug, globalSlug, id, serverURL, setHasPublishedDoc, submit, uploadStatus],
   )
 
-  const publishAll =
-    !localization || (localization && localization.defaultLocalePublishOption !== 'active')
+  // Publish to all locales unless there are localized fields AND defaultLocalePublishOption is 'active'
+  const isDefaultPublishAll =
+    !isSpecificLocalePublishEnabled ||
+    (localization && localization?.defaultLocalePublishOption !== 'active')
 
   const activeLocale =
     localization &&
@@ -207,14 +209,6 @@ export function PublishButton({ label: labelProp }: PublishButtonClientProps) {
       ? activeLocale.label
       : (activeLocale.label?.[localeCode] ?? undefined))
 
-  const defaultPublish = publishAll ? publish : () => publishSpecificLocale(activeLocale.code)
-  const defaultLabel = publishAll ? label : t('version:publishIn', { locale: activeLocaleLabel })
-
-  const secondaryPublish = publishAll ? () => publishSpecificLocale(activeLocale.code) : publish
-  const secondaryLabel = publishAll
-    ? t('version:publishIn', { locale: activeLocaleLabel })
-    : t('version:publishAllLocales')
-
   if (!hasPublishPermission) {
     return null
   }
@@ -225,10 +219,10 @@ export function PublishButton({ label: labelProp }: PublishButtonClientProps) {
         buttonId="action-save"
         disabled={!canPublish}
         enableSubMenu={canSchedulePublish}
-        onClick={defaultPublish}
+        onClick={isDefaultPublishAll ? publish : () => publishSpecificLocale(activeLocale.code)}
         size="medium"
         SubMenuPopupContent={
-          canPublishSpecificLocale || canSchedulePublish
+          isSpecificLocalePublishEnabled || canSchedulePublish
             ? ({ close }) => {
                 return (
                   <React.Fragment>
@@ -242,10 +236,19 @@ export function PublishButton({ label: labelProp }: PublishButtonClientProps) {
                         </PopupList.Button>
                       </PopupList.ButtonGroup>
                     )}
-                    {canPublishSpecificLocale && (
+                    {isSpecificLocalePublishEnabled && (
                       <PopupList.ButtonGroup>
-                        <PopupList.Button id="publish-locale" onClick={secondaryPublish}>
-                          {secondaryLabel}
+                        <PopupList.Button
+                          id="publish-locale"
+                          onClick={
+                            isDefaultPublishAll
+                              ? () => publishSpecificLocale(activeLocale.code)
+                              : publish
+                          }
+                        >
+                          {isDefaultPublishAll
+                            ? t('version:publishIn', { locale: activeLocaleLabel })
+                            : t('version:publishAllLocales')}
                         </PopupList.Button>
                       </PopupList.ButtonGroup>
                     )}
@@ -256,7 +259,9 @@ export function PublishButton({ label: labelProp }: PublishButtonClientProps) {
         }
         type="button"
       >
-        {localization ? defaultLabel : label}
+        {isSpecificLocalePublishEnabled
+          ? t('version:publishIn', { locale: activeLocaleLabel })
+          : label}
       </FormSubmit>
       {canSchedulePublish && isModalOpen(drawerSlug) && (
         <ScheduleDrawer

test/admin/collections/Localized.ts

@@ -0,0 +1,20 @@
+import type { CollectionConfig } from 'payload'
+
+import { localizedCollectionSlug } from '../slugs.js'
+
+export const Localized: CollectionConfig = {
+  slug: localizedCollectionSlug,
+  admin: {
+    useAsTitle: 'title',
+  },
+  versions: {
+    drafts: true,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      localized: true,
+    },
+  ],
+}

test/admin/config.ts

@@ -21,6 +21,7 @@ import { CollectionGroup2B } from './collections/Group2B.js'
 import { CollectionHidden } from './collections/Hidden.js'
 import { ListDrawer } from './collections/ListDrawer.js'
 import { ListViewSelectAPI } from './collections/ListViewSelectAPI/index.js'
+import { Localized } from './collections/Localized.js'
 import { CollectionNoApiView } from './collections/NoApiView.js'
 import { NoTimestampsCollection } from './collections/NoTimestamps.js'
 import { CollectionNotInView } from './collections/NotInView.js'
@@ -199,6 +200,7 @@ export default buildConfigWithDefaults({
     ListViewSelectAPI,
     Virtuals,
     NoTimestampsCollection,
+    Localized,
   ],
   globals: [
     GlobalHidden,

test/admin/e2e/document-view/e2e.spec.ts

@@ -35,6 +35,7 @@ import {
   globalSlug,
   group1Collection1Slug,
   group1GlobalSlug,
+  localizedCollectionSlug,
   noApiViewCollectionSlug,
   noApiViewGlobalSlug,
   placeholderCollectionSlug,
@@ -75,6 +76,7 @@ describe('Document View', () => {
   let collectionCustomViewPathId: string
   let editMenuItemsURL: AdminUrlUtil
   let reorderTabsURL: AdminUrlUtil
+  let localizedURL: AdminUrlUtil
 
   beforeAll(async ({ browser }, testInfo) => {
     const prebuild = false // Boolean(process.env.CI)
@@ -93,6 +95,7 @@ describe('Document View', () => {
     placeholderURL = new AdminUrlUtil(serverURL, placeholderCollectionSlug)
     editMenuItemsURL = new AdminUrlUtil(serverURL, editMenuItemsSlug)
     reorderTabsURL = new AdminUrlUtil(serverURL, reorderTabsSlug)
+    localizedURL = new AdminUrlUtil(serverURL, localizedCollectionSlug)
 
     const context = await browser.newContext()
     page = await context.newPage()
@@ -688,12 +691,20 @@ describe('Document View', () => {
   })
 
   describe('publish button', () => {
-    test('should show publish active locale button with defaultLocalePublishOption', async () => {
-      await navigateToDoc(page, postsUrl)
+    test('should show publish active locale button with defaultLocalePublishOption set to active', async () => {
+      await navigateToDoc(page, localizedURL)
       const publishButton = page.locator('#action-save')
       await expect(publishButton).toBeVisible()
       await expect(publishButton).toContainText('Publish in English')
     })
+
+    test('should not show publish active locale button with defaultLocalePublishOption set to active but no localized fields', async () => {
+      await navigateToDoc(page, postsUrl)
+      const publishButton = page.locator('#action-save')
+      await expect(publishButton).toBeVisible()
+      await expect(publishButton).toContainText('Publish changes')
+      await expect(publishButton).not.toContainText('Publish in')
+    })
   })
 
   describe('reserved field names', () => {

test/admin/payload-types.ts

@@ -98,6 +98,7 @@ export interface Config {
     'list-view-select-api': ListViewSelectApi;
     virtuals: Virtual;
     'no-timestamps': NoTimestamp;
+    localized: Localized;
     'payload-kv': PayloadKv;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -136,6 +137,7 @@ export interface Config {
     'list-view-select-api': ListViewSelectApiSelect<false> | ListViewSelectApiSelect<true>;
     virtuals: VirtualsSelect<false> | VirtualsSelect<true>;
     'no-timestamps': NoTimestampsSelect<false> | NoTimestampsSelect<true>;
+    localized: LocalizedSelect<false> | LocalizedSelect<true>;
     'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -640,6 +642,17 @@ export interface NoTimestamp {
   id: string;
   title?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "localized".
+ */
+export interface Localized {
+  id: string;
+  title?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv".
@@ -787,6 +800,10 @@ export interface PayloadLockedDocument {
     | ({
         relationTo: 'no-timestamps';
         value: string | NoTimestamp;
+      } | null)
+    | ({
+        relationTo: 'localized';
+        value: string | Localized;
       } | null);
   globalSlug?: string | null;
   user: {
@@ -1247,6 +1264,16 @@ export interface VirtualsSelect<T extends boolean = true> {
 export interface NoTimestampsSelect<T extends boolean = true> {
   title?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "localized_select".
+ */
+export interface LocalizedSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  _status?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv_select".

test/admin/seed.ts

@@ -6,6 +6,7 @@ import {
   customViews1CollectionSlug,
   customViews2CollectionSlug,
   geoCollectionSlug,
+  localizedCollectionSlug,
   noApiViewCollectionSlug,
   postsCollectionSlug,
   usersCollectionSlug,
@@ -113,6 +114,15 @@ export const seed = async (_payload: Payload) => {
           depth: 0,
           overrideAccess: true,
         }),
+      () =>
+        _payload.create({
+          collection: localizedCollectionSlug,
+          data: {
+            title: 'Localized Doc',
+          },
+          depth: 0,
+          overrideAccess: true,
+        }),
     ],
     false,
   )

test/admin/slugs.ts

@@ -5,6 +5,8 @@ export const reorderTabsSlug = 'reorder-tabs'
 export const geoCollectionSlug = 'geo'
 export const arrayCollectionSlug = 'array'
 export const postsCollectionSlug = 'posts'
+
+export const localizedCollectionSlug = 'localized'
 export const group1Collection1Slug = 'group-one-collection-ones'
 export const group1Collection2Slug = 'group-one-collection-twos'
 export const group2Collection1Slug = 'group-two-collection-ones'
@@ -43,6 +45,7 @@ export const collectionSlugs = [
   listDrawerSlug,
   virtualsSlug,
   formatDocURLCollectionSlug,
+  localizedCollectionSlug,
 ]
 
 export const customGlobalViews1GlobalSlug = 'custom-global-views-one'