Merge pull request #654 from msgmaxim/no-friends

Show appropriate message in group invitation dialog on no friends

_locales/en/messages.json

@@ -2238,5 +2238,8 @@
   },
   "addingFriends": {
     "message": "Adding friends to"
+  },
+  "noFriendsToAdd": {
+    "message": "no friends to add"
   }
 }

stylesheets/_mentions.scss

@@ -49,7 +49,8 @@
   }
 }
 
-.create-group-dialog {
+.create-group-dialog,
+.invite-friends-dialog {
   .no-friends {
     text-align: center;
   }

ts/components/conversation/InviteFriendsDialog.tsx

@@ -59,6 +59,8 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
     const cancelText = window.i18n('cancel');
     const okText = window.i18n('ok');
 
+    const hasFriends = this.state.friendList.length !== 0;
+
     return (
       <div className="content">
         <p className="titleText">{titleText}</p>
@@ -70,11 +72,19 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
             onMemberClicked={this.onMemberClicked}
           />
         </div>
+        {hasFriends ? null : (
+          <p className="no-friends">`(${window.i18n('noFriendsToAdd')})`</p>
+        )}
         <div className="buttons">
           <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
             {cancelText}
           </button>
-          <button className="ok" tabIndex={0} onClick={this.onClickOK}>
+          <button
+            className="ok"
+            disabled={!hasFriends}
+            tabIndex={0}
+            onClick={this.onClickOK}
+          >
             {okText}
           </button>
         </div>

ts/components/conversation/UpdateGroupDialog.tsx

@@ -129,7 +129,9 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
             onMemberClicked={this.onMemberClicked}
           />
         </div>
-        <p className={noFriendsClasses}>(no friends to add)</p>
+        <p className={noFriendsClasses}>{`(${this.props.i18n(
+          'noFriendsToAdd'
+        )})`}</p>
         <div className="buttons">
           <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
             {cancelText}