Merge pull request #484 from mattermost/mm-1994

MM-1994 Improvements to import UI

web/react/components/setting_upload.jsx

@@ -8,7 +8,8 @@ module.exports = React.createClass({
         submit: React.PropTypes.func.isRequired,
         fileTypesAccepted: React.PropTypes.string.isRequired,
         clientError: React.PropTypes.string,
-        serverError: React.PropTypes.string
+        serverError: React.PropTypes.string,
+        helpText: React.PropTypes.string
     },
     getInitialState: function() {
         return {
@@ -38,14 +39,6 @@ module.exports = React.createClass({
             this.setState({clientError: 'No file selected.'});
         }
     },
-    doCancel: function(e) {
-        e.preventDefault();
-        this.refs.uploadinput.getDOMNode().value = '';
-        this.setState({
-            clientError: '',
-            serverError: ''
-        });
-    },
     onFileSelect: function(e) {
         var filename = $(e.target).val();
         if (filename.substring(3, 11) === 'fakepath') {
@@ -70,6 +63,7 @@ module.exports = React.createClass({
         return (
             <ul className='section-max'>
                 <li className='col-xs-12 section-title'>{this.props.title}</li>
+                <li className='col-xs-offset-3'>{this.props.helpText}</li>
                 <li className='col-xs-offset-3 col-xs-8'>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>
@@ -79,12 +73,6 @@ module.exports = React.createClass({
                                 onClick={this.doSubmit}>
                                 Import
                             </a>
-                            <a
-                                className='btn btn-sm btn-link theme'
-                                href='#'
-                                onClick={this.doCancel}>
-                                Cancel
-                            </a>
                             <div className='file-status file-name hide'></div>
                             {serverError}
                             {clientError}

web/react/components/team_import_tab.jsx

@@ -20,10 +20,22 @@ module.exports = React.createClass({
         utils.importSlack(file, this.onImportSuccess, this.onImportFailure);
     },
     render: function() {
+        var uploadHelpText = (
+            <div>
+                <br/>
+                Slack does now allow you to export any of your files or images stored in slack. Private channels and direct message channels are also not exported. Therefore, no files, images, or private channels will be imported. 
+                <br/>
+                Slack bot posts are not imported.
+                <br/>
+                Unable to import Slack channels that are not valid Mattermost channels. (ex underscores)
+                <br/>
+            </div>
+        );
         var uploadSection = (
             <SettingUpload
                 title='Import from Slack'
                 submit={this.doImportSlack}
+                helpText={uploadHelpText}
                 fileTypesAccepted='.zip'/>
         );
 
@@ -39,12 +51,12 @@ module.exports = React.createClass({
             break;
             case 'done':
                 messageSection = (
-                    <p className="confirm-import alert alert-success"><i className="fa fa-check"></i> Import sucessfull: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p>
+                    <p className="confirm-import alert alert-success"><i className="fa fa-check"></i> Import successful: <a href={this.state.link} download='MattermostImportSummary.txt'>View Summary</a></p>
             );
             break;
             case 'fail':
                 messageSection = (
-                    <p className="confirm-import alert alert-warning"><i className="fa fa-warning"></i> Import failure: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p>
+                    <p className="confirm-import alert alert-warning"><i className="fa fa-warning"></i> Import failure: <a href={this.state.link} download='MattermostImportSummary.txt'>View Summary</a></p>
             );
             break;
         }