Add a i18n interpolation component for interpolating Vue components into markdown

[johncowen]

Description

This issue is split off from #1478

I'd like to integrate and perhaps use the <I18nT /> component, it requires extra setup so I'd like to do that so at least it available as and when we need it.

---

kuma-gui/src/app/application/index.ts

Line 83 in e865b09

['I18nT', i18nTComponent(i18n)],

^ We have globally installed the <I18nT /> component and configured it to use our i18n strings, but...!

The <I18nT /> component has an issue were it encodes any HTML in the i18n strings safely, under the assumption that the strings will be user provided and thus guard against any HTML injection. Thing is, we specifically want it not to encode any HTML (our i18n strings support markdown which will be transformed to HTML). So as it stands now, we've installed this but we can't really use it.

I've had a brief look at the <I18nT /> component to see if the HTML encoding can be disabled, but there is no existing functionality to do this and it looks and sounds like adding support to turn this off isn't trivial. It may be easier to build something ourselves.

Where would this component be useful:

In our Zone creation pages we have two components (one for k8s and one for universal)

• https://github.com/kumahq/kuma-gui/blob/e865b09b5ff268836074028099223cc2325ea9f7/src/app/zones/components/ZoneCreateKubernetesInstructions.vue
• https://github.com/kumahq/kuma-gui/blob/e865b09b5ff268836074028099223cc2325ea9f7/src/app/zones/components/ZoneCreateUniversalInstructions.vue

There is potential to just give the same component a different i18n key, and then interpolate the components into that. At the very least we would keep both components but no need to finely provide multiple i18n keys similar to zones.form.kubernetes.prerequisites.stepLabel, zones.form.kubernetes.prerequisites.step2Label, ....step3Label etc etc.

There are possibly other areas in the GUI where we would have a similar usecase.