Mattermost-server: [Help Wanted] [PLT-3856] Help break HTML blocks to individual strings for translations

[esethna]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide, specifically for machine setup and for developer workflow.

---

Notes: Jira ticket

Break HTML blocks into individual strings for easier translations.

Strings like this: https://translate.mattermost.com/es/mattermost/translate/platform.po#unit=163796 should be decomposed to smaller strings. Mixing HTML with the translation is not a good practice.

[kaakaa]

http://translate.mattermost.com/nl/mattermost/translate/#filter=untranslated&unit=237152

It looks that this translation unit cannot be found.

[amyblais]

@esethna Does the above link need to be changed?

[amyblais]

@jasonblais Would you know? ^

[jasonblais]

Updated, thanks @kaakaa and @amyblais!

[kaakaa]

Thanks @amyblais & @jasonblais.

But it seems that this message isn't used in product code.
Search · api.templates.upgrade_30_body.info

Should I remove it?

[jasonblais]

@kaakaa If it's not used in the code, then I think it can be removed. It was probably used during the v3.0 upgrade.

I also updated the example with a string we still use in the code: https://translate.mattermost.com/es/mattermost/translate/platform.po#unit=163796

Edit: Thanks for noticing by the way :)

[kaakaa]

I see. I'll work this issue.

I search messages including <br> tag and devide message by <br> tag, right?
Offcourse, I will not fix <br> tag for giving appropriate space.

[jasonblais]

@kaakaa Sorry for the late reply. Yes, the <br> tags would be a great place to start, but looks like there are a few other ones too such as https://github.com/mattermost/mattermost-server/blob/master/i18n/en.json#L2543

[jasonblais]

@kaakaa Also wanted to say a huge thank you for looking into this :)

[kaakaa]

Hi @jasonblais.
Sorry for my late reply. I'm back.

I looked into server messages including html tags. Since most of that messages are used to be embedded in email templates, I'm going to modify messages and email template files.

At first, I make one exmple and I'm going to modify other messages on this way.
Modifying message and templates about mfa_change · kaakaa/mattermost-server@84f7790

After completing to modify server messages including html tags(about 15 messages), I will make PR.
Thank you.

[jasonblais]

That looks great! You can also consider posting your proposal in the localization channel for early feedback. https://pre-release.mattermost.com/core/channels/localization

Big thanks @kaakaa :)

[kaakaa]

Hi, I started work on webapp.
I think that in many cases the fixing will be done by converting FormattedHTMLMessage to FormattedMarkdownMessage and modifying messages in markdown style.

At first, I listed all messages with html tags by using my script.
https://docs.google.com/spreadsheets/d/1e4RdAAsbwBjlkz_nLYjgVCJCFYYP_vyo2Xtm7PiDrtk/edit?usp=sharing

In webapp, there are 100+ messages with html tags and i18n/en.json is often changed. So I'll be required to rebase manytimes. In order to avoid it, I'll complete this task by dividing it into several PRs.

I'll fix messages in the following orders.

1. Fix message with Used in FormattedHTMLMessage directly = NO, because this kind messages could be difficult to fix
2. Fix messages with multi html tags
3. Fix messages with just a tag. This kind messages is easy to fix.

If you have any concerns, please let me know.

[jasonblais]

This is awesome! Thank you @kaakaa 👍

[kaakaa]

I'm working on webpp. And now I have some concerns about messages and FormattedMarkdownMessage component.
Would you please answer my questions?

1. Custom classes

