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

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

* (to-squash) Addresses comments

css/modals/_dialog.scss

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

lang/main.json

         "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

     "@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

         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

 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.
  */
          */
         _peopleSearchUrl: React.PropTypes.string,
 
+        /**
+         * The function closing the dialog.
+         */
+        hideDialog: React.PropTypes.func,
+
         /**
          * Invoked to obtain translated strings.
          */
                 onSubmit = { this._onSubmit }
                 titleKey = 'addPeople.title'
                 width = 'small'>
-                { this._getUserInputForm() }
+                { this._renderUserInputForm() }
             </Dialog>
         );
     }
      * @returns {ReactElement}
      * @private
      */
-    _getUserInputForm() {
+    _renderUserInputForm() {
         const { t } = this.props;
 
         return (
             <div className = 'add-people-form-wrap'>
+                { this._renderErrorMessage() }
                 <MultiSelectAutocomplete
                     isDisabled
                         = { this.state.addToCallInProgress || false }
                 this.setState({
                     addToCallInProgress: false
                 });
+
+                this.props.hideDialog();
             })
             .catch(() => {
                 this.setState({
         }
     }
 
+    /**
+     * 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.
 }
 
 export default translate(
-    connect(_mapStateToProps)(AddPeopleDialog));
+    connect(_mapStateToProps, { hideDialog })(AddPeopleDialog));