Disable redacting reactions if we don't have sufficient permissions (#8767)

src/components/views/emojipicker/Category.tsx

@@ -45,6 +45,7 @@ interface IProps {
     onClick(emoji: IEmoji): void;
     onMouseEnter(emoji: IEmoji): void;
     onMouseLeave(emoji: IEmoji): void;
+    isEmojiDisabled?: (unicode: string) => boolean;
 }
 
 class Category extends React.PureComponent<IProps> {
@@ -60,6 +61,7 @@ class Category extends React.PureComponent<IProps> {
                     onClick={onClick}
                     onMouseEnter={onMouseEnter}
                     onMouseLeave={onMouseLeave}
+                    disabled={this.props.isEmojiDisabled?.(emoji.unicode)}
                 />
             ))
         }</div>);

src/components/views/emojipicker/Emoji.tsx

@@ -26,6 +26,7 @@ interface IProps {
     onClick(emoji: IEmoji): void;
     onMouseEnter(emoji: IEmoji): void;
     onMouseLeave(emoji: IEmoji): void;
+    disabled?: boolean;
 }
 
 class Emoji extends React.PureComponent<IProps> {
@@ -40,6 +41,7 @@ class Emoji extends React.PureComponent<IProps> {
                 onMouseLeave={() => onMouseLeave(emoji)}
                 className="mx_EmojiPicker_item_wrapper"
                 label={emoji.unicode}
+                disabled={this.props.disabled}
             >
                 <div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
                     { emoji.unicode }

src/components/views/emojipicker/EmojiPicker.tsx

@@ -37,6 +37,7 @@ interface IProps {
     selectedEmojis?: Set<string>;
     showQuickReactions?: boolean;
     onChoose(unicode: string): boolean;
+    isEmojiDisabled?: (unicode: string) => boolean;
 }
 
 interface IState {
@@ -261,6 +262,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
                                 onClick={this.onClickEmoji}
                                 onMouseEnter={this.onHoverEmoji}
                                 onMouseLeave={this.onHoverEmojiEnd}
+                                isEmojiDisabled={this.props.isEmojiDisabled}
                                 selectedEmojis={this.props.selectedEmojis}
                             />
                         );

src/components/views/emojipicker/ReactionPicker.tsx

@@ -73,7 +73,7 @@ class ReactionPicker extends React.Component<IProps, IState> {
         }
     }
 
-    private getReactions() {
+    private getReactions(): Record<string, string> {
         if (!this.props.reactions) {
             return {};
         }
@@ -95,6 +95,8 @@ class ReactionPicker extends React.Component<IProps, IState> {
         this.props.onFinished();
         const myReactions = this.getReactions();
         if (myReactions.hasOwnProperty(reaction)) {
+            if (this.props.mxEvent.isRedacted() || !this.context.canSelfRedact) return;
+
             MatrixClientPeg.get().redactEvent(this.props.mxEvent.getRoomId(), myReactions[reaction]);
             dis.dispatch<FocusComposerPayload>({
                 action: Action.FocusAComposer,
@@ -119,9 +121,17 @@ class ReactionPicker extends React.Component<IProps, IState> {
         }
     };
 
+    private isEmojiDisabled = (unicode: string): boolean => {
+        if (!this.getReactions()[unicode]) return false;
+        if (this.context.canSelfRedact) return false;
+
+        return true;
+    };
+
     render() {
         return <EmojiPicker
             onChoose={this.onChoose}
+            isEmojiDisabled={this.isEmojiDisabled}
             selectedEmojis={this.state.selectedEmojis}
             showQuickReactions={true}
             data-testid='mx_ReactionPicker'

src/components/views/messages/ReactionsRow.tsx

@@ -183,7 +183,10 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
                 mxEvent={mxEvent}
                 reactionEvents={events}
                 myReactionEvent={myReactionEvent}
-                disabled={!this.context.canReact}
+                disabled={
+                    !this.context.canReact ||
+                    (myReactionEvent && !myReactionEvent.isRedacted() && !this.context.canSelfRedact)
+                }
             />;
         }).filter(item => !!item);
 

src/components/views/messages/ReactionsRowButton.tsx

@@ -47,6 +47,7 @@ interface IState {
 
 export default class ReactionsRowButton extends React.PureComponent<IProps, IState> {
     static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
 
     state = {
         tooltipRendered: false,