Merge pull request #5792 from matrix-org/t3chguy/spaces4.12

Fixing spaces papercuts

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -126,8 +126,8 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
             <div>
                 { _t("Make this space private") }
                 <ToggleSwitch
-                    checked={joinRule === "private"}
-                    onChange={checked => setJoinRule(checked ? "private" : "invite")}
+                    checked={joinRule !== "public"}
+                    onChange={checked => setJoinRule(checked ? "invite" : "public")}
                     disabled={!canSetJoinRule}
                     aria-label={_t("Make this space private")}
                 />

src/components/views/elements/FacePile.tsx

@@ -0,0 +1,66 @@
+/*
+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, { HTMLAttributes } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { sortBy } from "lodash";
+
+import MemberAvatar from "../avatars/MemberAvatar";
+import { _t } from "../../../languageHandler";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import { useRoomMembers } from "../../../hooks/useRoomMembers";
+
+const DEFAULT_NUM_FACES = 5;
+
+interface IProps extends HTMLAttributes<HTMLSpanElement> {
+    room: Room;
+    onlyKnownUsers?: boolean;
+    numShown?: number;
+}
+
+const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+
+const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+    let members = useRoomMembers(room);
+
+    // sort users with an explicit avatar first
+    const iteratees = [member => !!member.getMxcAvatarUrl()];
+    if (onlyKnownUsers) {
+        members = members.filter(isKnownMember);
+    } else {
+        // sort known users first
+        iteratees.unshift(member => isKnownMember(member));
+    }
+    if (members.length < 1) return null;
+
+    const shownMembers = sortBy(members, iteratees).slice(0, numShown);
+    return <div {...props} className="mx_FacePile">
+        <div className="mx_FacePile_faces">
+            { shownMembers.map(member => {
+                return <TextWithTooltip key={member.userId} tooltip={member.name}>
+                    <MemberAvatar member={member} width={28} height={28} />
+                </TextWithTooltip>;
+            }) }
+        </div>
+        { onlyKnownUsers && <span>
+            { _t("%(count)s people you know have already joined", { count: members.length }) }
+        </span> }
+    </div>
+};
+
+export default FacePile;

src/components/views/rooms/NewRoomIntro.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 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.
@@ -29,6 +29,7 @@ import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
 import {Action} from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
 import SpaceStore from "../../../stores/SpaceStore";
+import {showSpaceInvite} from "../../../utils/space";
 
 const NewRoomIntro = () => {
     const cli = useContext(MatrixClientContext);
@@ -116,7 +117,7 @@ const NewRoomIntro = () => {
                     className="mx_NewRoomIntro_inviteButton"
                     kind="primary"
                     onClick={() => {
-                        dis.dispatch({ action: "view_invite", roomId });
+                        showSpaceInvite(parentSpace);
                     }}
                 >
                     {_t("Invite to %(spaceName)s", { spaceName: parentSpace.name })}

src/components/views/rooms/RoomList.tsx

@@ -50,14 +50,10 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import CallHandler from "../../../CallHandler";
 import SpaceStore, {SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
-import { showAddExistingRooms, showCreateNewRoom } from "../../../utils/space";
+import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { ISpaceSummaryRoom } from "../../structures/SpaceRoomDirectory";
-import { showRoomInviteDialog } from "../../../RoomInvite";
-import Modal from "../../../Modal";
-import SpacePublicShare from "../spaces/SpacePublicShare";
-import InfoDialog from "../dialogs/InfoDialog";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -431,21 +427,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     private onSpaceInviteClick = () => {
         const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
-        if (this.props.activeSpace.getJoinRule() === "public") {
-            const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
-                title: _t("Invite to %(spaceName)s", { spaceName: this.props.activeSpace.name }),
-                description: <React.Fragment>
-                    <span>{ _t("Share your public space") }</span>
-                    <SpacePublicShare space={this.props.activeSpace} onFinished={() => modal.close()} />
-                </React.Fragment>,
-                fixedWidth: false,
-                button: false,
-                className: "mx_SpacePanel_sharePublicSpace",
-                hasCloseButton: true,
-            });
-        } else {
-            showRoomInviteDialog(this.props.activeSpace.roomId, initialText);
-        }
+        showSpaceInvite(this.props.activeSpace, initialText);
     };
 
     private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -148,7 +148,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
 
             <SpaceBasicSettings setAvatar={setAvatar} name={name} setName={setName} topic={topic} setTopic={setTopic} />
 
-            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name && !busy}>
+            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name || busy}>
                 { busy ? _t("Creating...") : _t("Create") }
             </AccessibleButton>
         </React.Fragment>;

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -34,21 +34,17 @@ import {
     shouldShowSpaceSettings,
     showAddExistingRooms,
     showCreateNewRoom,
+    showSpaceInvite,
     showSpaceSettings,
 } from "../../../utils/space";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import Modal from "../../../Modal";
-import SpacePublicShare from "./SpacePublicShare";
 import {Action} from "../../../dispatcher/actions";
 import RoomViewStore from "../../../stores/RoomViewStore";
 import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {showRoomInviteDialog} from "../../../RoomInvite";
-import InfoDialog from "../dialogs/InfoDialog";
 import {EventType} from "matrix-js-sdk/src/@types/event";
-import SpaceRoomDirectory from "../../structures/SpaceRoomDirectory";
 
 interface IItemProps {
     space?: Room;
@@ -115,36 +111,11 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         this.setState({contextMenuPosition: null});
     };
 
-    private onHomeClick = (ev: ButtonEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        defaultDispatcher.dispatch({
-            action: "view_room",
-            room_id: this.props.space.roomId,
-        });
-        this.setState({contextMenuPosition: null}); // also close the menu
-    };
-
     private onInviteClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        if (this.props.space.getJoinRule() === "public") {
-            const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
-                title: _t("Invite to %(spaceName)s", { spaceName: this.props.space.name }),
-                description: <React.Fragment>
-                    <span>{ _t("Share your public space") }</span>
-                    <SpacePublicShare space={this.props.space} onFinished={() => modal.close()} />
-                </React.Fragment>,
-                fixedWidth: false,
-                button: false,
-                className: "mx_SpacePanel_sharePublicSpace",
-                hasCloseButton: true,
-            });
-        } else {
-            showRoomInviteDialog(this.props.space.roomId);
-        }
+        showSpaceInvite(this.props.space);
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
@@ -206,9 +177,10 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        Modal.createTrackedDialog("Space room directory", "Space panel", SpaceRoomDirectory, {
-            space: this.props.space,
-        }, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
+        defaultDispatcher.dispatch({
+            action: "view_room",
+            room_id: this.props.space.roomId,
+        });
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
@@ -249,6 +221,8 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 </IconizedContextMenuOptionList>;
             }
 
+            const canAddRooms = this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
+
             let newRoomSection;
             if (this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
                 newRoomSection = <IconizedContextMenuOptionList first>
@@ -276,11 +250,6 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 </div>
                 <IconizedContextMenuOptionList first>
                     { inviteOption }
-                    <IconizedContextMenuOption
-                        iconClassName="mx_SpacePanel_iconHome"
-                        label={_t("Space Home")}
-                        onClick={this.onHomeClick}
-                    />
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconMembers"
                         label={_t("Members")}
@@ -289,7 +258,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     { settingsOption }
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconExplore"
-                        label={_t("Explore rooms")}
+                        label={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")}
                         onClick={this.onExploreRoomsClick}
                     />
                 </IconizedContextMenuOptionList>