Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: make MessageContextMenu a functional component #16390

Merged
merged 2 commits into from
Sep 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions storybook/pages/MessageContextMenuPage.qml
Original file line number Diff line number Diff line change
Expand Up @@ -54,22 +54,80 @@ SplitView {
Component {
id: menu1
MessageContextMenuView {
id: messageContextMenuView
anchors.centerIn: parent
hideDisabledItems: false
isDebugEnabled: isDebugEnabledCheckBox.checked
onClosed: {
destroy()
}
onPinMessage: () => {
logs.logEvent("Pin message:", messageContextMenuView.messageId)
}
onUnpinMessage: () => {
logs.logEvent("Unpin message:", messageContextMenuView.messageId)
}
onPinnedMessagesLimitReached: () => {
logs.logEvent("Pinned messages limit reached:", messageContextMenuView.messageId)
}
onMarkMessageAsUnread: () => {
logs.logEvent("Mark message as unread:", messageContextMenuView.messageId)
}
onToggleReaction: (emojiId) => {
logs.logEvent("Toggle reaction:", messageContextMenuView.messageId, emojiId)
}
onDeleteMessage: () => {
logs.logEvent("Delete message:", messageContextMenuView.messageId)
}
onEditClicked: () => {
logs.logEvent("Edit message:", messageContextMenuView.messageId)
}
onShowReplyArea: (senderId) => {
logs.logEvent("Show reply area:", messageContextMenuView.messageId, senderId)
}
onCopyToClipboard: (text) => {
logs.logEvent("Copy to clipboard:", text)
}
}
}

Component {
id: menu2
MessageContextMenuView {
id: messageContextMenuView
anchors.centerIn: parent
hideDisabledItems: true
isDebugEnabled: isDebugEnabledCheckBox.checked
onClosed: {
destroy()
}
onPinMessage: () => {
logs.logEvent("Pin message:", messageContextMenuView.messageId)
}
onUnpinMessage: () => {
logs.logEvent("Unpin message:", messageContextMenuView.messageId)
}
onPinnedMessagesLimitReached: () => {
logs.logEvent("Pinned messages limit reached:", messageContextMenuView.messageId)
}
onMarkMessageAsUnread: () => {
logs.logEvent("Mark message as unread:", messageContextMenuView.messageId)
}
onToggleReaction: (emojiId) => {
logs.logEvent("Toggle reaction:", messageContextMenuView.messageId, emojiId)
}
onDeleteMessage: () => {
logs.logEvent("Delete message:", messageContextMenuView.messageId)
}
onEditClicked: () => {
logs.logEvent("Edit message:", messageContextMenuView.messageId)
}
onShowReplyArea: (senderId) => {
logs.logEvent("Show reply area:", messageContextMenuView.messageId, senderId)
}
onCopyToClipboard: (text) => {
logs.logEvent("Copy to clipboard:", text)
}
}
}
}
Expand All @@ -85,6 +143,12 @@ SplitView {

controls: ColumnLayout {
spacing: 16

CheckBox {
id: isDebugEnabledCheckBox
text: "Enable Debug"
checked: false
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ def test_1x1_chat(multiple_instances):
with step(f'User {user_one.name}, add reaction to the last message and verify it was added'):
occurrence = random.randint(1, 6)
message.open_context_menu_for_message().add_reaction_to_message(occurrence)
assert driver.waitFor(lambda: EMOJI_PATHES[occurrence - 1] == message.get_emoji_reactions_pathes()[0],
assert driver.waitFor(lambda: EMOJI_PATHES[occurrence - 1] == str(message.get_emoji_reactions_pathes()[0]),
timeout),\
f"Emoji reaction is not correct"
main_window.hide()
Expand All @@ -155,7 +155,7 @@ def test_1x1_chat(multiple_instances):
aut_two.attach()
main_window.prepare()
message = chat.find_message_by_text(chat_message_reply, 0)
assert driver.waitFor(lambda: EMOJI_PATHES[occurrence - 1] == message.get_emoji_reactions_pathes()[0],
assert driver.waitFor(lambda: EMOJI_PATHES[occurrence - 1] == str(message.get_emoji_reactions_pathes()[0]),
timeout),\
f"Emoji reaction is not correct"
main_window.hide()
Expand Down
69 changes: 21 additions & 48 deletions ui/imports/shared/views/chat/MessageContextMenuView.qml
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,9 @@ import shared.status 1.0
import shared.controls.chat 1.0
import shared.controls.chat.menuItems 1.0

import AppLayouts.Chat.stores 1.0 as ChatStores

StatusMenu {
id: root

property ChatStores.RootStore store
property var reactionModel: []

property string myPublicKey: ""
Expand All @@ -35,7 +32,7 @@ StatusMenu {
property int messageContentType: Constants.messageContentType.unknownContentType

property bool pinMessageAllowedForMembers: false
property bool isDebugEnabled: store && store.isDebugEnabled
property bool isDebugEnabled: false
property bool editRestricted: false
property bool pinnedMessage: false
property bool canPin: false
Expand All @@ -44,14 +41,15 @@ StatusMenu {
return root.messageSenderId !== "" && root.messageSenderId === root.myPublicKey;
}

signal pinMessage(string messageId)
signal unpinMessage(string messageId)
signal pinnedMessagesLimitReached(string messageId)
signal showReplyArea(string messageId, string messageSenderId)
signal toggleReaction(string messageId, int emojiId)
signal deleteMessage(string messageId)
signal editClicked(string messageId)
signal markMessageAsUnread(string messageId)
signal pinMessage()
signal unpinMessage()
signal pinnedMessagesLimitReached()
signal showReplyArea(string messageSenderId)
signal toggleReaction(int emojiId)
signal deleteMessage()
signal editClicked()
signal markMessageAsUnread()
signal copyToClipboard(string text)

width: Math.max(emojiContainer.visible ? emojiContainer.width : 0, 230)

Expand All @@ -66,8 +64,8 @@ StatusMenu {
reactionsModel: root.reactionModel
bottomPadding: Style.current.padding
onToggleReaction: {
root.toggleReaction(root.messageId, emojiId)
close()
root.toggleReaction(emojiId)
root.close()
}
}
}
Expand All @@ -80,19 +78,14 @@ StatusMenu {
id: replyToMenuItem
text: qsTr("Reply to")
icon.name: "chat"
onTriggered: {
root.showReplyArea(root.messageId, root.messageSenderId)
root.close()
}
onTriggered: root.showReplyArea(root.messageSenderId)
enabled: !root.disabledForChat
}

StatusAction {
id: editMessageAction
text: qsTr("Edit message")
onTriggered: {
editClicked(messageId)
}
onTriggered: editClicked()
icon.name: "edit"
enabled: root.isMyMessage &&
!root.editRestricted &&
Expand All @@ -103,10 +96,7 @@ StatusMenu {
id: copyMessageMenuItem
text: qsTr("Copy message")
icon.name: "copy"
onTriggered: {
ClipboardUtils.setText(root.unparsedText)
close()
}
onTriggered: root.copyToClipboard(root.unparsedText)
enabled: root.messageContentType === Constants.messageContentType.messageType && replyToMenuItem.enabled
}

Expand All @@ -115,29 +105,17 @@ StatusMenu {
text: qsTr("Copy Message Id")
icon.name: "copy"
enabled: root.isDebugEnabled && replyToMenuItem.enabled
onTriggered: {
ClipboardUtils.setText(root.messageId)
close()
}
onTriggered: root.copyToClipboard(root.messageId)
}

StatusAction {
id: pinAction
text: root.pinnedMessage ? qsTr("Unpin") : qsTr("Pin")
icon.name: root.pinnedMessage ? "unpin" : "pin"
onTriggered: {
if (root.pinnedMessage) {
root.unpinMessage(root.messageId)
return
}

if (!root.canPin) {
root.pinnedMessagesLimitReached(root.messageId)
return
}

root.pinMessage(root.messageId)
root.close()
if (root.pinnedMessage) return root.unpinMessage()
if (!root.canPin) return root.pinnedMessagesLimitReached()
root.pinMessage()
}
enabled: {
if (root.disabledForChat)
Expand All @@ -163,10 +141,7 @@ StatusMenu {
text: qsTr("Mark as unread")
icon.name: "hide"
enabled: !root.disabledForChat
onTriggered: {
root.markMessageAsUnread(root.messageId)
root.close()
}
onTriggered: root.markMessageAsUnread()
}

StatusMenuSeparator {
Expand All @@ -191,8 +166,6 @@ StatusMenu {
text: qsTr("Delete message")
icon.name: "delete"
type: StatusAction.Type.Danger
onTriggered: {
root.deleteMessage(messageId)
}
onTriggered: root.deleteMessage()
}
}
46 changes: 16 additions & 30 deletions ui/imports/shared/views/chat/MessageView.qml
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import shared.views.chat 1.0
import shared.controls.chat 1.0
import shared.stores 1.0 as SharedStores

import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
Expand Down Expand Up @@ -1227,51 +1228,36 @@ Loader {
id: messageContextMenuComponent

MessageContextMenuView {
store: root.rootStore
id: messageContextMenuView
reactionModel: root.emojiReactionsModel
disabledForChat: !root.rootStore.isUserAllowedToSendMessage
forceEnableEmojiReactions: !root.rootStore.isUserAllowedToSendMessage && d.addReactionAllowed

onPinMessage: (messageId) => {
root.messageStore.pinMessage(messageId)
}

onUnpinMessage: (messageId) => {
root.messageStore.unpinMessage(messageId)
}

onPinnedMessagesLimitReached: (messageId) => {
isDebugEnabled: root.rootStore && root.rootStore.isDebugEnabled
onPinMessage: root.messageStore.pinMessage(messageContextMenuView.messageId)
onUnpinMessage: root.messageStore.unpinMessage(messageContextMenuView.messageId)
onPinnedMessagesLimitReached: () => {
if (!root.chatContentModule) {
console.warn("error on open pinned messages limit reached from message context menu - chat content module is not set")
return
}
Global.openPinnedMessagesPopupRequested(root.rootStore,
root.messageStore,
root.chatContentModule.pinnedMessagesModel,
messageId,
messageContextMenuView.messageId,
root.chatId)
}

onMarkMessageAsUnread: (messageId) => {
root.messageStore.markMessageAsUnread(messageId)
}

onToggleReaction: (messageId, emojiId) => {
root.messageStore.toggleReaction(messageId, emojiId)
onMarkMessageAsUnread: root.messageStore.markMessageAsUnread(messageContextMenuView.messageId)
onToggleReaction: (emojiId) => {
root.messageStore.toggleReaction(messageContextMenuView.messageId, emojiId)
}

onDeleteMessage: (messageId) => {
root.messageStore.warnAndDeleteMessage(messageId)
onDeleteMessage: root.messageStore.warnAndDeleteMessage(messageContextMenuView.messageId)
onEditClicked: root.messageStore.setEditModeOn(messageContextMenuView.messageId)
onShowReplyArea: (senderId) => {
root.showReplyArea(messageContextMenuView.messageId, senderId)
}

onEditClicked: (messageId) => {
root.messageStore.setEditModeOn(messageId)
onCopyToClipboard: (text) => {
ClipboardUtils.setText(text)
}

onShowReplyArea: (messageId, senderId) => {
root.showReplyArea(messageId, senderId)
}

onOpened: {
root.setMessageActive(model.id, true)
}
Expand Down