Show rooms in common with another user

res/css/_components.scss

@@ -154,6 +154,7 @@
 @import "./views/messages/_common_CryptoEvent.scss";
 @import "./views/right_panel/_EncryptionInfo.scss";
 @import "./views/right_panel/_UserInfo.scss";
+@import "./views/right_panel/_UserInfoSharedRooms.scss";
 @import "./views/right_panel/_VerificationPanel.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/room_settings/_ColorSettings.scss";

res/css/views/right_panel/_UserInfoSharedRooms.scss

@@ -0,0 +1,7 @@
+.mx_UserInfoSharedRooms ul {
+    padding-left: 0px;
+    > li {
+        padding-left: 0px;
+        list-style: none;
+    }
+}

src/RoomListSorter.js → src/RoomListSorter.ts

@@ -14,17 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-function tsOfNewestEvent(room) {
+function tsOfNewestEvent(room: any) {
     if (room.timeline.length) {
         return room.timeline[room.timeline.length - 1].getTs();
     } else {
         return Number.MAX_SAFE_INTEGER;
     }
 }
 
-export function mostRecentActivityFirst(roomList) {
+export function mostRecentActivityFirst(roomList: any[]) {
     return roomList.sort(function(a, b) {
         return tsOfNewestEvent(b) - tsOfNewestEvent(a);
     });

src/components/views/right_panel/UserInfo.js

@@ -45,6 +45,7 @@ import EncryptionPanel from "./EncryptionPanel";
 import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
 import { verifyUser, legacyVerifyUser, verifyDevice } from '../../../verification';
 import {Action} from "../../../dispatcher/actions";
+import UserInfoSharedRooms from "./UserInfoSharedRooms";
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -1310,6 +1311,8 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const isMe = member.userId === cli.getUserId();
     const canVerify = homeserverSupportsCrossSigning && !userVerified && !isMe;
 
+    const isSharedRoomsFeatureEnabled = SettingsStore.isFeatureEnabled("feature_show_shared_rooms");
+
     const setUpdating = (updating) => {
         setPendingUpdateCount(count => count + (updating ? 1 : -1));
     };
@@ -1361,6 +1364,8 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
         </div> }
 
         { securitySection }
+        { isSharedRoomsFeatureEnabled &&!isMe && <UserInfoSharedRooms
+            userId={member.userId} /> }
         <UserOptionsSection
             devices={devices}
             canInvite={roomPermissions.canInvite}

src/components/views/right_panel/UserInfoSharedRooms.tsx

@@ -0,0 +1,195 @@
+/*
+Copyright 2020 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 from 'react';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import Spinner from "../elements/Spinner";
+import RoomTile from "../rooms/RoomTile";
+import { _t } from '../../../languageHandler';
+import dis from '../../../dispatcher/dispatcher';
+import Pill from '../../views/elements/Pill';
+import AccessibleButton from '../../views/elements/AccessibleButton';
+import SpecPermalinkConstructor from '../../../utils/permalinks/SpecPermalinkConstructor';
+import { mostRecentActivityFirst } from '../../../RoomListSorter';
+
+interface IProps {
+    userId: string;
+    compact: boolean;
+}
+
+interface IState {
+    roomIds?: [];
+    error: boolean;
+    showAll: boolean;
+}
+
+const LIMITED_VIEW_SHOW_COUNT = 3;
+
+export default class UserInfoSharedRooms extends React.PureComponent<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            error: false,
+            showAll: false,
+        };
+    }
+
+    componentDidMount() {
+        return this.componentDidUpdate();
+    }
+
+    async componentDidUpdate(prevProps?: IProps) {
+        if (prevProps && prevProps.userId === this.props.userId) {
+            // Nothing to update.
+            return;
+        }
+
+        // Reset because this is a new user
+        this.setState({
+            error: false,
+            showAll: false,
+            roomIds: undefined,
+        });
+
+        try {
+            const roomIds = await MatrixClientPeg.get()._unstable_getSharedRooms(this.props.userId);
+            this.setState({
+                roomIds,
+            });
+        } catch (ex) {
+            console.log(`Failed to get shared rooms for ${this.props.userId}`, ex);
+            this.setState({ error: true });
+        }
+    }
+
+    private onRoomTileClick(roomId) {
+        dis.dispatch({
+            action: 'view_room',
+            show_room_tile: true, // to make sure the room gets scrolled into view
+            room_id: roomId,
+        });
+    }
+
+    private onShowMoreClick() {
+        console.log("Showing more");
+        this.setState({
+            showAll: true,
+        });
+    }
+
+    private renderRoomTile(room) {
+        // If the room cannot be found, hide it.
+        if (!room) {
+            return null;
+        }
+
+        // If the room has been upgraded, hide it.
+        const tombstone = room.currentState.getStateEvents("m.room.tombstone", "");
+        if (tombstone) {
+            return null;
+        }
+
+        if (this.props.compact) {
+            // XXX: This is inefficent as we only render COMPACT_VIEW_SHOW_COUNT rooms at a time, the other pills are wasted.
+            const alias = room.getCanonicalAlias();
+            if (!alias) {
+                // Without an alias we get ugly room_ids, hide it.
+                return null;
+            }
+            return <a href={`#/room/${alias}`}><Pill
+                key={room.roomId}
+                type={Pill.TYPE_ROOM_MENTION}
+                room={room}
+                url={new SpecPermalinkConstructor().forRoom(alias)}
+                inMessage={false}
+                shouldShowPillAvatar={true}
+                isSelected={false}
+            /></a>;
+        }
+
+        return <li key={room.roomId}>
+            <RoomTile
+                onClick={this.onRoomTileClick.bind(undefined, [room.roomId])}
+                room={room}
+                collapsed={false}
+                unread={false}
+                highlight={false}
+                transparent={true}
+                isInvite={false}
+                incomingCall={false}
+            />
+        </li>;
+    }
+
+    private renderRoomTiles() {
+        const peg = MatrixClientPeg.get();
+        const orderedActiveRooms = mostRecentActivityFirst(this.state.roomIds.map(
+            (roomId) => peg.getRoom(roomId)
+        ));
+
+        // We must remove the null values in order for the slice to work in render()
+        return orderedActiveRooms.map((room) => this.renderRoomTile(room)).filter((tile => tile !== null));
+    }
+
+    render(): React.ReactNode {
+        let content;
+        let realCount = 0;
+
+        if (this.state.roomIds && this.state.roomIds.length > 0) {
+            content = this.renderRoomTiles();
+            realCount = content.length;
+            if (!this.state.showAll) {
+                content = content.slice(0, LIMITED_VIEW_SHOW_COUNT);
+            }
+        } else if (this.state.roomIds) {
+            content = <p> {_t("You share no rooms in common with this user.")} </p>;
+        } else if (this.state.error) {
+            content = <p> {_t("There was an error fetching shared rooms with this user.")} </p>;
+        } else {
+            // We're still loading
+            content = <Spinner/>;
+        }
+
+        // Compact view: Show as a single line.
+        if (this.props.compact && content.length) {
+            if (realCount <= content.length) {
+                return <p> {_t("You are both participating in <rooms></rooms>", {}, {rooms: content})} </p>;
+            } else {
+                return <p> {_t("You are both participating in <rooms></rooms> and %(hidden)s more", {
+                    hidden: realCount - content.length,
+                }, {
+                    rooms: content
+                })}</p>;
+            }
+        } else if (this.props.compact) {
+            return content;
+        }
+
+        const canShowMore = !this.state.showAll && realCount > LIMITED_VIEW_SHOW_COUNT;
+        // Normal view: Show as a list with a header
+        return <div className="mx_UserInfoSharedRooms mx_UserInfo_container">
+            <h3>{ _t("Shared Rooms") }</h3>
+            <ul>
+                {content}
+            </ul>
+            { canShowMore && <AccessibleButton className="mx_UserInfo_field" onClick={() => this.onShowMoreClick()}>
+                { _t("Show %(count)s more", { count: realCount - content.length}) }
+                </AccessibleButton> }
+        </div>;
+    }
+}

src/components/views/rooms/RoomPreviewBar.js

@@ -25,6 +25,8 @@ import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import IdentityAuthClient from '../../../IdentityAuthClient';
+import SettingsStore from '../../../settings/SettingsStore';
+import UserInfoSharedRooms from '../right_panel/UserInfoSharedRooms';
 
 const MessageCase = Object.freeze({
     NotLoggedIn: "NotLoggedIn",
@@ -294,6 +296,7 @@ export default createReactClass({
         let secondaryActionHandler;
         let secondaryActionLabel;
         let footer;
+        let extraContext;
         const extraComponents = [];
 
         const messageCase = this._getMessageCase();
@@ -473,13 +476,18 @@ export default createReactClass({
                 secondaryActionLabel = _t("Reject");
                 secondaryActionHandler = this.props.onRejectClick;
 
+                if (SettingsStore.isFeatureEnabled("feature_show_shared_rooms")) {
+                    extraContext = <UserInfoSharedRooms userId={inviteMember.userId} compact={true} />;
+                }
+
                 if (this.props.onRejectAndIgnoreClick) {
                     extraComponents.push(
                         <AccessibleButton kind="secondary" onClick={this.props.onRejectAndIgnoreClick} key="ignore">
                             { _t("Reject & Ignore user") }
                         </AccessibleButton>,
                     );
                 }
+
                 break;
             }
             case MessageCase.ViewingRoom: {
@@ -560,6 +568,7 @@ export default createReactClass({
                 <div className="mx_RoomPreviewBar_message">
                     { titleElement }
                     { subTitleElements }
+                    { extraContext }
                 </div>
                 <div className="mx_RoomPreviewBar_actions">
                     { secondaryButton }

src/components/views/rooms/RoomTile.js

@@ -44,7 +44,7 @@ export default createReactClass({
 
     propTypes: {
         onClick: PropTypes.func,
-
+        refreshSubList: PropTypes.func,
         room: PropTypes.object.isRequired,
         collapsed: PropTypes.bool.isRequired,
         unread: PropTypes.bool.isRequired,
@@ -385,7 +385,9 @@ export default createReactClass({
         this.setState({
             contextMenuPosition: null,
         });
-        this.props.refreshSubList();
+        if (this.props.refreshSubList) {
+            this.props.refreshSubList();
+        }
     },
 
     render: function() {

src/i18n/strings/en_EN.json

@@ -490,6 +490,7 @@
     "Use the improved room list (will refresh to apply changes)": "Use the improved room list (will refresh to apply changes)",
     "Support adding custom themes": "Support adding custom themes",
     "Enable IRC layout option in the appearance tab": "Enable IRC layout option in the appearance tab",
+    "Show rooms in common with another user in the member info panel": "Show rooms in common with another user in the member info panel",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Font size": "Font size",
     "Use custom size": "Use custom size",
@@ -1359,6 +1360,11 @@
     "Failed to deactivate user": "Failed to deactivate user",
     "This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.",
     "Security": "Security",
+    "You share no rooms in common with this user.": "You share no rooms in common with this user.",
+    "There was an error fetching shared rooms with this user.": "There was an error fetching shared rooms with this user.",
+    "You are both participating in <rooms></rooms>": "You are both participating in <rooms></rooms>",
+    "You are both participating in <rooms></rooms> and %(hidden)s more": "You are both participating in <rooms></rooms> and %(hidden)s more",
+    "Shared Rooms": "Shared Rooms",
     "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.": "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.",
     "Verify by scanning": "Verify by scanning",
     "Ask %(displayName)s to scan your code:": "Ask %(displayName)s to scan your code:",

src/settings/Settings.js

@@ -165,6 +165,12 @@ export const SETTINGS = {
         default: false,
         isFeature: true,
     },
+    "feature_show_shared_rooms": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Show rooms in common with another user in the member info panel'),
+        default: false,
+        isFeature: true,
+    },
     "mjolnirRooms": {
         supportedLevels: ['account'],
         default: [],