Add tooltip to disabled invite button due to lack of permissions (#10869)

Author: t3chguy

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,23 +350,32 @@ 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");
             if (room.isSpaceRoom()) {
                 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;

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)",