search

kumahq / kuma-gui

🐻 A GUI built on Vue.js for use with Kuma.
https://kuma.io/
Apache License 2.0
39 stars 22 forks source link

Add a i18n interpolation component for interpolating Vue components into markdown #2429

Open johncowen opened 7 months ago

johncowen commented 7 months ago

Description

This issue is split off from https://github.com/kumahq/kuma-gui/issues/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.

https://github.com/kumahq/kuma-gui/blob/e865b09b5ff268836074028099223cc2325ea9f7/src/app/application/index.ts#L83

^ 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)

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.

github-actions[bot] commented 4 months ago

This issue was inactive for 90 days. It will be reviewed in the next triage meeting and might be closed. If you think this issue is still relevant, please comment on it or attend the next triage meeting.

johncowen commented 4 months ago

Just noting here I had brief-ish look at doing this a while ago, and it didn't look straightforwards to do (at least with my knowledge of Vue). I can't remember exactly the details (should have noted here at the time), but I think I concluded that it would necessitate some form of build time amending of the Vue template. Not ideal at all.

I would rather it was a runtime thing i.e. no weirdness

github-actions[bot] commented 1 month ago

This issue was inactive for 90 days. It will be reviewed in the next triage meeting and might be closed. If you think this issue is still relevant, please comment on it or attend the next triage meeting.