From dfbe78287a8c22a8c450667f1659d4a6cdce3e63 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 11 May 2023 15:34:53 +0100
Subject: [PATCH] Add tooltip to disabled invite button due to lack of
 permissions

---
 src/components/views/rooms/MemberList.tsx | 30 +++++++++++++++--------
 src/i18n/strings/en_EN.json               |  1 +
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 44dba2e32b1..4a9a2d97a55 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -46,6 +46,7 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent
 import { UIComponent } from "../../../settings/UIFeature";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { SDKContext } from "../../../contexts/SDKContext";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -349,7 +350,7 @@ export default class MemberList extends React.Component<IProps, IState> {
 
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
-        let inviteButton;
+        let inviteButton: JSX.Element | undefined;
 
         if (room?.getMyMembership() === "join" && shouldShowComponent(UIComponent.InviteUsers)) {
             let inviteButtonText = _t("Invite to this room");
@@ -357,15 +358,24 @@ export default class MemberList extends React.Component<IProps, IState> {
                 inviteButtonText = _t("Invite to this space");
             }
 
-            inviteButton = (
-                <AccessibleButton
-                    className="mx_MemberList_invite"
-                    onClick={this.onInviteButtonClick}
-                    disabled={!this.state.canInvite}
-                >
-                    <span>{inviteButtonText}</span>
-                </AccessibleButton>
-            );
+            if (this.state.canInvite) {
+                inviteButton = (
+                    <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
+                        <span>{inviteButtonText}</span>
+                    </AccessibleButton>
+                );
+            } else {
+                inviteButton = (
+                    <AccessibleTooltipButton
+                        className="mx_MemberList_invite"
+                        onClick={null}
+                        disabled
+                        tooltip={_t("You do not have permission to invite users")}
+                    >
+                        <span>{inviteButtonText}</span>
+                    </AccessibleTooltipButton>
+                );
+            }
         }
 
         let invitedHeader;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3847915e76d..b2485b41696 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1947,6 +1947,7 @@
     "and %(count)s others...|one": "and one other...",
     "Invite to this room": "Invite to this room",
     "Invite to this space": "Invite to this space",
+    "You do not have permission to invite users": "You do not have permission to invite users",
     "Invited": "Invited",
     "Filter room members": "Filter room members",
     "%(userName)s (power %(powerLevelNumber)s)": "%(userName)s (power %(powerLevelNumber)s)",