Some messages has custom classes (e.g.: <h4 class=banner__heading">Note:</h4>) in html tag. How can I add these classes with markdown style? or can I remove these custom classes?

• admin.compliance.noLicense
• admin.ldap.noLicense
• intro_messages.default
• intro_messages.offTopic

2. Not HTML tag <XXXX>

Some messages has strings not HTML tag, but surrounded by < and >. That strings are confused with html tags, so I think that we should change it to other symbols. (e.g.: <blank> -> [blank]). How does it sound?

• admin.cluster.OverrideHostnameDesc (<blank>)
• admin.saml.assertionConsumerServiceURLDesc, admin.saml.assertionConsumerServiceURLEx (<your-mattermost-url>)
• admin.webrtc.gatewayAdminUrlDescription, admin.webrtc.gatewayWebsocketUrlDescription (<mattermost-webrtc-gateway-url> & <port>)
• admin.webrtc.stunUriDescription, admin.webrtc.turnUriDescription (<your-stun|turn-url> & <port>)

3. \n\n is not new lines

When I modify <br /><br /> to \n\n, it isn't converted to any <br> tags by FormattedMarkdownMessage (\n converted <br>). Now I use \n \n instead of \n\n, it works fine. Is this okay?

• admin.general.localization.availableLocalesDescription
• admin.image.storeDescription
• admin.ldap.idAttrDesc
• admin.ldap.loginAttrDesc
• admin.service.enforceMfaDesc
• admin.service.forward80To443Description.disabled

4. Converting url strings to links automatically

FormattedMarkdownMessages converts url strings (http(s)://~) to links automatically. For avoiding it, I can modify url strings to inline code. How does it sound?

• admin.service.siteURLDescription has two example urls (http://example.com:8065, http://example.com:8065/company/mattermost)

[jasonblais]

@enahum @mkraft or @jespino thoughts on the above?

(If I should ping someone else, let me know)

[mkraft]

1) At this point FormattedMarkdownMessage doesn't support custom classes so I would look into wrapping the whole thing in a custom class and then targetting the contained markup. So instead of using .banner__heading {} directly you could move the custom class to a <span> or <div> wrapper and do .banner__heading h4 {}, for example. That should work in most of the cases.

2) I wonder if backslashes work to render < and > like this: \< and \>?

3) The space between the newlines is fine, I suppose, as it probably doesn't change the view for the user. That does sound like a bug in the markdown parser though... I'll open a ticket to look into that.

4) I think that should be fine to show links that we don't want hyperlinked as inline code.

[kaakaa]

Thank you @jasonblais and @mkraft.
And sorry for my late replay.

1. At this point FormattedMarkdownMessage doesn't...

Making sense! It should work in most of the casse.
But only for admin.compliance.noLicense, it's difficult to move custom class to the wrapper because of processes in admin_definition.jsx.
If moving custom class to the wrapper, it wraps unintented messages.

Should I remove the custom class in admin.compliance.noLicense? or are there any other idea?

1. I wonder if backslashes work to render < and > like this: \< and >?

Ah...I'm sorry I didn't make it clear enough.
< and > don't have any problem for viewing.

Let's say we'll check if there are html tags in messages, I think that we can achieve it by searching < and >. But if <blank> remains in message file, it requires a little more work.
So I suggested that we change <XXXX> in messages to [XXXX].

I may be over thinking it.

1. The space between the newlines is fine,...

Yes, It makes no change for viewing.

1. I think that should be fine to show links...

I see, and I'll make it to inline code.
Thank you!

[mkraft]

@kaakaa
1) I think the translation should be changed to this anyhow:

Compliance is an enterprise feature. Your current license does not support Compliance. Click [here](!http://mattermost.com) for information and pricing on enterprise licenses.

@jasonblais thoughts? ^

2) I just tested it and you don't need to escape <blank> in a string to FormatedMarkdownMessage. They should just work as-is.

[jasonblais]

@mkraft In which cases would the banner in 1) show up? Since you need an Enterprise license to view that page. Can we remove the string?

[mkraft]

@jasonblais Seems you see it if you manually enter the URL for that page without a license. Doesn't seem very necessary to me either.

[jasonblais]

I think that's an old banner, possible from a time when Enterprise features were exposed without a license. @kaakaa feel free to remove admin.compliance.noLicense

[kaakaa]

Okay, I'll remove it.
Thanks @mkraft and @jasonblais!

Since I finished about one third of messages to be fixed, I think I will make PullRequest once. But PR for [MM-10997] is duplicated with a part of my work. So I will rebase and make PR after it is merged.

[jasonblais]

Sounds good, thanks @kaakaa!!

[jasonblais]

@kaakaa Is this issue now completed?

[kaakaa]

@jasonblais
I checked en.json in mattermost-mobile and confirmed that it has no HTML tag.

And I re-checked mattermost-server and mattermost-webapp, I found some messages to fix.
Fix messages to markdown style by kaakaa · Pull Request #1824 · mattermost/mattermost-webapp
If merging this PR, this issue is completed.

Sorry for responding late.

[jasonblais]

Huge thanks @kaakaa for your help throughout :)