Make the new DM invite dialog work for regular invites too

res/css/_components.scss

@@ -57,13 +57,13 @@
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
-@import "./views/dialogs/_DMInviteDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DeviceVerifyDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
+@import "./views/dialogs/_InviteDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";

res/css/views/dialogs/_DMInviteDialog.scss → res/css/views/dialogs/_InviteDialog.scss

@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DMInviteDialog_addressBar {
+.mx_InviteDialog_addressBar {
     display: flex;
     flex-direction: row;
 
-    .mx_DMInviteDialog_editor {
+    .mx_InviteDialog_editor {
         flex: 1;
         width: 100%; // Needed to make the Field inside grow
         background-color: $user-tile-hover-bg-color;
@@ -28,7 +28,7 @@ limitations under the License.
         overflow-x: hidden;
         overflow-y: auto;
 
-        .mx_DMInviteDialog_userTile {
+        .mx_InviteDialog_userTile {
             display: inline-block;
             float: left;
             position: relative;
@@ -61,15 +61,26 @@ limitations under the License.
         }
     }
 
-    .mx_DMInviteDialog_goButton {
+    .mx_InviteDialog_goButton {
         width: 48px;
         margin-left: 10px;
         height: 25px;
         line-height: 25px;
     }
+
+    .mx_InviteDialog_buttonAndSpinner {
+        .mx_Spinner {
+            // Width and height are required to trick the layout engine.
+            width: 20px;
+            height: 20px;
+            margin-left: 5px;
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
 }
 
-.mx_DMInviteDialog_section {
+.mx_InviteDialog_section {
     padding-bottom: 10px;
 
     h3 {
@@ -80,7 +91,7 @@ limitations under the License.
     }
 }
 
-.mx_DMInviteDialog_roomTile {
+.mx_InviteDialog_roomTile {
     cursor: pointer;
     padding: 5px 10px;
 
@@ -93,7 +104,7 @@ limitations under the License.
         vertical-align: middle;
     }
 
-    .mx_DMInviteDialog_roomTile_avatarStack {
+    .mx_InviteDialog_roomTile_avatarStack {
         display: inline-block;
         position: relative;
         width: 36px;
@@ -106,7 +117,7 @@ limitations under the License.
         }
     }
 
-    .mx_DMInviteDialog_roomTile_selected {
+    .mx_InviteDialog_roomTile_selected {
         width: 36px;
         height: 36px;
         border-radius: 36px;
@@ -130,37 +141,37 @@ limitations under the License.
         }
     }
 
-    .mx_DMInviteDialog_roomTile_name {
+    .mx_InviteDialog_roomTile_name {
         font-weight: 600;
         font-size: 14px;
         color: $primary-fg-color;
         margin-left: 7px;
     }
 
-    .mx_DMInviteDialog_roomTile_userId {
+    .mx_InviteDialog_roomTile_userId {
         font-size: 12px;
         color: $muted-fg-color;
         margin-left: 7px;
     }
 
-    .mx_DMInviteDialog_roomTile_time {
+    .mx_InviteDialog_roomTile_time {
         text-align: right;
         font-size: 12px;
         color: $muted-fg-color;
         float: right;
         line-height: 36px; // Height of the avatar to keep the time vertically aligned
     }
 
-    .mx_DMInviteDialog_roomTile_highlight {
+    .mx_InviteDialog_roomTile_highlight {
         font-weight: 900;
     }
 }
 
 // Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
-.mx_DMInviteDialog_userTile {
+.mx_InviteDialog_userTile {
     margin-right: 8px;
 
-    .mx_DMInviteDialog_userTile_pill {
+    .mx_InviteDialog_userTile_pill {
         background-color: $username-variant1-color;
         border-radius: 12px;
         display: inline-block;
@@ -170,27 +181,27 @@ limitations under the License.
         padding-right: 8px;
         color: #ffffff; // this is fine without a var because it's for both themes
 
-        .mx_DMInviteDialog_userTile_avatar {
+        .mx_InviteDialog_userTile_avatar {
             border-radius: 20px;
             position: relative;
             left: -5px;
             top: 2px;
         }
 
-        img.mx_DMInviteDialog_userTile_avatar {
+        img.mx_InviteDialog_userTile_avatar {
             vertical-align: top;
         }
 
-        .mx_DMInviteDialog_userTile_name {
+        .mx_InviteDialog_userTile_name {
             vertical-align: top;
         }
 
-        .mx_DMInviteDialog_userTile_threepidAvatar {
+        .mx_InviteDialog_userTile_threepidAvatar {
             background-color: #ffffff; // this is fine without a var because it's for both themes
         }
     }
 
-    .mx_DMInviteDialog_userTile_remove {
+    .mx_InviteDialog_userTile_remove {
         display: inline-block;
         margin-left: 4px;
     }

src/RoomInvite.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,6 +27,7 @@ import dis from './dispatcher';
 import DMRoomMap from './utils/DMRoomMap';
 import { _t } from './languageHandler';
 import SettingsStore from "./settings/SettingsStore";
+import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";
 
 /**
  * Invites multiple addresses to a room
@@ -36,21 +38,19 @@ import SettingsStore from "./settings/SettingsStore";
  * @param {string[]} addrs Array of strings of addresses to invite. May be matrix IDs or 3pids.
  * @returns {Promise} Promise
  */
-function inviteMultipleToRoom(roomId, addrs) {
+export function inviteMultipleToRoom(roomId, addrs) {
     const inviter = new MultiInviter(roomId);
     return inviter.invite(addrs).then(states => Promise.resolve({states, inviter}));
 }
 
 export function showStartChatInviteDialog() {
     if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) {
-        const DMInviteDialog = sdk.getComponent("dialogs.DMInviteDialog");
-        Modal.createTrackedDialog('Start DM', '', DMInviteDialog, {
-            onFinished: (inviteIds) => {
-                // TODO: Replace _onStartDmFinished with less hacks
-                if (inviteIds.length > 0) _onStartDmFinished(true, inviteIds.map(i => ({address: i})));
-                // else ignore and just do nothing
-            },
-        }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+        // This new dialog handles the room creation internally - we don't need to worry about it.
+        const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
+        Modal.createTrackedDialog(
+            'Start DM', '', InviteDialog, {kind: KIND_DM},
+            /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+        );
         return;
     }
 
@@ -74,6 +74,16 @@ export function showStartChatInviteDialog() {
 }
 
 export function showRoomInviteDialog(roomId) {
+    if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) {
+        // This new dialog handles the room creation internally - we don't need to worry about it.
+        const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
+        Modal.createTrackedDialog(
+            'Invite Users', '', InviteDialog, {kind: KIND_INVITE, roomId},
+            /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+        );
+        return;
+    }
+
     const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
 
     Modal.createTrackedDialog('Chat Invite', '', AddressPickerDialog, {