From d2d78919cefda89c37c3abb8d20700793bde3cd3 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 12 Jan 2017 18:55:53 +0000 Subject: [PATCH 01/52] Overhaul MELS to deal with causality, kicks, etc. The MELS can now deal with arbitrary sequences of transitions per user, where a transition is a change in membership. A transition can be joined, left, invite_reject, invite_withdrawal, invited, banned, unbanned or kicked. Repeated segments (modulo 1 and 2), such as joined,left,joined,left,joined will be handled and will be rendered as " ... and 10 others joined and left 2 times and then joined". The repeated segments are assumed to be at the beginning of the sequence. This could be improved to handle arbitrary repeated sequences. --- src/components/structures/MessagePanel.js | 1 - .../views/elements/MemberEventListSummary.js | 247 +++++++++++------- 2 files changed, 150 insertions(+), 98 deletions(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index c04bec4b35..6cbf708252 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -281,7 +281,6 @@ module.exports = React.createClass({ var isMembershipChange = (e) => e.getType() === 'm.room.member' - && ['join', 'leave'].indexOf(e.getContent().membership) !== -1 && (!e.getPrevContent() || e.getContent().membership !== e.getPrevContent().membership); for (i = 0; i < this.props.events.length; i++) { diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 518439b1c7..ab4a89eb69 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -24,7 +24,7 @@ module.exports = React.createClass({ events: React.PropTypes.array.isRequired, // An array of EventTiles to render when expanded children: React.PropTypes.array.isRequired, - // The maximum number of names to show in either the join or leave summaries + // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left" summaryLength: React.PropTypes.number, // The maximum number of avatars to display in the summary avatarsMaxLength: React.PropTypes.number, @@ -40,7 +40,7 @@ module.exports = React.createClass({ getDefaultProps: function() { return { - summaryLength: 3, + summaryLength: 1, threshold: 3, avatarsMaxLength: 5, }; @@ -52,88 +52,122 @@ module.exports = React.createClass({ }); }, - _getEventSenderName: function(ev) { - if (!ev) { - return 'undefined'; - } - return ev.sender.name || ev.event.content.displayname || ev.getSender(); - }, - - _renderNameList: function(events) { - if (events.length === 0) { + _renderNameList: function(users) { + if (users.length === 0) { return null; } - let originalNumber = events.length; - events = events.slice(0, this.props.summaryLength); - let lastEvent = events.pop(); + let originalNumber = users.length; - let names = events.map((ev) => { - return this._getEventSenderName(ev); - }).join(', '); - - let lastName = this._getEventSenderName(lastEvent); - if (names.length === 0) { - // special-case for a single event - return lastName; - } + users = users.slice(0, this.props.summaryLength); let remaining = originalNumber - this.props.summaryLength; - if (remaining > 0) { - // name1, name2, name3, and 100 others - return names + ', ' + lastName + ', and ' + remaining + ' others'; + if (remaining < 0) { + remaining = 0; + } + let other = " other" + (remaining > 1 ? "s" : ""); + + return this._renderCommaSeparatedList(users, remaining) + (remaining ? ' and ' + remaining + other : ''); + }, + + // Test whether the first n items repeat for the duration + // e.g. [1,2,3,4,1,2,3] would resolve true for n = 4 + _isRepeatedSequence: function(transitions, n) { + let count = 0; + for (let i = 0; i < transitions.length; i++) { + if (transitions[i % n] !== transitions[i]) { + return null; + } + } + return true; + }, + + _renderCommaSeparatedList(items, disableAnd) { + if (disableAnd) { + return items.join(', '); + } + if (items.length === 0) { + return ""; + } else if (items.length === 1) { + return items[0]; } else { - // name1, name2 and name3 - return names + ' and ' + lastName; + let last = items.pop(); + return items.join(', ') + ' and ' + last; } }, - _renderSummary: function(joinEvents, leaveEvents) { - let joiners = this._renderNameList(joinEvents); - let leavers = this._renderNameList(leaveEvents); + _getDescriptionForTransition(t, plural) { + let beConjugated = plural ? "were" : "was"; + let invitation = plural ? "invitations" : "an invitation"; - let joinSummary = null; - if (joiners) { - joinSummary = ( - - {joiners} joined the room - - ); - } - let leaveSummary = null; - if (leavers) { - leaveSummary = ( - - {leavers} left the room - - ); + switch (t) { + case 'joined': return "joined"; + case 'left': return "left"; + case 'invite_reject': return "rejected " + invitation; + case 'invite_withdrawal': return "withdrew " + invitation; + case 'invited': return beConjugated + " invited"; + case 'banned': return beConjugated + " banned"; + case 'unbanned': return beConjugated + " unbanned"; + case 'kicked': return beConjugated + " kicked"; } - // The joinEvents and leaveEvents are representative of the net movement - // per-user, and so it is possible that the total net movement is nil, - // whilst there are some events in the expanded list. If the total net - // movement is nil, then neither joinSummary nor leaveSummary will be - // truthy, so return null. - if (!joinSummary && !leaveSummary) { + return null; + }, + + _renderSummary: function(eventAggregates) { + let summaries = Object.keys(eventAggregates).map((transitions) => { + let nameList = this._renderNameList(eventAggregates[transitions]); + + let repeats = 1; + let repeatExtra = 0; + + let splitTransitions = transitions.split(','); + let describedTransitions = splitTransitions; + let plural = eventAggregates[transitions].length > 1; + + for (let modulus = 1; modulus <= 2; modulus++) { + // Sequences that are repeating through modulus transitions will be truncated + if (this._isRepeatedSequence(describedTransitions, modulus)) { + // Extra repeating sequence on the end that should be treated separately + // so as to avoid j,l,j,l,j => "... joined and left 2.5 times" + repeatExtra = describedTransitions.length % modulus; + + repeats = (describedTransitions.length - repeatExtra) / modulus; + describedTransitions = describedTransitions.slice(0, modulus); + break; + } + } + + let numberOfTimes = repeats > 1 ? " " + repeats + " times" : ""; + + let descs = describedTransitions.map((t) => { + return this._getDescriptionForTransition(t, plural); + }); + + let afterRepeatDescs = splitTransitions.slice(splitTransitions.length - repeatExtra).map((t) => { + return this._getDescriptionForTransition(t, plural); + }); + + let desc = this._renderCommaSeparatedList(descs); + let afterRepeatDesc = this._renderCommaSeparatedList(afterRepeatDescs); + + return nameList + " " + desc + numberOfTimes + (afterRepeatDesc ? " and then " + afterRepeatDesc : ""); + }); + + if (!summaries) { return null; } return ( - {joinSummary}{joinSummary && leaveSummary?'; ':''} - {leaveSummary}.  + {summaries.join(", ")} ); }, - _renderAvatars: function(events) { - let avatars = events.slice(0, this.props.avatarsMaxLength).map((e) => { + _renderAvatars: function(roomMembers) { + let avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => { return ( - + ); }); @@ -157,6 +191,32 @@ module.exports = React.createClass({ ); }, + _getTransition: function(e) { + switch (e.getContent().membership) { + case 'invite': return 'invited'; + case 'ban': return 'banned'; + case 'join': return 'joined'; + case 'leave': + if (e.getSender() === e.getStateKey()) { + switch (e.getPrevContent().membership) { + case 'invite': return 'invite_reject'; + default: return 'left'; + } + } + switch (e.getPrevContent().membership) { + case 'invite': return 'invite_withdrawal'; + case 'ban': return 'unbanned'; + case 'join': return 'kicked'; + default: return 'left'; + } + default: return null; + } + }, + + _getTransitionSequence: function(events) { + return events.map(this._getTransition); + }, + render: function() { let eventsToRender = this.props.events; let fewEvents = eventsToRender.length < this.props.threshold; @@ -175,61 +235,54 @@ module.exports = React.createClass({ ); } - // Map user IDs to the first and last member events in eventsToRender for each user + // Map user IDs to all of the user's member events in eventsToRender let userEvents = { - // $userId : {first : e0, last : e1} + // $userId : [] }; eventsToRender.forEach((e) => { const userId = e.getStateKey(); // Initialise a user's events if (!userEvents[userId]) { - userEvents[userId] = {first: null, last: null}; + userEvents[userId] = []; } - if (!userEvents[userId].first) { - userEvents[userId].first = e; - } - userEvents[userId].last = e; + userEvents[userId].push(e); }); - // Populate the join/leave event arrays with events that represent what happened - // overall to a user's membership. If no events are added to either array for a - // particular user, they will be considered a user that "joined and left". - let joinEvents = []; - let leaveEvents = []; - let joinedAndLeft = 0; - let senders = Object.keys(userEvents); - senders.forEach( + // A map of agregate type to arrays of display names. Each aggregate type + // is a comma-delimited string of transitions, e.g. "joined,left,kicked". + // The array of display names is the array of users who went through that + // sequence during eventsToRender. + let aggregate = { + // $aggregateType : []:string + }; + let avatarMembers = []; + + let users = Object.keys(userEvents); + users.forEach( (userId) => { - let firstEvent = userEvents[userId].first; - let lastEvent = userEvents[userId].last; + let displayName = userEvents[userId][0].getContent().displayname || userId; - // Membership BEFORE eventsToRender - let previousMembership = firstEvent.getPrevContent().membership || "leave"; - - // If the last membership event differs from previousMembership, use that. - if (previousMembership !== lastEvent.getContent().membership) { - if (lastEvent.event.content.membership === 'join') { - joinEvents.push(lastEvent); - } else if (lastEvent.event.content.membership === 'leave') { - leaveEvents.push(lastEvent); - } - } else { - // Increment the number of users whose membership change was nil overall - joinedAndLeft++; + let seq = this._getTransitionSequence(userEvents[userId]); + if (!aggregate[seq]) { + aggregate[seq] = []; } + + // Assumes display names are unique + if (aggregate[seq].indexOf(displayName) === -1) { + aggregate[seq].push(displayName); + } + avatarMembers.push(userEvents[userId][0].target); } ); - let avatars = this._renderAvatars(joinEvents.concat(leaveEvents)); - let summary = this._renderSummary(joinEvents, leaveEvents); + let avatars = this._renderAvatars(avatarMembers); + let summary = this._renderSummary(aggregate); let toggleButton = ( {expanded ? 'collapse' : 'expand'} ); - let plural = (joinEvents.length + leaveEvents.length > 0) ? 'others' : 'users'; - let noun = (joinedAndLeft === 1 ? 'user' : plural); let summaryContainer = (
@@ -238,7 +291,7 @@ module.exports = React.createClass({ {avatars} - {summary}{joinedAndLeft ? joinedAndLeft + ' ' + noun + ' joined and left' : ''} + {summary}   {toggleButton}
From 77ae04140746779b5654662575fdaaf393e92d3d Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 13 Jan 2017 16:40:33 +0000 Subject: [PATCH 02/52] Order names by order of first events for users --- src/components/views/elements/MemberEventListSummary.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index ab4a89eb69..89c7835671 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -239,12 +239,15 @@ module.exports = React.createClass({ let userEvents = { // $userId : [] }; + // Array of userIds ordered by the same ordering as the first event of each user + let users = []; eventsToRender.forEach((e) => { const userId = e.getStateKey(); // Initialise a user's events if (!userEvents[userId]) { userEvents[userId] = []; + users.push(userId); } userEvents[userId].push(e); }); @@ -258,7 +261,6 @@ module.exports = React.createClass({ }; let avatarMembers = []; - let users = Object.keys(userEvents); users.forEach( (userId) => { let displayName = userEvents[userId][0].getContent().displayname || userId; From ad072cc1792e82759a9b40d0d4c32c31e1f7bb4a Mon Sep 17 00:00:00 2001 From: Jani Mustonen Date: Fri, 6 Jan 2017 01:37:27 +0200 Subject: [PATCH 03/52] Turned buttons from divs to links. Makes it possible for screen readers and hotkeys to recognize the buttons. --- src/components/structures/UserSettings.js | 4 ++-- .../views/dialogs/ChatInviteDialog.js | 4 ++-- src/components/views/rooms/RoomHeader.js | 20 +++++++++---------- src/components/views/rooms/RoomTile.js | 4 ++-- .../views/rooms/SimpleRoomHeader.js | 2 +- .../views/settings/ChangePassword.js | 4 ++-- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index a41eab3a76..cd07a91475 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -663,9 +663,9 @@ module.exports = React.createClass({
- + {accountJsx}
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js index e9a041357f..5c6c627d58 100644 --- a/src/components/views/dialogs/ChatInviteDialog.js +++ b/src/components/views/dialogs/ChatInviteDialog.js @@ -409,9 +409,9 @@ module.exports = React.createClass({
{this.props.title}
-
+ -
+
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index db3c7bb3d9..bfcaa6b172 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -182,8 +182,8 @@ module.exports = React.createClass({ 'm.room.name', user_id ); - save_button =
Save
- cancel_button =
Cancel
+ save_button = Save + cancel_button = Cancel } if (this.props.saving) { @@ -275,9 +275,9 @@ module.exports = React.createClass({ var settings_button; if (this.props.onSettingsClick) { settings_button = -
+ -
; + ; } // var leave_button; @@ -291,17 +291,17 @@ module.exports = React.createClass({ var forget_button; if (this.props.onForgetClick) { forget_button = -
+ -
; + ; } var rightPanel_buttons; if (this.props.collapsedRhs) { rightPanel_buttons = -
+ -
+ } var right_row; @@ -310,9 +310,9 @@ module.exports = React.createClass({
{ settings_button } { forget_button } -
+ -
+ { rightPanel_buttons }
; } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 84916f8ab8..fce2868d50 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -287,7 +287,7 @@ module.exports = React.createClass({ var connectDropTarget = this.props.connectDropTarget; let ret = ( -
+
@@ -302,7 +302,7 @@ module.exports = React.createClass({
{/* { incomingCallBox } */} { tooltip } -
+ ); if (connectDropTarget) ret = connectDropTarget(ret); diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js index 7f2bb0048a..84c6802b3d 100644 --- a/src/components/views/rooms/SimpleRoomHeader.js +++ b/src/components/views/rooms/SimpleRoomHeader.js @@ -44,7 +44,7 @@ module.exports = React.createClass({ var cancelButton; if (this.props.onCancelClick) { - cancelButton =
Cancel
+ cancelButton = Cancel } var showRhsButton; diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js index 1ef3eff205..74658a09e5 100644 --- a/src/components/views/settings/ChangePassword.js +++ b/src/components/views/settings/ChangePassword.js @@ -136,9 +136,9 @@ module.exports = React.createClass({
- + ); case this.Phases.Uploading: From 8d79716421253002ae3a640ad7f6dcf77d885e3e Mon Sep 17 00:00:00 2001 From: Jani Mustonen Date: Fri, 6 Jan 2017 16:41:35 +0200 Subject: [PATCH 04/52] Turned the links to buttons to comply with MDN's recommendations --- src/components/structures/UserSettings.js | 4 ++-- .../views/dialogs/ChatInviteDialog.js | 4 ++-- src/components/views/rooms/RoomHeader.js | 20 +++++++++---------- src/components/views/rooms/RoomTile.js | 4 ++-- .../views/rooms/SimpleRoomHeader.js | 2 +- .../views/settings/ChangePassword.js | 4 ++-- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index cd07a91475..b104352096 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -663,9 +663,9 @@ module.exports = React.createClass({
- + {accountJsx}
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js index 5c6c627d58..fe33ea6d1c 100644 --- a/src/components/views/dialogs/ChatInviteDialog.js +++ b/src/components/views/dialogs/ChatInviteDialog.js @@ -409,9 +409,9 @@ module.exports = React.createClass({
{this.props.title}
- +
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index bfcaa6b172..92cc6c64fd 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -182,8 +182,8 @@ module.exports = React.createClass({ 'm.room.name', user_id ); - save_button = Save - cancel_button = Cancel + save_button = + cancel_button = } if (this.props.saving) { @@ -275,9 +275,9 @@ module.exports = React.createClass({ var settings_button; if (this.props.onSettingsClick) { settings_button = - + ; } // var leave_button; @@ -291,17 +291,17 @@ module.exports = React.createClass({ var forget_button; if (this.props.onForgetClick) { forget_button = - + ; } var rightPanel_buttons; if (this.props.collapsedRhs) { rightPanel_buttons = - + } var right_row; @@ -310,9 +310,9 @@ module.exports = React.createClass({
{ settings_button } { forget_button } - + { rightPanel_buttons }
; } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index fce2868d50..6cd9795bdc 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -287,7 +287,7 @@ module.exports = React.createClass({ var connectDropTarget = this.props.connectDropTarget; let ret = ( - + ); if (connectDropTarget) ret = connectDropTarget(ret); diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js index 84c6802b3d..3c08fac821 100644 --- a/src/components/views/rooms/SimpleRoomHeader.js +++ b/src/components/views/rooms/SimpleRoomHeader.js @@ -44,7 +44,7 @@ module.exports = React.createClass({ var cancelButton; if (this.props.onCancelClick) { - cancelButton = Cancel + cancelButton = } var showRhsButton; diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js index 74658a09e5..84f049fdad 100644 --- a/src/components/views/settings/ChangePassword.js +++ b/src/components/views/settings/ChangePassword.js @@ -136,9 +136,9 @@ module.exports = React.createClass({ - + ); case this.Phases.Uploading: From d2ff2715ce276f4dd477a545a594698d4068422d Mon Sep 17 00:00:00 2001 From: Jani Mustonen Date: Fri, 6 Jan 2017 22:01:37 +0200 Subject: [PATCH 05/52] Buttonified almost everything. Stylesheet is broken. --- src/components/views/avatars/BaseAvatar.js | 28 +++++++++++++++------- src/components/views/rooms/EntityTile.js | 4 ++-- src/components/views/rooms/MemberInfo.js | 22 ++++++++--------- 3 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index 47f0a76891..38a700eb7e 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/src/components/views/avatars/BaseAvatar.js @@ -138,7 +138,7 @@ module.exports = React.createClass({ const { name, idName, title, url, urls, width, height, resizeMethod, - defaultToInitialLetter, + defaultToInitialLetter, onClick, ...otherProps } = this.props; @@ -156,12 +156,24 @@ module.exports = React.createClass({ ); } - return ( - - ); + if (onClick != null) { + return ( + + ); + } else { + return ( + + ); + } } }); diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index d29137ffc2..058359706e 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -152,7 +152,7 @@ module.exports = React.createClass({ var av = this.props.avatarJsx || ; return ( -
@@ -161,7 +161,7 @@ module.exports = React.createClass({
{ nameEl } { inviteButton } -
+ ); } }); diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 1f4d392461..40f85c9e63 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -612,7 +612,7 @@ module.exports = WithMatrixClient(React.createClass({ mx_MemberInfo_createRoom_label: true, mx_RoomTile_name: true, }); - const startNewChat =
@@ -620,7 +620,7 @@ module.exports = WithMatrixClient(React.createClass({
Start new chat
- + startChat =

Direct chats

@@ -635,26 +635,26 @@ module.exports = WithMatrixClient(React.createClass({ } if (this.state.can.kick) { - kickButton =
+ kickButton =
; + ; } if (this.state.can.ban) { - banButton =
+ banButton =
; + ; } if (this.state.can.mute) { var muteLabel = this.state.muted ? "Unmute" : "Mute"; - muteButton =
+ muteButton =
; + ; } if (this.state.can.toggleMod) { var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator"; - giveModButton =
+ giveModButton =
+ } // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet @@ -682,7 +682,7 @@ module.exports = WithMatrixClient(React.createClass({ const EmojiText = sdk.getComponent('elements.EmojiText'); return (
- +
From 041196d7298d72381b66c7ce2aefa4ed924324ec Mon Sep 17 00:00:00 2001 From: Jani Mustonen Date: Sat, 7 Jan 2017 17:53:45 +0200 Subject: [PATCH 06/52] Added quick search functionality --- src/components/views/elements/TintableSvg.js | 1 + src/components/views/rooms/RoomTile.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js index 0157131506..401a11c1cb 100644 --- a/src/components/views/elements/TintableSvg.js +++ b/src/components/views/elements/TintableSvg.js @@ -69,6 +69,7 @@ var TintableSvg = React.createClass({ width={ this.props.width } height={ this.props.height } onLoad={ this.onLoad } + tabIndex="-1" /> ); } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 6cd9795bdc..9f592868b4 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -287,7 +287,7 @@ module.exports = React.createClass({ var connectDropTarget = this.props.connectDropTarget; let ret = ( - +
; }, @@ -492,10 +493,10 @@ module.exports = React.createClass({ // bind() the invited rooms so any new invites that may come in as this button is clicked // don't inadvertently get rejected as well. reject = ( - + ); } @@ -663,9 +664,9 @@ module.exports = React.createClass({
- + {accountJsx}
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index 38a700eb7e..906325268f 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/src/components/views/avatars/BaseAvatar.js @@ -19,6 +19,7 @@ limitations under the License. var React = require('react'); var AvatarLogic = require("../../../Avatar"); import sdk from '../../../index'; +var AccessibleButton = require('../elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'BaseAvatar', @@ -158,13 +159,13 @@ module.exports = React.createClass({ } if (onClick != null) { return ( - + ); } else { return ( diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js index fe33ea6d1c..a54651b2db 100644 --- a/src/components/views/dialogs/ChatInviteDialog.js +++ b/src/components/views/dialogs/ChatInviteDialog.js @@ -24,6 +24,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap'); var rate_limited_func = require("../../../ratelimitedfunc"); var dis = require("../../../dispatcher"); var Modal = require('../../../Modal'); +var AccessibleButton = require('../elements/AccessibleButton'); const TRUNCATE_QUERY_LIST = 40; @@ -409,9 +410,9 @@ module.exports = React.createClass({
{this.props.title}
- +
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index 058359706e..64de431d9d 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -20,6 +20,7 @@ var React = require('react'); var MatrixClientPeg = require('../../../MatrixClientPeg'); var sdk = require('../../../index'); +var AccessibleButton = require('../elements/AccessibleButton'); var PRESENCE_CLASS = { @@ -152,7 +153,7 @@ module.exports = React.createClass({ var av = this.props.avatarJsx || ; return ( - + ); } }); diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 40f85c9e63..4863bad5ed 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -35,6 +35,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap'); var Unread = require('../../../Unread'); var Receipt = require('../../../utils/Receipt'); var WithMatrixClient = require('../../../wrappers/WithMatrixClient'); +var AccessibleButton = require('../elements/AccessibleButton'); module.exports = WithMatrixClient(React.createClass({ displayName: 'MemberInfo', @@ -612,7 +613,7 @@ module.exports = WithMatrixClient(React.createClass({ mx_MemberInfo_createRoom_label: true, mx_RoomTile_name: true, }); - const startNewChat = + startChat =

Direct chats

@@ -635,26 +636,26 @@ module.exports = WithMatrixClient(React.createClass({ } if (this.state.can.kick) { - kickButton = ; + ; } if (this.state.can.ban) { - banButton = ; + ; } if (this.state.can.mute) { var muteLabel = this.state.muted ? "Unmute" : "Mute"; - muteButton = ; + ; } if (this.state.can.toggleMod) { var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator"; - giveModButton = + } // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet @@ -682,7 +683,7 @@ module.exports = WithMatrixClient(React.createClass({ const EmojiText = sdk.getComponent('elements.EmojiText'); return (
- +
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index 47875bd7fb..1618e4440d 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -192,9 +192,9 @@ module.exports = React.createClass({ width={14} height={14} resizeMethod="crop" style={style} title={title} - onClick={this.props.onClick} /> ); + /* onClick={this.props.onClick} */ }, }); diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 92cc6c64fd..b67acefc52 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -26,6 +26,7 @@ var rate_limited_func = require('../../../ratelimitedfunc'); var linkify = require('linkifyjs'); var linkifyElement = require('linkifyjs/element'); var linkifyMatrix = require('../../../linkify-matrix'); +var AccessibleButton = require('../elements/AccessibleButton'); linkifyMatrix(linkify); @@ -182,8 +183,8 @@ module.exports = React.createClass({ 'm.room.name', user_id ); - save_button = - cancel_button = + save_button = Save + cancel_button = Cancel } if (this.props.saving) { @@ -275,9 +276,9 @@ module.exports = React.createClass({ var settings_button; if (this.props.onSettingsClick) { settings_button = - ; + ; } // var leave_button; @@ -291,17 +292,17 @@ module.exports = React.createClass({ var forget_button; if (this.props.onForgetClick) { forget_button = - ; + ; } var rightPanel_buttons; if (this.props.collapsedRhs) { rightPanel_buttons = - + } var right_row; @@ -310,9 +311,9 @@ module.exports = React.createClass({
{ settings_button } { forget_button } - + { rightPanel_buttons }
; } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 9f592868b4..07790181c5 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -26,6 +26,7 @@ var sdk = require('../../../index'); var ContextualMenu = require('../../structures/ContextualMenu'); var RoomNotifs = require('../../../RoomNotifs'); var FormattingUtils = require('../../../utils/FormattingUtils'); +var AccessibleButton = require('../elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'RoomTile', @@ -286,8 +287,10 @@ module.exports = React.createClass({ var connectDragSource = this.props.connectDragSource; var connectDropTarget = this.props.connectDropTarget; + let ret = ( - + +
); if (connectDropTarget) ret = connectDropTarget(ret); diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js index 3c08fac821..dbb27deb73 100644 --- a/src/components/views/rooms/SimpleRoomHeader.js +++ b/src/components/views/rooms/SimpleRoomHeader.js @@ -19,6 +19,7 @@ limitations under the License. var React = require('react'); var sdk = require('../../../index'); var dis = require("../../../dispatcher"); +var AccessibleButton = require('../elements/AccessibleButton'); /* * A stripped-down room header used for things like the user settings @@ -44,7 +45,7 @@ module.exports = React.createClass({ var cancelButton; if (this.props.onCancelClick) { - cancelButton = + cancelButton = Cancel } var showRhsButton; diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js index 84f049fdad..8882c1e048 100644 --- a/src/components/views/settings/ChangePassword.js +++ b/src/components/views/settings/ChangePassword.js @@ -19,6 +19,7 @@ limitations under the License. var React = require('react'); var MatrixClientPeg = require("../../../MatrixClientPeg"); var sdk = require("../../../index"); +var AccessibleButton = require('../elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'ChangePassword', @@ -136,9 +137,9 @@ module.exports = React.createClass({
- + ); case this.Phases.Uploading: From 5e013860eee729c7131d5dcde47e4feff5b8037a Mon Sep 17 00:00:00 2001 From: Jani Mustonen Date: Fri, 13 Jan 2017 18:26:59 +0200 Subject: [PATCH 08/52] Definition for AccessibleButton --- .../views/elements/AccessibleButton.js | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/components/views/elements/AccessibleButton.js diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js new file mode 100644 index 0000000000..91a9b99333 --- /dev/null +++ b/src/components/views/elements/AccessibleButton.js @@ -0,0 +1,44 @@ +/* + Copyright 2016 Aviral Dasgupta + + 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'; + +export default function AccessibleButton(props) { + const {element, onClick, children, ...restProps} = props; + restProps.onClick = onClick; + restProps.onKeyDown = function(e) { + if (e.keyCode == 13 || e.keyCode == 32) return onClick(); + }; + restProps.tabIndex = restProps.tabIndex || "0"; + restProps.role = "button"; + if (Array.isArray(children)) { + return React.createElement(element, restProps, ...children); + } else { + return React.createElement(element, restProps, children); + } +} + +AccessibleButton.propTypes = { + children: React.PropTypes.node, + element: React.PropTypes.string, + onClick: React.PropTypes.func.isRequired, +}; + +AccessibleButton.defaultProps = { + element: 'div' +}; + +AccessibleButton.displayName = "AccessibleButton"; From b323551f2210dea5842647a213b3486f34342e73 Mon Sep 17 00:00:00 2001 From: Jani Mustonen Date: Fri, 13 Jan 2017 19:34:53 +0200 Subject: [PATCH 09/52] Adhered to code review --- .../views/elements/AccessibleButton.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js index 91a9b99333..3ff5d7a38a 100644 --- a/src/components/views/elements/AccessibleButton.js +++ b/src/components/views/elements/AccessibleButton.js @@ -1,5 +1,5 @@ /* - Copyright 2016 Aviral Dasgupta + Copyright 2016 Jani Mustonen Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -16,6 +16,10 @@ import React from 'react'; +/** + * AccessibleButton is a generic wrapper for any element that should be treated as a button. + * Identifies the element as a button, setting proper tab indexing and keyboard activation behavior. + */ export default function AccessibleButton(props) { const {element, onClick, children, ...restProps} = props; restProps.onClick = onClick; @@ -24,13 +28,15 @@ export default function AccessibleButton(props) { }; restProps.tabIndex = restProps.tabIndex || "0"; restProps.role = "button"; - if (Array.isArray(children)) { - return React.createElement(element, restProps, ...children); - } else { - return React.createElement(element, restProps, children); - } + return React.createElement(element, restProps, children); } +/** + * children: React's magic prop. Represents all children given to the element. + * element: (optional) The base element type. "div" by default. + * onClick: (required) Event handler for button activation. Should be + * implemented exactly like a normal onClick handler. + */ AccessibleButton.propTypes = { children: React.PropTypes.node, element: React.PropTypes.string, From fb68fff536a9dec35d8cf14c786b93e2d8f471ff Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Mon, 16 Jan 2017 13:45:42 +0100 Subject: [PATCH 10/52] Refactor renderCommaSeparated for reuse --- .../views/elements/MemberEventListSummary.js | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index ab4a89eb69..975e2aebf3 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -56,17 +56,8 @@ module.exports = React.createClass({ if (users.length === 0) { return null; } - let originalNumber = users.length; - users = users.slice(0, this.props.summaryLength); - - let remaining = originalNumber - this.props.summaryLength; - if (remaining < 0) { - remaining = 0; - } - let other = " other" + (remaining > 1 ? "s" : ""); - - return this._renderCommaSeparatedList(users, remaining) + (remaining ? ' and ' + remaining + other : ''); + return this._renderCommaSeparatedList(users, this.props.summaryLength); }, // Test whether the first n items repeat for the duration @@ -81,14 +72,16 @@ module.exports = React.createClass({ return true; }, - _renderCommaSeparatedList(items, disableAnd) { - if (disableAnd) { - return items.join(', '); - } + _renderCommaSeparatedList(items, itemLimit) { + const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0); if (items.length === 0) { return ""; } else if (items.length === 1) { return items[0]; + } else if (remaining) { + items = items.slice(0, itemLimit); + const other = " other" + (remaining > 1 ? "s" : ""); + return items.join(', ') + ' and ' + remaining + other; } else { let last = items.pop(); return items.join(', ') + ' and ' + last; From 82d6805a718f4e7f1616c7552dae85e968091c74 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Mon, 16 Jan 2017 14:49:07 +0100 Subject: [PATCH 11/52] Canonicalise certain transition pairs, handle arbitrary consecutive transitions Transition pairs joined,left and left,joined are now transformed into single meta-transitions "joined_and_left" and "left_and_joined" respectively. These are described as "joined and left", "left and rejoined". Treat consecutive sequences of transitions as repetitions, and handle any arbitrary repetitions of transitions: ...,joined,left,joined,left,joined,left,... is canonicalised into ...,joined_and_left, joined_and_left, joined_and_left,... which is truncated and described as ... , joined and left 3 times, ... This also works if there are multiple consecutive sequences separated by other transitions: ..., banned, banned, banned, joined, unbanned, unbanned, unbanned,... becomes ... was banned 3 times, joined, was unbanned 3 times ... --- .../views/elements/MemberEventListSummary.js | 113 ++++++++++++------ 1 file changed, 78 insertions(+), 35 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 975e2aebf3..dc16127017 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -88,62 +88,105 @@ module.exports = React.createClass({ } }, - _getDescriptionForTransition(t, plural) { + _getDescriptionForTransition(t, plural, repeats) { let beConjugated = plural ? "were" : "was"; let invitation = plural ? "invitations" : "an invitation"; - switch (t) { - case 'joined': return "joined"; - case 'left': return "left"; - case 'invite_reject': return "rejected " + invitation; - case 'invite_withdrawal': return "withdrew " + invitation; - case 'invited': return beConjugated + " invited"; - case 'banned': return beConjugated + " banned"; - case 'unbanned': return beConjugated + " unbanned"; - case 'kicked': return beConjugated + " kicked"; + let res = null; + let map = { + "joined": "joined", + "left": "left", + "joined_and_left": "joined and left", + "left_and_joined": "left and rejoined", + "invite_reject": "rejected " + invitation, + "invite_withdrawal": "withdrew " + invitation, + "invited": beConjugated + " invited", + "banned": beConjugated + " banned", + "unbanned": beConjugated + " unbanned", + "kicked": beConjugated + " kicked", + }; + + if (Object.keys(map).includes(t)) { + res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" ); } - return null; + return res; + }, + + _getCanonicalTransitions: function(transitions) { + let modMap = { + 'joined' : { + 'after' : 'left', + 'newTransition' : 'joined_and_left', + }, + 'left' : { + 'after' : 'joined', + 'newTransition' : 'left_and_joined', + }, + // $currentTransition : { + // 'after' : $nextTransition, + // 'newTransition' : 'new_transition_type', + // }, + }; + const res = []; + + for (let i = 0; i < transitions.length; i++) { + let t = transitions[i]; + let t2 = transitions[i + 1]; + + let transition = t; + + if (i < transitions.length - 1 && modMap[t] && modMap[t].after === t2) { + transition = modMap[t].newTransition; + i++; + } + + res.push(transition); + } + return res; + }, + + _getTruncatedTransitions: function(transitions) { + let res = []; + for (let i = 0; i < transitions.length; i++) { + if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) { + res[res.length - 1].repeats += 1; + } else { + res.push({ + transitionType: transitions[i], + repeats: 1, + }); + } + } + // returns [{ + // transitionType: "joined_and_left" + // repeats: 123 + // }, ... ] + return res; }, _renderSummary: function(eventAggregates) { let summaries = Object.keys(eventAggregates).map((transitions) => { let nameList = this._renderNameList(eventAggregates[transitions]); + let plural = eventAggregates[transitions].length > 1; let repeats = 1; let repeatExtra = 0; let splitTransitions = transitions.split(','); - let describedTransitions = splitTransitions; - let plural = eventAggregates[transitions].length > 1; - for (let modulus = 1; modulus <= 2; modulus++) { - // Sequences that are repeating through modulus transitions will be truncated - if (this._isRepeatedSequence(describedTransitions, modulus)) { - // Extra repeating sequence on the end that should be treated separately - // so as to avoid j,l,j,l,j => "... joined and left 2.5 times" - repeatExtra = describedTransitions.length % modulus; + // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions + let canonicalTransitions = this._getCanonicalTransitions(splitTransitions); + // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's) + let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions); - repeats = (describedTransitions.length - repeatExtra) / modulus; - describedTransitions = describedTransitions.slice(0, modulus); - break; - } - } - - let numberOfTimes = repeats > 1 ? " " + repeats + " times" : ""; - - let descs = describedTransitions.map((t) => { - return this._getDescriptionForTransition(t, plural); - }); - - let afterRepeatDescs = splitTransitions.slice(splitTransitions.length - repeatExtra).map((t) => { - return this._getDescriptionForTransition(t, plural); + let descs = truncatedTransitions.map((t) => { + return this._getDescriptionForTransition(t.transitionType, plural, t.repeats); }); let desc = this._renderCommaSeparatedList(descs); - let afterRepeatDesc = this._renderCommaSeparatedList(afterRepeatDescs); - return nameList + " " + desc + numberOfTimes + (afterRepeatDesc ? " and then " + afterRepeatDesc : ""); + return nameList + " " + desc; }); if (!summaries) { From 4be444d52482883b4b87d6fc5cac851626b4cb50 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Mon, 16 Jan 2017 15:12:00 +0100 Subject: [PATCH 12/52] Move shouldComponentUpdate --- .../views/elements/MemberEventListSummary.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index dc16127017..5474865117 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -46,6 +46,19 @@ module.exports = React.createClass({ }; }, + shouldComponentUpdate: function(nextProps, nextState) { + // Update if + // - The number of summarised events has changed + // - or if the summary is currently expanded + // - or if the summary is about to toggle to become collapsed + // - or if there are fewEvents, meaning the child eventTiles are shown as-is + return ( + nextProps.events.length !== this.props.events.length || + this.state.expanded || nextState.expanded || + nextProps.events.length < this.props.threshold + ); + }, + _toggleSummary: function() { this.setState({ expanded: !this.state.expanded, @@ -214,19 +227,6 @@ module.exports = React.createClass({ ); }, - shouldComponentUpdate: function(nextProps, nextState) { - // Update if - // - The number of summarised events has changed - // - or if the summary is currently expanded - // - or if the summary is about to toggle to become collapsed - // - or if there are fewEvents, meaning the child eventTiles are shown as-is - return ( - nextProps.events.length !== this.props.events.length || - this.state.expanded || nextState.expanded || - nextProps.events.length < this.props.threshold - ); - }, - _getTransition: function(e) { switch (e.getContent().membership) { case 'invite': return 'invited'; From a79dc886ba5a146633aaf478587efb6ea35d1c90 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Mon, 16 Jan 2017 18:46:17 +0100 Subject: [PATCH 13/52] Order sequences by occurance of the first event in each sequence --- .../views/elements/MemberEventListSummary.js | 44 ++++++++++++++----- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 5474865117..7adc4c2f85 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -178,8 +178,8 @@ module.exports = React.createClass({ return res; }, - _renderSummary: function(eventAggregates) { - let summaries = Object.keys(eventAggregates).map((transitions) => { + _renderSummary: function(eventAggregates, orderedTransitionSequences) { + let summaries = orderedTransitionSequences.map((transitions) => { let nameList = this._renderNameList(eventAggregates[transitions]); let plural = eventAggregates[transitions].length > 1; @@ -228,18 +228,18 @@ module.exports = React.createClass({ }, _getTransition: function(e) { - switch (e.getContent().membership) { + switch (e.mxEvent.getContent().membership) { case 'invite': return 'invited'; case 'ban': return 'banned'; case 'join': return 'joined'; case 'leave': - if (e.getSender() === e.getStateKey()) { - switch (e.getPrevContent().membership) { + if (e.mxEvent.getSender() === e.mxEvent.getStateKey()) { + switch (e.mxEvent.getPrevContent().membership) { case 'invite': return 'invite_reject'; default: return 'left'; } } - switch (e.getPrevContent().membership) { + switch (e.mxEvent.getPrevContent().membership) { case 'invite': return 'invite_withdrawal'; case 'ban': return 'unbanned'; case 'join': return 'kicked'; @@ -276,44 +276,64 @@ module.exports = React.createClass({ // $userId : [] }; - eventsToRender.forEach((e) => { + eventsToRender.forEach((e, index) => { const userId = e.getStateKey(); // Initialise a user's events if (!userEvents[userId]) { userEvents[userId] = []; } - userEvents[userId].push(e); + userEvents[userId].push({ + mxEvent: e, + displayName: e.getContent().displayname || userId, + index: index, + }); }); - // A map of agregate type to arrays of display names. Each aggregate type + // A map of aggregate type to arrays of display names. Each aggregate type // is a comma-delimited string of transitions, e.g. "joined,left,kicked". // The array of display names is the array of users who went through that // sequence during eventsToRender. let aggregate = { // $aggregateType : []:string }; + // A map of aggregate types to the indices that order them (the index of + // the first event for a given transition sequence) + let aggregateIndices = { + // $aggregateType : int + }; + let avatarMembers = []; let users = Object.keys(userEvents); users.forEach( (userId) => { - let displayName = userEvents[userId][0].getContent().displayname || userId; + let firstEvent = userEvents[userId][0]; + let displayName = firstEvent.displayName; let seq = this._getTransitionSequence(userEvents[userId]); if (!aggregate[seq]) { aggregate[seq] = []; + aggregateIndices[seq] = -1; } // Assumes display names are unique if (aggregate[seq].indexOf(displayName) === -1) { aggregate[seq].push(displayName); } - avatarMembers.push(userEvents[userId][0].target); + + if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) { + aggregateIndices[seq] = firstEvent.index; + } + + avatarMembers.push(firstEvent.mxEvent.target); } ); + // Sort types by order of lowest event index within sequence + let orderedTransitionSequences = Object.keys(aggregate).sort((seq1, seq2) => aggregateIndices[seq1] > aggregateIndices[seq2]); + let avatars = this._renderAvatars(avatarMembers); - let summary = this._renderSummary(aggregate); + let summary = this._renderSummary(aggregate, orderedTransitionSequences); let toggleButton = ( {expanded ? 'collapse' : 'expand'} From 5ab287fa1ad1f2f5456bf160b988a15b4d882a4c Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Mon, 16 Jan 2017 18:57:49 +0100 Subject: [PATCH 14/52] Use pre-calculated displaynames to handle dupes --- src/components/views/elements/MemberEventListSummary.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 7adc4c2f85..425404dab9 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -284,7 +284,7 @@ module.exports = React.createClass({ } userEvents[userId].push({ mxEvent: e, - displayName: e.getContent().displayname || userId, + displayName: e.target.name || userId, index: index, }); }); From aa6e168505ef139c67d66270bf69cf3750a7e85e Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Mon, 16 Jan 2017 18:58:53 +0100 Subject: [PATCH 15/52] Remove comment --- src/components/views/elements/MemberEventListSummary.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 425404dab9..e9ec793953 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -316,7 +316,6 @@ module.exports = React.createClass({ aggregateIndices[seq] = -1; } - // Assumes display names are unique if (aggregate[seq].indexOf(displayName) === -1) { aggregate[seq].push(displayName); } From 45655f4de3611ce9391175abc22988d719cbf8ec Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Tue, 17 Jan 2017 12:01:19 +0100 Subject: [PATCH 16/52] Modified desc for invitation rejections, withdrawals --- src/components/views/elements/MemberEventListSummary.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index e9ec793953..1f05ba000e 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -103,7 +103,7 @@ module.exports = React.createClass({ _getDescriptionForTransition(t, plural, repeats) { let beConjugated = plural ? "were" : "was"; - let invitation = plural ? "invitations" : "an invitation"; + let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : ""); let res = null; let map = { @@ -112,7 +112,7 @@ module.exports = React.createClass({ "joined_and_left": "joined and left", "left_and_joined": "left and rejoined", "invite_reject": "rejected " + invitation, - "invite_withdrawal": "withdrew " + invitation, + "invite_withdrawal": "had " + invitation + " withdrawn", "invited": beConjugated + " invited", "banned": beConjugated + " banned", "unbanned": beConjugated + " unbanned", From ade7c65617cb43bf654f3421a64a75afbc0f393e Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Tue, 17 Jan 2017 12:01:54 +0100 Subject: [PATCH 17/52] Add test for MemberEventListSummary --- .../elements/MemberEventListSummary-test.js | 556 ++++++++++++++++++ 1 file changed, 556 insertions(+) create mode 100644 test/components/views/elements/MemberEventListSummary-test.js diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js new file mode 100644 index 0000000000..af4d92fa61 --- /dev/null +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -0,0 +1,556 @@ +const expect = require('expect'); +const React = require('react'); +const ReactDOM = require("react-dom"); +const ReactTestUtils = require('react-addons-test-utils'); +const sdk = require('matrix-react-sdk'); +const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); + +const testUtils = require('../../../test-utils'); +describe.only('MemberEventListSummary', function() { + let sandbox; + let parentDiv; + + const generateTiles = (events) => { + return events.map((e) => { + return ( +
+ Expanded membership +
+ ); + }); + }; + + const generateMembershipEvent = (eventId, parameters) => { + let membership = parameters.membership; + let userId = parameters.userId; + let prevMembership = parameters.prevMembership; + let senderId = parameters.senderId; + return { + content: { + membership: membership, + }, + target: { + name: userId.match(/@([^:]*):/)[1], + getAvatarUrl: () => { + return "avatar.jpeg"; + }, + userId: userId, + }, + getId: () => { + return eventId; + }, + getContent: function() { + return this.content; + }, + getPrevContent: function() { + return { + membership: prevMembership ? prevMembership : this.content, + }; + }, + getSender: () => { + return senderId || userId; + }, + getStateKey: () => { + return userId; + }, + }; + }; + + const generateEvents = (parameters) => { + const res = []; + for (let i = 0; i < parameters.length; i++) { + res.push(generateMembershipEvent(`event${i}`, parameters[i])); + } + return res; + }; + + const generateEventsForUsers = (userIdTemplate, n, events) => { + let eventsForUsers = []; + let userId = ""; + for (let i = 0; i < n; i++) { + userId = userIdTemplate.replace('$', i); + events.forEach((e) => { + e.userId = userId; + return e; + }); + eventsForUsers = eventsForUsers.concat(generateEvents(events)); + } + return eventsForUsers; + }; + + beforeEach(function() { + testUtils.beforeEach(this); + sandbox = testUtils.stubClient(); + parentDiv = document.createElement('div'); + document.body.appendChild(parentDiv); + }); + + afterEach(function() { + sandbox.restore(); + }); + + it('renders expanded events if there are less than props.threshold', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const renderer = ReactTestUtils.createRenderer(); + renderer.render(); + const result = renderer.getRenderOutput(); + + expect(result.type).toBe('div'); + expect(result.props.children).toEqual([ +
Expanded membership
, + ]); + done(); + }); + + it('renders expanded events if there are less than props.threshold', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const renderer = ReactTestUtils.createRenderer(); + renderer.render(); + const result = renderer.getRenderOutput(); + + expect(result.type).toBe('div'); + expect(result.props.children).toEqual([ +
Expanded membership
, +
Expanded membership
, + ]); + done(); + }); + + it('renders collapsed events if events.length = props.threshold', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe("user_1 joined and left and joined"); + + done(); + }); + + it('truncates long join,leave repetitions', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe("user_1 joined and left 7 times"); + + done(); + }); + + it('truncates long join,leave repetitions inbetween other events', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited"); + + done(); + }); + + it('truncates multiple sequences of repetitions with other events inbetween', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + {userId : "@user_1:some.domain", prevMembership: "ban", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe("user_1 was unbanned, joined and left 2 times, was banned, joined and left 3 times and was invited"); + + done(); + }); + + it('handles multple users following the same sequence of memberships', function(done) { + const events = generateEvents([ + // user_1 + {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + // user_2 + {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned"); + + done(); + }); + + it('handles multple users following the same sequence of memberships', function(done) { + const events = generateEvents([ + // user_1 + {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + // user_2 + {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned"); + + done(); + }); + + it('handles many users following the same sequence of memberships', function(done) { + const events = generateEventsForUsers("@user_$:some.domain", 20, [ + {prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {prevMembership: "leave", membership: "join"}, + {prevMembership: "join", membership: "leave"}, + {prevMembership: "leave", membership: "join"}, + {prevMembership: "join", membership: "leave"}, + {prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned"); + + done(); + }); + + it('correctly orders sequences of transitions by the order of their first event', function(done) { + const events = generateEvents([ + {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, joined and left 2 times and was banned" + ); + + done(); + }); + + it('correctly identifies transitions', function(done) { + const events = generateEvents([ + // invited + {userId : "@user_1:some.domain", membership: "invite"}, + // banned + {userId : "@user_1:some.domain", membership: "ban"}, + // joined + {userId : "@user_1:some.domain", membership: "join"}, + // invite_reject + {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, + // left + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + // invite_withdrawal + {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"}, + // unbanned + {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + // kicked + {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave", senderId: "@some_other_user:some.domain"}, + // default = left + {userId : "@user_1:some.domain", prevMembership: "????", membership: "leave", senderId: "@some_other_user:some.domain"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_1 was invited, was banned, joined, rejected their invitation, left, had their invitation withdrawn, was unbanned, was kicked and left" + ); + + done(); + }); + + it('handles invitation plurals correctly when there are multiple users', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"}, + {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave"}, + {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_1 and 1 other rejected their invitations and had their invitations withdrawn" + ); + + done(); + }); + + it('handles invitation plurals correctly when there are multiple invites', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, + {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 1, + avatarsMaxLength : 5, + threshold : 1, // threshold = 1 to force collapse + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_1 rejected their invitations 2 times" + ); + + done(); + }); + + it('handles a summary length = 2, with no "others"', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", membership: "join"}, + {userId : "@user_1:some.domain", membership: "join"}, + {userId : "@user_2:some.domain", membership: "join"}, + {userId : "@user_2:some.domain", membership: "join"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 2, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_1 and user_2 joined 2 times" + ); + + done(); + }); + + it('handles a summary length = 2, with 1 "other"', function(done) { + const events = generateEvents([ + {userId : "@user_1:some.domain", membership: "join"}, + {userId : "@user_2:some.domain", membership: "join"}, + {userId : "@user_3:some.domain", membership: "join"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 2, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_1, user_2 and 1 other joined" + ); + + done(); + }); + + it('handles a summary length = 2, with many "others"', function(done) { + const events = generateEventsForUsers("@user_$:some.domain", 20, [ + {membership: "join"}, + ]); + const props = { + events : events, + children : generateTiles(events), + summaryLength : 2, + avatarsMaxLength : 5, + threshold : 3, + }; + + const instance = ReactDOM.render(, parentDiv); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_0, user_1 and 18 others joined" + ); + + done(); + }); +}); \ No newline at end of file From 49f2b9df88c33187020900174e1ced591d66e035 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Tue, 17 Jan 2017 18:53:38 +0100 Subject: [PATCH 18/52] Remove duplicate test --- .../elements/MemberEventListSummary-test.js | 36 +------------------ 1 file changed, 1 insertion(+), 35 deletions(-) diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index af4d92fa61..39a79eaf6c 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -263,41 +263,7 @@ describe.only('MemberEventListSummary', function() { done(); }); - it('handles multple users following the same sequence of memberships', function(done) { - const events = generateEvents([ - // user_1 - {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, - // user_2 - {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, - ]); - const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, - }; - - const instance = ReactDOM.render(, parentDiv); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); - const summaryText = summary.innerText; - - expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned"); - - done(); - }); - - it('handles multple users following the same sequence of memberships', function(done) { + it('handles multiple users following the same sequence of memberships', function(done) { const events = generateEvents([ // user_1 {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, From 9574a0b663f9e4e6e4e013e6fe73707f2d41d831 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Tue, 17 Jan 2017 18:56:57 +0100 Subject: [PATCH 19/52] Remove pointless length guard --- src/components/views/elements/MemberEventListSummary.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 1f05ba000e..945a5c28fd 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -66,10 +66,6 @@ module.exports = React.createClass({ }, _renderNameList: function(users) { - if (users.length === 0) { - return null; - } - return this._renderCommaSeparatedList(users, this.props.summaryLength); }, From 3ba9f5087320122f4af807b123b00224d4d23e0a Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Tue, 17 Jan 2017 19:07:45 +0100 Subject: [PATCH 20/52] Move functions around, remove redundancies, add docs --- .../views/elements/MemberEventListSummary.js | 159 +++++++++--------- .../elements/MemberEventListSummary-test.js | 2 +- 2 files changed, 81 insertions(+), 80 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 945a5c28fd..0c2861a023 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -69,57 +69,44 @@ module.exports = React.createClass({ return this._renderCommaSeparatedList(users, this.props.summaryLength); }, - // Test whether the first n items repeat for the duration - // e.g. [1,2,3,4,1,2,3] would resolve true for n = 4 - _isRepeatedSequence: function(transitions, n) { - let count = 0; - for (let i = 0; i < transitions.length; i++) { - if (transitions[i % n] !== transitions[i]) { - return null; - } + _renderSummary: function(eventAggregates, orderedTransitionSequences) { + let summaries = orderedTransitionSequences.map((transitions) => { + let nameList = this._renderNameList(eventAggregates[transitions]); + let plural = eventAggregates[transitions].length > 1; + + let splitTransitions = transitions.split(','); + + // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions + let canonicalTransitions = this._getCanonicalTransitions(splitTransitions); + // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's) + let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions); + + let descs = truncatedTransitions.map((t) => { + return this._getDescriptionForTransition(t.transitionType, plural, t.repeats); + }); + + let desc = this._renderCommaSeparatedList(descs); + + return nameList + " " + desc; + }); + + if (!summaries) { + return null; } - return true; + + return ( + + {summaries.join(", ")} + + ); }, - _renderCommaSeparatedList(items, itemLimit) { - const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0); - if (items.length === 0) { - return ""; - } else if (items.length === 1) { - return items[0]; - } else if (remaining) { - items = items.slice(0, itemLimit); - const other = " other" + (remaining > 1 ? "s" : ""); - return items.join(', ') + ' and ' + remaining + other; - } else { - let last = items.pop(); - return items.join(', ') + ' and ' + last; - } - }, - - _getDescriptionForTransition(t, plural, repeats) { - let beConjugated = plural ? "were" : "was"; - let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : ""); - - let res = null; - let map = { - "joined": "joined", - "left": "left", - "joined_and_left": "joined and left", - "left_and_joined": "left and rejoined", - "invite_reject": "rejected " + invitation, - "invite_withdrawal": "had " + invitation + " withdrawn", - "invited": beConjugated + " invited", - "banned": beConjugated + " banned", - "unbanned": beConjugated + " unbanned", - "kicked": beConjugated + " kicked", - }; - - if (Object.keys(map).includes(t)) { - res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" ); + _renderNameList: function(users) { + if (users.length === 0) { + return null; } - return res; + return this._renderCommaSeparatedList(users, this.props.summaryLength); }, _getCanonicalTransitions: function(transitions) { @@ -174,39 +161,53 @@ module.exports = React.createClass({ return res; }, - _renderSummary: function(eventAggregates, orderedTransitionSequences) { - let summaries = orderedTransitionSequences.map((transitions) => { - let nameList = this._renderNameList(eventAggregates[transitions]); - let plural = eventAggregates[transitions].length > 1; + /** + * For a certain transition, t, describe what happened to the users that + * underwent the transition. + * @param {string} t the transition type + * @param {boolean} plural whether there were multiple users undergoing the same transition + * @param {number} repeats the number of times the transition was repeated in a row + * @returns {string} the spoken English equivalent of the transition + */ + _getDescriptionForTransition(t, plural, repeats) { + let beConjugated = plural ? "were" : "was"; + let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : ""); - let repeats = 1; - let repeatExtra = 0; + let res = null; + let map = { + "joined": "joined", + "left": "left", + "joined_and_left": "joined and left", + "left_and_joined": "left and rejoined", + "invite_reject": "rejected " + invitation, + "invite_withdrawal": "had " + invitation + " withdrawn", + "invited": beConjugated + " invited", + "banned": beConjugated + " banned", + "unbanned": beConjugated + " unbanned", + "kicked": beConjugated + " kicked", + }; - let splitTransitions = transitions.split(','); - - // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions - let canonicalTransitions = this._getCanonicalTransitions(splitTransitions); - // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's) - let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions); - - let descs = truncatedTransitions.map((t) => { - return this._getDescriptionForTransition(t.transitionType, plural, t.repeats); - }); - - let desc = this._renderCommaSeparatedList(descs); - - return nameList + " " + desc; - }); - - if (!summaries) { - return null; + if (Object.keys(map).includes(t)) { + res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" ); } - return ( - - {summaries.join(", ")} - - ); + return res; + }, + + _renderCommaSeparatedList(items, itemLimit) { + const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0); + if (items.length === 0) { + return ""; + } else if (items.length === 1) { + return items[0]; + } else if (remaining) { + items = items.slice(0, itemLimit); + const other = " other" + (remaining > 1 ? "s" : ""); + return items.join(', ') + ' and ' + remaining + other; + } else { + let last = items.pop(); + return items.join(', ') + ' and ' + last; + } }, _renderAvatars: function(roomMembers) { @@ -223,6 +224,10 @@ module.exports = React.createClass({ ); }, + _getTransitionSequence: function(events) { + return events.map(this._getTransition); + }, + _getTransition: function(e) { switch (e.mxEvent.getContent().membership) { case 'invite': return 'invited'; @@ -245,10 +250,6 @@ module.exports = React.createClass({ } }, - _getTransitionSequence: function(events) { - return events.map(this._getTransition); - }, - render: function() { let eventsToRender = this.props.events; let fewEvents = eventsToRender.length < this.props.threshold; diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index 39a79eaf6c..61e0f9627b 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -6,7 +6,7 @@ const sdk = require('matrix-react-sdk'); const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); const testUtils = require('../../../test-utils'); -describe.only('MemberEventListSummary', function() { +describe('MemberEventListSummary', function() { let sandbox; let parentDiv; From 484549e50be36266c581d4583c84c9c55db1e5cf Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 10:26:25 +0100 Subject: [PATCH 21/52] Refactor a few things and document everything --- .../views/elements/MemberEventListSummary.js | 108 +++++++++++++----- 1 file changed, 82 insertions(+), 26 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 0c2861a023..41307969d6 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -65,20 +65,27 @@ module.exports = React.createClass({ }); }, - _renderNameList: function(users) { - return this._renderCommaSeparatedList(users, this.props.summaryLength); - }, - + /** + * Render the JSX for users aggregated by their transition sequences (`eventAggregates`) where + * the sequences are ordered by `orderedTransitionSequences`. + * @param {object[]} eventAggregates a map of transition sequence to array of user display names + * or user IDs. + * @param {string[]} orderedTransitionSequences an array which is some ordering of + * `Object.keys(eventAggregates)`. + * @returns {ReactElement} a single containing the textual summary of the aggregated + * events that occurred. + */ _renderSummary: function(eventAggregates, orderedTransitionSequences) { let summaries = orderedTransitionSequences.map((transitions) => { - let nameList = this._renderNameList(eventAggregates[transitions]); - let plural = eventAggregates[transitions].length > 1; + let userNames = eventAggregates[transitions]; + let nameList = this._renderNameList(userNames); + let plural = userNames.length > 1; let splitTransitions = transitions.split(','); - // Some pairs of transitions are common and are repeated a lot, so canonicalise them into "pair" transitions + // Some neighbouring transitions are common, so canonicalise some into "pair" transitions let canonicalTransitions = this._getCanonicalTransitions(splitTransitions); - // Remove consecutive repetitions of the same transition (like 5 consecutive 'join_and_leave's) + // Transform into consecutive repetitions of the same transition (like 5 consecutive 'joined_and_left's) let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions); let descs = truncatedTransitions.map((t) => { @@ -101,14 +108,30 @@ module.exports = React.createClass({ ); }, + /** + * @param {string[]} users an array of user display names or user IDs. + * @returns {string} a comma-separated list that ends with "and [n] others" if there are + * more items in `users` than `this.props.summaryLength`, which is the number of names + * included before "and [n] others". + */ _renderNameList: function(users) { - if (users.length === 0) { - return null; - } - return this._renderCommaSeparatedList(users, this.props.summaryLength); }, + /** + * Canonicalise an array of transitions into an array of transitions and how many times + * they are repeated consecutively. + * + * An array of 123 "joined_and_left" transitions, would result in: + * ``` + * [{ + * transitionType: "joined_and_left" + * repeats: 123 + * }, ... ] + * ``` + * @param {string[]} transitions the array of transitions to transform. + * @returns {object[]} an array of truncated transitions. + */ _getCanonicalTransitions: function(transitions) { let modMap = { 'joined' : { @@ -142,6 +165,20 @@ module.exports = React.createClass({ return res; }, + /** + * Transform an array of transitions into an array of transitions and how many times + * they are repeated consecutively. + * + * An array of 123 "joined_and_left" transitions, would result in: + * ``` + * [{ + * transitionType: "joined_and_left" + * repeats: 123 + * }, ... ] + * ``` + * @param {string[]} transitions the array of transitions to transform. + * @returns {object[]} an array of truncated transitions. + */ _getTruncatedTransitions: function(transitions) { let res = []; for (let i = 0; i < transitions.length; i++) { @@ -154,20 +191,16 @@ module.exports = React.createClass({ }); } } - // returns [{ - // transitionType: "joined_and_left" - // repeats: 123 - // }, ... ] return res; }, /** * For a certain transition, t, describe what happened to the users that * underwent the transition. - * @param {string} t the transition type - * @param {boolean} plural whether there were multiple users undergoing the same transition - * @param {number} repeats the number of times the transition was repeated in a row - * @returns {string} the spoken English equivalent of the transition + * @param {string} t the transition type. + * @param {boolean} plural whether there were multiple users undergoing the same transition. + * @param {number} repeats the number of times the transition was repeated in a row. + * @returns {string} the written English equivalent of the transition. */ _getDescriptionForTransition(t, plural, repeats) { let beConjugated = plural ? "were" : "was"; @@ -194,6 +227,16 @@ module.exports = React.createClass({ return res; }, + /** + * Constructs a written English string representing `items`, with an optional limit on the number + * of items included in the result. If specified and if the length of `items` is greater than the + * limit, the string "and n others" will be appended onto the result. + * If `items` is empty, returns the empty string. If there is only one item, return it. + * @param {string[]} items the items to construct a string from. + * @param {number?} itemLimit the number by which to limit the list. + * @returns {string} a string constructed by joining `items` with a comma between each + * item, but with the last item appended as " and [lastItem]". + */ _renderCommaSeparatedList(items, itemLimit) { const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0); if (items.length === 0) { @@ -228,6 +271,14 @@ module.exports = React.createClass({ return events.map(this._getTransition); }, + /** + * Enumerate a given membership event, `e`, where `getContent().membership` has + * changed for each transition allowed by the Matrix protocol. This attempts to + * enumerate the membership changes that occur in `../../../TextForEvent.js`. + * @param {MatrixEvent} e the membership change event to enumerate. + * @returns {string?} the transition type given to this event. This defaults to `null` + * if a transition is not recognised. + */ _getTransition: function(e) { switch (e.mxEvent.getContent().membership) { case 'invite': return 'invited'; @@ -268,16 +319,25 @@ module.exports = React.createClass({ ); } - // Map user IDs to all of the user's member events in eventsToRender + // Map user IDs to an array of objects: let userEvents = { - // $userId : [] + // $userId : [{ + // // The original event + // mxEvent: e, + // // The display name of the user (if not, then user ID) + // displayName: e.target.name || userId, + // // The original index of the event in this.props.events + // index: index, + // }] }; + let avatarMembers = []; eventsToRender.forEach((e, index) => { const userId = e.getStateKey(); // Initialise a user's events if (!userEvents[userId]) { userEvents[userId] = []; + avatarMembers.push(e.target); } userEvents[userId].push({ mxEvent: e, @@ -299,8 +359,6 @@ module.exports = React.createClass({ // $aggregateType : int }; - let avatarMembers = []; - let users = Object.keys(userEvents); users.forEach( (userId) => { @@ -320,8 +378,6 @@ module.exports = React.createClass({ if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) { aggregateIndices[seq] = firstEvent.index; } - - avatarMembers.push(firstEvent.mxEvent.target); } ); From 5dd1512ff27e7299d89d604a91ebfbedff441780 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 10:59:19 +0100 Subject: [PATCH 22/52] Move aggregation code to dedicated function --- .../views/elements/MemberEventListSummary.js | 79 ++++++++++--------- .../elements/MemberEventListSummary-test.js | 2 +- 2 files changed, 44 insertions(+), 37 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 41307969d6..57686344ed 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -301,6 +301,46 @@ module.exports = React.createClass({ } }, + _getAggregate: function(userEvents) { + // A map of aggregate type to arrays of display names. Each aggregate type + // is a comma-delimited string of transitions, e.g. "joined,left,kicked". + // The array of display names is the array of users who went through that + // sequence during eventsToRender. + let aggregate = { + // $aggregateType : []:string + }; + // A map of aggregate types to the indices that order them (the index of + // the first event for a given transition sequence) + let aggregateIndices = { + // $aggregateType : int + }; + + let users = Object.keys(userEvents); + users.forEach( + (userId) => { + let firstEvent = userEvents[userId][0]; + let displayName = firstEvent.displayName; + + let seq = this._getTransitionSequence(userEvents[userId]); + if (!aggregate[seq]) { + aggregate[seq] = []; + aggregateIndices[seq] = -1; + } + + aggregate[seq].push(displayName); + + if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) { + aggregateIndices[seq] = firstEvent.index; + } + } + ); + + return { + names: aggregate, + indices: aggregateIndices, + }; + }, + render: function() { let eventsToRender = this.props.events; let fewEvents = eventsToRender.length < this.props.threshold; @@ -346,46 +386,13 @@ module.exports = React.createClass({ }); }); - // A map of aggregate type to arrays of display names. Each aggregate type - // is a comma-delimited string of transitions, e.g. "joined,left,kicked". - // The array of display names is the array of users who went through that - // sequence during eventsToRender. - let aggregate = { - // $aggregateType : []:string - }; - // A map of aggregate types to the indices that order them (the index of - // the first event for a given transition sequence) - let aggregateIndices = { - // $aggregateType : int - }; - - let users = Object.keys(userEvents); - users.forEach( - (userId) => { - let firstEvent = userEvents[userId][0]; - let displayName = firstEvent.displayName; - - let seq = this._getTransitionSequence(userEvents[userId]); - if (!aggregate[seq]) { - aggregate[seq] = []; - aggregateIndices[seq] = -1; - } - - if (aggregate[seq].indexOf(displayName) === -1) { - aggregate[seq].push(displayName); - } - - if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) { - aggregateIndices[seq] = firstEvent.index; - } - } - ); + let aggregate = this._getAggregate(userEvents); // Sort types by order of lowest event index within sequence - let orderedTransitionSequences = Object.keys(aggregate).sort((seq1, seq2) => aggregateIndices[seq1] > aggregateIndices[seq2]); + let orderedTransitionSequences = Object.keys(aggregate.names).sort((seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]); let avatars = this._renderAvatars(avatarMembers); - let summary = this._renderSummary(aggregate, orderedTransitionSequences); + let summary = this._renderSummary(aggregate.names, orderedTransitionSequences); let toggleButton = ( {expanded ? 'collapse' : 'expand'} diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index 61e0f9627b..39a79eaf6c 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -6,7 +6,7 @@ const sdk = require('matrix-react-sdk'); const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); const testUtils = require('../../../test-utils'); -describe('MemberEventListSummary', function() { +describe.only('MemberEventListSummary', function() { let sandbox; let parentDiv; From 78e2c787e08b7fef7d50cf02cf9aceb907d8670a Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 11:53:17 +0100 Subject: [PATCH 23/52] Refactor and document test helpers. --- .../elements/MemberEventListSummary-test.js | 64 ++++++++++--------- test/test-utils.js | 12 +++- 2 files changed, 45 insertions(+), 31 deletions(-) diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index 39a79eaf6c..93c085f88c 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -4,12 +4,15 @@ const ReactDOM = require("react-dom"); const ReactTestUtils = require('react-addons-test-utils'); const sdk = require('matrix-react-sdk'); const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); +var jssdk = require('matrix-js-sdk'); +var MatrixEvent = jssdk.MatrixEvent; const testUtils = require('../../../test-utils'); describe.only('MemberEventListSummary', function() { let sandbox; let parentDiv; + // Generate dummy event tiles for use in simulating an expanded MELS const generateTiles = (events) => { return events.map((e) => { return ( @@ -20,42 +23,41 @@ describe.only('MemberEventListSummary', function() { }); }; + /** + * Generates a membership event with the target of the event set as a mocked RoomMember based + * on `parameters.userId`. + * @param {string} eventId the ID of the event. + * @param {object} parameters the parameters to use to create the event. + * @param {string} parameters.membership the membership to assign to `content.membership` + * @param {string} parameters.userId the state key and target userId of the event. If + * `parameters.senderId` is not specified, this is also used as the event sender. + * @param {string} parameters.prevMembership the membership to assign to + * `prev_content.membership`. + * @param {string} parameters.senderId the user ID of the sender of the event. Optional. + * Defaults to `parameters.userId`. + * @returns {MatrixEvent} the event created. + */ const generateMembershipEvent = (eventId, parameters) => { - let membership = parameters.membership; - let userId = parameters.userId; - let prevMembership = parameters.prevMembership; - let senderId = parameters.senderId; - return { - content: { - membership: membership, - }, - target: { - name: userId.match(/@([^:]*):/)[1], + let e = testUtils.mkMembership({ + event: true, + user: parameters.senderId || parameters.userId, + skey: parameters.userId, + mship: parameters.membership, + prevMship: parameters.prevMembership, + target : { + name: parameters.userId.match(/@([^:]*):/)[1], // Use localpart as display name + userId: parameters.userId, getAvatarUrl: () => { return "avatar.jpeg"; }, - userId: userId, }, - getId: () => { - return eventId; - }, - getContent: function() { - return this.content; - }, - getPrevContent: function() { - return { - membership: prevMembership ? prevMembership : this.content, - }; - }, - getSender: () => { - return senderId || userId; - }, - getStateKey: () => { - return userId; - }, - }; + }); + // Override random event ID + e.event.event_id = eventId; + return e; }; + // Generate mock MatrixEvents from the array of parameters const generateEvents = (parameters) => { const res = []; for (let i = 0; i < parameters.length; i++) { @@ -64,6 +66,9 @@ describe.only('MemberEventListSummary', function() { return res; }; + // Generate the same sequence of `events` for `n` users, where each user ID + // is created by replacing the first "$" in userIdTemplate with `i` for + // `i = 0 .. n`. const generateEventsForUsers = (userIdTemplate, n, events) => { let eventsForUsers = []; let userId = ""; @@ -71,7 +76,6 @@ describe.only('MemberEventListSummary', function() { userId = userIdTemplate.replace('$', i); events.forEach((e) => { e.userId = userId; - return e; }); eventsForUsers = eventsForUsers.concat(generateEvents(events)); } diff --git a/test/test-utils.js b/test/test-utils.js index db405c2e1a..cdfae4421c 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -108,6 +108,7 @@ export function mkEvent(opts) { room_id: opts.room, sender: opts.user, content: opts.content, + prev_content: opts.prev_content, event_id: "$" + Math.random() + "-" + Math.random(), origin_server_ts: opts.ts, }; @@ -150,7 +151,9 @@ export function mkPresence(opts) { * @param {Object} opts Values for the membership. * @param {string} opts.room The room ID for the event. * @param {string} opts.mship The content.membership for the event. + * @param {string} opts.prevMship The prev_content.membership for the event. * @param {string} opts.user The user ID for the event. + * @param {RoomMember} opts.target The target of the event. * @param {string} opts.skey The other user ID for the event if applicable * e.g. for invites/bans. * @param {string} opts.name The content.displayname for the event. @@ -169,9 +172,16 @@ export function mkMembership(opts) { opts.content = { membership: opts.mship }; + if (opts.prevMship) { + opts.prev_content = { membership: opts.prevMship }; + } if (opts.name) { opts.content.displayname = opts.name; } if (opts.url) { opts.content.avatar_url = opts.url; } - return mkEvent(opts); + let e = mkEvent(opts); + if (opts.target) { + e.target = opts.target; + } + return e; }; /** From 867a532e5e5aa5bce40e2eec68c79d7c6c5b5352 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 11:58:54 +0100 Subject: [PATCH 24/52] Remove parentDiv from tests --- .../elements/MemberEventListSummary-test.js | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index 93c085f88c..325b1d6b17 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -10,7 +10,6 @@ var MatrixEvent = jssdk.MatrixEvent; const testUtils = require('../../../test-utils'); describe.only('MemberEventListSummary', function() { let sandbox; - let parentDiv; // Generate dummy event tiles for use in simulating an expanded MELS const generateTiles = (events) => { @@ -85,8 +84,6 @@ describe.only('MemberEventListSummary', function() { beforeEach(function() { testUtils.beforeEach(this); sandbox = testUtils.stubClient(); - parentDiv = document.createElement('div'); - document.body.appendChild(parentDiv); }); afterEach(function() { @@ -155,7 +152,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -189,7 +186,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -225,7 +222,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -258,7 +255,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -292,7 +289,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -318,7 +315,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -349,7 +346,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -389,7 +386,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -415,7 +412,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -439,7 +436,7 @@ describe.only('MemberEventListSummary', function() { threshold : 1, // threshold = 1 to force collapse }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -465,7 +462,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -490,7 +487,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; @@ -513,7 +510,7 @@ describe.only('MemberEventListSummary', function() { threshold : 3, }; - const instance = ReactDOM.render(, parentDiv); + const instance = ReactTestUtils.renderIntoDocument(); const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); const summaryText = summary.innerText; From 41d2697e28719bd45ff041ca33c45d6867588ee8 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 12:03:38 +0100 Subject: [PATCH 25/52] Remove `done`, const instead of var for `requier`s --- .../elements/MemberEventListSummary-test.js | 62 +++++-------------- 1 file changed, 17 insertions(+), 45 deletions(-) diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index 325b1d6b17..7094520f7b 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -4,8 +4,8 @@ const ReactDOM = require("react-dom"); const ReactTestUtils = require('react-addons-test-utils'); const sdk = require('matrix-react-sdk'); const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); -var jssdk = require('matrix-js-sdk'); -var MatrixEvent = jssdk.MatrixEvent; +const jssdk = require('matrix-js-sdk'); +const MatrixEvent = jssdk.MatrixEvent; const testUtils = require('../../../test-utils'); describe.only('MemberEventListSummary', function() { @@ -90,7 +90,7 @@ describe.only('MemberEventListSummary', function() { sandbox.restore(); }); - it('renders expanded events if there are less than props.threshold', function(done) { + it('renders expanded events if there are less than props.threshold', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, ]); @@ -110,10 +110,9 @@ describe.only('MemberEventListSummary', function() { expect(result.props.children).toEqual([
Expanded membership
, ]); - done(); }); - it('renders expanded events if there are less than props.threshold', function(done) { + it('renders expanded events if there are less than props.threshold', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, @@ -135,10 +134,9 @@ describe.only('MemberEventListSummary', function() {
Expanded membership
,
Expanded membership
, ]); - done(); }); - it('renders collapsed events if events.length = props.threshold', function(done) { + it('renders collapsed events if events.length = props.threshold', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, @@ -157,11 +155,9 @@ describe.only('MemberEventListSummary', function() { const summaryText = summary.innerText; expect(summaryText).toBe("user_1 joined and left and joined"); - - done(); }); - it('truncates long join,leave repetitions', function(done) { + it('truncates long join,leave repetitions', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, @@ -191,11 +187,9 @@ describe.only('MemberEventListSummary', function() { const summaryText = summary.innerText; expect(summaryText).toBe("user_1 joined and left 7 times"); - - done(); }); - it('truncates long join,leave repetitions inbetween other events', function(done) { + it('truncates long join,leave repetitions inbetween other events', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, @@ -227,11 +221,9 @@ describe.only('MemberEventListSummary', function() { const summaryText = summary.innerText; expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited"); - - done(); }); - it('truncates multiple sequences of repetitions with other events inbetween', function(done) { + it('truncates multiple sequences of repetitions with other events inbetween', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, @@ -260,11 +252,9 @@ describe.only('MemberEventListSummary', function() { const summaryText = summary.innerText; expect(summaryText).toBe("user_1 was unbanned, joined and left 2 times, was banned, joined and left 3 times and was invited"); - - done(); }); - it('handles multiple users following the same sequence of memberships', function(done) { + it('handles multiple users following the same sequence of memberships', function() { const events = generateEvents([ // user_1 {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, @@ -294,11 +284,9 @@ describe.only('MemberEventListSummary', function() { const summaryText = summary.innerText; expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned"); - - done(); }); - it('handles many users following the same sequence of memberships', function(done) { + it('handles many users following the same sequence of memberships', function() { const events = generateEventsForUsers("@user_$:some.domain", 20, [ {prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, {prevMembership: "leave", membership: "join"}, @@ -320,11 +308,9 @@ describe.only('MemberEventListSummary', function() { const summaryText = summary.innerText; expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned"); - - done(); }); - it('correctly orders sequences of transitions by the order of their first event', function(done) { + it('correctly orders sequences of transitions by the order of their first event', function() { const events = generateEvents([ {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, @@ -353,11 +339,9 @@ describe.only('MemberEventListSummary', function() { expect(summaryText).toBe( "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, joined and left 2 times and was banned" ); - - done(); }); - it('correctly identifies transitions', function(done) { + it('correctly identifies transitions', function() { const events = generateEvents([ // invited {userId : "@user_1:some.domain", membership: "invite"}, @@ -393,11 +377,9 @@ describe.only('MemberEventListSummary', function() { expect(summaryText).toBe( "user_1 was invited, was banned, joined, rejected their invitation, left, had their invitation withdrawn, was unbanned, was kicked and left" ); - - done(); }); - it('handles invitation plurals correctly when there are multiple users', function(done) { + it('handles invitation plurals correctly when there are multiple users', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"}, @@ -419,11 +401,9 @@ describe.only('MemberEventListSummary', function() { expect(summaryText).toBe( "user_1 and 1 other rejected their invitations and had their invitations withdrawn" ); - - done(); }); - it('handles invitation plurals correctly when there are multiple invites', function(done) { + it('handles invitation plurals correctly when there are multiple invites', function() { const events = generateEvents([ {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, @@ -443,11 +423,9 @@ describe.only('MemberEventListSummary', function() { expect(summaryText).toBe( "user_1 rejected their invitations 2 times" ); - - done(); }); - it('handles a summary length = 2, with no "others"', function(done) { + it('handles a summary length = 2, with no "others"', function() { const events = generateEvents([ {userId : "@user_1:some.domain", membership: "join"}, {userId : "@user_1:some.domain", membership: "join"}, @@ -469,11 +447,9 @@ describe.only('MemberEventListSummary', function() { expect(summaryText).toBe( "user_1 and user_2 joined 2 times" ); - - done(); }); - it('handles a summary length = 2, with 1 "other"', function(done) { + it('handles a summary length = 2, with 1 "other"', function() { const events = generateEvents([ {userId : "@user_1:some.domain", membership: "join"}, {userId : "@user_2:some.domain", membership: "join"}, @@ -494,11 +470,9 @@ describe.only('MemberEventListSummary', function() { expect(summaryText).toBe( "user_1, user_2 and 1 other joined" ); - - done(); }); - it('handles a summary length = 2, with many "others"', function(done) { + it('handles a summary length = 2, with many "others"', function() { const events = generateEventsForUsers("@user_$:some.domain", 20, [ {membership: "join"}, ]); @@ -517,7 +491,5 @@ describe.only('MemberEventListSummary', function() { expect(summaryText).toBe( "user_0, user_1 and 18 others joined" ); - - done(); }); }); \ No newline at end of file From c0de0870ed3f3262b55e6d2057c934ef867cded8 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 13:31:52 +0000 Subject: [PATCH 26/52] Some sarcastic comments --- src/dispatcher.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/dispatcher.js b/src/dispatcher.js index ed0350fe54..11c79f58ee 100644 --- a/src/dispatcher.js +++ b/src/dispatcher.js @@ -42,6 +42,9 @@ class MatrixDispatcher extends flux.Dispatcher { } } +// XXX this is a big anti-pattern, and makes testing hard. Because dispatches +// happen asynchronously, it is possible for actions dispatched in one thread +// to arrive in another, with *hilarious* consequences. if (global.mxDispatcher === undefined) { global.mxDispatcher = new MatrixDispatcher(); } From ce7434984bdb181a4a45696f0d14f3c9c4a807af Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 14:32:52 +0000 Subject: [PATCH 27/52] Expand timeline in situations when _getIndicator not null The status bar will now be expanded when: - props.numUnreadMessages - !props.atEndOfLiveTimeline - props.hasActiveCall --- src/components/structures/RoomStatusBar.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 0eb50161ec..c80c4db7cc 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -135,7 +135,11 @@ module.exports = React.createClass({ // changed - so we use '0' to indicate normal size, and other values to // indicate other sizes. _getSize: function(state, props) { - if (state.syncState === "ERROR" || state.whoisTypingString) { + if (state.syncState === "ERROR" || + state.whoisTypingString || + props.numUnreadMessages || + !props.atEndOfLiveTimeline || + props.hasActiveCall) { return STATUS_BAR_EXPANDED; } else if (props.tabCompleteEntries) { return STATUS_BAR_HIDDEN; From 7c66d1c8673f0a67282d2cfeeb9e98b94b05af4d Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 16:01:39 +0000 Subject: [PATCH 28/52] Sync typing indication with avatar typing indication Follow the same rules for displaying "is typing" as with the typing avatars. --- src/WhoIsTyping.js | 19 ++++++++++++------- src/components/structures/RoomStatusBar.js | 8 ++++++-- src/components/structures/RoomView.js | 1 + 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js index 8c3838d615..f8e3f1c7fd 100644 --- a/src/WhoIsTyping.js +++ b/src/WhoIsTyping.js @@ -32,17 +32,22 @@ module.exports = { return whoIsTyping; }, - whoIsTypingString: function(room) { - var whoIsTyping = this.usersTypingApartFromMe(room); + whoIsTypingString: function(room, limit) { + const whoIsTyping = this.usersTypingApartFromMe(room); + const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0); if (whoIsTyping.length == 0) { - return null; + return ''; } else if (whoIsTyping.length == 1) { return whoIsTyping[0].name + ' is typing'; + } + const names = whoIsTyping.map(function(m) { + return m.name; + }); + if (othersCount) { + const other = ' other' + (othersCount > 1 ? 's' : ''); + return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing'; } else { - var names = whoIsTyping.map(function(m) { - return m.name; - }); - var lastPerson = names.shift(); + const lastPerson = names.pop(); return names.join(', ') + ' and ' + lastPerson + ' are typing'; } } diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index c80c4db7cc..a691196219 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -53,6 +53,10 @@ module.exports = React.createClass({ // more interesting) hasActiveCall: React.PropTypes.bool, + // Number of names to display in typing indication. E.g. set to 3, will + // result in "X, Y, Z and 100 others are typing." + whoIsTypingLimit: React.PropTypes.number, + // callback for when the user clicks on the 'resend all' button in the // 'unsent messages' bar onResendAllClick: React.PropTypes.func, @@ -80,7 +84,7 @@ module.exports = React.createClass({ getInitialState: function() { return { syncState: MatrixClientPeg.get().getSyncState(), - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room), + whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), }; }, @@ -127,7 +131,7 @@ module.exports = React.createClass({ onRoomMemberTyping: function(ev, member) { this.setState({ - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room), + whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), }); }, diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 8753540e48..b7f05de339 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1531,6 +1531,7 @@ module.exports = React.createClass({ onResize={this.onChildResize} onVisible={this.onStatusBarVisible} onHidden={this.onStatusBarHidden} + whoIsTypingLimit={2} />; } From 9a360a48d21a08df3ee5bea3752a2ba2933d3834 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 16:04:37 +0000 Subject: [PATCH 29/52] Use the same property to limit avatars --- src/components/structures/RoomStatusBar.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index a691196219..59ff3c8f23 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -21,8 +21,6 @@ var WhoIsTyping = require("../../WhoIsTyping"); var MatrixClientPeg = require("../../MatrixClientPeg"); const MemberAvatar = require("../views/avatars/MemberAvatar"); -const TYPING_AVATARS_LIMIT = 2; - const HIDE_DEBOUNCE_MS = 10000; const STATUS_BAR_HIDDEN = 0; const STATUS_BAR_EXPANDED = 1; @@ -198,7 +196,7 @@ module.exports = React.createClass({ if (wantPlaceholder) { return (
- {this._renderTypingIndicatorAvatars(TYPING_AVATARS_LIMIT)} + {this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit)}
); } From 97387db0148d01d1ad171907721853a51d64df80 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 24 Jan 2017 16:40:26 +0000 Subject: [PATCH 30/52] Reduce log spam: Revert a16aeeef2a0f16efedf7e6616cdf3c2c8752a077 As per #riot-dev, this is no longer required. --- src/components/structures/MatrixChat.js | 6 ++---- src/dispatcher.js | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 20d59e22ec..cb61041d48 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -259,8 +259,6 @@ module.exports = React.createClass({ }, onAction: function(payload) { - console.log("onAction: "+payload.action); - var roomIndexDelta = 1; var self = this; @@ -1008,8 +1006,8 @@ module.exports = React.createClass({ var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword'); var LoggedInView = sdk.getComponent('structures.LoggedInView'); - console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen + - "; logged_in="+this.state.logged_in+"; ready="+this.state.ready); + // console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen + + // "; logged_in="+this.state.logged_in+"; ready="+this.state.ready); if (this.state.loading) { var Spinner = sdk.getComponent('elements.Spinner'); diff --git a/src/dispatcher.js b/src/dispatcher.js index 11c79f58ee..9864cb3807 100644 --- a/src/dispatcher.js +++ b/src/dispatcher.js @@ -28,7 +28,6 @@ class MatrixDispatcher extends flux.Dispatcher { * for. */ dispatch(payload, sync) { - console.log("Dispatch: "+payload.action); if (sync) { super.dispatch(payload); } else { From 4186a769ca46956c7dae96d2324fb66002ce73e8 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 17:16:26 +0000 Subject: [PATCH 31/52] Default prop for whoIsTypingLimit --- src/components/structures/RoomStatusBar.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 59ff3c8f23..212d0d5ee6 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -79,6 +79,12 @@ module.exports = React.createClass({ onVisible: React.PropTypes.func, }, + getDefaultProps: function() { + return { + whoIsTypingLimit: 2, + }; + }, + getInitialState: function() { return { syncState: MatrixClientPeg.get().getSyncState(), From a92fff9da7357df35415bfd7cc6bbabdde88396c Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 17:18:56 +0000 Subject: [PATCH 32/52] Fix linting warnings --- src/WhoIsTyping.js | 6 ++++-- src/components/structures/RoomStatusBar.js | 10 ++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js index f8e3f1c7fd..96e76d618b 100644 --- a/src/WhoIsTyping.js +++ b/src/WhoIsTyping.js @@ -34,7 +34,8 @@ module.exports = { whoIsTypingString: function(room, limit) { const whoIsTyping = this.usersTypingApartFromMe(room); - const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0); + const othersCount = limit === undefined ? + 0 : Math.max(whoIsTyping.length - limit, 0); if (whoIsTyping.length == 0) { return ''; } else if (whoIsTyping.length == 1) { @@ -45,7 +46,8 @@ module.exports = { }); if (othersCount) { const other = ' other' + (othersCount > 1 ? 's' : ''); - return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing'; + return names.slice(0, limit).join(', ') + ' and ' + + othersCount + other + ' are typing'; } else { const lastPerson = names.pop(); return names.join(', ') + ' and ' + lastPerson + ' are typing'; diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 212d0d5ee6..3ba73bb181 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -88,7 +88,10 @@ module.exports = React.createClass({ getInitialState: function() { return { syncState: MatrixClientPeg.get().getSyncState(), - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), + whoisTypingString: WhoIsTyping.whoIsTypingString( + this.props.room, + this.props.whoIsTypingLimit + ), }; }, @@ -135,7 +138,10 @@ module.exports = React.createClass({ onRoomMemberTyping: function(ev, member) { this.setState({ - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), + whoisTypingString: WhoIsTyping.whoIsTypingString( + this.props.room, + this.props.whoIsTypingLimit + ), }); }, From 56cf7a6af7a9a86ae0cabd535e865ee672e536d7 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 15:54:05 +0000 Subject: [PATCH 33/52] Create a common BaseDialog I'm fed up with copying the boilerplate for modal dialogs the whole time. --- src/KeyCode.js | 1 + src/component-index.js | 2 + src/components/views/dialogs/BaseDialog.js | 72 +++++++++++++++++++ src/components/views/dialogs/ErrorDialog.js | 24 +++---- .../views/dialogs/InteractiveAuthDialog.js | 29 +++----- .../views/dialogs/NeedToRegisterDialog.js | 18 ++--- .../views/dialogs/QuestionDialog.js | 31 +++----- .../views/dialogs/SetDisplayNameDialog.js | 21 +++--- .../views/dialogs/TextInputDialog.js | 35 ++++----- 9 files changed, 136 insertions(+), 97 deletions(-) create mode 100644 src/components/views/dialogs/BaseDialog.js diff --git a/src/KeyCode.js b/src/KeyCode.js index bbe1ddcefa..c9cac01239 100644 --- a/src/KeyCode.js +++ b/src/KeyCode.js @@ -20,6 +20,7 @@ module.exports = { TAB: 9, ENTER: 13, SHIFT: 16, + ESCAPE: 27, PAGE_UP: 33, PAGE_DOWN: 34, END: 35, diff --git a/src/component-index.js b/src/component-index.js index e83de8739d..bdce944e28 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -71,6 +71,8 @@ import views$create_room$Presets from './components/views/create_room/Presets'; views$create_room$Presets && (module.exports.components['views.create_room.Presets'] = views$create_room$Presets); import views$create_room$RoomAlias from './components/views/create_room/RoomAlias'; views$create_room$RoomAlias && (module.exports.components['views.create_room.RoomAlias'] = views$create_room$RoomAlias); +import views$dialogs$BaseDialog from './components/views/dialogs/BaseDialog'; +views$dialogs$BaseDialog && (module.exports.components['views.dialogs.BaseDialog'] = views$dialogs$BaseDialog); import views$dialogs$ChatInviteDialog from './components/views/dialogs/ChatInviteDialog'; views$dialogs$ChatInviteDialog && (module.exports.components['views.dialogs.ChatInviteDialog'] = views$dialogs$ChatInviteDialog); import views$dialogs$DeactivateAccountDialog from './components/views/dialogs/DeactivateAccountDialog'; diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js new file mode 100644 index 0000000000..2b3980c536 --- /dev/null +++ b/src/components/views/dialogs/BaseDialog.js @@ -0,0 +1,72 @@ +/* +Copyright 2017 Vector Creations Ltd + +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 * as KeyCode from '../../../KeyCode'; + +/** + * Basic container for modal dialogs. + * + * Includes a div for the title, and a keypress handler which cancels the + * dialog on escape. + */ +export default React.createClass({ + displayName: 'BaseDialog', + + propTypes: { + // onFinished callback to call when Escape is pressed + onFinished: React.PropTypes.func.isRequired, + + // callback to call when Enter is pressed + onEnterPressed: React.PropTypes.func, + + // CSS class to apply to dialog div + className: React.PropTypes.string, + + // Title for the dialog. + // (could probably actually be something more complicated than a string if desired) + title: React.PropTypes.string.isRequired, + + // children should be the content of the dialog + children: React.PropTypes.node, + }, + + _onKeyDown: function(e) { + if (e.keyCode === KeyCode.ESCAPE) { + e.stopPropagation(); + e.preventDefault(); + this.props.onFinished(); + } else if (e.keyCode === KeyCode.ENTER) { + if (this.props.onEnterPressed) { + e.stopPropagation(); + e.preventDefault(); + this.props.onEnterPressed(e); + } + } + }, + + render: function() { + return ( +
+
+ { this.props.title } +
+ { this.props.children } +
+ ); + }, +}); diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js index ed48f10fd7..937595dfa8 100644 --- a/src/components/views/dialogs/ErrorDialog.js +++ b/src/components/views/dialogs/ErrorDialog.js @@ -25,9 +25,10 @@ limitations under the License. * }); */ -var React = require("react"); +import React from 'react'; +import sdk from '../../../index'; -module.exports = React.createClass({ +export default React.createClass({ displayName: 'ErrorDialog', propTypes: { title: React.PropTypes.string, @@ -49,20 +50,11 @@ module.exports = React.createClass({ }; }, - onKeyDown: function(e) { - if (e.keyCode === 27) { // escape - e.stopPropagation(); - e.preventDefault(); - this.props.onFinished(false); - } - }, - render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); return ( -
-
- {this.props.title} -
+
{this.props.description}
@@ -71,7 +63,7 @@ module.exports = React.createClass({ {this.props.button}
- + ); - } + }, }); diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js index 301bba0486..a4abbb17d9 100644 --- a/src/components/views/dialogs/InteractiveAuthDialog.js +++ b/src/components/views/dialogs/InteractiveAuthDialog.js @@ -111,20 +111,9 @@ export default React.createClass({ }); }, - _onKeyDown: function(e) { - if (e.keyCode === 27) { // escape - e.stopPropagation(); - e.preventDefault(); - if (!this.state.busy) { - this._onCancel(); - } - } - else if (e.keyCode === 13) { // enter - e.stopPropagation(); - e.preventDefault(); - if (this.state.submitButtonEnabled && !this.state.busy) { - this._onSubmit(); - } + _onEnterPressed: function(e) { + if (this.state.submitButtonEnabled && !this.state.busy) { + this._onSubmit(); } }, @@ -171,6 +160,7 @@ export default React.createClass({ render: function() { const Loader = sdk.getComponent("elements.Spinner"); + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); let error = null; if (this.state.errorText) { @@ -200,10 +190,11 @@ export default React.createClass({ ); return ( -
-
- {this.props.title} -
+

This operation requires additional authentication.

{this._renderCurrentStage()} @@ -213,7 +204,7 @@ export default React.createClass({ {submitButton} {cancelButton}
-
+ ); }, }); diff --git a/src/components/views/dialogs/NeedToRegisterDialog.js b/src/components/views/dialogs/NeedToRegisterDialog.js index 0080e0c643..f4df5913d5 100644 --- a/src/components/views/dialogs/NeedToRegisterDialog.js +++ b/src/components/views/dialogs/NeedToRegisterDialog.js @@ -23,8 +23,9 @@ limitations under the License. * }); */ -var React = require("react"); -var dis = require("../../../dispatcher"); +import React from 'react'; +import dis from '../../../dispatcher'; +import sdk from '../../../index'; module.exports = React.createClass({ displayName: 'NeedToRegisterDialog', @@ -54,11 +55,12 @@ module.exports = React.createClass({ }, render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); return ( -
-
- {this.props.title} -
+
{this.props.description}
@@ -70,7 +72,7 @@ module.exports = React.createClass({ Register
- + ); - } + }, }); diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js index 1cd4d047fd..3f7f237c30 100644 --- a/src/components/views/dialogs/QuestionDialog.js +++ b/src/components/views/dialogs/QuestionDialog.js @@ -14,9 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -var React = require("react"); +import React from 'react'; +import sdk from '../../../index'; -module.exports = React.createClass({ +export default React.createClass({ displayName: 'QuestionDialog', propTypes: { title: React.PropTypes.string, @@ -46,25 +47,13 @@ module.exports = React.createClass({ this.props.onFinished(false); }, - onKeyDown: function(e) { - if (e.keyCode === 27) { // escape - e.stopPropagation(); - e.preventDefault(); - this.props.onFinished(false); - } - else if (e.keyCode === 13) { // enter - e.stopPropagation(); - e.preventDefault(); - this.props.onFinished(true); - } - }, - render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); return ( -
-
- {this.props.title} -
+
{this.props.description}
@@ -77,7 +66,7 @@ module.exports = React.createClass({ Cancel
- + ); - } + }, }); diff --git a/src/components/views/dialogs/SetDisplayNameDialog.js b/src/components/views/dialogs/SetDisplayNameDialog.js index c1041cc218..9e44671e4a 100644 --- a/src/components/views/dialogs/SetDisplayNameDialog.js +++ b/src/components/views/dialogs/SetDisplayNameDialog.js @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -var React = require("react"); -var sdk = require("../../../index.js"); -var MatrixClientPeg = require("../../../MatrixClientPeg"); +import React from 'react'; +import sdk from '../../../index'; +import MatrixClientPeg from '../../../MatrixClientPeg'; -module.exports = React.createClass({ +export default React.createClass({ displayName: 'SetDisplayNameDialog', propTypes: { onFinished: React.PropTypes.func.isRequired, @@ -59,11 +59,12 @@ module.exports = React.createClass({ }, render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); return ( -
-
- Set a Display Name -
+
Your display name is how you'll appear to others when you speak in rooms.
What would you like it to be? @@ -79,7 +80,7 @@ module.exports = React.createClass({
-
+ ); - } + }, }); diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js index 6245b5786f..6e40efffd8 100644 --- a/src/components/views/dialogs/TextInputDialog.js +++ b/src/components/views/dialogs/TextInputDialog.js @@ -14,9 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -var React = require("react"); +import React from 'react'; +import sdk from '../../../index'; -module.exports = React.createClass({ +export default React.createClass({ displayName: 'TextInputDialog', propTypes: { title: React.PropTypes.string, @@ -27,7 +28,7 @@ module.exports = React.createClass({ value: React.PropTypes.string, button: React.PropTypes.string, focus: React.PropTypes.bool, - onFinished: React.PropTypes.func.isRequired + onFinished: React.PropTypes.func.isRequired, }, getDefaultProps: function() { @@ -36,7 +37,7 @@ module.exports = React.createClass({ value: "", description: "", button: "OK", - focus: true + focus: true, }; }, @@ -55,25 +56,13 @@ module.exports = React.createClass({ this.props.onFinished(false); }, - onKeyDown: function(e) { - if (e.keyCode === 27) { // escape - e.stopPropagation(); - e.preventDefault(); - this.props.onFinished(false); - } - else if (e.keyCode === 13) { // enter - e.stopPropagation(); - e.preventDefault(); - this.props.onFinished(true, this.refs.textinput.value); - } - }, - render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); return ( -
-
- {this.props.title} -
+
@@ -90,7 +79,7 @@ module.exports = React.createClass({ {this.props.button}
-
+ ); - } + }, }); From 72492fd909bca2691fe7f21763aab64c571982f5 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 20:55:10 +0000 Subject: [PATCH 34/52] Fix broken merge I messed up the merge in 6dd46d5. --- src/components/views/rooms/RoomHeader.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 0593ba16e9..812dd8c79c 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -302,11 +302,7 @@ module.exports = React.createClass({ rightPanel_buttons = -<<<<<<< HEAD - -======= -
; ->>>>>>> origin/develop + ; } var right_row; From 86276450f64c41ffd8d71bc14a758be0c4b19e37 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 21:27:57 +0000 Subject: [PATCH 35/52] Add AccessibleButton to component-index --- src/component-index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/component-index.js b/src/component-index.js index e83de8739d..3b9cf0a80e 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -89,6 +89,8 @@ import views$dialogs$SetDisplayNameDialog from './components/views/dialogs/SetDi views$dialogs$SetDisplayNameDialog && (module.exports.components['views.dialogs.SetDisplayNameDialog'] = views$dialogs$SetDisplayNameDialog); import views$dialogs$TextInputDialog from './components/views/dialogs/TextInputDialog'; views$dialogs$TextInputDialog && (module.exports.components['views.dialogs.TextInputDialog'] = views$dialogs$TextInputDialog); +import views$elements$AccessibleButton from './components/views/elements/AccessibleButton'; +views$elements$AccessibleButton && (module.exports.components['views.elements.AccessibleButton'] = views$elements$AccessibleButton); import views$elements$AddressSelector from './components/views/elements/AddressSelector'; views$elements$AddressSelector && (module.exports.components['views.elements.AddressSelector'] = views$elements$AddressSelector); import views$elements$AddressTile from './components/views/elements/AddressTile'; From 5b61d00533a1b73ad0e2f634a3a13bf98630d9a7 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 24 Jan 2017 22:36:55 +0100 Subject: [PATCH 36/52] warn users that changing/resetting password will nuke E2E keys --- .../structures/login/ForgotPassword.js | 24 +++++++-- .../views/settings/ChangePassword.js | 53 ++++++++++++------- 2 files changed, 55 insertions(+), 22 deletions(-) diff --git a/src/components/structures/login/ForgotPassword.js b/src/components/structures/login/ForgotPassword.js index 5037136b1d..2c10052b98 100644 --- a/src/components/structures/login/ForgotPassword.js +++ b/src/components/structures/login/ForgotPassword.js @@ -87,10 +87,26 @@ module.exports = React.createClass({ this.showErrorDialog("New passwords must match each other."); } else { - this.submitPasswordReset( - this.state.enteredHomeserverUrl, this.state.enteredIdentityServerUrl, - this.state.email, this.state.password - ); + var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + Modal.createDialog(QuestionDialog, { + title: "Warning", + description: + , + button: "Continue", + onFinished: (confirmed) => { + if (confirmed) { + this.submitPasswordReset( + this.state.enteredHomeserverUrl, this.state.enteredIdentityServerUrl, + this.state.email, this.state.password + ); + } + }, + }); } }, diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js index a011d5262e..8a3c46bcfd 100644 --- a/src/components/views/settings/ChangePassword.js +++ b/src/components/views/settings/ChangePassword.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); var MatrixClientPeg = require("../../../MatrixClientPeg"); +var Modal = require("../../../Modal"); var sdk = require("../../../index"); module.exports = React.createClass({ @@ -65,26 +66,42 @@ module.exports = React.createClass({ changePassword: function(old_password, new_password) { var cli = MatrixClientPeg.get(); - var authDict = { - type: 'm.login.password', - user: cli.credentials.userId, - password: old_password - }; + var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + Modal.createDialog(QuestionDialog, { + title: "Warning", + description: +
+ Changing password will currently reset any end-to-end encryption keys on all devices, + making encrypted chat history unreadable. + This will be improved shortly, + but for now be warned. +
, + button: "Continue", + onFinished: (confirmed) => { + if (confirmed) { + var authDict = { + type: 'm.login.password', + user: cli.credentials.userId, + password: old_password + }; - this.setState({ - phase: this.Phases.Uploading + this.setState({ + phase: this.Phases.Uploading + }); + + var self = this; + cli.setPassword(authDict, new_password).then(function() { + self.props.onFinished(); + }, function(err) { + self.props.onError(err); + }).finally(function() { + self.setState({ + phase: self.Phases.Edit + }); + }).done(); + } + }, }); - - var self = this; - cli.setPassword(authDict, new_password).then(function() { - self.props.onFinished(); - }, function(err) { - self.props.onError(err); - }).finally(function() { - self.setState({ - phase: self.Phases.Edit - }); - }).done(); }, onClickChange: function() { From b148619c527b4ee416b6e886846841d692a816ca Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 24 Jan 2017 22:47:03 +0100 Subject: [PATCH 37/52] warn on logout too --- src/Lifecycle.js | 43 ++++++++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/src/Lifecycle.js b/src/Lifecycle.js index 493bbf12aa..64d22bd04c 100644 --- a/src/Lifecycle.js +++ b/src/Lifecycle.js @@ -22,6 +22,7 @@ import Notifier from './Notifier'; import UserActivity from './UserActivity'; import Presence from './Presence'; import dis from './dispatcher'; +import Modal from './Modal'; import DMRoomMap from './utils/DMRoomMap'; /** @@ -289,19 +290,35 @@ export function logout() { return; } - return MatrixClientPeg.get().logout().then(onLoggedOut, - (err) => { - // Just throwing an error here is going to be very unhelpful - // if you're trying to log out because your server's down and - // you want to log into a different server, so just forget the - // access token. It's annoying that this will leave the access - // token still valid, but we should fix this by having access - // tokens expire (and if you really think you've been compromised, - // change your password). - console.log("Failed to call logout API: token will not be invalidated"); - onLoggedOut(); - } - ); + var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + Modal.createDialog(QuestionDialog, { + title: "Warning", + description: +
+ For security, logging out will delete any end-to-end encryption keys from this browser, + making previous encrypted chat history unreadable if you log back in. + In future this will be improved, + but for now be warned. +
, + button: "Continue", + onFinished: (confirmed) => { + if (confirmed) { + MatrixClientPeg.get().logout().then(onLoggedOut, + (err) => { + // Just throwing an error here is going to be very unhelpful + // if you're trying to log out because your server's down and + // you want to log into a different server, so just forget the + // access token. It's annoying that this will leave the access + // token still valid, but we should fix this by having access + // tokens expire (and if you really think you've been compromised, + // change your password). + console.log("Failed to call logout API: token will not be invalidated"); + onLoggedOut(); + } + ); + } + }, + }); } /** From e23deac1bb52d644c5b40149943685b92c321d04 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Fri, 20 Jan 2017 15:12:50 +0000 Subject: [PATCH 38/52] Implement e2e export --- package.json | 3 +- .../views/dialogs/ExportE2eKeysDialog.js | 175 +++++++++++++----- src/components/structures/UserSettings.js | 21 +++ src/index.js | 16 +- 4 files changed, 156 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index 0a8c09f984..dabac0a060 100644 --- a/package.json +++ b/package.json @@ -47,10 +47,12 @@ "browser-encrypt-attachment": "^0.3.0", "browser-request": "^0.3.3", "classnames": "^2.1.2", + "commonmark": "^0.27.0", "draft-js": "^0.8.1", "draft-js-export-html": "^0.5.0", "draft-js-export-markdown": "^0.2.0", "emojione": "2.2.3", + "file-saver": "^1.3.3", "filesize": "^3.1.2", "flux": "^2.0.3", "fuse.js": "^2.2.0", @@ -59,7 +61,6 @@ "isomorphic-fetch": "^2.2.1", "linkifyjs": "^2.1.3", "lodash": "^4.13.1", - "commonmark": "^0.27.0", "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop", "optimist": "^0.6.1", "q": "^1.4.1", diff --git a/src/async-components/views/dialogs/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/ExportE2eKeysDialog.js index 284d299f4b..816b8eb73d 100644 --- a/src/async-components/views/dialogs/ExportE2eKeysDialog.js +++ b/src/async-components/views/dialogs/ExportE2eKeysDialog.js @@ -14,71 +14,158 @@ See the License for the specific language governing permissions and limitations under the License. */ +import FileSaver from 'file-saver'; import React from 'react'; +import * as Matrix from 'matrix-js-sdk'; +import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption'; import sdk from '../../../index'; -import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption'; +const PHASE_EDIT = 1; +const PHASE_EXPORTING = 2; export default React.createClass({ displayName: 'ExportE2eKeysDialog', + propTypes: { + matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired, + onFinished: React.PropTypes.func.isRequired, + }, + getInitialState: function() { return { - collectedPassword: false, + phase: PHASE_EDIT, + errStr: null, }; }, + componentWillMount: function() { + this._unmounted = false; + }, + + componentWillUnmount: function() { + this._unmounted = true; + }, + _onPassphraseFormSubmit: function(ev) { ev.preventDefault(); - console.log(this.refs.passphrase1.value); + + const passphrase = this.refs.passphrase1.value; + if (passphrase !== this.refs.passphrase2.value) { + this.setState({errStr: 'Passphrases must match'}); + return false; + } + if (!passphrase) { + this.setState({errStr: 'Passphrase must not be empty'}); + return false; + } + + this._startExport(passphrase); return false; }, - render: function() { - let content; - if (!this.state.collectedPassword) { - content = ( -
-

- This process will allow you to export the keys for messages - you have received in encrypted rooms to a local file. You - will then be able to import the file into another Matrix - client in the future, so that client will also be able to - decrypt these messages. -

-

- The exported file will allow anyone who can read it to decrypt - any encrypted messages that you can see, so you should be - careful to keep it secure. To help with this, you should enter - a passphrase below, which will be used to encrypt the exported - data. It will only be possible to import the data by using the - same passphrase. -

-
-
- -
-
- -
-
- -
-
-
+ _startExport: function(passphrase) { + // extra Promise.resolve() to turn synchronous exceptions into + // asynchronous ones. + Promise.resolve().then(() => { + return this.props.matrixClient.exportRoomKeys(); + }).then((k) => { + return MegolmExportEncryption.encryptMegolmKeyFile( + JSON.stringify(k), passphrase ); - } + }).then((f) => { + const blob = new Blob([f], { + type: 'text/plain;charset=us-ascii', + }); + FileSaver.saveAs(blob, 'riot-keys.txt'); + this.props.onFinished(true); + }).catch((e) => { + if (this._unmounted) { + return; + } + this.setState({ + errStr: e.message, + phase: PHASE_EDIT, + }); + }); + + this.setState({ + errStr: null, + phase: PHASE_EXPORTING, + }); + }, + + render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton'); + + const disableForm = (this.state.phase === PHASE_EXPORTING); return ( -
-
- Export room keys -
- {content} -
+ +
+
+

+ This process allows you to export the keys for messages + you have received in encrypted rooms to a local file. You + will then be able to import the file into another Matrix + client in the future, so that client will also be able to + decrypt these messages. +

+

+ The exported file will allow anyone who can read it to decrypt + any encrypted messages that you can see, so you should be + careful to keep it secure. To help with this, you should enter + a passphrase below, which will be used to encrypt the exported + data. It will only be possible to import the data by using the + same passphrase. +

+
+ {this.state.errStr} +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ + + Cancel + +
+
+ ); }, }); diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index ba5ab49bbc..6edf572f6c 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -393,6 +393,16 @@ module.exports = React.createClass({ }).done(); }, + _onExportE2eKeysClicked: function() { + Modal.createDialogAsync( + (cb) => { + require(['../../async-components/views/dialogs/ExportE2eKeysDialog'], cb); + }, { + matrixClient: MatrixClientPeg.get(), + } + ); + }, + _renderUserInterfaceSettings: function() { var client = MatrixClientPeg.get(); @@ -463,6 +473,16 @@ module.exports = React.createClass({ const deviceId = client.deviceId; const identityKey = client.getDeviceEd25519Key() || ""; + let exportButton = null; + + if (client.isCryptoEnabled) { + exportButton = ( + + Export E2E room keys + + ); + } return (

Cryptography

@@ -471,6 +491,7 @@ module.exports = React.createClass({
  • {deviceId}
  • {identityKey}
    • + {exportButton}
    ); diff --git a/src/index.js b/src/index.js index 5d4145a39b..0e3e90aed6 100644 --- a/src/index.js +++ b/src/index.js @@ -29,20 +29,7 @@ module.exports.getComponent = function(componentName) { }; -/* hacky functions for megolm import/export until we give it a UI */ -import * as MegolmExportEncryption from './utils/MegolmExportEncryption'; -import MatrixClientPeg from './MatrixClientPeg'; - -window.exportKeys = function(password) { - return MatrixClientPeg.get().exportRoomKeys().then((k) => { - return MegolmExportEncryption.encryptMegolmKeyFile( - JSON.stringify(k), password - ); - }).then((f) => { - console.log(new TextDecoder().decode(new Uint8Array(f))); - }).done(); -}; - +/* window.importKeys = function(password, data) { const arrayBuffer = new TextEncoder().encode(data).buffer; return MegolmExportEncryption.decryptMegolmKeyFile( @@ -52,3 +39,4 @@ window.importKeys = function(password, data) { return MatrixClientPeg.get().importRoomKeys(k); }); }; +*/ From b85f53cadd6e6d3c97feefe8b54e11d3f62f4130 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 15:57:42 +0000 Subject: [PATCH 39/52] Implement Megolm key importing --- .../views/dialogs/ImportE2eKeysDialog.js | 170 ++++++++++++++++++ src/components/structures/UserSettings.js | 26 ++- src/index.js | 13 -- 3 files changed, 194 insertions(+), 15 deletions(-) create mode 100644 src/async-components/views/dialogs/ImportE2eKeysDialog.js diff --git a/src/async-components/views/dialogs/ImportE2eKeysDialog.js b/src/async-components/views/dialogs/ImportE2eKeysDialog.js new file mode 100644 index 0000000000..586bd9b6cc --- /dev/null +++ b/src/async-components/views/dialogs/ImportE2eKeysDialog.js @@ -0,0 +1,170 @@ +/* +Copyright 2017 Vector Creations Ltd + +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 * as Matrix from 'matrix-js-sdk'; +import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption'; +import sdk from '../../../index'; + +function readFileAsArrayBuffer(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = (e) => { + resolve(e.target.result); + }; + reader.onerror = reject; + + reader.readAsArrayBuffer(file); + }); +} + +const PHASE_EDIT = 1; +const PHASE_IMPORTING = 2; + +export default React.createClass({ + displayName: 'ImportE2eKeysDialog', + + propTypes: { + matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired, + onFinished: React.PropTypes.func.isRequired, + }, + + getInitialState: function() { + return { + enableSubmit: false, + phase: PHASE_EDIT, + errStr: null, + }; + }, + + componentWillMount: function() { + this._unmounted = false; + }, + + componentWillUnmount: function() { + this._unmounted = true; + }, + + _onFormChange: function(ev) { + const files = this.refs.file.files || []; + this.setState({ + enableSubmit: (this.refs.passphrase.value !== "" && files.length > 0), + }); + }, + + _onFormSubmit: function(ev) { + ev.preventDefault(); + this._startImport(this.refs.file.files[0], this.refs.passphrase.value); + return false; + }, + + _startImport: function(file, passphrase) { + this.setState({ + errStr: null, + phase: PHASE_IMPORTING, + }); + + return readFileAsArrayBuffer(file).then((arrayBuffer) => { + return MegolmExportEncryption.decryptMegolmKeyFile( + arrayBuffer, passphrase + ); + }).then((keys) => { + return this.props.matrixClient.importRoomKeys(JSON.parse(keys)); + }).then(() => { + // TODO: it would probably be nice to give some feedback about what we've imported here. + this.props.onFinished(true); + }).catch((e) => { + if (this._unmounted) { + return; + } + this.setState({ + errStr: e.message, + phase: PHASE_EDIT, + }); + }); + }, + + render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton'); + + const disableForm = (this.state.phase !== PHASE_EDIT); + + return ( + +
    +
    +

    + This process allows you to import encryption keys + that you had previously exported from another Matrix + client. You will then be able to decrypt any + messages that the other client could decrypt. +

    +

    + The export file will be protected with a passphrase. + You should enter the passphrase here, to decrypt the + file. +

    +
    + {this.state.errStr} +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + + Cancel + +
    +
    +     + ); + }, +}); diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index 6edf572f6c..d64f0383f6 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -396,7 +396,21 @@ module.exports = React.createClass({ _onExportE2eKeysClicked: function() { Modal.createDialogAsync( (cb) => { - require(['../../async-components/views/dialogs/ExportE2eKeysDialog'], cb); + require.ensure(['../../async-components/views/dialogs/ExportE2eKeysDialog'], () => { + cb(require('../../async-components/views/dialogs/ExportE2eKeysDialog')); + }, "e2e-export"); + }, { + matrixClient: MatrixClientPeg.get(), + } + ); + }, + + _onImportE2eKeysClicked: function() { + Modal.createDialogAsync( + (cb) => { + require.ensure(['../../async-components/views/dialogs/ImportE2eKeysDialog'], () => { + cb(require('../../async-components/views/dialogs/ImportE2eKeysDialog')); + }, "e2e-export"); }, { matrixClient: MatrixClientPeg.get(), } @@ -473,7 +487,8 @@ module.exports = React.createClass({ const deviceId = client.deviceId; const identityKey = client.getDeviceEd25519Key() || ""; - let exportButton = null; + let exportButton = null, + importButton = null; if (client.isCryptoEnabled) { exportButton = ( @@ -482,6 +497,12 @@ module.exports = React.createClass({ Export E2E room keys ); + importButton = ( + + Import E2E room keys + + ); } return (
    @@ -492,6 +513,7 @@ module.exports = React.createClass({
  • {identityKey}
    • {exportButton} + {importButton}
    ); diff --git a/src/index.js b/src/index.js index 0e3e90aed6..b6d8c0b5f4 100644 --- a/src/index.js +++ b/src/index.js @@ -27,16 +27,3 @@ module.exports.resetSkin = function() { module.exports.getComponent = function(componentName) { return Skinner.getComponent(componentName); }; - - -/* -window.importKeys = function(password, data) { - const arrayBuffer = new TextEncoder().encode(data).buffer; - return MegolmExportEncryption.decryptMegolmKeyFile( - arrayBuffer, password - ).then((j) => { - const k = JSON.parse(j); - return MatrixClientPeg.get().importRoomKeys(k); - }); -}; -*/ From 6e55bb4956cd0e5d62352970f3f9ba892bd6b7fb Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 24 Jan 2017 23:15:00 +0100 Subject: [PATCH 40/52] actually, move signout warning to UserSettings.js also, kill off the inexplicably useless LogoutPrompt in favour of a normal QuestionDialog. This in turn fixes https://github.com/vector-im/riot-web/issues/2152 --- src/components/views/dialogs/LogoutPrompt.js | 61 -------------------- 1 file changed, 61 deletions(-) delete mode 100644 src/components/views/dialogs/LogoutPrompt.js diff --git a/src/components/views/dialogs/LogoutPrompt.js b/src/components/views/dialogs/LogoutPrompt.js deleted file mode 100644 index c4bd7a0474..0000000000 --- a/src/components/views/dialogs/LogoutPrompt.js +++ /dev/null @@ -1,61 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -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. -*/ -var React = require('react'); -var dis = require("../../../dispatcher"); - -module.exports = React.createClass({ - displayName: 'LogoutPrompt', - - propTypes: { - onFinished: React.PropTypes.func, - }, - - logOut: function() { - dis.dispatch({action: 'logout'}); - if (this.props.onFinished) { - this.props.onFinished(); - } - }, - - cancelPrompt: function() { - if (this.props.onFinished) { - this.props.onFinished(); - } - }, - - onKeyDown: function(e) { - if (e.keyCode === 27) { // escape - e.stopPropagation(); - e.preventDefault(); - this.cancelPrompt(); - } - }, - - render: function() { - return ( -
    -
    - Sign out? -
    -
    - - -
    -
    - ); - } -}); - From 6a40abbbf063638e1008090a39e4735c9964a754 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 24 Jan 2017 23:18:25 +0100 Subject: [PATCH 41/52] actually, move signout warning to UserSettings.js also, kill off the inexplicably useless LogoutPrompt in favour of a normal QuestionDialog. This in turn fixes https://github.com/vector-im/riot-web/issues/2152 --- src/Lifecycle.js | 43 +++++++---------------- src/component-index.js | 2 -- src/components/structures/UserSettings.js | 22 ++++++++++-- 3 files changed, 33 insertions(+), 34 deletions(-) diff --git a/src/Lifecycle.js b/src/Lifecycle.js index 64d22bd04c..493bbf12aa 100644 --- a/src/Lifecycle.js +++ b/src/Lifecycle.js @@ -22,7 +22,6 @@ import Notifier from './Notifier'; import UserActivity from './UserActivity'; import Presence from './Presence'; import dis from './dispatcher'; -import Modal from './Modal'; import DMRoomMap from './utils/DMRoomMap'; /** @@ -290,35 +289,19 @@ export function logout() { return; } - var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); - Modal.createDialog(QuestionDialog, { - title: "Warning", - description: -
    - For security, logging out will delete any end-to-end encryption keys from this browser, - making previous encrypted chat history unreadable if you log back in. - In future this will be improved, - but for now be warned. -
    , - button: "Continue", - onFinished: (confirmed) => { - if (confirmed) { - MatrixClientPeg.get().logout().then(onLoggedOut, - (err) => { - // Just throwing an error here is going to be very unhelpful - // if you're trying to log out because your server's down and - // you want to log into a different server, so just forget the - // access token. It's annoying that this will leave the access - // token still valid, but we should fix this by having access - // tokens expire (and if you really think you've been compromised, - // change your password). - console.log("Failed to call logout API: token will not be invalidated"); - onLoggedOut(); - } - ); - } - }, - }); + return MatrixClientPeg.get().logout().then(onLoggedOut, + (err) => { + // Just throwing an error here is going to be very unhelpful + // if you're trying to log out because your server's down and + // you want to log into a different server, so just forget the + // access token. It's annoying that this will leave the access + // token still valid, but we should fix this by having access + // tokens expire (and if you really think you've been compromised, + // change your password). + console.log("Failed to call logout API: token will not be invalidated"); + onLoggedOut(); + } + ); } /** diff --git a/src/component-index.js b/src/component-index.js index e83de8739d..99882e784f 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -79,8 +79,6 @@ import views$dialogs$ErrorDialog from './components/views/dialogs/ErrorDialog'; views$dialogs$ErrorDialog && (module.exports.components['views.dialogs.ErrorDialog'] = views$dialogs$ErrorDialog); import views$dialogs$InteractiveAuthDialog from './components/views/dialogs/InteractiveAuthDialog'; views$dialogs$InteractiveAuthDialog && (module.exports.components['views.dialogs.InteractiveAuthDialog'] = views$dialogs$InteractiveAuthDialog); -import views$dialogs$LogoutPrompt from './components/views/dialogs/LogoutPrompt'; -views$dialogs$LogoutPrompt && (module.exports.components['views.dialogs.LogoutPrompt'] = views$dialogs$LogoutPrompt); import views$dialogs$NeedToRegisterDialog from './components/views/dialogs/NeedToRegisterDialog'; views$dialogs$NeedToRegisterDialog && (module.exports.components['views.dialogs.NeedToRegisterDialog'] = views$dialogs$NeedToRegisterDialog); import views$dialogs$QuestionDialog from './components/views/dialogs/QuestionDialog'; diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index 4a1332be8c..0231bc5038 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -228,8 +228,26 @@ module.exports = React.createClass({ }, onLogoutClicked: function(ev) { - var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt'); - this.logoutModal = Modal.createDialog(LogoutPrompt); + var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + Modal.createDialog(QuestionDialog, { + title: "Sign out?", + description: +
    + For security, logging out will delete any end-to-end encryption keys from this browser, + making previous encrypted chat history unreadable if you log back in. + In future this will be improved, + but for now be warned. +
    , + button: "Sign out", + onFinished: (confirmed) => { + if (confirmed) { + dis.dispatch({action: 'logout'}); + if (this.props.onFinished) { + this.props.onFinished(); + } + } + }, + }); }, onPasswordChangeError: function(err) { From 770820e6faca38a8e2d57c9655a4c4a38273e85f Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 22:41:52 +0000 Subject: [PATCH 42/52] Fix a bunch of lint complaints --- .eslintignore | 1 + src/components/structures/UserSettings.js | 2 +- src/components/views/avatars/BaseAvatar.js | 2 +- .../views/dialogs/ChatInviteDialog.js | 5 +-- .../views/elements/AccessibleButton.js | 12 ++++--- src/components/views/rooms/EntityTile.js | 2 +- src/components/views/rooms/MemberInfo.js | 33 ++++++++++++------- src/components/views/rooms/RoomHeader.js | 2 +- src/components/views/rooms/RoomTile.js | 2 +- .../views/rooms/SimpleRoomHeader.js | 2 +- .../views/settings/ChangePassword.js | 5 +-- 11 files changed, 43 insertions(+), 25 deletions(-) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..c4c7fe5067 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +src/component-index.js diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index ba5ab49bbc..ca37a9b179 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -26,7 +26,7 @@ var UserSettingsStore = require('../../UserSettingsStore'); var GeminiScrollbar = require('react-gemini-scrollbar'); var Email = require('../../email'); var AddThreepid = require('../../AddThreepid'); -var AccessibleButton = require('../views/elements/AccessibleButton'); +import AccessibleButton from '../views/elements/AccessibleButton'; // if this looks like a release, use the 'version' from package.json; else use // the git sha. diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index a2ad5ee6dc..c9c84aa1bf 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/src/components/views/avatars/BaseAvatar.js @@ -19,7 +19,7 @@ limitations under the License. var React = require('react'); var AvatarLogic = require("../../../Avatar"); import sdk from '../../../index'; -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; module.exports = React.createClass({ displayName: 'BaseAvatar', diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js index 47d343b599..2f17445263 100644 --- a/src/components/views/dialogs/ChatInviteDialog.js +++ b/src/components/views/dialogs/ChatInviteDialog.js @@ -24,7 +24,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap'); var rate_limited_func = require("../../../ratelimitedfunc"); var dis = require("../../../dispatcher"); var Modal = require('../../../Modal'); -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; const TRUNCATE_QUERY_LIST = 40; @@ -437,7 +437,8 @@ module.exports = React.createClass({
    {this.props.title}
    - +
    diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js index 3ff5d7a38a..ffea8e1ba7 100644 --- a/src/components/views/elements/AccessibleButton.js +++ b/src/components/views/elements/AccessibleButton.js @@ -17,8 +17,12 @@ import React from 'react'; /** - * AccessibleButton is a generic wrapper for any element that should be treated as a button. - * Identifies the element as a button, setting proper tab indexing and keyboard activation behavior. + * AccessibleButton is a generic wrapper for any element that should be treated + * as a button. Identifies the element as a button, setting proper tab + * indexing and keyboard activation behavior. + * + * @param {Object} props react element properties + * @returns {Object} rendered react */ export default function AccessibleButton(props) { const {element, onClick, children, ...restProps} = props; @@ -26,7 +30,7 @@ export default function AccessibleButton(props) { restProps.onKeyDown = function(e) { if (e.keyCode == 13 || e.keyCode == 32) return onClick(); }; - restProps.tabIndex = restProps.tabIndex || "0"; + restProps.tabIndex = restProps.tabIndex || "0"; restProps.role = "button"; return React.createElement(element, restProps, children); } @@ -44,7 +48,7 @@ AccessibleButton.propTypes = { }; AccessibleButton.defaultProps = { - element: 'div' + element: 'div', }; AccessibleButton.displayName = "AccessibleButton"; diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index 64de431d9d..71e8fb0be7 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -20,7 +20,7 @@ var React = require('react'); var MatrixClientPeg = require('../../../MatrixClientPeg'); var sdk = require('../../../index'); -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; var PRESENCE_CLASS = { diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index b616624822..d33b8f3524 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -35,7 +35,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap'); var Unread = require('../../../Unread'); var Receipt = require('../../../utils/Receipt'); var WithMatrixClient = require('../../../wrappers/WithMatrixClient'); -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; module.exports = WithMatrixClient(React.createClass({ displayName: 'MemberInfo', @@ -636,20 +636,31 @@ module.exports = WithMatrixClient(React.createClass({ } if (this.state.can.kick) { - kickButton = - { this.props.member.membership === "invite" ? "Disinvite" : "Kick" } - ; + const membership = this.props.member.membership; + const kickLabel = membership === "invite" ? "Disinvite" : "Kick"; + kickButton = ( + + {kickLabel} + + ); } if (this.state.can.ban) { - banButton = - Ban - ; + banButton = ( + + Ban + + ); } if (this.state.can.mute) { - var muteLabel = this.state.muted ? "Unmute" : "Mute"; - muteButton = - {muteLabel} - ; + const muteLabel = this.state.muted ? "Unmute" : "Mute"; + muteButton = ( + + {muteLabel} + + ); } if (this.state.can.toggleMod) { var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator"; diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 812dd8c79c..fa0c63dfdd 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -26,7 +26,7 @@ var rate_limited_func = require('../../../ratelimitedfunc'); var linkify = require('linkifyjs'); var linkifyElement = require('linkifyjs/element'); var linkifyMatrix = require('../../../linkify-matrix'); -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; linkifyMatrix(linkify); diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 4a40cf058f..f6c0f7034e 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -26,7 +26,7 @@ var sdk = require('../../../index'); var ContextualMenu = require('../../structures/ContextualMenu'); var RoomNotifs = require('../../../RoomNotifs'); var FormattingUtils = require('../../../utils/FormattingUtils'); -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; var UserSettingsStore = require('../../../UserSettingsStore'); module.exports = React.createClass({ diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js index cabd0f27a4..bc2f4bca69 100644 --- a/src/components/views/rooms/SimpleRoomHeader.js +++ b/src/components/views/rooms/SimpleRoomHeader.js @@ -19,7 +19,7 @@ limitations under the License. var React = require('react'); var sdk = require('../../../index'); var dis = require("../../../dispatcher"); -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; /* * A stripped-down room header used for things like the user settings diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js index 2bbf5420c0..5cd689ae44 100644 --- a/src/components/views/settings/ChangePassword.js +++ b/src/components/views/settings/ChangePassword.js @@ -19,7 +19,7 @@ limitations under the License. var React = require('react'); var MatrixClientPeg = require("../../../MatrixClientPeg"); var sdk = require("../../../index"); -var AccessibleButton = require('../elements/AccessibleButton'); +import AccessibleButton from '../elements/AccessibleButton'; module.exports = React.createClass({ displayName: 'ChangePassword', @@ -137,7 +137,8 @@ module.exports = React.createClass({
    - + Change Password From 29b4dde8781d390509716a2cc60347e833ffb028 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 25 Jan 2017 08:01:45 +0000 Subject: [PATCH 43/52] Fix SetDisplayNameDialog SetDisplayNameDialog got broken by the changes to support asynchronous loading of dialogs. Rather than poking into its internals via a ref, make it return its result via onFinished. Fixes https://github.com/vector-im/riot-web/issues/3047 --- src/components/structures/RoomView.js | 8 ++------ src/components/views/dialogs/SetDisplayNameDialog.js | 12 +++++++----- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 8753540e48..299d2fa850 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -722,15 +722,11 @@ module.exports = React.createClass({ if (!result.displayname) { var SetDisplayNameDialog = sdk.getComponent('views.dialogs.SetDisplayNameDialog'); var dialog_defer = q.defer(); - var dialog_ref; Modal.createDialog(SetDisplayNameDialog, { currentDisplayName: result.displayname, - ref: (r) => { - dialog_ref = r; - }, - onFinished: (submitted) => { + onFinished: (submitted, newDisplayName) => { if (submitted) { - cli.setDisplayName(dialog_ref.getValue()).done(() => { + cli.setDisplayName(newDisplayName).done(() => { dialog_defer.resolve(); }); } diff --git a/src/components/views/dialogs/SetDisplayNameDialog.js b/src/components/views/dialogs/SetDisplayNameDialog.js index c1041cc218..18e6b66bff 100644 --- a/src/components/views/dialogs/SetDisplayNameDialog.js +++ b/src/components/views/dialogs/SetDisplayNameDialog.js @@ -18,6 +18,12 @@ var React = require("react"); var sdk = require("../../../index.js"); var MatrixClientPeg = require("../../../MatrixClientPeg"); + +/** + * Prompt the user to set a display name. + * + * On success, `onFinished(true, newDisplayName)` is called. + */ module.exports = React.createClass({ displayName: 'SetDisplayNameDialog', propTypes: { @@ -42,10 +48,6 @@ module.exports = React.createClass({ this.refs.input_value.select(); }, - getValue: function() { - return this.state.value; - }, - onValueChange: function(ev) { this.setState({ value: ev.target.value @@ -54,7 +56,7 @@ module.exports = React.createClass({ onFormSubmit: function(ev) { ev.preventDefault(); - this.props.onFinished(true); + this.props.onFinished(true, this.state.value); return false; }, From e9719b1766f304d9f8acc9ff0bea51c343e6ec50 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 09:12:29 +0000 Subject: [PATCH 44/52] Get rid of .only --- test/components/views/elements/MemberEventListSummary-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index 7094520f7b..8979c87c3a 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -8,7 +8,7 @@ const jssdk = require('matrix-js-sdk'); const MatrixEvent = jssdk.MatrixEvent; const testUtils = require('../../../test-utils'); -describe.only('MemberEventListSummary', function() { +describe('MemberEventListSummary', function() { let sandbox; // Generate dummy event tiles for use in simulating an expanded MELS From 3b8b2cf50086e298e964bd5c4d545a27f6533b89 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 09:18:47 +0000 Subject: [PATCH 45/52] Document _getCanonicalTransitions --- .../views/elements/MemberEventListSummary.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 78aede8dfc..d29a8ba0a3 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -119,18 +119,11 @@ module.exports = React.createClass({ }, /** - * Canonicalise an array of transitions into an array of transitions and how many times - * they are repeated consecutively. - * - * An array of 123 "joined_and_left" transitions, would result in: - * ``` - * [{ - * transitionType: "joined_and_left" - * repeats: 123 - * }, ... ] - * ``` - * @param {string[]} transitions the array of transitions to transform. - * @returns {object[]} an array of truncated transitions. + * Canonicalise an array of transitions such that some pairs of transitions become + * single transitions. For example an input ['joined','left'] would result in an output + * ['joined_and_left']. + * @param {string[]} transitions an array of transitions. + * @returns {string[]} an array of transitions. */ _getCanonicalTransitions: function(transitions) { let modMap = { From f8e46819c5452ba51b70935f7d55fec6262fa820 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 09:28:26 +0000 Subject: [PATCH 46/52] Rename truncated->coalesced --- .../views/elements/MemberEventListSummary.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index d29a8ba0a3..a351a0fb09 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -86,9 +86,9 @@ module.exports = React.createClass({ // Some neighbouring transitions are common, so canonicalise some into "pair" transitions let canonicalTransitions = this._getCanonicalTransitions(splitTransitions); // Transform into consecutive repetitions of the same transition (like 5 consecutive 'joined_and_left's) - let truncatedTransitions = this._getTruncatedTransitions(canonicalTransitions); + let coalescedTransitions = this._coalesceRepeatedTransitions(canonicalTransitions); - let descs = truncatedTransitions.map((t) => { + let descs = coalescedTransitions.map((t) => { return this._getDescriptionForTransition(t.transitionType, plural, t.repeats); }); @@ -167,12 +167,12 @@ module.exports = React.createClass({ * [{ * transitionType: "joined_and_left" * repeats: 123 - * }, ... ] + * }] * ``` * @param {string[]} transitions the array of transitions to transform. - * @returns {object[]} an array of truncated transitions. + * @returns {object[]} an array of coalesced transitions. */ - _getTruncatedTransitions: function(transitions) { + _coalesceRepeatedTransitions: function(transitions) { let res = []; for (let i = 0; i < transitions.length; i++) { if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) { From 8091cf7df8e369626bd3aa514b08458617d81d9e Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 09:32:28 +0000 Subject: [PATCH 47/52] Enumerate->label --- src/components/views/elements/MemberEventListSummary.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index a351a0fb09..3d0e1c6a7e 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -265,10 +265,10 @@ module.exports = React.createClass({ }, /** - * Enumerate a given membership event, `e`, where `getContent().membership` has + * Label a given membership event, `e`, where `getContent().membership` has * changed for each transition allowed by the Matrix protocol. This attempts to - * enumerate the membership changes that occur in `../../../TextForEvent.js`. - * @param {MatrixEvent} e the membership change event to enumerate. + * label the membership changes that occur in `../../../TextForEvent.js`. + * @param {MatrixEvent} e the membership change event to label. * @returns {string?} the transition type given to this event. This defaults to `null` * if a transition is not recognised. */ From d5edf26371e39958a871133ceb02bd5b0ccfa8df Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 10:39:39 +0000 Subject: [PATCH 48/52] Improve comment --- test/components/views/elements/MemberEventListSummary-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index 8979c87c3a..a2f3977f0f 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -51,7 +51,7 @@ describe('MemberEventListSummary', function() { }, }, }); - // Override random event ID + // Override random event ID to allow for equality tests against tiles from generateTiles e.event.event_id = eventId; return e; }; From 24e94787dd511d8a12b6c699024e7300e06561b8 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 10:52:55 +0000 Subject: [PATCH 49/52] A lot of linting --- .../elements/MemberEventListSummary-test.js | 644 +++++++++++------- 1 file changed, 415 insertions(+), 229 deletions(-) diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js index a2f3977f0f..d01d705040 100644 --- a/test/components/views/elements/MemberEventListSummary-test.js +++ b/test/components/views/elements/MemberEventListSummary-test.js @@ -4,8 +4,6 @@ const ReactDOM = require("react-dom"); const ReactTestUtils = require('react-addons-test-utils'); const sdk = require('matrix-react-sdk'); const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); -const jssdk = require('matrix-js-sdk'); -const MatrixEvent = jssdk.MatrixEvent; const testUtils = require('../../../test-utils'); describe('MemberEventListSummary', function() { @@ -23,35 +21,38 @@ describe('MemberEventListSummary', function() { }; /** - * Generates a membership event with the target of the event set as a mocked RoomMember based - * on `parameters.userId`. + * Generates a membership event with the target of the event set as a mocked + * RoomMember based on `parameters.userId`. * @param {string} eventId the ID of the event. * @param {object} parameters the parameters to use to create the event. - * @param {string} parameters.membership the membership to assign to `content.membership` + * @param {string} parameters.membership the membership to assign to + * `content.membership` * @param {string} parameters.userId the state key and target userId of the event. If * `parameters.senderId` is not specified, this is also used as the event sender. * @param {string} parameters.prevMembership the membership to assign to * `prev_content.membership`. - * @param {string} parameters.senderId the user ID of the sender of the event. Optional. - * Defaults to `parameters.userId`. + * @param {string} parameters.senderId the user ID of the sender of the event. + * Optional. Defaults to `parameters.userId`. * @returns {MatrixEvent} the event created. */ const generateMembershipEvent = (eventId, parameters) => { - let e = testUtils.mkMembership({ + const e = testUtils.mkMembership({ event: true, user: parameters.senderId || parameters.userId, skey: parameters.userId, mship: parameters.membership, prevMship: parameters.prevMembership, - target : { - name: parameters.userId.match(/@([^:]*):/)[1], // Use localpart as display name + target: { + // Use localpart as display name + name: parameters.userId.match(/@([^:]*):/)[1], userId: parameters.userId, getAvatarUrl: () => { return "avatar.jpeg"; }, }, }); - // Override random event ID to allow for equality tests against tiles from generateTiles + // Override random event ID to allow for equality tests against tiles from + // generateTiles e.event.event_id = eventId; return e; }; @@ -92,14 +93,14 @@ describe('MemberEventListSummary', function() { it('renders expanded events if there are less than props.threshold', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; const renderer = ReactTestUtils.createRenderer(); @@ -114,15 +115,15 @@ describe('MemberEventListSummary', function() { it('renders expanded events if there are less than props.threshold', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; const renderer = ReactTestUtils.createRenderer(); @@ -138,20 +139,24 @@ describe('MemberEventListSummary', function() { it('renders collapsed events if events.length = props.threshold', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe("user_1 joined and left and joined"); @@ -159,265 +164,434 @@ describe('MemberEventListSummary', function() { it('truncates long join,leave repetitions', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe("user_1 joined and left 7 times"); }); - it('truncates long join,leave repetitions inbetween other events', function() { + it('truncates long join,leave repetitions between other events', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + { + userId: "@user_1:some.domain", + prevMembership: "leave", + membership: "invite", + senderId: "@some_other_user:some.domain", + }, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; - expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited"); + expect(summaryText).toBe( + "user_1 was unbanned, joined and left 7 times and was invited" + ); }); - it('truncates multiple sequences of repetitions with other events inbetween', function() { + it('truncates multiple sequences of repetitions with other events between', + function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, - {userId : "@user_1:some.domain", prevMembership: "ban", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "invite", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + { + userId: "@user_1:some.domain", + prevMembership: "leave", + membership: "ban", + senderId: "@some_other_user:some.domain", + }, + {userId: "@user_1:some.domain", prevMembership: "ban", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + { + userId: "@user_1:some.domain", + prevMembership: "leave", + membership: "invite", + senderId: "@some_other_user:some.domain", + }, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; - expect(summaryText).toBe("user_1 was unbanned, joined and left 2 times, was banned, joined and left 3 times and was invited"); + expect(summaryText).toBe( + "user_1 was unbanned, joined and left 2 times, was banned, " + + "joined and left 3 times and was invited" + ); }); it('handles multiple users following the same sequence of memberships', function() { const events = generateEvents([ // user_1 - {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + { + userId: "@user_1:some.domain", + prevMembership: "leave", + membership: "ban", + senderId: "@some_other_user:some.domain", + }, // user_2 - {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_2:some.domain", + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, + {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + { + userId: "@user_2:some.domain", + prevMembership: "leave", + membership: "ban", + senderId: "@some_other_user:some.domain", + }, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; - expect(summaryText).toBe("user_1 and 1 other were unbanned, joined and left 2 times and were banned"); + expect(summaryText).toBe( + "user_1 and 1 other were unbanned, joined and left 2 times and were banned" + ); }); it('handles many users following the same sequence of memberships', function() { const events = generateEventsForUsers("@user_$:some.domain", 20, [ - {prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + { + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, {prevMembership: "leave", membership: "join"}, {prevMembership: "join", membership: "leave"}, {prevMembership: "leave", membership: "join"}, {prevMembership: "join", membership: "leave"}, - {prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, + { + prevMembership: "leave", + membership: "ban", + senderId: "@some_other_user:some.domain", + }, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); - const summaryText = summary.innerText; - - expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned"); - }); - - it('correctly orders sequences of transitions by the order of their first event', function() { - const events = generateEvents([ - {userId : "@user_2:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "leave", membership: "ban", senderId: "@some_other_user:some.domain"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, - {userId : "@user_2:some.domain", prevMembership: "leave", membership: "join"}, - {userId : "@user_2:some.domain", prevMembership: "join", membership: "leave"}, - ]); - const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, - }; - - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe( - "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, joined and left 2 times and was banned" + "user_0 and 19 others were unbanned, joined and left 2 times and were banned" + ); + }); + + it('correctly orders sequences of transitions by the order of their first event', + function() { + const events = generateEvents([ + { + userId: "@user_2:some.domain", + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, + { + userId: "@user_1:some.domain", + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + { + userId: "@user_1:some.domain", + prevMembership: "leave", + membership: "ban", + senderId: "@some_other_user:some.domain", + }, + {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"}, + {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"}, + ]); + const props = { + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, + }; + + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); + const summaryText = summary.innerText; + + expect(summaryText).toBe( + "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " + + "joined and left 2 times and was banned" ); }); it('correctly identifies transitions', function() { const events = generateEvents([ // invited - {userId : "@user_1:some.domain", membership: "invite"}, + {userId: "@user_1:some.domain", membership: "invite"}, // banned - {userId : "@user_1:some.domain", membership: "ban"}, + {userId: "@user_1:some.domain", membership: "ban"}, // joined - {userId : "@user_1:some.domain", membership: "join"}, + {userId: "@user_1:some.domain", membership: "join"}, // invite_reject - {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, + { + userId: "@user_1:some.domain", + prevMembership: "invite", + membership: "leave", + }, // left - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave"}, + {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"}, // invite_withdrawal - {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "invite", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, // unbanned - {userId : "@user_1:some.domain", prevMembership: "ban", membership: "leave", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "ban", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, // kicked - {userId : "@user_1:some.domain", prevMembership: "join", membership: "leave", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "join", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, // default = left - {userId : "@user_1:some.domain", prevMembership: "????", membership: "leave", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "????", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe( - "user_1 was invited, was banned, joined, rejected their invitation, left, had their invitation withdrawn, was unbanned, was kicked and left" + "user_1 was invited, was banned, joined, rejected their invitation, left, " + + "had their invitation withdrawn, was unbanned, was kicked and left" ); }); it('handles invitation plurals correctly when there are multiple users', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"}, - {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave"}, - {userId : "@user_2:some.domain", prevMembership: "invite", membership: "leave", senderId: "@some_other_user:some.domain"}, + { + userId: "@user_1:some.domain", + prevMembership: "invite", + membership: "leave", + }, + { + userId: "@user_1:some.domain", + prevMembership: "invite", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, + { + userId: "@user_2:some.domain", + prevMembership: "invite", + membership: "leave", + }, + { + userId: "@user_2:some.domain", + prevMembership: "invite", + membership: "leave", + senderId: "@some_other_user:some.domain", + }, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe( - "user_1 and 1 other rejected their invitations and had their invitations withdrawn" + "user_1 and 1 other rejected their invitations and " + + "had their invitations withdrawn" ); }); - it('handles invitation plurals correctly when there are multiple invites', function() { + it('handles invitation plurals correctly when there are multiple invites', + function() { const events = generateEvents([ - {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, - {userId : "@user_1:some.domain", prevMembership: "invite", membership: "leave"}, + { + userId: "@user_1:some.domain", + prevMembership: "invite", + membership: "leave", + }, + { + userId: "@user_1:some.domain", + prevMembership: "invite", + membership: "leave", + }, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 1, - avatarsMaxLength : 5, - threshold : 1, // threshold = 1 to force collapse + events: events, + children: generateTiles(events), + summaryLength: 1, + avatarsMaxLength: 5, + threshold: 1, // threshold = 1 to force collapse }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe( @@ -427,21 +601,25 @@ describe('MemberEventListSummary', function() { it('handles a summary length = 2, with no "others"', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", membership: "join"}, - {userId : "@user_1:some.domain", membership: "join"}, - {userId : "@user_2:some.domain", membership: "join"}, - {userId : "@user_2:some.domain", membership: "join"}, + {userId: "@user_1:some.domain", membership: "join"}, + {userId: "@user_1:some.domain", membership: "join"}, + {userId: "@user_2:some.domain", membership: "join"}, + {userId: "@user_2:some.domain", membership: "join"}, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 2, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 2, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe( @@ -451,20 +629,24 @@ describe('MemberEventListSummary', function() { it('handles a summary length = 2, with 1 "other"', function() { const events = generateEvents([ - {userId : "@user_1:some.domain", membership: "join"}, - {userId : "@user_2:some.domain", membership: "join"}, - {userId : "@user_3:some.domain", membership: "join"}, + {userId: "@user_1:some.domain", membership: "join"}, + {userId: "@user_2:some.domain", membership: "join"}, + {userId: "@user_3:some.domain", membership: "join"}, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 2, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 2, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe( @@ -477,19 +659,23 @@ describe('MemberEventListSummary', function() { {membership: "join"}, ]); const props = { - events : events, - children : generateTiles(events), - summaryLength : 2, - avatarsMaxLength : 5, - threshold : 3, + events: events, + children: generateTiles(events), + summaryLength: 2, + avatarsMaxLength: 5, + threshold: 3, }; - const instance = ReactTestUtils.renderIntoDocument(); - const summary = ReactTestUtils.findRenderedDOMComponentWithClass(instance, "mx_MemberEventListSummary_summary"); + const instance = ReactTestUtils.renderIntoDocument( + + ); + const summary = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, "mx_MemberEventListSummary_summary" + ); const summaryText = summary.innerText; expect(summaryText).toBe( "user_0, user_1 and 18 others joined" ); }); -}); \ No newline at end of file +}); From b887d5b8239d9a780457f86c76e5c5b24b813c67 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 11:05:45 +0000 Subject: [PATCH 50/52] Much linting --- .../views/elements/MemberEventListSummary.js | 132 ++++++++++-------- 1 file changed, 72 insertions(+), 60 deletions(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 3d0e1c6a7e..49322d6644 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -76,23 +76,29 @@ module.exports = React.createClass({ * events that occurred. */ _renderSummary: function(eventAggregates, orderedTransitionSequences) { - let summaries = orderedTransitionSequences.map((transitions) => { - let userNames = eventAggregates[transitions]; - let nameList = this._renderNameList(userNames); - let plural = userNames.length > 1; + const summaries = orderedTransitionSequences.map((transitions) => { + const userNames = eventAggregates[transitions]; + const nameList = this._renderNameList(userNames); + const plural = userNames.length > 1; - let splitTransitions = transitions.split(','); + const splitTransitions = transitions.split(','); - // Some neighbouring transitions are common, so canonicalise some into "pair" transitions - let canonicalTransitions = this._getCanonicalTransitions(splitTransitions); - // Transform into consecutive repetitions of the same transition (like 5 consecutive 'joined_and_left's) - let coalescedTransitions = this._coalesceRepeatedTransitions(canonicalTransitions); + // Some neighbouring transitions are common, so canonicalise some into "pair" + // transitions + const canonicalTransitions = this._getCanonicalTransitions(splitTransitions); + // Transform into consecutive repetitions of the same transition (like 5 + // consecutive 'joined_and_left's) + const coalescedTransitions = this._coalesceRepeatedTransitions( + canonicalTransitions + ); - let descs = coalescedTransitions.map((t) => { - return this._getDescriptionForTransition(t.transitionType, plural, t.repeats); + const descs = coalescedTransitions.map((t) => { + return this._getDescriptionForTransition( + t.transitionType, plural, t.repeats + ); }); - let desc = this._renderCommaSeparatedList(descs); + const desc = this._renderCommaSeparatedList(descs); return nameList + " " + desc; }); @@ -126,14 +132,14 @@ module.exports = React.createClass({ * @returns {string[]} an array of transitions. */ _getCanonicalTransitions: function(transitions) { - let modMap = { - 'joined' : { - 'after' : 'left', - 'newTransition' : 'joined_and_left', + const modMap = { + 'joined': { + 'after': 'left', + 'newTransition': 'joined_and_left', }, - 'left' : { - 'after' : 'joined', - 'newTransition' : 'left_and_joined', + 'left': { + 'after': 'joined', + 'newTransition': 'left_and_joined', }, // $currentTransition : { // 'after' : $nextTransition, @@ -143,8 +149,8 @@ module.exports = React.createClass({ const res = []; for (let i = 0; i < transitions.length; i++) { - let t = transitions[i]; - let t2 = transitions[i + 1]; + const t = transitions[i]; + const t2 = transitions[i + 1]; let transition = t; @@ -173,7 +179,7 @@ module.exports = React.createClass({ * @returns {object[]} an array of coalesced transitions. */ _coalesceRepeatedTransitions: function(transitions) { - let res = []; + const res = []; for (let i = 0; i < transitions.length; i++) { if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) { res[res.length - 1].repeats += 1; @@ -191,16 +197,17 @@ module.exports = React.createClass({ * For a certain transition, t, describe what happened to the users that * underwent the transition. * @param {string} t the transition type. - * @param {boolean} plural whether there were multiple users undergoing the same transition. + * @param {boolean} plural whether there were multiple users undergoing the same + * transition. * @param {number} repeats the number of times the transition was repeated in a row. * @returns {string} the written English equivalent of the transition. */ _getDescriptionForTransition(t, plural, repeats) { - let beConjugated = plural ? "were" : "was"; - let invitation = "their invitation" + (plural || (repeats > 1) ? "s" : ""); + const beConjugated = plural ? "were" : "was"; + const invitation = "their invitation" + (plural || (repeats > 1) ? "s" : ""); let res = null; - let map = { + const map = { "joined": "joined", "left": "left", "joined_and_left": "joined and left", @@ -221,17 +228,21 @@ module.exports = React.createClass({ }, /** - * Constructs a written English string representing `items`, with an optional limit on the number - * of items included in the result. If specified and if the length of `items` is greater than the - * limit, the string "and n others" will be appended onto the result. - * If `items` is empty, returns the empty string. If there is only one item, return it. + * Constructs a written English string representing `items`, with an optional limit on + * the number of items included in the result. If specified and if the length of + *`items` is greater than the limit, the string "and n others" will be appended onto + * the result. + * If `items` is empty, returns the empty string. If there is only one item, return + * it. * @param {string[]} items the items to construct a string from. * @param {number?} itemLimit the number by which to limit the list. * @returns {string} a string constructed by joining `items` with a comma between each * item, but with the last item appended as " and [lastItem]". */ _renderCommaSeparatedList(items, itemLimit) { - const remaining = itemLimit === undefined ? 0 : Math.max(items.length - itemLimit, 0); + const remaining = itemLimit === undefined ? 0 : Math.max( + items.length - itemLimit, 0 + ); if (items.length === 0) { return ""; } else if (items.length === 1) { @@ -241,18 +252,16 @@ module.exports = React.createClass({ const other = " other" + (remaining > 1 ? "s" : ""); return items.join(', ') + ' and ' + remaining + other; } else { - let last = items.pop(); - return items.join(', ') + ' and ' + last; + return items.join(', ') + ' and ' + items.pop(); } }, _renderAvatars: function(roomMembers) { - let avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => { + const avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => { return ( ); }); - return ( {avatars} @@ -280,15 +289,15 @@ module.exports = React.createClass({ case 'leave': if (e.mxEvent.getSender() === e.mxEvent.getStateKey()) { switch (e.mxEvent.getPrevContent().membership) { - case 'invite': return 'invite_reject'; - default: return 'left'; + case 'invite': return 'invite_reject'; + default: return 'left'; } } switch (e.mxEvent.getPrevContent().membership) { - case 'invite': return 'invite_withdrawal'; - case 'ban': return 'unbanned'; - case 'join': return 'kicked'; - default: return 'left'; + case 'invite': return 'invite_withdrawal'; + case 'ban': return 'unbanned'; + case 'join': return 'kicked'; + default: return 'left'; } default: return null; } @@ -299,22 +308,22 @@ module.exports = React.createClass({ // is a comma-delimited string of transitions, e.g. "joined,left,kicked". // The array of display names is the array of users who went through that // sequence during eventsToRender. - let aggregate = { + const aggregate = { // $aggregateType : []:string }; // A map of aggregate types to the indices that order them (the index of // the first event for a given transition sequence) - let aggregateIndices = { + const aggregateIndices = { // $aggregateType : int }; - let users = Object.keys(userEvents); + const users = Object.keys(userEvents); users.forEach( (userId) => { - let firstEvent = userEvents[userId][0]; - let displayName = firstEvent.displayName; + const firstEvent = userEvents[userId][0]; + const displayName = firstEvent.displayName; - let seq = this._getTransitionSequence(userEvents[userId]); + const seq = this._getTransitionSequence(userEvents[userId]); if (!aggregate[seq]) { aggregate[seq] = []; aggregateIndices[seq] = -1; @@ -322,8 +331,9 @@ module.exports = React.createClass({ aggregate[seq].push(displayName); - if (aggregateIndices[seq] === -1 || firstEvent.index < aggregateIndices[seq]) { - aggregateIndices[seq] = firstEvent.index; + if (aggregateIndices[seq] === -1 || + firstEvent.index < aggregateIndices[seq]) { + aggregateIndices[seq] = firstEvent.index; } } ); @@ -335,9 +345,9 @@ module.exports = React.createClass({ }, render: function() { - let eventsToRender = this.props.events; - let fewEvents = eventsToRender.length < this.props.threshold; - let expanded = this.state.expanded || fewEvents; + const eventsToRender = this.props.events; + const fewEvents = eventsToRender.length < this.props.threshold; + const expanded = this.state.expanded || fewEvents; let expandedEvents = null; if (expanded) { @@ -353,7 +363,7 @@ module.exports = React.createClass({ } // Map user IDs to an array of objects: - let userEvents = { + const userEvents = { // $userId : [{ // // The original event // mxEvent: e, @@ -364,7 +374,7 @@ module.exports = React.createClass({ // }] }; - let avatarMembers = []; + const avatarMembers = []; eventsToRender.forEach((e, index) => { const userId = e.getStateKey(); // Initialise a user's events @@ -379,20 +389,22 @@ module.exports = React.createClass({ }); }); - let aggregate = this._getAggregate(userEvents); + const aggregate = this._getAggregate(userEvents); // Sort types by order of lowest event index within sequence - let orderedTransitionSequences = Object.keys(aggregate.names).sort((seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]); + const orderedTransitionSequences = Object.keys(aggregate.names).sort( + (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2] + ); - let avatars = this._renderAvatars(avatarMembers); - let summary = this._renderSummary(aggregate.names, orderedTransitionSequences); - let toggleButton = ( + const avatars = this._renderAvatars(avatarMembers); + const summary = this._renderSummary(aggregate.names, orderedTransitionSequences); + const toggleButton = ( {expanded ? 'collapse' : 'expand'} ); - let summaryContainer = ( + const summaryContainer = (
    From f9ca2a8e5964c86cdff08ecb970c230ed242cdcd Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 11:28:12 +0000 Subject: [PATCH 51/52] Fix _renderCommaSeparatedList --- src/components/views/elements/MemberEventListSummary.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js index 49322d6644..61fa0e076f 100644 --- a/src/components/views/elements/MemberEventListSummary.js +++ b/src/components/views/elements/MemberEventListSummary.js @@ -252,7 +252,8 @@ module.exports = React.createClass({ const other = " other" + (remaining > 1 ? "s" : ""); return items.join(', ') + ' and ' + remaining + other; } else { - return items.join(', ') + ' and ' + items.pop(); + const lastItem = items.pop(); + return items.join(', ') + ' and ' + lastItem; } }, From b34f63d3e70fd4f22e226a693f76c86a71abb60c Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 25 Jan 2017 14:59:18 +0000 Subject: [PATCH 52/52] Re-add dispatcher as alt-up/down uses it Alt-up/down still doesn't go through rooms in the right order, but it should probably not error. --- src/components/structures/LoggedInView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 57a4d4c721..c00bd2c6db 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -21,6 +21,7 @@ import KeyCode from '../../KeyCode'; import Notifier from '../../Notifier'; import PageTypes from '../../PageTypes'; import sdk from '../../index'; +import dis from '../../dispatcher'; /** * This is what our MatrixChat shows when we are logged in. The precise view is