search

RocketChat / Rocket.Chat

The communications platform that puts data protection first.
https://rocket.chat/
Other
40.59k stars 10.59k forks source link

gitlab WebHook messages are not displayed correctly #21157

Open fcoppolani opened 3 years ago

fcoppolani commented 3 years ago

Description:

Since the upgrade from 3.9 to 3.12, the display of Gitlab notifications are somewhat not correctly displayed. It is probably linked to https://github.com/RocketChat/Rocket.Chat/issues/21009 but the behavior is different, and still somewhat incorrect. We never tried the 3.10 version of Rocket.chat.

Steps to reproduce:

  1. Create an incoming integration in rocketchat (without any script)
  2. Create a webhook in gitlab (version 13.9.x)
  3. Fire the webhook in gitlab (push, commit, etc.)

Expected behavior:

Here is what used to be like : rocketchat-notifications

Actual behavior:

And now :
2021-03-17_10h42_12

Server Setup Information:

Client Setup Information

Relevant logs:

Logs are empty

Cancer-zern commented 3 years ago

Same issue: https://github.com/RocketChat/Rocket.Chat/issues/21040

iammattmartin commented 3 years ago

This also appears to impact long message lines which are truncated and made to flow to a new line. Likely a change made which broke both.

adocampo commented 3 years ago

Same here, is quite annoying as they are show as two columns, so most webhooks are completely borked. There is an embedded CSS class rcx-css-viuaf9 which hardcodes the width to 480px. By removing it on developer tools, it shows the webhooks correctly. I couldn't find, though, where this max-width: 480px !important is set, and I don't really know why isn't present in any css but embedded in the html. I'm not a frontend developer myself, but I would swear this is not a best practice. My bet is it should be the 100% width and let the browser to resize accordingly to the div

Examples: with the class image without it image

with the class image without it image

geekgonecrazy commented 3 years ago

@RocketChat/frontend I think this might be known. I remember noticing something like this change and there being a reason. Can you give any insight here please? As this does look like a breaking change

Cancer-zern commented 3 years ago

Same for me If i open by Android App it is fine. Browser or windows app it isn't fine

fleaz commented 3 years ago

Hey, we have the same issue on 3.13.2

This affects not only the Gitlab integration, but every message send via the API (both sendMessage and postMesssage) which has an attachments. Even with a single attachment the width is capped at 480px which is quite narrow.

Easy way to reproduce: POST against /api/v1/chat.postMessage:

{
    "channel": "#test",
    "attachments": [
        {
            "text": "This is a very long text which will be split into multiple rows due to the max-width parameter..."
        }
    ]
}
cocatrice commented 3 years ago

We are having exactly the same issue in 3.14.1.

We have also noticed that all the newline in attachment field is broken.

Can we please request a fix for this one?

Exordian commented 3 years ago

Sadly, this breaks many integrations of us. Especially ones we can't change, since they're designed as slack connector and this change introduced a breaking change to slack notifications. We're eagerly awaiting a fix :)

Cancer-zern commented 3 years ago

@RocketChat/frontend I think this might be known. I remember noticing something like this change and there being a reason. Can you give any insight here please? As this does look like a breaking change

When you will fix this issue?

iammattmartin commented 3 years ago

It's a sad day when you ditch Rocket.Chat for something else because they can't fix things they've broken nearly more than 5 months ago.

pkroll61 commented 2 years ago

Ran into this when we upgraded to 4.4.1. A quick work around I found was adding some layout custom css.

div.rcx-css-viuaf9 { margin-block: 0.25rem !important; width: 100% !important; max-width: 100% !important; display: flex !important; overflow: hidden !important; flex-direction: column !important; }

duven87 commented 2 years ago

Ran into this when we upgraded to 4.4.1. A quick work around I found was adding some layout custom css.

div.rcx-css-viuaf9 { margin-block: 0.25rem !important; width: 100% !important; max-width: 100% !important; display: flex !important; overflow: hidden !important; flex-direction: column !important; }

Where do I have to add these lines?

pkroll61 commented 2 years ago

As admin go to Administration -> Layout -> Custom CSS and paste in there. Hope it helps ya!

duven87 commented 2 years ago

Thank you very much, it works correctly. The bad thing is that the links are still broken... If I click on the partially visible link in the bot comment, the browser only opens that visible part, not the whole link. image

image

pkroll61 commented 2 years ago

Ah we never had links so never ran into that case. We have since moved away from rocketchat so unfortunately I cant play around with it anymore. Best of luck!