Implemention of slack import feature.

web/react/components/team_settings.jsx

@@ -6,6 +6,7 @@ var TeamStore = require('../stores/team_store.jsx');
 var SettingItemMin = require('./setting_item_min.jsx');
 var SettingItemMax = require('./setting_item_max.jsx');
 var SettingPicture = require('./setting_picture.jsx');
+var SettingUpload = require('./setting_upload.jsx');
 var utils = require('../utils/utils.jsx');
 
 var client = require('../utils/client.jsx');
@@ -126,6 +127,69 @@ var FeatureTab = React.createClass({
     }
 });
 
+var ImportTab = React.createClass({
+    getInitialState: function() {
+        return {status: 'ready'};
+    },
+    onImportFailure: function() {
+        this.setState({status: 'fail'});
+    },
+    onImportSuccess: function(data) {
+        this.setState({status: 'done'});
+    },
+    doImportSlack: function(file) {
+        this.setState({status: 'in-progress'});
+        utils.importSlack(file, this.onImportSuccess, this.onImportFailure);
+    },
+    render: function() {
+
+		uploadSection = (
+			<SettingUpload
+				title="Import from Slack"
+                submit={this.doImportSlack}
+                fileTypesAccepted='.zip'/>
+		);
+
+        var messageSection;
+        switch (this.state.status) {
+            case 'ready':
+                messageSection = '';
+                break;
+            case 'in-progress':
+                messageSection = (
+                    <p>Importing...</p>
+                );
+                break;
+            case 'done':
+                messageSection = (
+                    <p>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>
+                );
+                break;
+        }
+
+        return (
+            <div>
+                <div className="modal-header">
+                    <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 className="modal-title" ref="title"><i className="modal-back"></i>Import</h4>
+                </div>
+                <div ref="wrapper" className="user-settings">
+                    <h3 className="tab-header">Import</h3>
+                    <div className="divider-dark first"/>
+					{uploadSection}
+                    {messageSection}
+                    <div className="divider-dark"/>
+                </div>
+            </div>
+        );
+	}
+});
+
 module.exports = React.createClass({
     componentDidMount: function() {
         TeamStore.addChangeListener(this._onChange);
@@ -154,7 +218,13 @@ module.exports = React.createClass({
                     <FeatureTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
                 </div>
             );
-        } else {
+		} else if (this.props.activeTab === 'import') {
+			return (
+                <div>
+                    <ImportTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
+                </div>
+			);
+		} else {
             return <div/>;
         }
     }