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

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

* (to-squash) Addresses comments
This commit is contained in:
yanas 2017-07-12 10:35:00 -05:00 committed by virtuacoplenny
parent bae609b296
commit 4ccd5c6072
5 changed files with 68 additions and 6 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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));