[Bug] Fix UI Element text Breaking into two lines when long username

[Nabhag8848]

What happened?

• onInstallation message and when running /notion connect text in notification is breaking into two lines. we need to make an notification such that it appears in single line even though username is large.

• Incase of onInstallation message we need to attach the layout to top the the Hey username welcome to notion app message below the layout.

Steps to reproduce

• /notion connect with large username.
• install app having large username

Relevant ScreenShots

Screen.Recording.2024-01-29.at.00.25.37.mov

Version

v6.5

What browsers are you seeing the problem on?

Chrome

[brf153]

Incase of onInstallation message we need to attach the layout to top the the Hey username welcome to notion app message below the layout.

@Nabhag8848 I did not get this

[Nabhag8848]

Incase of onInstallation message we need to attach the layout to top the the Hey username welcome to notion app message below the layout.

@Nabhag8848 I did not get this

I mean Hey username welcome to notion app that text needs below layout so layout info will stick to top. meaning Hey username welcome to notion app should be first line incase of setting up the notion app..

[Spiral-Memory]

@Nabhag8848 , I feel the issue lies here LayoutBlockType.SECTION only occupies a certain width. Both of the issue you mentioned, in that the text uses the function createSectionBlock and hence causing the issue. I am new to Rocket chat UI Kit, so i am not sure, which will be better to use in this case ?

Using getCreator of IModify, full line text can be done, then using createContextBlock that is custom function defined, it can be done.

[Nabhag8848]

@Nabhag8848 , I feel the issue lies here LayoutBlockType.SECTION only occupies a certain width. Both of the issue you mentioned, in that the text uses the function createSectionBlock and hence causing the issue. I am new to Rocket chat UI Kit, so i am not sure, which will be better to use in this case ?

Using getCreator of IModify, full line text can be done, then using createContextBlock that is custom function defined, it can be done.

Hey, I believe @brf153 is working on this issue. + please please please only work on one issue at a time.

[Spiral-Memory]

@Nabhag8848 , Certainly, sir. I apologize if it caused any inconvenience. Well, which issue should I work on, sir? Apart from preserving the message one, as that is a significant issue and requires a lot of discussion to fully understand the implementation. Currently, I am looking for a good first issue to understand the codebase and how RC apps work.

[brf153]

@Nabhag8848 I believe there is an issue. For testing purposes, I created a function named sendNotificationWithBlock.

Initially, you can observe that I have commented out some code, and I'm not using any blocks at this point. As shown in the picture below, the text is fully visible and does not break.

When I remove the comment (i.e., when I add the block), I only get the block and not the message.

The section block, which we were using earlier, does not allow us to increase the width, causing the text to break.

We have two options: either replace the text with something else like Hello!👋 Connect your Notion Workspace without including the name, or consider making an issue in the apps-engine and try to address the problem there.

[Nabhag8848]

@Nabhag8848 I believe there is an issue. For testing purposes, I created a function named sendNotificationWithBlock.

Initially, you can observe that I have commented out some code, and I'm not using any blocks at this point. As shown in the picture below, the text is fully visible and does not break.

When I remove the comment (i.e., when I add the block), I only get the block and not the message.

The section block, which we were using earlier, does not allow us to increase the width, causing the text to break.

We have two options: either replace the text with something else like Hello!👋 Connect your Notion Workspace without including the name, or consider making an issue in the apps-engine and try to address the problem there.

yep. new uikit sets either text or block at a time.
Can we have button as an attachment does that solve our problem or we would face the same issue ? if that doesn't we can change text to Hey ${username} !.

[brf153]

Oki I will check it

[brf153]

@Nabhag8848 I have implemented the functionality you stated above. I am sending the action block as an attachment. Although the UI might not be perfect, it is working fine.

[brf153]

Shall I raise a pr for these changes?

[Nabhag8848]

Shall I raise a pr for these changes?

Can we make a button variant to primary so we can have a blue background.+ change text to Connect to Workspace to maintain consistency across app. and about OnInstallation feature we have come up with solution and are we able to achieve as we intended ?

[brf153]

@Nabhag8848 I have made the changes for onInstall. It looks like

[brf153]

Can we add custom css to our code for the ui kit? I am not being able to add the style: "primary" to the attachment's block. But, when I make changes in the devtools of chrome, I am being able to make the required changes.

[brf153]

Without custom css our button and message will look like

[Nabhag8848]

Can we add custom css to our code for the ui kit? I am not being able to add the style: "primary" to the attachment's block. But, when I make changes in the devtools of chrome, I am being able to make the required changes.

we can't as far as i know, hacks can go again RC design principles.

[Nabhag8848]

Without custom css our button and message will look like

Are we using PRIMARY button anywhere else except the submit button of modal and Comment Button ? if not, this won't break consistency across app, we are good to go with this.

[Nabhag8848]

@Nabhag8848 I have made the changes for onInstall. It looks like

Can we have that greeting on the second message ? also as we see, having two notification on install, can we make it one somehow and match the UI ? Can we have that layout as attachment and look as if it is attached below the notification with setup information like connect to workspace button, if thats possible lemme know.

[brf153]

Without custom css our button and message will look like

Are we using PRIMARY button anywhere else except the submit button of modal and Comment Button ? if not, this won't break consistency across app, we are good to go with this.

Shall I make these the same as I have done for the /notion connect command?

[brf153]

By submit button of modal, do you mean these buttons?

[brf153]

@Nabhag8848 I have made the changes for onInstall. It looks like

Can we have that greeting on the second message ? also as we see, having two notification on install, can we make it one somehow and match the UI ? Can we have that layout as attachment and look as if it is attached below the notification with setup information like connect to workspace button, if thats possible lemme know.

I can make something like

I think the layout you are talking about is the preview block which is having the notion's image, the header, the footer, and the text element. I have checked but I did not get anyway to send blocks as the attachment. The only block which we can send is the action block which is already defined in the IMessageAttachment

[Nabhag8848]

@Nabhag8848 I have made the changes for onInstall. It looks like

Can we have that greeting on the second message ? also as we see, having two notification on install, can we make it one somehow and match the UI ? Can we have that layout as attachment and look as if it is attached below the notification with setup information like connect to workspace button, if thats possible lemme know.

I can make something like I think the layout you are talking about is the preview block which is having the notion's image, the header, the footer, and the text element. I have checked but I did not get anyway to send blocks as the attachment. The only block which we can send is the action block which is already defined in the IMessageAttachment

@brf153 This Looks Good !

[Nabhag8848]

Without custom css our button and message will look like

Are we using PRIMARY button anywhere else except the submit button of modal and Comment Button ? if not, this won't break consistency across app, we are good to go with this.

Shall I make these the same as I have done for the /notion connect command?

@brf153 having button as attachment would break this buttons variation and will force us to change that to grey (not primary) which we can avoid, as mentioned earlier.

[Nabhag8848]

@brf153 Lets just have Connect your Notion Workspace

[brf153]

@Nabhag8848 what I understood is
i) I will change the onInstall text to

ii) I will simply change the /notion connect text to Connect you Notion Workspace.

Do I need to make any further changes?

[Nabhag8848]

@Nabhag8848 what I understood is
i) I will change the onInstall text to

ii) I will simply change the /notion connect text to Connect you Notion Workspace.

Do I need to make any further changes?

looks good. Good to go for making changes to PR🚀