Show hierarchy of auto_join rooms in the space view

res/css/structures/_SpaceRoomView.scss

@@ -219,6 +219,14 @@ $SpaceRoomViewInnerWidth: 428px;
                 }
             }
         }
+
+        .mx_SpaceRoomDirectory_list {
+            max-width: 600px;
+
+            .mx_SpaceRoomDirectory_roomTile_actions {
+                display: none;
+            }
+        }
     }
 
     .mx_SpaceRoomView_privateScope {

src/components/structures/SpaceRoomView.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, {RefObject, useContext, useRef, useState} from "react";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
 import {Room} from "matrix-js-sdk/src/models/room";
 
 import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -24,6 +24,7 @@ import {_t} from "../../languageHandler";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomName from "../views/elements/RoomName";
 import RoomTopic from "../views/elements/RoomTopic";
+import InlineSpinner from "../views/elements/InlineSpinner";
 import FormButton from "../views/elements/FormButton";
 import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
 import {useRoomMembers} from "../../hooks/useRoomMembers";
@@ -47,7 +48,12 @@ import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanel
 import {useStateArray} from "../../hooks/useStateArray";
 import SpacePublicShare from "../views/spaces/SpacePublicShare";
 import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
+import {HierarchyLevel, ISpaceSummaryEvent, ISpaceSummaryRoom, showRoom} from "./SpaceRoomDirectory";
+import {useAsyncMemo} from "../../hooks/useAsyncMemo";
+import {EnhancedMap} from "../../utils/maps";
+import AutoHideScrollbar from "./AutoHideScrollbar";
 import MemberAvatar from "../views/avatars/MemberAvatar";
+import {useStateToggle} from "../../hooks/useStateToggle";
 
 interface IProps {
     space: Room;
@@ -121,13 +127,15 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
 
     const canAddRooms = myMembership === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
 
+    const [_, forceUpdate] = useStateToggle(false); // TODO
+
     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
+                    forceUpdate();
                 }
             }}>
                 { _t("Add existing rooms & spaces") }
@@ -149,6 +157,51 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         </AccessibleButton>;
     }
 
+    const [loading, roomsMap, relations, numRooms] = useAsyncMemo(async () => {
+        try {
+            const data = await cli.getSpaceSummary(space.roomId, undefined, myMembership !== "join");
+
+            const parentChildRelations = new EnhancedMap<string, string[]>();
+            data.events.map((ev: ISpaceSummaryEvent) => {
+                if (ev.type === EventType.SpaceChild) {
+                    parentChildRelations.getOrCreate(ev.room_id, []).push(ev.state_key);
+                }
+            });
+
+            const roomsMap = new Map<string, ISpaceSummaryRoom>(data.rooms.map(r => [r.room_id, r]));
+            const numRooms = data.rooms.filter(r => r.room_type !== RoomType.Space).length;
+            return [false, roomsMap, parentChildRelations, numRooms];
+        } catch (e) {
+            console.error(e); // TODO
+        }
+
+        return [false];
+    }, [space, _], [true]);
+
+    let previewRooms;
+    if (roomsMap) {
+        previewRooms = <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
+            <div className="mx_SpaceRoomDirectory_roomCount">
+                <h3>{ myMembership === "join" ? _t("Rooms") : _t("Default Rooms")}</h3>
+                <span>{ numRooms }</span>
+            </div>
+            <HierarchyLevel
+                spaceId={space.roomId}
+                rooms={roomsMap}
+                editing={false}
+                relations={relations}
+                parents={new Set()}
+                onPreviewClick={roomId => {
+                    showRoom(roomsMap.get(roomId), [], false); // TODO
+                }}
+            />
+        </AutoHideScrollbar>;
+    } else if (loading) {
+        previewRooms = <InlineSpinner />;
+    } else {
+        previewRooms = <p>{_t("Your server does not support showing space hierarchies.")}</p>;
+    }
+
     return <div className="mx_SpaceRoomView_landing">
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
         <div className="mx_SpaceRoomView_landing_name">
@@ -213,6 +266,8 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
             { addRoomButtons }
             { settingsButton }
         </div>
+
+        { previewRooms }
     </div>;
 };
 

src/i18n/strings/en_EN.json

@@ -2599,6 +2599,8 @@
     "Find a room...": "Find a room...",
     "Accept Invite": "Accept Invite",
     "Add existing rooms & spaces": "Add existing rooms & spaces",
+    "Default Rooms": "Default Rooms",
+    "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.",
     "%(count)s members|other": "%(count)s members",
     "%(count)s members|one": "%(count)s member",
     "<inviter/> invited you to <name/>": "<inviter/> invited you to <name/>",