fix(ui): properly handle singular and plural bulk edit labels (#11198)

Bulk-many components are always using the plural format in their title,
even if only one document has been selected.

This fix checks the selection count and if its greater than 1 it will
show the plural format otherwise it will show the singular format.

packages/ui/src/elements/BulkUpload/EditMany/DrawerContent.tsx

@@ -28,7 +28,11 @@ export const EditManyBulkUploadsDrawerContent: React.FC<
     forms: State['forms']
   } & EditManyBulkUploadsProps
 > = (props) => {
-  const { collection: { slug, fields, labels: { plural } } = {}, drawerSlug, forms } = props
+  const {
+    collection: { slug, fields, labels: { plural, singular } } = {},
+    drawerSlug,
+    forms,
+  } = props
 
   const { permissions } = useAuth()
   const { i18n, t } = useTranslation()
@@ -60,7 +64,7 @@ export const EditManyBulkUploadsDrawerContent: React.FC<
         <h2 className={`${baseClass}__header__title`}>
           {t('general:editingLabel', {
             count: forms.length,
-            label: getTranslation(plural, i18n),
+            label: getTranslation(forms.length > 1 ? plural : singular, i18n),
           })}
         </h2>
         <button

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

@@ -159,7 +159,12 @@ export const DeleteMany: React.FC<Props> = (props) => {
         <div className={`${baseClass}__wrapper`}>
           <div className={`${baseClass}__content`}>
             <h1>{t('general:confirmDeletion')}</h1>
-            <p>{t('general:aboutToDeleteCount', { count, label: getTranslation(plural, i18n) })}</p>
+            <p>
+              {t('general:aboutToDeleteCount', {
+                count,
+                label: getTranslation(count > 1 ? plural : singular, i18n),
+              })}
+            </p>
           </div>
           <div className={`${baseClass}__controls`}>
             <Button

packages/ui/src/elements/EditMany/DrawerContent.tsx

@@ -135,7 +135,7 @@ export const EditManyDrawerContent: React.FC<
   } & EditManyProps
 > = (props) => {
   const {
-    collection: { slug, fields, labels: { plural } } = {},
+    collection: { slug, fields, labels: { plural, singular } } = {},
     collection,
     drawerSlug,
     selected: selectedFromProps,
@@ -270,7 +270,10 @@ export const EditManyDrawerContent: React.FC<
         <div className={`${baseClass}__main`}>
           <div className={`${baseClass}__header`}>
             <h2 className={`${baseClass}__header__title`}>
-              {t('general:editingLabel', { count, label: getTranslation(plural, i18n) })}
+              {t('general:editingLabel', {
+                count,
+                label: getTranslation(count > 1 ? plural : singular, i18n),
+              })}
             </h2>
             <button
               aria-label={t('general:close')}