Merge pull request #5705 from matrix-org/t3chguy/spaces4.3

Iterate Space view and right panel

src/components/structures/MatrixChat.tsx

@@ -1072,6 +1072,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     private leaveRoomWarnings(roomId: string) {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
+        const isSpace = roomToLeave?.isSpaceRoom();
         // Show a warning if there are additional complications.
         const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', '');
         const warnings = [];
@@ -1081,7 +1082,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 warnings.push((
                     <span className="warning" key="non_public_warning">
                         {' '/* Whitespace, otherwise the sentences get smashed together */ }
-                        { _t("This room is not public. You will not be able to rejoin without an invite.") }
+                        { isSpace
+                            ? _t("This space is not public. You will not be able to rejoin without an invite.")
+                            : _t("This room is not public. You will not be able to rejoin without an invite.") }
                     </span>
                 ));
             }
@@ -1094,11 +1097,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
         const warnings = this.leaveRoomWarnings(roomId);
 
-        Modal.createTrackedDialog('Leave room', '', QuestionDialog, {
-            title: _t("Leave room"),
+        const isSpace = roomToLeave?.isSpaceRoom();
+        Modal.createTrackedDialog(isSpace ? "Leave space" : "Leave room", '', QuestionDialog, {
+            title: isSpace ? _t("Leave space") : _t("Leave room"),
             description: (
                 <span>
-                    { _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
+                    { isSpace
+                        ? _t("Are you sure you want to leave the space '%(spaceName)s'?", {spaceName: roomToLeave.name})
+                        : _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
                     { warnings }
                 </span>
             ),
@@ -1112,6 +1118,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
 
                     d.finally(() => modal.close());
+                    dis.dispatch({
+                        action: "after_leave_room",
+                        room_id: roomId,
+                    });
                 }
             },
         });

src/components/structures/SpaceRoomView.tsx

@@ -25,7 +25,7 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomName from "../views/elements/RoomName";
 import RoomTopic from "../views/elements/RoomTopic";
 import FormButton from "../views/elements/FormButton";
-import {inviteMultipleToRoom, showSpaceInviteDialog} from "../../RoomInvite";
+import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
 import {useRoomMembers} from "../../hooks/useRoomMembers";
 import createRoom, {IOpts, Preset} from "../../createRoom";
 import Field from "../views/elements/Field";
@@ -46,7 +46,7 @@ import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
 import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {useStateArray} from "../../hooks/useStateArray";
 import SpacePublicShare from "../views/spaces/SpacePublicShare";
-import {shouldShowSpaceSettings} from "../../utils/space";
+import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
 import MemberAvatar from "../views/avatars/MemberAvatar";
 
 interface IProps {
@@ -108,6 +108,47 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         </div>;
     }
 
+    let inviteButton;
+    if (myMembership === "join" && space.canInvite(userId)) {
+        inviteButton = (
+            <AccessibleButton className="mx_SpaceRoomView_landing_inviteButton" onClick={() => {
+                showRoomInviteDialog(space.roomId);
+            }}>
+                { _t("Invite people") }
+            </AccessibleButton>
+        );
+    }
+
+    const canAddRooms = myMembership === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
+
+    let addRoomButtons;
+    if (canAddRooms) {
+        addRoomButtons = <React.Fragment>
+            <AccessibleButton className="mx_SpaceRoomView_landing_addButton" onClick={async () => {
+                const [added] = await showAddExistingRooms(cli, space);
+                if (added) {
+                    // TODO update rooms shown once we show hierarchy here
+                }
+            }}>
+                { _t("Add existing rooms & spaces") }
+            </AccessibleButton>
+            <AccessibleButton className="mx_SpaceRoomView_landing_createButton" onClick={() => {
+                showCreateNewRoom(cli, space);
+            }}>
+                { _t("Create a new room") }
+            </AccessibleButton>
+        </React.Fragment>;
+    }
+
+    let settingsButton;
+    if (shouldShowSpaceSettings(cli, space)) {
+        settingsButton = <AccessibleButton className="mx_SpaceRoomView_landing_settingsButton" onClick={() => {
+            showSpaceSettings(cli, space);
+        }}>
+            { _t("Settings") }
+        </AccessibleButton>;
+    }
+
     return <div className="mx_SpaceRoomView_landing">
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
         <div className="mx_SpaceRoomView_landing_name">
@@ -167,6 +208,11 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
             <RoomTopic room={space} />
         </div>
         { joinButtons }
+        <div className="mx_SpaceRoomView_landing_adminButtons">
+            { inviteButton }
+            { addRoomButtons }
+            { settingsButton }
+        </div>
     </div>;
 };
 
@@ -361,7 +407,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
         <div className="mx_SpaceRoomView_inviteTeammates_buttons">
             <AccessibleButton
                 className="mx_SpaceRoomView_inviteTeammates_inviteDialogButton"
-                onClick={() => showSpaceInviteDialog(space.roomId)}
+                onClick={() => showRoomInviteDialog(space.roomId)}
             >
                 { _t("Invite by username") }
             </AccessibleButton>

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -0,0 +1,208 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useState} from "react";
+import classNames from "classnames";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+
+import {_t} from '../../../languageHandler';
+import {IDialogProps} from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import FormButton from "../elements/FormButton";
+import Dropdown from "../elements/Dropdown";
+import SearchBox from "../../structures/SearchBox";
+import SpaceStore from "../../../stores/SpaceStore";
+import RoomAvatar from "../avatars/RoomAvatar";
+import {getDisplayAliasForRoom} from "../../../Rooms";
+import AccessibleButton from "../elements/AccessibleButton";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {allSettled} from "../../../utils/promise";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
+import StyledCheckbox from "../elements/StyledCheckbox";
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    space: Room;
+    onCreateRoomClick(cli: MatrixClient, space: Room): void;
+}
+
+const Entry = ({ room, checked, onChange }) => {
+    return <div className="mx_AddExistingToSpaceDialog_entry">
+        <RoomAvatar room={room} height={32} width={32} />
+        <span className="mx_AddExistingToSpaceDialog_entry_name">{ room.name }</span>
+        <StyledCheckbox onChange={(e) => onChange(e.target.checked)} checked={checked} />
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase();
+
+    const [selectedSpace, setSelectedSpace] = useState(space);
+    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
+
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+    const existingSubspacesSet = new Set(existingSubspaces);
+    const spaces = SpaceStore.instance.getSpaces().filter(s => {
+        return !existingSubspacesSet.has(s) // not already in space
+            && space !== s // not the top-level space
+            && selectedSpace !== s // not the selected space
+            && s.name.toLowerCase().includes(lcQuery); // contains query
+    });
+
+    const existingRooms = SpaceStore.instance.getChildRooms(space.roomId);
+    const existingRoomsSet = new Set(existingRooms);
+    const rooms = cli.getVisibleRooms().filter(room => {
+        return !existingRoomsSet.has(room) // not already in space
+            && room.name.toLowerCase().includes(lcQuery) // contains query
+            && !DMRoomMap.shared().getUserIdForRoomId(room.roomId); // not a DM
+    });
+
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+
+    let spaceOptionSection;
+    if (existingSubspacesSet.size > 0) {
+        const options = [space, ...existingSubspaces].map((space) => {
+            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
+                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+            });
+            return <div key={space.roomId} className={classes}>
+                <RoomAvatar room={space} width={24} height={24} />
+                { space.name || getDisplayAliasForRoom(space) || space.roomId }
+            </div>;
+        });
+
+        spaceOptionSection = (
+            <Dropdown
+                id="mx_SpaceSelectDropdown"
+                onOptionChange={(key: string) => {
+                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
+                }}
+                value={selectedSpace.roomId}
+                label={_t("Space selection")}
+            >
+                { options }
+            </Dropdown>
+        );
+    } else {
+        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
+            { space.name || getDisplayAliasForRoom(space) || space.roomId }
+        </div>;
+    }
+
+    const title = <React.Fragment>
+        <RoomAvatar room={selectedSpace} height={40} width={40} />
+        <div>
+            <h1>{ _t("Add existing spaces/rooms") }</h1>
+            { spaceOptionSection }
+        </div>
+    </React.Fragment>;
+
+    return <BaseDialog
+        title={title}
+        className="mx_AddExistingToSpaceDialog"
+        contentId="mx_AddExistingToSpaceDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        { error && <div className="mx_AddExistingToSpaceDialog_errorText">{ error }</div> }
+
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Filter your rooms and spaces") }
+            onSearch={setQuery}
+        />
+        <AutoHideScrollbar className="mx_AddExistingToSpaceDialog_content" id="mx_AddExistingToSpaceDialog">
+            { spaces.length > 0 ? (
+                <div className="mx_AddExistingToSpaceDialog_section mx_AddExistingToSpaceDialog_section_spaces">
+                    <h3>{ _t("Spaces") }</h3>
+                    { spaces.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selectedToAdd.has(space)}
+                            onChange={(checked) => {
+                                if (checked) {
+                                    selectedToAdd.add(space);
+                                } else {
+                                    selectedToAdd.delete(space);
+                                }
+                                setSelectedToAdd(new Set(selectedToAdd));
+                            }}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { rooms.length > 0 ? (
+                <div className="mx_AddExistingToSpaceDialog_section">
+                    <h3>{ _t("Rooms") }</h3>
+                    { rooms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selectedToAdd.has(room)}
+                            onChange={(checked) => {
+                                if (checked) {
+                                    selectedToAdd.add(room);
+                                } else {
+                                    selectedToAdd.delete(room);
+                                }
+                                setSelectedToAdd(new Set(selectedToAdd));
+                            }}
+                        />;
+                    }) }
+                </div>
+            ) : undefined }
+
+            { spaces.length + rooms.length < 1 ? <span className="mx_AddExistingToSpaceDialog_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+
+        <div className="mx_AddExistingToSpaceDialog_footer">
+            <span>
+                <div>{ _t("Don't want to add an existing room?") }</div>
+                <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
+                    { _t("Create a new room") }
+                </AccessibleButton>
+            </span>
+
+            <FormButton
+                label={busy ? _t("Applying...") : _t("Apply")}
+                disabled={busy || selectedToAdd.size < 1}
+                onClick={async () => {
+                    setBusy(true);
+                    try {
+                        await allSettled(Array.from(selectedToAdd).map((room) =>
+                            SpaceStore.instance.addRoomToSpace(space, room.roomId, calculateRoomVia(room))));
+                        onFinished(true);
+                    } catch (e) {
+                        console.error("Failed to add rooms to space", e);
+                        setError(_t("Failed to add rooms to space"));
+                    }
+                    setBusy(false);
+                }}
+            />
+        </div>
+    </BaseDialog>;
+};
+
+export default AddExistingToSpaceDialog;
+

