From 3a5173ffda9b647a06903281dce1d8592b138391 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Mon, 11 Dec 2023 12:51:44 -0300 Subject: [PATCH] feat: display disabled actions on action sheet (#5356) * improve: show the item disabled when the user doesn't have permission * minor tweak changing from disabled to enabled param * add the behavior at long press message * minor tweak * minor tweak * remove the header notPermission and show toast * tweak at auto translate e2e test * minor tweak * minor tweak translated * minor tweak en.json * minor tweak description --- app/containers/ActionSheet/Item.tsx | 37 +++++++++------ app/containers/ActionSheet/Provider.tsx | 1 + app/containers/MessageActions/index.tsx | 54 +++++++++++---------- app/containers/MessageBox/index.tsx | 63 +++++++++++++------------ app/i18n/locales/en.json | 1 + app/i18n/locales/pt-BR.json | 1 + app/lib/constants/colors.ts | 3 ++ e2e/tests/room/11-autoTranslate.spec.ts | 1 + 8 files changed, 91 insertions(+), 70 deletions(-) diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx index 5268679ae..db9e1ba97 100644 --- a/app/containers/ActionSheet/Item.tsx +++ b/app/containers/ActionSheet/Item.tsx @@ -1,11 +1,13 @@ import React from 'react'; import { Text, View } from 'react-native'; -import { themes } from '../../lib/constants'; import { CustomIcon } from '../CustomIcon'; import { useTheme } from '../../theme'; +import EventEmitter from '../../lib/methods/helpers/events'; +import I18n from '../../i18n'; import { TActionSheetOptionsItem } from './Provider'; import styles from './styles'; +import { LISTENER } from '../Toast'; import Touch from '../Touch'; export interface IActionSheetItem { @@ -14,25 +16,30 @@ export interface IActionSheetItem { } export const Item = React.memo(({ item, hide }: IActionSheetItem) => { - const { theme } = useTheme(); + const enabled = item?.enabled ?? true; + const { colors } = useTheme(); const onPress = () => { - hide(); - item?.onPress(); + if (enabled) { + hide(); + item?.onPress(); + } else { + EventEmitter.emit(LISTENER, { message: I18n.t('You_dont_have_permission_to_perform_this_action') }); + } }; + let textColor = colors.bodyText; + if (item.danger) { + textColor = colors.dangerColor; + } + if (!enabled) { + textColor = colors.fontDisabled; + } + return ( - - {item.icon ? ( - - ) : null} + + {item.icon ? : null} - + {item.title} diff --git a/app/containers/ActionSheet/Provider.tsx b/app/containers/ActionSheet/Provider.tsx index 88731d1bc..a50d1b077 100644 --- a/app/containers/ActionSheet/Provider.tsx +++ b/app/containers/ActionSheet/Provider.tsx @@ -11,6 +11,7 @@ export type TActionSheetOptionsItem = { testID?: string; onPress: () => void; right?: () => React.ReactElement; + enabled?: boolean; }; export type TActionSheetOptions = { diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx index 9118aa0ce..1f90e772b 100644 --- a/app/containers/MessageActions/index.tsx +++ b/app/containers/MessageActions/index.tsx @@ -405,22 +405,22 @@ const MessageActions = React.memo( } // Reply in DM - if (room.t !== 'd' && room.t !== 'l' && permissions.hasCreateDirectMessagePermission && !videoConfBlock) { + if (room.t !== 'd' && room.t !== 'l' && !videoConfBlock) { options.push({ title: I18n.t('Reply_in_direct_message'), icon: 'arrow-back', - onPress: () => handleReplyInDM(message) + onPress: () => handleReplyInDM(message), + enabled: permissions.hasCreateDirectMessagePermission }); } // Create Discussion - if (permissions.hasCreateDiscussionOtherUserPermission) { - options.push({ - title: I18n.t('Start_a_Discussion'), - icon: 'discussions', - onPress: () => handleCreateDiscussion(message) - }); - } + options.push({ + title: I18n.t('Start_a_Discussion'), + icon: 'discussions', + onPress: () => handleCreateDiscussion(message), + enabled: permissions.hasCreateDiscussionOtherUserPermission + }); if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.2.0') && !videoConfBlock) { options.push({ @@ -454,20 +454,22 @@ const MessageActions = React.memo( }); // Edit - if (allowEdit(message) && !videoConfBlock) { + if (!videoConfBlock) { options.push({ title: I18n.t('Edit'), icon: 'edit', - onPress: () => handleEdit(message) + onPress: () => handleEdit(message), + enabled: allowEdit(message) }); } // Pin - if (Message_AllowPinning && permissions?.hasPinPermission && !videoConfBlock) { + if (Message_AllowPinning && !videoConfBlock) { options.push({ title: I18n.t(message.pinned ? 'Unpin' : 'Pin'), icon: 'pin', - onPress: () => handlePin(message) + onPress: () => handlePin(message), + enabled: permissions?.hasPinPermission }); } @@ -516,14 +518,13 @@ const MessageActions = React.memo( }); // Delete - if (allowDelete(message)) { - options.push({ - title: I18n.t('Delete'), - icon: 'delete', - danger: true, - onPress: () => handleDelete(message) - }); - } + options.push({ + title: I18n.t('Delete'), + icon: 'delete', + danger: true, + onPress: () => handleDelete(message), + enabled: allowDelete(message) + }); return options; }; @@ -534,10 +535,13 @@ const MessageActions = React.memo( showActionSheet({ options: getOptions(message), headerHeight: HEADER_HEIGHT, - customHeader: - !isReadOnly || room.reactWhenReadOnly ? ( -
- ) : null + customHeader: ( + <> + {!isReadOnly || room.reactWhenReadOnly ? ( +
+ ) : null} + + ) }); }; diff --git a/app/containers/MessageBox/index.tsx b/app/containers/MessageBox/index.tsx index 695d8572d..5dfdbff55 100644 --- a/app/containers/MessageBox/index.tsx +++ b/app/containers/MessageBox/index.tsx @@ -904,40 +904,43 @@ class MessageBox extends Component { onPress: () => goToCannedResponses() }); } - if (permissionToUpload) { - options.push( - { - title: I18n.t('Take_a_photo'), - icon: 'camera-photo', - onPress: this.takePhoto - }, - { - title: I18n.t('Take_a_video'), - icon: 'camera', - onPress: this.takeVideo - }, - { - title: I18n.t('Choose_from_library'), - icon: 'image', - onPress: this.chooseFromLibrary - }, - { - title: I18n.t('Choose_file'), - icon: 'attach', - onPress: this.chooseFile - } - ); - } - if (hasCreateDiscussionPermission) { - options.push({ + options.push( + { + title: I18n.t('Take_a_photo'), + icon: 'camera-photo', + onPress: this.takePhoto, + enabled: permissionToUpload + }, + { + title: I18n.t('Take_a_video'), + icon: 'camera', + onPress: this.takeVideo, + enabled: permissionToUpload + }, + { + title: I18n.t('Choose_from_library'), + icon: 'image', + onPress: this.chooseFromLibrary, + enabled: permissionToUpload + }, + { + title: I18n.t('Choose_file'), + icon: 'attach', + onPress: this.chooseFile, + enabled: permissionToUpload + }, + { title: I18n.t('Create_Discussion'), icon: 'discussions', - onPress: this.createDiscussion - }); - } + onPress: this.createDiscussion, + enabled: hasCreateDiscussionPermission + } + ); - this.closeEmojiAndAction(showActionSheet, { options }); + this.closeEmojiAndAction(showActionSheet, { + options + }); }; editCancel = () => { diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json index 0c14314b7..180f7c8f8 100644 --- a/app/i18n/locales/en.json +++ b/app/i18n/locales/en.json @@ -761,6 +761,7 @@ "Enable_writing_in_room": "Enable writing in room", "Disable_writing_in_room": "Disable writing in room", "Pinned_a_message": "Pinned a message:", + "You_dont_have_permission_to_perform_this_action": "You don’t have permission to perform this action. Check with a workspace administrator.", "Jump_to_message": "Jump to message", "Missed_call": "Missed call" } diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json index f4adacf92..c0fdb726a 100644 --- a/app/i18n/locales/pt-BR.json +++ b/app/i18n/locales/pt-BR.json @@ -757,5 +757,6 @@ "The_user_will_be_able_to_type_in_roomName": "O usuário poderá digitar em {{roomName}}", "Enable_writing_in_room": "Permitir escrita na sala", "Disable_writing_in_room": "Desabilitar escrita na sala", + "You_dont_have_permission_to_perform_this_action": "Você não tem permissão para realizar esta ação. Verifique com um administrador do espaço de trabalho.", "Missed_call": "Chamada perdida" } \ No newline at end of file diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts index 0315fa15e..6a74ba08b 100644 --- a/app/lib/constants/colors.ts +++ b/app/lib/constants/colors.ts @@ -112,6 +112,7 @@ export const colors = { strokeExtraLight: '#EBECEF', strokeLight: '#CBCED1', surfaceTint: '#F7F8FA', + fontDisabled: '#CBCED1', ...mentions, ...callButtons }, @@ -199,6 +200,7 @@ export const colors = { strokeExtraLight: '#2F343D', strokeLight: '#333842', surfaceTint: '#1F2329', + fontDisabled: '#60646C', ...mentions, ...callButtons }, @@ -286,6 +288,7 @@ export const colors = { strokeExtraLight: '#2F343D', strokeLight: '#333842', surfaceTint: '#1F2329', + fontDisabled: '#60646C', ...mentions, ...callButtons } diff --git a/e2e/tests/room/11-autoTranslate.spec.ts b/e2e/tests/room/11-autoTranslate.spec.ts index 814ad5f37..b8fe76db4 100644 --- a/e2e/tests/room/11-autoTranslate.spec.ts +++ b/e2e/tests/room/11-autoTranslate.spec.ts @@ -186,6 +186,7 @@ describe('Auto Translate', () => { await waitForVisible('action-sheet-handle'); await element(by.id('action-sheet-handle')).swipe('up', 'fast', 0.5); + await element(by[textMatcher]('Edit')).atIndex(0).swipe('up', 'fast', 0.5); await waitForVisibleTextMatcher('View original', textMatcher); await element(by[textMatcher]('View original')).atIndex(0).tap();