Display group member profile (avatar/displayname) in ConfirmUserActionDialog

Fixes element-hq/element-web#5486

Author: lukebarnard1

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -104,10 +104,11 @@ export default React.createClass({
             name = this.props.member.name;
             userId = this.props.member.userId;
         } else {
-            // we don't get this info from the API yet
-            avatar = <BaseAvatar name={this.props.groupMember.userId} width={48} height={48} />;
-            name = this.props.groupMember.userId;
+            const httpAvatarUrl = this.props.groupMember.avatarUrl ?
+                this.props.matrixClient.mxcUrlToHttp(this.props.groupMember.avatarUrl, 48, 48) : null;
+            name = this.props.groupMember.displayname || this.props.groupMember.userId;
             userId = this.props.groupMember.userId;
+            avatar = <BaseAvatar name={name} url={httpAvatarUrl} width={48} height={48} />;
         }
 
         return (

src/components/views/groups/GroupMemberInfo.js

@@ -83,6 +83,7 @@ module.exports = React.createClass({
     _onKick: function() {
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         Modal.createDialog(ConfirmUserActionDialog, {
+            matrixClient: this.context.matrixClient,
             groupMember: this.props.groupMember,
             action: this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community'),
             title: this.state.isUserInvited ? _t('Disinvite this user from community?')