src/components/views/dialogs/CreateRoomDialog.js

@@ -17,6 +17,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Room} from "matrix-js-sdk/src/models/room";
+
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import withValidation from '../elements/Validation';
@@ -30,6 +32,7 @@ export default class CreateRoomDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
         defaultPublic: PropTypes.bool,
+        parentSpace: PropTypes.instanceOf(Room),
     };
 
     constructor(props) {
@@ -85,6 +88,10 @@ export default class CreateRoomDialog extends React.Component {
             opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId();
         }
 
+        if (this.props.parentSpace) {
+            opts.parentSpace = this.props.parentSpace;
+        }
+
         return opts;
     }
 

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -0,0 +1,162 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useState} from 'react';
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {EventType} from "matrix-js-sdk/src/@types/event";
+
+import {_t} from '../../../languageHandler';
+import {IDialogProps} from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DevtoolsDialog from "./DevtoolsDialog";
+import SpaceBasicSettings from '../spaces/SpaceBasicSettings';
+import {getTopic} from "../elements/RoomTopic";
+import {avatarUrlForRoom} from "../../../Avatar";
+import ToggleSwitch from "../elements/ToggleSwitch";
+import AccessibleButton from "../elements/AccessibleButton";
+import FormButton from "../elements/FormButton";
+import Modal from "../../../Modal";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {allSettled} from "../../../utils/promise";
+import {useDispatcher} from "../../../hooks/useDispatcher";
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    space: Room;
+}
+
+const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFinished }) => {
+    useDispatcher(defaultDispatcher, ({action, ...params}) => {
+        if (action === "after_leave_room" && params.room_id === space.roomId) {
+            onFinished(false);
+        }
+    });
+
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+
+    const userId = cli.getUserId();
+
+    const [newAvatar, setNewAvatar] = useState<File>(null); // undefined means to remove avatar
+    const canSetAvatar = space.currentState.maySendStateEvent(EventType.RoomAvatar, userId);
+    const avatarChanged = newAvatar !== null;
+
+    const [name, setName] = useState<string>(space.name);
+    const canSetName = space.currentState.maySendStateEvent(EventType.RoomName, userId);
+    const nameChanged = name !== space.name;
+
+    const currentTopic = getTopic(space);
+    const [topic, setTopic] = useState<string>(currentTopic);
+    const canSetTopic = space.currentState.maySendStateEvent(EventType.RoomTopic, userId);
+    const topicChanged = topic !== currentTopic;
+
+    const currentJoinRule = space.getJoinRule();
+    const [joinRule, setJoinRule] = useState(currentJoinRule);
+    const canSetJoinRule = space.currentState.maySendStateEvent(EventType.RoomJoinRules, userId);
+    const joinRuleChanged = joinRule !== currentJoinRule;
+
+    const onSave = async () => {
+        setBusy(true);
+        const promises = [];
+
+        if (avatarChanged) {
+            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
+                url: await cli.uploadContent(newAvatar),
+            }, ""));
+        }
+
+        if (nameChanged) {
+            promises.push(cli.setRoomName(space.roomId, name));
+        }
+
+        if (topicChanged) {
+            promises.push(cli.setRoomTopic(space.roomId, topic));
+        }
+
+        if (joinRuleChanged) {
+            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, { join_rule: joinRule }, ""));
+        }
+
+        const results = await allSettled(promises);
+        setBusy(false);
+        const failures = results.filter(r => r.status === "rejected");
+        if (failures.length > 0) {
+            console.error("Failed to save space settings: ", failures);
+            setError(_t("Failed to save space settings."));
+        }
+    };
+
+    return <BaseDialog
+        title={_t("Space settings")}
+        className="mx_SpaceSettingsDialog"
+        contentId="mx_SpaceSettingsDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <div className="mx_SpaceSettingsDialog_content" id="mx_SpaceSettingsDialog">
+            <div>{ _t("Edit settings relating to your space.") }</div>
+
+            { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
+
+            <SpaceBasicSettings
+                avatarUrl={avatarUrlForRoom(space, 80, 80, "crop")}
+                avatarDisabled={!canSetAvatar}
+                setAvatar={setNewAvatar}
+                name={name}
+                nameDisabled={!canSetName}
+                setName={setName}
+                topic={topic}
+                topicDisabled={!canSetTopic}
+                setTopic={setTopic}
+            />
+
+            <div>
+                { _t("Make this space private") }
+                <ToggleSwitch
+                    checked={joinRule === "private"}
+                    onChange={checked => setJoinRule(checked ? "private" : "invite")}
+                    disabled={!canSetJoinRule}
+                    aria-label={_t("Make this space private")}
+                />
+            </div>
+
+            <FormButton
+                kind="danger"
+                label={_t("Leave Space")}
+                onClick={() => {
+                    defaultDispatcher.dispatch({
+                        action: "leave_room",
+                        room_id: space.roomId,
+                    });
+                }}
+            />
+
+            <div className="mx_SpaceSettingsDialog_buttons">
+                <AccessibleButton onClick={() => Modal.createDialog(DevtoolsDialog, {roomId: space.roomId})}>
+                    { _t("View dev tools") }
+                </AccessibleButton>
+                <AccessibleButton onClick={onFinished} disabled={busy} kind="link">
+                    { _t("Cancel") }
+                </AccessibleButton>
+                <FormButton onClick={onSave} disabled={busy} label={busy ? _t("Saving...") : _t("Save Changes")} />
+            </div>
+        </div>
+    </BaseDialog>;
+};
+
+export default SpaceSettingsDialog;
+

