Fix(AddPeopleDialog): Close dialog on submit (#1761)

* Fix(AddPeopleDialog): Fixes error state and close dialog

* (to-squash) Addresses comments

css/modals/_dialog.scss

@@ -86,6 +86,10 @@
         border: $modalMockAKInputBorder;
         color: inherit;
     }
+
+    &-error {
+        margin-bottom: 8px;
+    }
 }
 .modal-dialog-footer {
     font-size: $modalButtonFontSize;

lang/main.json

@@ -463,7 +463,8 @@
         "add": "Add",
         "noResults": "No matching search results",
         "searchPlaceholder": "Search for people and rooms to add",
-        "title": "Add people to your call"
+        "title": "Add people to your call",
+        "failedToAdd": "Failed to add participants"
     },
     "inlineDialogFailure": {
         "msg": "We stumbled a bit.",

package.json

@@ -23,6 +23,7 @@
     "@atlaskit/field-text": "2.7.0",
     "@atlaskit/icon": "7.0.0",
     "@atlaskit/inline-dialog": "3.2.0",
+    "@atlaskit/inline-message": "2.1.1",
     "@atlaskit/modal-dialog": "2.1.2",
     "@atlaskit/multi-select": "6.2.0",
     "@atlaskit/spinner": "2.2.3",

react/features/base/react/components/web/InlineDialogFailure.js

@@ -35,11 +35,13 @@ class InlineDialogFailure extends Component {
         const { t } = this.props;
 
         const supportLink = interfaceConfig.SUPPORT_URL;
+        const supportString = t('inlineDialogFailure.supportMsg');
         const supportLinkElem
             = supportLink
                 ? ( // eslint-disable-line no-extra-parens
                     <div className = 'inline-dialog-error-text'>
-                        <span>{ t('inlineDialogFailure.supportMsg') }</span>
+                        <span>{ supportString.padEnd(supportString.length + 1) }
+                        </span>
                         <span>
                             <a
                                 href = { supportLink }

react/features/invite/components/AddPeopleDialog.web.js

@@ -2,15 +2,18 @@ import React, { Component } from 'react';
 import { Immutable } from 'nuclear-js';
 import { connect } from 'react-redux';
 import Avatar from '@atlaskit/avatar';
+import InlineMessage from '@atlaskit/inline-message';
 
 import { getInviteURL } from '../../base/connection';
-import { Dialog } from '../../base/dialog';
+import { Dialog, hideDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import MultiSelectAutocomplete
     from '../../base/react/components/web/MultiSelectAutocomplete';
 
 import { invitePeople, searchPeople } from '../functions';
 
+declare var interfaceConfig: Object;
+
 /**
  * The dialog that allows to invite people to the call.
  */
@@ -41,6 +44,11 @@ class AddPeopleDialog extends Component {
          */
         _peopleSearchUrl: React.PropTypes.string,
 
+        /**
+         * The function closing the dialog.
+         */
+        hideDialog: React.PropTypes.func,
+
         /**
          * Invoked to obtain translated strings.
          */
@@ -132,7 +140,7 @@ class AddPeopleDialog extends Component {
                 onSubmit = { this._onSubmit }
                 titleKey = 'addPeople.title'
                 width = 'small'>
-                { this._getUserInputForm() }
+                { this._renderUserInputForm() }
             </Dialog>
         );
     }
@@ -143,11 +151,12 @@ class AddPeopleDialog extends Component {
      * @returns {ReactElement}
      * @private
      */
-    _getUserInputForm() {
+    _renderUserInputForm() {
         const { t } = this.props;
 
         return (
             <div className = 'add-people-form-wrap'>
+                { this._renderErrorMessage() }
                 <MultiSelectAutocomplete
                     isDisabled
                         = { this.state.addToCallInProgress || false }
@@ -210,6 +219,8 @@ class AddPeopleDialog extends Component {
                 this.setState({
                     addToCallInProgress: false
                 });
+
+                this.props.hideDialog();
             })
             .catch(() => {
                 this.setState({
@@ -220,6 +231,49 @@ class AddPeopleDialog extends Component {
         }
     }
 
+    /**
+     * Renders the error message if the add doesn't succeed.
+     *
+     * @returns {ReactElement|null}
+     * @private
+     */
+    _renderErrorMessage() {
+        if (!this.state.addToCallError) {
+            return null;
+        }
+
+        const { t } = this.props;
+        const supportString = t('inlineDialogFailure.supportMsg');
+        const supportLink = interfaceConfig.SUPPORT_URL;
+        const supportLinkContent
+            = ( // eslint-disable-line no-extra-parens
+                <span>
+                    <span>
+                        { supportString.padEnd(supportString.length + 1) }
+                    </span>
+                    <span>
+                        <a
+                            href = { supportLink }
+                            rel = 'noopener noreferrer'
+                            target = '_blank'>
+                            { t('inlineDialogFailure.support') }
+                        </a>
+                    </span>
+                    <span>.</span>
+                </span>
+            );
+
+        return (
+            <div className = 'modal-dialog-form-error'>
+                <InlineMessage
+                    title = { t('addPeople.failedToAdd') }
+                    type = 'error'>
+                    { supportLinkContent }
+                </InlineMessage>
+            </div>
+        );
+    }
+
     /**
      * Sets the instance variable for the multi select component
      * element so it can be accessed directly.
@@ -256,4 +310,4 @@ function _mapStateToProps(state) {
 }
 
 export default translate(
-    connect(_mapStateToProps)(AddPeopleDialog));
+    connect(_mapStateToProps, { hideDialog })(AddPeopleDialog));