[NEW] Message Template React Component

[ggazzo]

Proposed changes (including videos or screenshots)

Complete rewrite of the messages component in react. Visual changes should be minimal as well as user impact, with no break changes (unless you've customized the blaze template).

In case you encounter any problems, or want to compare, temporarily it is possible to use the old version

Issue(s)

Steps to test or reproduce

Further comments

[lgtm-com]

This pull request fixes 1 alert when merging 93546ea into c6a1f93 - view on LGTM.com

fixed alerts:

• 1 for Superfluous trailing arguments

[lgtm-com]

This pull request fixes 1 alert when merging c4829b5 into c6a1f93 - view on LGTM.com

fixed alerts:

• 1 for Superfluous trailing arguments

[lgtm-com]

This pull request fixes 1 alert when merging b37b340 into c6a1f93 - view on LGTM.com

fixed alerts:

• 1 for Superfluous trailing arguments

[tassoevan]

Please assess impact on #21157

[lgtm-com]

This pull request fixes 1 alert when merging ec8e35f into ca5fcdd - view on LGTM.com

fixed alerts:

• 1 for Superfluous trailing arguments

[lgtm-com]

This pull request fixes 1 alert when merging afff7f8 into 8f9b2d1 - view on LGTM.com

fixed alerts:

• 1 for Superfluous trailing arguments

[ankar84]

Fantastic Job!!!

[ivans-netto]

Visual changes have a high quality level, thanks @ggazzo!

[jadanah]

There seems to be an issue when rendering a code block

e.g. if I post to api/v1/chat.postMessage

{"channel":"testing","text":"```yaml\r\n\"Channel\": \"testing\"\r\n\"Guid\": \"66a242b6-6dc4-4c60-81c2-964d274e39df\"\r\n```"}

response:

{"ts":1658738843882,"channel":"testing","message":{"alias":"","msg":"```yaml\r\n\"Channel\": \"testing\"\r\n\"Guid\": \"66a242b6-6dc4-4c60-81c2-964d274e39df\"\r\n```","attachments":[],"parseUrls":true,"groupable":false,"ts":"2022-07-25T08:47:23.748Z","u":{"_id":"f7KxnCCiJn96KAWFG","username":"ukgd.toolkit","name":"UKGD ToolKit"},"rid":"7BtzSPWzf2MQAJkbD","unread":true,"_id":"u9HQTfxNpTarvXSyZ","_updatedAt":"2022-07-25T08:47:23.829Z","urls":[],"mentions":[],"channels":[],"md":[{"type":"PARAGRAPH","value":[{"type":"PLAIN_TEXT","value":"```yaml"}]},{"type":"PARAGRAPH","value":[{"type":"PLAIN_TEXT","value":"\"Channel\": \"testing\""}]},{"type":"PARAGRAPH","value":[{"type":"PLAIN_TEXT","value":"\"Guid\": \"66a242b6-6dc4-4c60-81c2-964d274e39df\""}]},{"type":"PARAGRAPH","value":[{"type":"PLAIN_TEXT","value":"```"}]}]},"success":true}

without legacy messages:

then the code block wont be highlighted unless I activate "Enable Legacy Messages"

with legacy messages:

Version
5.0.0-rc.12
Apps Engine Version
1.33.0
Node Version
v14.19.3
Database Migration
279 (July 25, 2022 9:14 AM)
MongoDB
5.0.9 / wiredTiger (oplog Enabled)
Commit Details
HEAD: (6a0fea4e1)
Branch: HEAD