Add internationalization to localization labels

[Snailedlt]

As discussed in this Discord thread.

This is a verbose version of how localization can be defined in the payload-config.ts file now:

    localization: {
        locales: [
            {
                label: "English",
                code: "en",
            },
            {
                label: "Norsk",
                code: "nb",
            },
        ],
        defaultLocale: "nb",
        fallback: true,
    },

Here you can only have one label for each locale... so you end up having to choose a single language to write that label in.

It would be neat if we could have different labels for each locale based on the language selected in Payload.
Something like this:

    localization: {
        locales: [
            {
                label: {
          nb: "Norsk",
          en: "Norwegian"
        },
                code: "nb",
            },
            {
                label: {
          nb: "Engelsk",
          en: "English"
        },
                code: "en",
            },
        ],
        defaultLocale: "nb",
        fallback: true,
    },

[DanRibbens]

This might not be too difficult. If you are interested in making a PR I can probably provide some insights on what to do for this.

[Snailedlt]

Sure, sounds exciting! 🚀
I haven't looked much at the codebase though, so some pointers on where and what to look for would be super helpful!

[DanRibbens]

Sure!

1. The ts type needs string | Record<string, string> for the label. https://github.com/payloadcms/payload/blob/main/packages/payload/src/config/types.ts L291
2. The config validation (joi) needs to have the same. You can find how this was done on other label fields that allow for the translated objects https://github.com/payloadcms/payload/blob/main/packages/payload/src/config/schema.ts
3. In the packages/payload/src/admin you can see we use a utility function called getTranslation when we might have a string or an object keyed on translations for i18n support. It is called like getTranslation(labels, i18n).toLowerCase(). You will need to call that where we have the localization dropdown. https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/components/elements/Localizer/index.tsx

For testing you can:

1. Edit test/admin/config.ts to have your new option on one of the locales in localization.
2. Add a playwright test in test/admin/e2e.spec.ts by copying an existing test, choosing the locale that has your enhanced labels and expecting to see your options. I would also click one and expect it to have changed the locale.

Good luck!

[Snailedlt]

Thanks! Gonna try to get started on it sometime this week 👍

[Snailedlt]

@DanRibbens I've done the first two steps, but I'm not sure how to continue with adding getTranslation. I think it would help if I was able to get the package to start 😅
When I run pnpm dev or pnpm --filter payload dev I get this error: ERROR: You must provide an argument for "testSuiteDir" from this line
I'm not sure how to provide a testSuiteDir argument, or what the value for the argument would be. Is there any documentation on this... or just running the turborepo in general?

Edit:
I found the needed documentation in CONTRIBUTING.md. Sorry about the ping

[Snailedlt]

Sidenote: The link to contributing in the README isn't working. Seems like someone forgot to change the links when you changed the location of the README :)

[Snailedlt]

Sidenote: The link to contributing in the README isn't working. Seems like someone forgot to change the links when you changed the location of the README :)

@DanRibbens just letting you know that this still isn't fixed :)

[Snailedlt]

Fixed in #4005