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

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");
             }
 
+            if (this.state.canInvite) {
                 inviteButton = (
-                <AccessibleButton
-                    className="mx_MemberList_invite"
-                    onClick={this.onInviteButtonClick}
-                    disabled={!this.state.canInvite}
-                >
+                    <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)",