MM-1696 - Improvements for Slack Import

3 files changed, 37 insertions, 9 deletions

diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx
index 870710850..02789f5dd 100644
--- a/web/react/components/setting_upload.jsx
+++ b/web/react/components/setting_upload.jsx
@@ -46,17 +46,25 @@ module.exports = React.createClass({
             serverError: ''
         });
     },
+    onFileSelect: function(e) {
+        var filename = $(e.target).val();
+        if (filename.substring(3, 11) === 'fakepath') {
+            filename = filename.substring(12);
+        }
+        $(e.target).closest('li').find('.file-status').addClass('hide');
+        $(e.target).closest('li').find('.file-name').removeClass('hide').html(filename);
+    },
     render: function() {
         var clientError = null;
         if (this.state.clientError) {
             clientError = (
-                <div className='form-group has-error'><label className='control-label'>{this.state.clientError}</label></div>
+                <div className='file-status'>{this.state.clientError}</div>
             );
         }
         var serverError = null;
         if (this.state.serverError) {
             serverError = (
-                <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>
+                <div className='file-status'>{this.state.serverError}</div>
             );
         }
         return (
@@ -65,11 +73,21 @@ module.exports = React.createClass({
                 <li className='col-xs-offset-3 col-xs-8'>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>
+                            <span className='btn btn-sm btn-primary btn-file sel-btn'>Select file<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span>
+                            <a
+                                className={'btn btn-sm btn-primary'}
+                                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}
-                            <span className='btn btn-sm btn-primary btn-file sel-btn'>SelectFile<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span>
-                            <a className={'btn btn-sm btn-primary'} onClick={this.doSubmit}>Import</a>
-                            <a className='btn btn-sm theme' href='#' onClick={this.doCancel}>Cancel</a>
                         </li>
                     </ul>
                 </li>
diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx
index 131add999..c21701c0e 100644
--- a/web/react/components/team_import_tab.jsx
+++ b/web/react/components/team_import_tab.jsx
@@ -34,17 +34,17 @@ module.exports = React.createClass({
             break;
             case 'in-progress':
                 messageSection = (
-                    <p>Importing...</p>
+                    <p className="confirm-import alert alert-warning"><i className="fa fa-spinner fa-pulse"></i> Importing...</p>
             );
             break;
             case 'done':
                 messageSection = (
-                    <p>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 sucessfull: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p>
             );
             break;
             case 'fail':
                 messageSection = (
-                    <p>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='MattermostImportSummery.txt'>View Summery</a></p>
             );
             break;
         }
@@ -59,8 +59,8 @@ module.exports = React.createClass({
                     <h3 className='tab-header'>Import</h3>
                     <div className='divider-dark first'/>
                     {uploadSection}
-                    {messageSection}
                     <div className='divider-dark'/>
+                    {messageSection}
                 </div>
             </div>
         );
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 0262ef60c..99a7eb7bc 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -111,6 +111,16 @@
                 }
             }
 
+            .file-status {
+                font-size: 13px;
+                margin-top: 8px;
+                color: #555;
+            }
+
+            .confirm-import {
+                padding: 4px 10px;
+                margin: 10px 0;
+            }
 
         }
     }