src/components/views/right_panel/UserInfo.tsx

@@ -60,7 +60,9 @@ import QuestionDialog from "../dialogs/QuestionDialog";
 import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
 import InfoDialog from "../dialogs/InfoDialog";
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
 
 interface IDevice {
     deviceId: string;
@@ -302,7 +304,8 @@ const UserOptionsSection: React.FC<{
     member: RoomMember;
     isIgnored: boolean;
     canInvite: boolean;
-}> = ({member, isIgnored, canInvite}) => {
+    isSpace?: boolean;
+}> = ({member, isIgnored, canInvite, isSpace}) => {
     const cli = useContext(MatrixClientContext);
 
     let ignoreButton = null;
@@ -342,7 +345,7 @@ const UserOptionsSection: React.FC<{
             </AccessibleButton>
         );
 
-        if (member.roomId) {
+        if (member.roomId && !isSpace) {
             const onReadReceiptButton = function() {
                 const room = cli.getRoom(member.roomId);
                 dis.dispatch({
@@ -434,14 +437,18 @@ const UserOptionsSection: React.FC<{
     );
 };
 
-const warnSelfDemote = async () => {
+const warnSelfDemote = async (isSpace) => {
     const {finished} = Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
         title: _t("Demote yourself?"),
         description:
             <div>
-                { _t("You will not be able to undo this change as you are demoting yourself, " +
-                    "if you are the last privileged user in the room it will be impossible " +
-                    "to regain privileges.") }
+                { isSpace
+                    ? _t("You will not be able to undo this change as you are demoting yourself, " +
+                        "if you are the last privileged user in the space it will be impossible " +
+                        "to regain privileges.")
+                    : _t("You will not be able to undo this change as you are demoting yourself, " +
+                        "if you are the last privileged user in the room it will be impossible " +
+                        "to regain privileges.") }
             </div>,
         button: _t("Demote"),
     });
@@ -717,7 +724,7 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({member, room, powerLevels,
         // if muting self, warn as it may be irreversible
         if (target === cli.getUserId()) {
             try {
-                if (!(await warnSelfDemote())) return;
+                if (!(await warnSelfDemote(room?.isSpaceRoom()))) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
                 return;
@@ -806,7 +813,7 @@ const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
     if (canAffectUser && me.powerLevel >= kickPowerLevel) {
         kickButton = <RoomKickButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />;
     }
-    if (me.powerLevel >= redactPowerLevel) {
+    if (me.powerLevel >= redactPowerLevel && !room.isSpaceRoom()) {
         redactButton = (
             <RedactMessagesButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />
         );
@@ -1085,7 +1092,7 @@ const PowerLevelEditor: React.FC<{
         } else if (myUserId === target) {
             // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
             try {
-                if (!(await warnSelfDemote())) return;
+                if (!(await warnSelfDemote(room?.isSpaceRoom()))) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
             }
@@ -1315,12 +1322,10 @@ const BasicUserInfo: React.FC<{
     if (!isRoomEncrypted) {
         if (!cryptoEnabled) {
             text = _t("This client does not support end-to-end encryption.");
-        } else if (room) {
+        } else if (room && !room.isSpaceRoom()) {
             text = _t("Messages in this room are not end-to-end encrypted.");
-        } else {
-            // TODO what to render for GroupMember
         }
-    } else {
+    } else if (!room.isSpaceRoom()) {
         text = _t("Messages in this room are end-to-end encrypted.");
     }
 
@@ -1381,7 +1386,9 @@ const BasicUserInfo: React.FC<{
         <UserOptionsSection
             canInvite={roomPermissions.canInvite}
             isIgnored={isIgnored}
-            member={member} />
+            member={member}
+            isSpace={room?.isSpaceRoom()}
+        />
 
         { adminToolsContainer }
 
@@ -1498,7 +1505,7 @@ interface IProps {
     user: Member;
     groupId?: string;
     room?: Room;
-    phase: RightPanelPhases.RoomMemberInfo | RightPanelPhases.GroupMemberInfo;
+    phase: RightPanelPhases.RoomMemberInfo | RightPanelPhases.GroupMemberInfo | RightPanelPhases.SpaceMemberInfo;
     onClose(): void;
 }
 
@@ -1542,7 +1549,9 @@ const UserInfo: React.FC<Props> = ({
         previousPhase = RightPanelPhases.RoomMemberInfo;
         refireParams = {member: member};
     } else if (room) {
-        previousPhase = RightPanelPhases.RoomMemberList;
+        previousPhase = previousPhase = room.isSpaceRoom()
+            ? RightPanelPhases.SpaceMemberList
+            : RightPanelPhases.RoomMemberList;
     }
 
     const onEncryptionPanelClose = () => {
@@ -1557,6 +1566,7 @@ const UserInfo: React.FC<Props> = ({
     switch (phase) {
         case RightPanelPhases.RoomMemberInfo:
         case RightPanelPhases.GroupMemberInfo:
+        case RightPanelPhases.SpaceMemberInfo:
             content = (
                 <BasicUserInfo
                     room={room}
@@ -1587,7 +1597,18 @@ const UserInfo: React.FC<Props> = ({
         }
     }
 
-    const header = <UserInfoHeader member={member} e2eStatus={e2eStatus} />;
+    let scopeHeader;
+    if (room?.isSpaceRoom()) {
+        scopeHeader = <div className="mx_RightPanel_scopeHeader">
+            <RoomAvatar room={room} height={32} width={32} />
+            <RoomName room={room} />
+        </div>;
+    }
+
+    const header = <React.Fragment>
+        { scopeHeader }
+        <UserInfoHeader member={member} e2eStatus={e2eStatus} />
+    </React.Fragment>;
     return <BaseCard
         className={classes.join(" ")}
         header={header}

src/components/views/rooms/MemberList.js

@@ -27,6 +27,8 @@ import * as sdk from "../../../index";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 import BaseCard from "../right_panel/BaseCard";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -456,6 +458,8 @@ export default class MemberList extends React.Component {
             const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
             if (chat && chat.roomId === this.props.roomId) {
                 inviteButtonText = _t("Invite to this community");
+            } else if (room.isSpaceRoom()) {
+                inviteButtonText = _t("Invite to this space");
             }
 
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
@@ -483,12 +487,26 @@ export default class MemberList extends React.Component {
                 onSearch={ this.onSearchQueryChanged } />
         );
 
+        let previousPhase = RightPanelPhases.RoomSummary;
+        // We have no previousPhase for when viewing a MemberList from a Space
+        let scopeHeader;
+        if (room?.isSpaceRoom()) {
+            previousPhase = undefined;
+            scopeHeader = <div className="mx_RightPanel_scopeHeader">
+                <RoomAvatar room={room} height={32} width={32} />
+                <RoomName room={room} />
+            </div>;
+        }
+
         return <BaseCard
             className="mx_MemberList"
-            header={inviteButton}
+            header={<React.Fragment>
+                { scopeHeader }
+                { inviteButton }
+            </React.Fragment>}
             footer={footer}
             onClose={this.props.onClose}
-            previousPhase={RightPanelPhases.RoomSummary}
+            previousPhase={previousPhase}
         >
             <div className="mx_MemberList_wrapper">
                 <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}

src/components/views/rooms/ThirdPartyMemberInfo.js

@@ -23,6 +23,8 @@ import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 import {isValid3pidInvite} from "../../../RoomInvite";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
 
 export default class ThirdPartyMemberInfo extends React.Component {
     static propTypes = {
@@ -32,14 +34,14 @@ export default class ThirdPartyMemberInfo extends React.Component {
     constructor(props) {
         super(props);
 
-        const room = MatrixClientPeg.get().getRoom(this.props.event.getRoomId());
-        const me = room.getMember(MatrixClientPeg.get().getUserId());
-        const powerLevels = room.currentState.getStateEvents("m.room.power_levels", "");
+        this.room = MatrixClientPeg.get().getRoom(this.props.event.getRoomId());
+        const me = this.room.getMember(MatrixClientPeg.get().getUserId());
+        const powerLevels = this.room.currentState.getStateEvents("m.room.power_levels", "");
 
         let kickLevel = powerLevels ? powerLevels.getContent().kick : 50;
         if (typeof(kickLevel) !== 'number') kickLevel = 50;
 
-        const sender = room.getMember(this.props.event.getSender());
+        const sender = this.room.getMember(this.props.event.getSender());
 
         this.state = {
             stateKey: this.props.event.getStateKey(),
@@ -119,9 +121,18 @@ export default class ThirdPartyMemberInfo extends React.Component {
             );
         }
 
+        let scopeHeader;
+        if (this.room.isSpaceRoom()) {
+            scopeHeader = <div className="mx_RightPanel_scopeHeader">
+                <RoomAvatar room={this.room} height={32} width={32} />
+                <RoomName room={this.room} />
+            </div>;
+        }
+
         // We shamelessly rip off the MemberInfo styles here.
         return (
             <div className="mx_MemberInfo" role="tabpanel">
+                { scopeHeader }
                 <div className="mx_MemberInfo_name">
                     <AccessibleButton className="mx_MemberInfo_cancel"
                         onClick={this.onCancel}

src/components/views/spaces/SpacePublicShare.tsx

@@ -22,7 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import {copyPlaintext} from "../../../utils/strings";
 import {sleep} from "../../../utils/promise";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
-import {showSpaceInviteDialog} from "../../../RoomInvite";
+import {showRoomInviteDialog} from "../../../RoomInvite";
 
 interface IProps {
     space: Room;
@@ -53,7 +53,7 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
         <AccessibleButton
             className="mx_SpacePublicShare_inviteButton"
             onClick={() => {
-                showSpaceInviteDialog(space.roomId);
+                showRoomInviteDialog(space.roomId);
                 onFinished();
             }}
         >