From 0b67fd5b4ef834355dfaf9f8f6c4ac2dc62a5a01 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 14:48:50 +0000
Subject: [PATCH] Add 'searching known users' to the user picker

So it's more obvious it's only finding people you've already seen

Fixes https://github.com/vector-im/riot-web/issues/2931
---
 src/components/views/dialogs/ChatInviteDialog.js | 7 ++++++-
 src/components/views/elements/AddressSelector.js | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e9a041357f..7fee741e47 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -396,11 +396,16 @@ module.exports = React.createClass({
         if (this.state.error) {
             error = <div className="mx_ChatInviteDialog_error">You have entered an invalid contact. Try using their Matrix ID or email address.</div>
         } else {
+            const addressSelectorHeader = <div className="mx_ChatInviteDialog_addressSelectHeader">
+                Searching known users
+            </div>;
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref}}
                     addressList={ this.state.queryList }
                     onSelected={ this.onSelected }
-                    truncateAt={ TRUNCATE_QUERY_LIST } />
+                    truncateAt={ TRUNCATE_QUERY_LIST }
+                    header={ addressSelectorHeader }
+                />
             );
         }
 
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 2c2d7e2d61..8b2855e99d 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -28,6 +28,9 @@ module.exports = React.createClass({
         addressList: React.PropTypes.array.isRequired,
         truncateAt: React.PropTypes.number.isRequired,
         selected: React.PropTypes.number,
+
+        // Element to put as a header on top of the list
+        header: React.PropTypes.node,
     },
 
     getInitialState: function() {
@@ -147,6 +150,7 @@ module.exports = React.createClass({
 
         return (
             <div className={classes} ref={(ref) => {this.scrollElement = ref}}>
+                { this.props.header }
                 { this.createAddressListTiles() }
             </div>
         );