Merge pull request #3465 from matrix-org/t3chguy/nvl/userinfo

UserInfo consolidation of GroupMemberInfo and MemberInfo panels

src/components/structures/RightPanel.js

@@ -27,6 +27,7 @@ import { MatrixClient } from 'matrix-js-sdk';
 import RateLimitedFunc from '../../ratelimitedfunc';
 import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GroupStore from '../../stores/GroupStore';
+import SettingsStore from "../../settings/SettingsStore";
 
 export default class RightPanel extends React.Component {
     static get propTypes() {
@@ -165,6 +166,7 @@ export default class RightPanel extends React.Component {
     render() {
         const MemberList = sdk.getComponent('rooms.MemberList');
         const MemberInfo = sdk.getComponent('rooms.MemberInfo');
+        const UserInfo = sdk.getComponent('right_panel.UserInfo');
         const ThirdPartyMemberInfo = sdk.getComponent('rooms.ThirdPartyMemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         const FilePanel = sdk.getComponent('structures.FilePanel');
@@ -183,14 +185,46 @@ export default class RightPanel extends React.Component {
         } else if (this.state.phase === RightPanel.Phase.GroupRoomList) {
             panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
         } else if (this.state.phase === RightPanel.Phase.RoomMemberInfo) {
-            panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+            if (SettingsStore.isFeatureEnabled("feature_user_info_panel")) {
+                const onClose = () => {
+                    dis.dispatch({
+                        action: "view_user",
+                        member: null,
+                    });
+                };
+                panel = <UserInfo
+                    user={this.state.member}
+                    roomId={this.props.roomId}
+                    key={this.props.roomId || this.state.member.userId}
+                    onClose={onClose}
+                />;
+            } else {
+                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+            }
         } else if (this.state.phase === RightPanel.Phase.Room3pidMemberInfo) {
             panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
         } else if (this.state.phase === RightPanel.Phase.GroupMemberInfo) {
-            panel = <GroupMemberInfo
-                groupMember={this.state.member}
-                groupId={this.props.groupId}
-                key={this.state.member.user_id} />;
+            if (SettingsStore.isFeatureEnabled("feature_user_info_panel")) {
+                const onClose = () => {
+                    dis.dispatch({
+                        action: "view_user",
+                        member: null,
+                    });
+                };
+                panel = <UserInfo
+                    user={this.state.member}
+                    groupId={this.props.groupId}
+                    key={this.state.member.userId}
+                    onClose={onClose} />;
+            } else {
+                panel = (
+                    <GroupMemberInfo
+                        groupMember={this.state.member}
+                        groupId={this.props.groupId}
+                        key={this.state.member.user_id}
+                    />
+                );
+            }
         } else if (this.state.phase === RightPanel.Phase.GroupRoomInfo) {
             panel = <GroupRoomInfo
                 groupRoomId={this.state.groupRoomId}

src/components/views/dialogs/AddressPickerDialog.js

@@ -596,6 +596,7 @@ module.exports = createReactClass({
         e.preventDefault();
 
         // Update the IS in account data. Actually using it may trigger terms.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         useDefaultIdentityServer();
 
         // Add email as a valid address type.

src/hooks/useEventEmitter.js

@@ -0,0 +1,44 @@
+/*
+Copyright 2019 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 {useRef, useEffect} from "react";
+
+// Hook to wrap event emitter on and removeListener in hook lifecycle
+export const useEventEmitter = (emitter, eventName, handler) => {
+    // Create a ref that stores handler
+    const savedHandler = useRef();
+
+    // Update ref.current value if handler changes.
+    useEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+
+    useEffect(
+        () => {
+            // Create event listener that calls handler function stored in ref
+            const eventListener = event => savedHandler.current(event);
+
+            // Add event listener
+            emitter.on(eventName, eventListener);
+
+            // Remove event listener on cleanup
+            return () => {
+                emitter.removeListener(eventName, eventListener);
+            };
+        },
+        [eventName, emitter], // Re-run if eventName or emitter changes
+    );
+};

src/i18n/strings/en_EN.json

@@ -334,6 +334,7 @@
     "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
     "Render simple counters in room header": "Render simple counters in room header",
     "Multiple integration managers": "Multiple integration managers",
+    "Use the new, consistent UserInfo panel for Room Members and Group Members": "Use the new, consistent UserInfo panel for Room Members and Group Members",
     "Use the new, faster, composer for writing messages": "Use the new, faster, composer for writing messages",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Use compact timeline layout": "Use compact timeline layout",
@@ -1028,6 +1029,16 @@
     "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
     "Members": "Members",
     "Files": "Files",
+    "Trust & Devices": "Trust & Devices",
+    "Direct messages": "Direct messages",
+    "Remove from community": "Remove from community",
+    "Disinvite this user from community?": "Disinvite this user from community?",
+    "Remove this user from community?": "Remove this user from community?",
+    "Failed to withdraw invitation": "Failed to withdraw invitation",
+    "Failed to remove user from community": "Failed to remove user from community",
+    "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.",
+    "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.",
     "Sunday": "Sunday",
     "Monday": "Monday",
     "Tuesday": "Tuesday",
@@ -1072,11 +1083,6 @@
     "Removed or unknown message type": "Removed or unknown message type",
     "Message removed by %(userId)s": "Message removed by %(userId)s",
     "Message removed": "Message removed",
-    "Remove from community": "Remove from community",
-    "Disinvite this user from community?": "Disinvite this user from community?",
-    "Remove this user from community?": "Remove this user from community?",
-    "Failed to withdraw invitation": "Failed to withdraw invitation",
-    "Failed to remove user from community": "Failed to remove user from community",
     "Failed to load group members": "Failed to load group members",
     "Filter community members": "Filter community members",
     "Invite to this community": "Invite to this community",

src/settings/Settings.js

@@ -120,6 +120,12 @@ export const SETTINGS = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
+    "feature_user_info_panel": {
+        isFeature: true,
+        displayName: _td("Use the new, consistent UserInfo panel for Room Members and Group Members"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "useCiderComposer": {
         displayName: _td("Use the new, faster, composer for writing messages"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

src/utils/withLegacyMatrixClient.js

@@ -0,0 +1,31 @@
+/*
+Copyright 2019 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 PropTypes from "prop-types";
+import {MatrixClient} from "matrix-js-sdk";
+
+// Higher Order Component to allow use of legacy MatrixClient React Context
+// in Functional Components which do not otherwise support legacy React Contexts
+export default (Component) => class extends React.PureComponent {
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    };
+
+    render() {
+        return <Component {...this.props} matrixClient={this.context.matrixClient} />;
+    }
+};