Fix space invite edge cases

src/components/structures/MatrixChat.tsx

@@ -111,6 +111,7 @@ import { PosthogAnalytics } from '../../PosthogAnalytics';
 import { initSentry } from "../../sentry";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { showSpaceInvite } from "../../utils/space";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -741,9 +742,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'view_create_chat':
                 showStartChatInviteDialog(payload.initialText || "");
                 break;
-            case 'view_invite':
+            case 'view_invite': {
-                showRoomInviteDialog(payload.roomId);
+                const room = MatrixClientPeg.get().getRoom(payload.roomId);
+                if (room?.isSpaceRoom()) {
+                    showSpaceInvite(room);
+                } else {
+                    showRoomInviteDialog(payload.roomId);
+                }
                 break;
+            }
             case 'view_last_screen':
                 // This function does what we want, despite the name. The idea is that it shows
                 // the last room we were looking at or some reasonable default/guess. We don't

src/components/structures/SpaceRoomView.tsx

@@ -52,6 +52,7 @@ import {
     showAddExistingRooms,
     showCreateNewRoom,
     showCreateNewSubspace,
+    showSpaceInvite,
     showSpaceSettings,
 } from "../../utils/space";
 import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
@@ -405,19 +406,19 @@ const SpaceLandingAddButton = ({ space }) => {
     </>;
 };
 
-const SpaceLanding = ({ space }) => {
+const SpaceLanding = ({ space }: { space: Room }) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
     const userId = cli.getUserId();
 
     let inviteButton;
-    if (myMembership === "join" && space.canInvite(userId)) {
+    if ((myMembership === "join" && space.canInvite(userId)) || space.getJoinRule() === JoinRule.Public) {
         inviteButton = (
             <AccessibleButton
                 kind="primary"
                 className="mx_SpaceRoomView_landing_inviteButton"
                 onClick={() => {
-                    showRoomInviteDialog(space.roomId);
+                    showSpaceInvite(space);
                 }}
             >
                 { _t("Invite") }

src/components/views/rooms/MemberList.tsx

@@ -44,6 +44,7 @@ import MemberTile from "./MemberTile";
 import BaseAvatar from '../avatars/BaseAvatar';
 import { throttle } from 'lodash';
 import SpaceStore from "../../../stores/SpaceStore";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 const getSearchQueryLSKey = (roomId: string) => `mx_MemberList_searchQuarry_${roomId}`;
 
@@ -169,7 +170,11 @@ export default class MemberList extends React.Component<IProps, IState> {
     private get canInvite(): boolean {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
-        return room && room.canInvite(cli.getUserId());
+
+        return (
+            room?.canInvite(cli.getUserId()) ||
+            (room?.isSpaceRoom() && room.getJoinRule() === JoinRule.Public)
+        );
     }
 
     private getMembersState(members: Array<RoomMember>): IState {

src/components/views/rooms/RoomList.tsx

@@ -49,6 +49,7 @@ import { showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -521,19 +522,23 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     </AccessibleButton>
                 </div>;
             } else if (
-                this.props.activeSpace?.canInvite(userId) || this.props.activeSpace?.getMyMembership() === "join"
+                this.props.activeSpace?.canInvite(userId) ||
+                this.props.activeSpace?.getMyMembership() === "join" ||
+                this.props.activeSpace?.getJoinRule() === JoinRule.Public
             ) {
                 const spaceName = this.props.activeSpace.name;
+                const canInvite = this.props.activeSpace?.canInvite(userId) ||
+                    this.props.activeSpace?.getJoinRule() === JoinRule.Public;
                 explorePrompt = <div className="mx_RoomList_explorePrompt">
                     <div>{ _t("Quick actions") }</div>
-                    { this.props.activeSpace.canInvite(userId) && <AccessibleTooltipButton
+                    { canInvite && <AccessibleTooltipButton
                         className="mx_RoomList_explorePrompt_spaceInvite"
                         onClick={this.onSpaceInviteClick}
                         title={_t("Invite to %(spaceName)s", { spaceName })}
                     >
                         { _t("Invite people") }
                     </AccessibleTooltipButton> }
-                    { this.props.activeSpace.getMyMembership() === "join" && <AccessibleTooltipButton
+                    { this.props.activeSpace?.getMyMembership() === "join" && <AccessibleTooltipButton
                         className="mx_RoomList_explorePrompt_spaceExplore"
                         onClick={this.onExplore}
                         title={_t("Explore %(spaceName)s", { spaceName })}