Merge remote-tracking branch 'remotes/origin/develop' into set_default_federate_by_settings

# Conflicts:
#	src/components/structures/MatrixChat.js

src/components/views/rooms/AppsDrawer.js

@@ -166,7 +166,7 @@ module.exports = React.createClass({
         const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
                 this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'add_integ') :
                 null;
-        Modal.createDialog(IntegrationsManager, {
+        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
             src: src,
         }, "mx_IntegrationsManager");
     },

src/components/views/rooms/Autocomplete.js

@@ -172,7 +172,7 @@ export default class Autocomplete extends React.Component {
     }
 
     hide() {
-        this.setState({hide: true, selectionOffset: 0});
+        this.setState({hide: true, selectionOffset: 0, completions: [], completionList: []});
     }
 
     forceComplete() {

src/components/views/rooms/EventTile.js

@@ -155,7 +155,9 @@ module.exports = withMatrixClient(React.createClass({
     },
 
     componentWillReceiveProps: function(nextProps) {
-        if (nextProps.mxEvent !== this.props.mxEvent) {
+        // re-check the sender verification as outgoing events progress through
+        // the send process.
+        if (nextProps.eventSendStatus !== this.props.eventSendStatus) {
             this._verifyEvent(nextProps.mxEvent);
         }
     },
@@ -367,7 +369,7 @@ module.exports = withMatrixClient(React.createClass({
     onCryptoClicked: function(e) {
         var event = this.props.mxEvent;
 
-        Modal.createDialogAsync((cb) => {
+        Modal.createTrackedDialogAsync('Encrypted Event Dialog', '', (cb) => {
             require(['../../../async-components/views/dialogs/EncryptedEventDialog'], cb);
         }, {
             event: event,
@@ -386,6 +388,36 @@ module.exports = withMatrixClient(React.createClass({
         });
     },
 
+    _renderE2EPadlock: function() {
+        const ev = this.props.mxEvent;
+        const props = {onClick: this.onCryptoClicked};
+
+
+        if (ev.getContent().msgtype === 'm.bad.encrypted') {
+            return <E2ePadlockUndecryptable {...props}/>;
+        } else if (ev.isEncrypted()) {
+            if (this.state.verified) {
+                return <E2ePadlockVerified {...props}/>;
+            } else {
+                return <E2ePadlockUnverified {...props}/>;
+            }
+        } else {
+            // XXX: if the event is being encrypted (ie eventSendStatus ===
+            // encrypting), it might be nice to show something other than the
+            // open padlock?
+
+            // if the event is not encrypted, but it's an e2e room, show the
+            // open padlock
+            const e2eEnabled = this.props.matrixClient.isRoomEncrypted(ev.getRoomId());
+            if (e2eEnabled) {
+                return <E2ePadlockUnencrypted {...props}/>;
+            }
+        }
+
+        // no padlock needed
+        return null;
+    },
+
     render: function() {
         var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
         var SenderProfile = sdk.getComponent('messages.SenderProfile');
@@ -407,7 +439,6 @@ module.exports = withMatrixClient(React.createClass({
             throw new Error("Event type not supported");
         }
 
-        var e2eEnabled = this.props.matrixClient.isRoomEncrypted(this.props.mxEvent.getRoomId());
         var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
         const isRedacted = (eventType === 'm.room.message') && this.props.isRedacted;
 
@@ -485,26 +516,7 @@ module.exports = withMatrixClient(React.createClass({
         const editButton = (
             <span className="mx_EventTile_editButton" title={ _t("Options") } onClick={this.onEditClicked} />
         );
-        let e2e;
-        // cosmetic padlocks:
-        if ((e2eEnabled && this.props.eventSendStatus) || this.props.mxEvent.getType() === 'm.room.encryption') {
-            e2e = <img style={{ cursor: 'initial', marginLeft: '-1px' }} className="mx_EventTile_e2eIcon" alt={_t("Encrypted by a verified device")} src="img/e2e-verified.svg" width="10" height="12" />;
-        }
-        // real padlocks
-        else if (this.props.mxEvent.isEncrypted() || (e2eEnabled && this.props.eventSendStatus)) {
-            if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Undecryptable")} src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
-            }
-            else if (this.state.verified == true || (e2eEnabled && this.props.eventSendStatus)) {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Encrypted by a verified device")} src="img/e2e-verified.svg" width="10" height="12"/>;
-            }
-            else {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Encrypted by an unverified device")} src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
-            }
-        }
-        else if (e2eEnabled) {
-            e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Unencrypted message")} src="img/e2e-unencrypted.svg" width="12" height="12"/>;
-        }
+
         const timestamp = this.props.mxEvent.getTs() ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
@@ -572,7 +584,7 @@ module.exports = withMatrixClient(React.createClass({
                         <a href={ permalink } onClick={this.onPermalinkClicked}>
                             { timestamp }
                         </a>
-                        { e2e }
+                        { this._renderE2EPadlock() }
                         <EventTileType ref="tile"
                             mxEvent={this.props.mxEvent}
                             highlights={this.props.highlights}
@@ -597,3 +609,39 @@ module.exports.haveTileForEvent = function(e) {
         return true;
     }
 };
+
+function E2ePadlockUndecryptable(props) {
+    return (
+        <E2ePadlock alt={_t("Undecryptable")}
+            src="img/e2e-blocked.svg" width="12" height="12"
+            style={{ marginLeft: "-1px" }} {...props} />
+    );
+}
+
+function E2ePadlockVerified(props) {
+    return (
+        <E2ePadlock alt={_t("Encrypted by a verified device")}
+            src="img/e2e-verified.svg" width="10" height="12"
+            {...props} />
+    );
+}
+
+function E2ePadlockUnverified(props) {
+    return (
+        <E2ePadlock alt={_t("Encrypted by an unverified device")}
+            src="img/e2e-warning.svg" width="15" height="12"
+            style={{ marginLeft: "-2px" }} {...props} />
+    );
+}
+
+function E2ePadlockUnencrypted(props) {
+    return (
+        <E2ePadlock alt={_t("Unencrypted message")}
+            src="img/e2e-unencrypted.svg" width="12" height="12"
+            {...props} />
+    );
+}
+
+function E2ePadlock(props) {
+    return <img className="mx_EventTile_e2eIcon" {...props} />;
+}

src/components/views/rooms/MemberInfo.js

@@ -229,7 +229,7 @@ module.exports = withMatrixClient(React.createClass({
         const membership = this.props.member.membership;
         const kickLabel = membership === "invite" ? _t("Disinvite") : _t("Kick");
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
-        Modal.createDialog(ConfirmUserActionDialog, {
+        Modal.createTrackedDialog('Confirm User Action Dialog', 'onKick', ConfirmUserActionDialog, {
             member: this.props.member,
             action: kickLabel,
             askReason: membership == "join",
@@ -248,7 +248,7 @@ module.exports = withMatrixClient(React.createClass({
                     }, function(err) {
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Kick error: " + err);
-                        Modal.createDialog(ErrorDialog, {
+                        Modal.createTrackedDialog('Failed to kick', '', ErrorDialog, {
                             title: _t("Failed to kick"),
                             description: ((err && err.message) ? err.message : "Operation failed"),
                         });
@@ -262,7 +262,7 @@ module.exports = withMatrixClient(React.createClass({
 
     onBanOrUnban: function() {
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
-        Modal.createDialog(ConfirmUserActionDialog, {
+        Modal.createTrackedDialog('Confirm User Action Dialog', 'onBanOrUnban', ConfirmUserActionDialog, {
             member: this.props.member,
             action: this.props.member.membership == 'ban' ? _t("Unban") : _t("Ban"),
             askReason: this.props.member.membership != 'ban',
@@ -290,7 +290,7 @@ module.exports = withMatrixClient(React.createClass({
                     }, function(err) {
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Ban error: " + err);
-                        Modal.createDialog(ErrorDialog, {
+                        Modal.createTrackedDialog('Failed to ban user', '', ErrorDialog, {
                             title: _t("Error"),
                             description: _t("Failed to ban user"),
                         });
@@ -340,7 +340,7 @@ module.exports = withMatrixClient(React.createClass({
                     console.log("Mute toggle success");
                 }, function(err) {
                     console.error("Mute error: " + err);
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Failed to mute user', '', ErrorDialog, {
                         title: _t("Error"),
                         description: _t("Failed to mute user"),
                     });
@@ -385,7 +385,7 @@ module.exports = withMatrixClient(React.createClass({
                     dis.dispatch({action: 'view_set_mxid'});
                 } else {
                     console.error("Toggle moderator error:" + err);
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Failed to toggle moderator status', '', ErrorDialog, {
                         title: _t("Error"),
                         description: _t("Failed to toggle moderator status"),
                     });
@@ -406,7 +406,7 @@ module.exports = withMatrixClient(React.createClass({
             }, function(err) {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Failed to change power level " + err);
-                Modal.createDialog(ErrorDialog, {
+                Modal.createTrackedDialog('Failed to change power level', '', ErrorDialog, {
                     title: _t("Error"),
                     description: _t("Failed to change power level"),
                 });
@@ -435,7 +435,7 @@ module.exports = withMatrixClient(React.createClass({
             var myPower = powerLevelEvent.getContent().users[this.props.matrixClient.credentials.userId];
             if (parseInt(myPower) === parseInt(powerLevel)) {
                 var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createDialog(QuestionDialog, {
+                Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
                     title: _t("Warning!"),
                     description:
                         <div>

src/components/views/rooms/MessageComposer.js

@@ -99,7 +99,7 @@ export default class MessageComposer extends React.Component {
             </li>);
         }
 
-        Modal.createDialog(QuestionDialog, {
+        Modal.createTrackedDialog('Upload Files confirmation', '', QuestionDialog, {
             title: _t('Upload Files'),
             description: (
                 <div>

src/components/views/rooms/MessageComposerInput.js

@@ -31,6 +31,7 @@ import KeyCode from '../../../KeyCode';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import Analytics from '../../../Analytics';
 
 import dis from '../../../dispatcher';
 import UserSettingsStore from '../../../UserSettingsStore';
@@ -97,20 +98,39 @@ export default class MessageComposerInput extends React.Component {
         onInputStateChanged: React.PropTypes.func,
     };
 
-    static getKeyBinding(e: SyntheticKeyboardEvent): string {
-        // C-m => Toggles between rich text and markdown modes
-        if (e.keyCode === KeyCode.KEY_M && KeyBindingUtil.isCtrlKeyCommand(e)) {
-            return 'toggle-mode';
+    static getKeyBinding(ev: SyntheticKeyboardEvent): string {
+        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+        let ctrlCmdOnly;
+        if (isMac) {
+            ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
+        } else {
+            ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
         }
 
-        // Allow opening of dev tools. getDefaultKeyBinding would be 'italic' for KEY_I
-        if (e.keyCode === KeyCode.KEY_I && e.shiftKey && e.ctrlKey) {
-            // When null is returned, draft-js will NOT preventDefault, allowing dev tools
-            // to be toggled when the editor is focussed
-            return null;
+        // Restrict a subset of key bindings to ONLY having ctrl/meta* pressed and
+        // importantly NOT having alt, shift, meta/ctrl* pressed. draft-js does not
+        // handle this in `getDefaultKeyBinding` so we do it ourselves here.
+        //
+        // * if macOS, read second option
+        const ctrlCmdCommand = {
+            // C-m => Toggles between rich text and markdown modes
+            [KeyCode.KEY_M]: 'toggle-mode',
+            [KeyCode.KEY_B]: 'bold',
+            [KeyCode.KEY_I]: 'italic',
+            [KeyCode.KEY_U]: 'underline',
+            [KeyCode.KEY_J]: 'code',
+            [KeyCode.KEY_O]: 'split-block',
+        }[ev.keyCode];
+
+        if (ctrlCmdCommand) {
+            if (!ctrlCmdOnly) {
+                return null;
+            }
+            return ctrlCmdCommand;
         }
 
-        return getDefaultKeyBinding(e);
+        // Handle keys such as return, left and right arrows etc.
+        return getDefaultKeyBinding(ev);
     }
 
     static getBlockStyle(block: ContentBlock): ?string {
@@ -141,6 +161,8 @@ export default class MessageComposerInput extends React.Component {
 
         const isRichtextEnabled = UserSettingsStore.getSyncedSetting('MessageComposerInput.isRichTextEnabled', false);
 
+        Analytics.setRichtextMode(isRichtextEnabled);
+
         this.state = {
             // whether we're in rich text or markdown mode
             isRichtextEnabled,
@@ -165,17 +187,18 @@ export default class MessageComposerInput extends React.Component {
         this.client = MatrixClientPeg.get();
     }
 
-    findLinkEntities(contentBlock, callback) {
+    findLinkEntities(contentState: ContentState, contentBlock: ContentBlock, callback) {
         contentBlock.findEntityRanges(
             (character) => {
                 const entityKey = character.getEntity();
                 return (
                     entityKey !== null &&
-                    Entity.get(entityKey).getType() === 'LINK'
+                    contentState.getEntity(entityKey).getType() === 'LINK'
                 );
             }, callback,
         );
     }
+
     /*
      * "Does the right thing" to create an EditorState, based on:
      * - whether we've got rich text mode enabled
@@ -184,13 +207,19 @@ export default class MessageComposerInput extends React.Component {
     createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
         const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
                 RichText.getScopedMDDecorators(this.props);
+        const shouldShowPillAvatar = !UserSettingsStore.getSyncedSetting("Pill.shouldHidePillAvatar", false);
         decorators.push({
             strategy: this.findLinkEntities.bind(this),
             component: (entityProps) => {
                 const Pill = sdk.getComponent('elements.Pill');
-                const {url} = Entity.get(entityProps.entityKey).getData();
+                const {url} = entityProps.contentState.getEntity(entityProps.entityKey).getData();
                 if (Pill.isPillUrl(url)) {
-                    return <Pill url={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
+                    return <Pill
+                        url={url}
+                        room={this.props.room}
+                        offsetKey={entityProps.offsetKey}
+                        shouldShowPillAvatar={shouldShowPillAvatar}
+                    />;
                 }
 
                 return (
@@ -243,7 +272,8 @@ export default class MessageComposerInput extends React.Component {
                 // paths for inserting a user pill is not fun
                 const selection = this.state.editorState.getSelection();
                 const member = this.props.room.getMember(payload.user_id);
-                const completion = member ? member.name.replace(' (IRC)', '') : payload.user_id;
+                const completion = member ?
+                    member.rawDisplayName.replace(' (IRC)', '') : payload.user_id;
                 this.setDisplayedCompletion({
                     completion,
                     selection,
@@ -253,10 +283,12 @@ export default class MessageComposerInput extends React.Component {
             }
                 break;
             case 'quote': {
-                let {body, formatted_body} = payload.event.getContent();
-                formatted_body = formatted_body || escape(body);
-                if (formatted_body) {
-                    let content = RichText.htmlToContentState(`<blockquote>${formatted_body}</blockquote>`);
+                /// XXX: Not doing rich-text quoting from formatted-body because draft-js
+                /// has regressed such that when links are quoted, errors are thrown. See
+                /// https://github.com/vector-im/riot-web/issues/4756.
+                let body = escape(payload.text);
+                if (body) {
+                    let content = RichText.htmlToContentState(`<blockquote>${body}</blockquote>`);
                     if (!this.state.isRichtextEnabled) {
                         content = ContentState.createFromText(RichText.stateToMarkdown(content));
                     }
@@ -427,6 +459,19 @@ export default class MessageComposerInput extends React.Component {
             state.editorState = RichText.attachImmutableEntitiesToEmoji(
                 state.editorState);
 
+            // Hide the autocomplete if the cursor location changes but the plaintext
+            // content stays the same. We don't hide if the pt has changed because the
+            // autocomplete will probably have different completions to show.
+            if (
+                !state.editorState.getSelection().equals(
+                    this.state.editorState.getSelection()
+                )
+                && state.editorState.getCurrentContent().getPlainText() ===
+                this.state.editorState.getCurrentContent().getPlainText()
+            ) {
+                this.autocomplete.hide();
+            }
+
             if (state.editorState.getCurrentContent().hasText()) {
                 this.onTypingActivity();
             } else {
@@ -483,6 +528,8 @@ export default class MessageComposerInput extends React.Component {
             contentState = ContentState.createFromText(markdown);
         }
 
+        Analytics.setRichtextMode(enabled);
+
         this.setState({
             editorState: this.createEditorState(enabled, contentState),
             isRichtextEnabled: enabled,
@@ -515,7 +562,8 @@ export default class MessageComposerInput extends React.Component {
                 newState = RichUtils.toggleInlineStyle(this.state.editorState, 'STRIKETHROUGH');
             } else if (shouldToggleBlockFormat) {
                 const currentStartOffset = this.state.editorState.getSelection().getStartOffset();
-                if (currentStartOffset === 0) {
+                const currentEndOffset = this.state.editorState.getSelection().getEndOffset();
+                if (currentStartOffset === 0 && currentEndOffset === 0) {
                     // Toggle current block type (setting it to 'unstyled')
                     newState = RichUtils.toggleBlockType(this.state.editorState, currentBlockType);
                 }
@@ -673,7 +721,7 @@ export default class MessageComposerInput extends React.Component {
                 }, function(err) {
                     console.error("Command failure: %s", err);
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Server error', '', ErrorDialog, {
                         title: _t("Server error"),
                         description: ((err && err.message) ? err.message : _t("Server unavailable, overloaded, or something else went wrong.")),
                     });
@@ -681,7 +729,8 @@ export default class MessageComposerInput extends React.Component {
             } else if (cmd.error) {
                 console.error(cmd.error);
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
+                // TODO possibly track which command they ran (not its Arguments) here
+                Modal.createTrackedDialog('Command error', '', ErrorDialog, {
                     title: _t("Command error"),
                     description: cmd.error,
                 });
@@ -713,7 +762,7 @@ export default class MessageComposerInput extends React.Component {
                 const hasLink = blocks.some((block) => {
                     return block.getCharacterList().filter((c) => {
                         const entityKey = c.getEntity();
-                        return entityKey && Entity.get(entityKey).getType() === 'LINK';
+                        return entityKey && contentState.getEntity(entityKey).getType() === 'LINK';
                     }).size > 0;
                 });
                 shouldSendHTML = hasLink;
@@ -734,8 +783,8 @@ export default class MessageComposerInput extends React.Component {
             const pt = contentState.getBlocksAsArray().map((block) => {
                 let blockText = block.getText();
                 let offset = 0;
-                this.findLinkEntities(block, (start, end) => {
-                    const entity = Entity.get(block.getEntityAt(start));
+                this.findLinkEntities(contentState, block, (start, end) => {
+                    const entity = contentState.getEntity(block.getEntityAt(start));
                     if (entity.getType() !== 'LINK') {
                         return;
                     }
@@ -759,15 +808,10 @@ export default class MessageComposerInput extends React.Component {
         let sendHtmlFn = this.client.sendHtmlMessage;
         let sendTextFn = this.client.sendTextMessage;
 
-        if (this.state.isRichtextEnabled) {
-            this.historyManager.addItem(
-                contentHTML ? contentHTML : contentText,
-                contentHTML ? 'html' : 'markdown',
-            );
-        } else {
-            // Always store MD input as input history
-            this.historyManager.addItem(contentText, 'markdown');
-        }
+        this.historyManager.save(
+            contentState,
+            this.state.isRichtextEnabled ? 'html' : 'markdown',
+        );
 
         if (contentText.startsWith('/me')) {
             contentText = contentText.substring(4);
@@ -841,6 +885,7 @@ export default class MessageComposerInput extends React.Component {
             }
         } else {
             this.moveAutocompleteSelection(up);
+            e.preventDefault();
         }
     };
 
@@ -936,32 +981,27 @@ export default class MessageComposerInput extends React.Component {
         }
 
         const {range = null, completion = '', href = null, suffix = ''} = displayedCompletion;
+        let contentState = activeEditorState.getCurrentContent();
 
         let entityKey;
-        let mdCompletion;
         if (href) {
-            entityKey = Entity.create('LINK', 'IMMUTABLE', {
+            contentState = contentState.createEntity('LINK', 'IMMUTABLE', {
                 url: href,
                 isCompletion: true,
             });
+            entityKey = contentState.getLastCreatedEntityKey();
         }
 
         let selection;
         if (range) {
             selection = RichText.textOffsetsToSelectionState(
-                range, activeEditorState.getCurrentContent().getBlocksAsArray(),
+                range, contentState.getBlocksAsArray(),
             );
         } else {
             selection = activeEditorState.getSelection();
         }
 
-        let contentState = Modifier.replaceText(
-            activeEditorState.getCurrentContent(),
-            selection,
-            mdCompletion || completion,
-            null,
-            entityKey,
-        );
+        contentState = Modifier.replaceText(contentState, selection, completion, null, entityKey);
 
         // Move the selection to the end of the block
         const afterSelection = contentState.getSelectionAfter();
@@ -1047,7 +1087,7 @@ export default class MessageComposerInput extends React.Component {
             offset -= sum;
 
             const entityKey = block.getEntityAt(offset);
-            const entity = entityKey ? Entity.get(entityKey) : null;
+            const entity = entityKey ? contentState.getEntity(entityKey) : null;
             if (entity && entity.getData().isCompletion) {
                 // This is a completed mention, so do not insert MD link, just text
                 return text;

src/components/views/rooms/RoomHeader.js

@@ -119,7 +119,7 @@ module.exports = React.createClass({
             const errMsg = (typeof err === "string") ? err : (err.error || "");
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to set avatar: " + errMsg);
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Failed to set avatar', '', ErrorDialog, {
                 title: _t("Error"),
                 description: _t("Failed to set avatar."),
             });

src/components/views/rooms/RoomSettings.js

@@ -46,7 +46,7 @@ const BannedUser = React.createClass({
 
     _onUnbanClick: function() {
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
-        Modal.createDialog(ConfirmUserActionDialog, {
+        Modal.createTrackedDialog('Confirm User Action Dialog', 'onUnbanClick', ConfirmUserActionDialog, {
             member: this.props.member,
             action: _t('Unban'),
             danger: false,
@@ -58,7 +58,7 @@ const BannedUser = React.createClass({
                 ).catch((err) => {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to unban: " + err);
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Failed to unban', '', ErrorDialog, {
                         title: _t('Error'),
                         description: _t('Failed to unban'),
                     });
@@ -424,7 +424,7 @@ module.exports = React.createClass({
         ev.preventDefault();
         var value = ev.target.value;
 
-        Modal.createDialog(QuestionDialog, {
+        Modal.createTrackedDialog('Privacy warning', '', QuestionDialog, {
             title: _t('Privacy warning'),
             description:
                 <div>
@@ -517,7 +517,7 @@ module.exports = React.createClass({
     onManageIntegrations(ev) {
         ev.preventDefault();
         var IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        Modal.createDialog(IntegrationsManager, {
+        Modal.createTrackedDialog('Integrations Manager', 'onManageIntegrations', IntegrationsManager, {
             src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
                     this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId) :
                     null,
@@ -550,7 +550,7 @@ module.exports = React.createClass({
         }, function(err) {
             var errCode = err.errcode || _t('unknown error code');
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Failed to forget room', '', ErrorDialog, {
                 title: _t('Error'),
                 description: _t("Failed to forget room %(errCode)s", { errCode: errCode }),
             });
@@ -561,7 +561,7 @@ module.exports = React.createClass({
         if (!this.refs.encrypt.checked) return;
 
         var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        Modal.createDialog(QuestionDialog, {
+        Modal.createTrackedDialog('E2E Enable Warning', '', QuestionDialog, {
             title: _t('Warning!'),
             description: (
                 <div>