Add Team Description to the Team Settings (#4652)

* draft

* Add Team Description to the Team Settings

* add tooltips for team description

* made changes per PM review

* add message when there is no description set in the team

* squash

1 files changed, 126 insertions, 0 deletions

diff --git a/webapp/components/team_general_tab.jsx b/webapp/components/team_general_tab.jsx
index a5281d238..955a71ac5 100644
--- a/webapp/components/team_general_tab.jsx
+++ b/webapp/components/team_general_tab.jsx
@@ -55,6 +55,10 @@ const holders = defineMessages({
     teamNameInfo: {
         id: 'general_tab.teamNameInfo',
         defaultMessage: 'Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.'
+    },
+    teamDescriptionInfo: {
+        id: 'general_tab.teamDescriptionInfo',
+        defaultMessage: 'Team description provides additional information to help users select the right team. Maximum of 50 characters.'
     }
 });
 
@@ -68,9 +72,12 @@ class GeneralTab extends React.Component {
         this.handleNameSubmit = this.handleNameSubmit.bind(this);
         this.handleInviteIdSubmit = this.handleInviteIdSubmit.bind(this);
         this.handleOpenInviteSubmit = this.handleOpenInviteSubmit.bind(this);
+        this.handleDescriptionSubmit = this.handleDescriptionSubmit.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.onUpdateNameSection = this.onUpdateNameSection.bind(this);
         this.updateName = this.updateName.bind(this);
+        this.updateDescription = this.updateDescription.bind(this);
+        this.onUpdateDescriptionSection = this.onUpdateDescriptionSection.bind(this);
         this.onUpdateInviteIdSection = this.onUpdateInviteIdSection.bind(this);
         this.updateInviteId = this.updateInviteId.bind(this);
         this.onUpdateOpenInviteSection = this.onUpdateOpenInviteSection.bind(this);
@@ -95,6 +102,7 @@ class GeneralTab extends React.Component {
             name: team.display_name,
             invite_id: team.invite_id,
             allow_open_invite: team.allow_open_invite,
+            description: team.description,
             serverError: '',
             clientError: ''
         };
@@ -103,6 +111,7 @@ class GeneralTab extends React.Component {
     componentWillReceiveProps(nextProps) {
         this.setState({
             name: nextProps.team.display_name,
+            description: nextProps.team.description,
             invite_id: nextProps.team.invite_id,
             allow_open_invite: nextProps.team.allow_open_invite
         });
@@ -215,6 +224,40 @@ class GeneralTab extends React.Component {
         this.updateSection('');
     }
 
+    handleDescriptionSubmit(e) {
+        e.preventDefault();
+
+        var state = {serverError: '', clientError: ''};
+        let valid = true;
+
+        const {formatMessage} = this.props.intl;
+        const description = this.state.description.trim();
+        if (description === this.props.team.description) {
+            state.clientError = formatMessage(holders.chooseName);
+            valid = false;
+        } else {
+            state.clientError = '';
+        }
+
+        this.setState(state);
+
+        if (!valid) {
+            return;
+        }
+
+        var data = this.props.team;
+        data.description = this.state.description;
+        updateTeam(data,
+            () => {
+                this.updateSection('');
+            },
+            (err) => {
+                state.serverError = err.message;
+                this.setState(state);
+            }
+        );
+    }
+
     componentDidMount() {
         $('#team_settings').on('hidden.bs.modal', this.handleClose);
     }
@@ -232,6 +275,15 @@ class GeneralTab extends React.Component {
         }
     }
 
+    onUpdateDescriptionSection(e) {
+        e.preventDefault();
+        if (this.props.activeSection === 'description') {
+            this.updateSection('');
+        } else {
+            this.updateSection('description');
+        }
+    }
+
     onUpdateInviteIdSection(e) {
         e.preventDefault();
         if (this.props.activeSection === 'invite_id') {
@@ -254,6 +306,10 @@ class GeneralTab extends React.Component {
         this.setState({name: e.target.value});
     }
 
+    updateDescription(e) {
+        this.setState({description: e.target.value});
+    }
+
     updateInviteId(e) {
         this.setState({invite_id: e.target.value});
     }
@@ -457,6 +513,74 @@ class GeneralTab extends React.Component {
             );
         }
 
+        let descriptionSection;
+
+        if (this.props.activeSection === 'description') {
+            const inputs = [];
+
+            let teamDescriptionLabel = (
+                <FormattedMessage
+                    id='general_tab.teamDescription'
+                    defaultMessage='Team Description'
+                />
+            );
+            if (Utils.isMobile()) {
+                teamDescriptionLabel = '';
+            }
+
+            inputs.push(
+                <div
+                    key='teamDescriptionSetting'
+                    className='form-group'
+                >
+                    <label className='col-sm-5 control-label'>{teamDescriptionLabel}</label>
+                    <div className='col-sm-7'>
+                        <input
+                            className='form-control'
+                            type='text'
+                            maxLength={Constants.MAX_TEAMDESCRIPTION_LENGTH.toString()}
+                            onChange={this.updateDescription}
+                            value={this.state.description}
+                        />
+                    </div>
+                </div>
+            );
+
+            const descriptionExtraInfo = <span>{formatMessage(holders.teamDescriptionInfo)}</span>;
+
+            descriptionSection = (
+                <SettingItemMax
+                    title={formatMessage({id: 'general_tab.teamDescription'})}
+                    inputs={inputs}
+                    submit={this.handleDescriptionSubmit}
+                    server_error={serverError}
+                    client_error={clientError}
+                    updateSection={this.onUpdateDescriptionSection}
+                    extraInfo={descriptionExtraInfo}
+                />
+            );
+        } else {
+            let describemsg = '';
+            if (this.state.description) {
+                describemsg = this.state.description;
+            } else {
+                describemsg = (
+                    <FormattedMessage
+                        id='general_tab.emptyDescription'
+                        defaultMessage="Click 'Edit' to add a team description."
+                    />
+                );
+            }
+
+            descriptionSection = (
+                <SettingItemMin
+                    title={formatMessage({id: 'general_tab.teamDescription'})}
+                    describe={describemsg}
+                    updateSection={this.onUpdateDescriptionSection}
+                />
+            );
+        }
+
         return (
             <div>
                 <div className='modal-header'>
@@ -496,6 +620,8 @@ class GeneralTab extends React.Component {
                     <div className='divider-dark first'/>
                     {nameSection}
                     <div className='divider-light'/>
+                    {descriptionSection}
+                    <div className='divider-light'/>
                     {openInviteSection}
                     <div className='divider-light'/>
                     {inviteSection}