fix: change status on locale picker

packages/core/content-manager/admin/src/pages/EditView/components/Header.tsx

@@ -108,6 +108,7 @@ interface HeaderActionDescription {
   }>;
   onSelect?: (value: string) => void;
   value?: string;
+  customizeContent?: (value: string) => React.ReactNode;
 }
 
 /**
@@ -369,6 +370,7 @@ const HeaderActions = ({ actions }: HeaderActionsProps) => {
               // @ts-expect-error – the DS will handle numbers, but we're not allowing the API.
               onChange={action.onSelect}
               value={action.value}
+              customizeContent={action.customizeContent}
             >
               {action.options.map(({ label, ...option }) => (
                 <SingleSelectOption key={option.value} {...option}>

packages/plugins/i18n/admin/src/components/CMHeaderActions.tsx

@@ -28,7 +28,7 @@ import {
   SingleSelectOption,
   Dialog,
 } from '@strapi/design-system';
-import { WarningCircle, ListPlus, Trash, Download, Cross } from '@strapi/icons';
+import { WarningCircle, ListPlus, Trash, Download, Cross, Plus } from '@strapi/icons';
 import { Modules } from '@strapi/types';
 import { useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
@@ -50,6 +50,59 @@ import type { I18nBaseQuery } from '../types';
  * LocalePickerAction
  * -----------------------------------------------------------------------------------------------*/
 
+interface LocaleOptionProps {
+  isDraftAndPublishEnabled: boolean;
+  locale: Locale;
+  status: 'draft' | 'published' | 'modified';
+  entryExists: boolean;
+}
+
+const LocaleOption = ({
+  isDraftAndPublishEnabled,
+  locale,
+  status,
+  entryExists,
+}: LocaleOptionProps) => {
+  const { formatMessage } = useIntl();
+
+  if (!entryExists) {
+    return formatMessage(
+      {
+        id: getTranslation('CMEditViewLocalePicker.locale.create'),
+        defaultMessage: 'Create <bold>{locale}</bold> locale',
+      },
+      {
+        bold: (locale: React.ReactNode) => <b>{locale}</b>,
+        locale: locale.name,
+      }
+    );
+  }
+
+  return (
+    <Flex width="100%" gap={1} justifyContent="space-between">
+      <Typography>{locale.name}</Typography>
+      {isDraftAndPublishEnabled ? (
+        <Status
+          display="flex"
+          paddingLeft="6px"
+          paddingRight="6px"
+          paddingTop="2px"
+          paddingBottom="2px"
+          showBullet={false}
+          size={'S'}
+          variant={
+            status === 'draft' ? 'secondary' : status === 'published' ? 'success' : 'alternative'
+          }
+        >
+          <Typography tag="span" variant="pi" fontWeight="bold">
+            {capitalize(status)}
+          </Typography>
+        </Status>
+      ) : null}
+    </Flex>
+  );
+};
+
 const LocalePickerAction = ({
   document,
   meta,
@@ -99,11 +152,11 @@ const LocalePickerAction = ({
   }, [handleSelect, hasI18n, locales, currentDesiredLocale]);
 
   const currentLocale = Array.isArray(locales)
-    ? locales.find((locale) => locale.code === currentDesiredLocale)?.code
+    ? locales.find((locale) => locale.code === currentDesiredLocale)
     : undefined;
 
   const allCurrentLocales = [
-    { status: getDocumentStatus(document, meta), locale: currentLocale },
+    { status: getDocumentStatus(document, meta), locale: currentLocale?.code },
     ...(meta?.availableLocales ?? []),
   ];
 
@@ -117,38 +170,29 @@ const LocalePickerAction = ({
       defaultMessage: 'Locales',
     }),
     options: locales.map((locale) => {
+      const entryWithLocaleExists = allCurrentLocales.some((doc) => doc.locale === locale.code);
+
       const currentLocaleDoc = allCurrentLocales.find((doc) =>
         'locale' in doc ? doc.locale === locale.code : false
       );
-      const status = currentLocaleDoc?.status ?? 'draft';
 
       const permissionsToCheck = currentLocaleDoc ? canCreate : canRead;
 
-      const statusVariant =
-        status === 'draft' ? 'secondary' : status === 'published' ? 'success' : 'alternative';
-
       return {
         disabled: !permissionsToCheck.includes(locale.code),
         value: locale.code,
-        label: locale.name,
+        label: (
-        startIcon: schema?.options?.draftAndPublish ? (
+          <LocaleOption
-          <Status
+            isDraftAndPublishEnabled={!!schema?.options?.draftAndPublish}
-            display="flex"
+            locale={locale}
-            paddingLeft="6px"
+            status={currentLocaleDoc?.status}
-            paddingRight="6px"
+            entryExists={entryWithLocaleExists}
-            paddingTop="2px"
+          />
-            paddingBottom="2px"
+        ),
-            showBullet={false}
+        startIcon: !entryWithLocaleExists ? <Plus /> : null,
-            size={'S'}
-            variant={statusVariant}
-          >
-            <Typography tag="span" variant="pi" fontWeight="bold">
-              {capitalize(status)}
-            </Typography>
-          </Status>
-        ) : null,
       };
     }),
+    customizeContent: () => currentLocale?.name,
     onSelect: handleSelect,
     value: currentLocale,
   };

packages/plugins/i18n/admin/src/translations/en.json

@@ -18,6 +18,7 @@
   "CMEditViewBulkLocale.publication-status": "Publication Status",
   "CMEditViewBulkLocale.draft-relation-warning": "Some locales are related to draft entries. Publishing them could leave broken links in your app.",
   "CMEditViewBulkLocale.continue-confirmation": "Are you sure you want to continue?",
+  "CMEditViewLocalePicker.locale.create": "Create <bold>{locale}</bold> locale",
   "CMListView.popover.display-locales.label": "Display translated locales",
   "CheckboxConfirmation.Modal.body": "Do you want to disable it?",
   "CheckboxConfirmation.Modal.button-confirm": "Yes, disable",