Feature: Manifest Localization (Localize # in strings)

[madsrasmussen]

Description

This PR adds the ability to localize parts of a string. The PR adds a new method on the localization controller, it will look for any words prefixed with a # in the string and replace them with the localized string.

I am a little unsure about the method name, so I am open to suggestions. This was the best I could come up with as it is just a regular string with magic characters.

The PR updates a lot of the current manifests, but I might have missed some here and there. We can update these when we find them.

Manifest
It is now possible to prefix values in manifests with a hash and they will be translated:

{
  "type": "someExtension",
  "meta": {
    "label": "#translation_key"
  }
}

Most common use case in an UmbElement:

this.localize.string('#buttons_save');

Is it also possible to do something like this. This is mostly to ensure that any word prefixed with a # will get translated if we invent some template language at some point.

this.localize.string('#buttons_save some non translated content #more_translated_content');

If a translation can't be found for a ket it will return the key: #unknown_key

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Caution

Breaking Change
It is no longer possible to use the labelKey and descriptionKey props in the 'entityUserPermission' manifest. Instead, prefix the value in the label and description prop.

[mattbrailsford]

I discussed with Jacob in slack whether we can add termOr to allow providing a fallback if a translation term is not available. I wonder if we could do the same here?

${this.localize.stringOr('#general_something', 'Something');

I guess if it's a string with multiple translatable keys you could use args to replace by index

${this.localize.stringOr('#buttons_save some non translated content #more_translatedContent', 'Save', 'Something Else');

Or maybe even a dictionary option?

${this.localize.stringOr('#buttons_save some non translated content #more_translatedContent', {
    buttons: {
        save: "Save"
    },
    more: {
        translatedContent: "Something Else"
    }
});

[mattbrailsford]

Question, you give the example of #more_translated_content but is that going to be possible? AFAIK the translation dictionary is only allowed to go a single level deep so wouldn't this mean these need to be #more_translatedContent ?

[madsrasmussen]

Thanks for your perspective @mattbrailsford

If it is something we want to do for term and if we can find a good use case for the string method then it would be ok that they follow along. I would hope that the translation system always had at least one fallback value though. So if it didn't exist in the current UI language then it should be in the "fallback" translation instead of in the code 🤔 Then we avoid maintaining two fallback systems.

My example with some parts of a string translated might be a bit weird, but it is mostly to ensure that we don't force ourselves to allow translation of the first word.

I will leave it out of this PR though so we allow for translations of manifests in the first place.

I must admit that I haven't tested whether this example actually works #more_translated_content 😄 I would hope that we can nest as much as needed, but it might be limited.

[leekelleher]

Tested out, all works as expected. 👍