PLT-4257 Add pop-up asking if user wants to reset status (#6526)

* Add pop-up asking if user wants to reset status

* Update test snapshot

* Update prop name for old uses of confirm modal

* Updating checkbox (#6586)

* Updating style for checkbox (#6596)

2 files changed, 176 insertions, 0 deletions

diff --git a/webapp/components/reset_status_modal/index.js b/webapp/components/reset_status_modal/index.js
new file mode 100644
index 000000000..34f08c7a5
--- /dev/null
+++ b/webapp/components/reset_status_modal/index.js
@@ -0,0 +1,34 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {Preferences} from 'mattermost-redux/constants';
+import {get} from 'mattermost-redux/selectors/entities/preferences';
+
+import {savePreferences} from 'mattermost-redux/actions/preferences';
+import {setStatus} from 'mattermost-redux/actions/users';
+import {autoResetStatus} from 'actions/user_actions.jsx';
+
+import ResetStatusModal from './reset_status_modal.jsx';
+
+function mapStateToProps(state, ownProps) {
+    const {currentUserId} = state.entities.users;
+    return {
+        ...ownProps,
+        autoResetPref: get(state, Preferences.CATEGORY_AUTO_RESET_MANUAL_STATUS, currentUserId, '')
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            autoResetStatus,
+            setStatus,
+            savePreferences
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ResetStatusModal);
diff --git a/webapp/components/reset_status_modal/reset_status_modal.jsx b/webapp/components/reset_status_modal/reset_status_modal.jsx
new file mode 100644
index 000000000..4a04d7561
--- /dev/null
+++ b/webapp/components/reset_status_modal/reset_status_modal.jsx
@@ -0,0 +1,142 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import ConfirmModal from 'components/confirm_modal.jsx';
+
+import {toTitleCase} from 'utils/utils.jsx';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+import {Preferences} from 'mattermost-redux/constants';
+
+export default class ResetStatusModal extends React.PureComponent {
+    static propTypes = {
+
+        /*
+         * The user's preference for whether their status is automatically reset
+         */
+        autoResetPref: PropTypes.string,
+        actions: PropTypes.shape({
+
+            /*
+             * Function to get and then reset the user's status if needed
+             */
+            autoResetStatus: PropTypes.func.isRequired,
+
+            /*
+             * Function to set the status for a user
+             */
+            setStatus: PropTypes.func.isRequired,
+
+            /*
+             * Function to save user preferences
+             */
+            savePreferences: PropTypes.func.isRequired
+        }).isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            show: false,
+            currentUserStatus: {}
+        };
+    }
+
+    componentDidMount() {
+        this.props.actions.autoResetStatus().then(
+            (status) => {
+                const statusIsManual = status.manual;
+                const autoResetPrefNotSet = this.props.autoResetPref === '';
+
+                this.setState({
+                    currentUserStatus: status, // Set in state until status refactor where we store 'manual' field in redux
+                    show: Boolean(statusIsManual && autoResetPrefNotSet)
+                });
+            }
+        );
+    }
+
+    onConfirm = (checked) => {
+        this.setState({show: false});
+
+        const newStatus = {...this.state.currentUserStatus};
+        newStatus.status = 'online';
+        this.props.actions.setStatus(newStatus);
+
+        if (checked) {
+            const pref = {category: Preferences.CATEGORY_AUTO_RESET_MANUAL_STATUS, user_id: newStatus.user_id, name: newStatus.user_id, value: 'true'};
+            this.props.actions.savePreferences(pref.user_id, [pref]);
+        }
+    }
+
+    onCancel = (checked) => {
+        this.setState({show: false});
+
+        if (checked) {
+            const status = {...this.state.currentUserStatus};
+            const pref = {category: Preferences.CATEGORY_AUTO_RESET_MANUAL_STATUS, user_id: status.user_id, name: status.user_id, value: 'false'};
+            this.props.actions.savePreferences(pref.user_id, [pref]);
+        }
+    }
+
+    render() {
+        const userStatus = toTitleCase(this.state.currentUserStatus.status || '');
+        const manualStatusTitle = (
+            <FormattedMessage
+                id='modal.manual_status.title'
+                defaultMessage='Your status is set to "{status}"'
+                values={{
+                    status: userStatus
+                }}
+            />
+        );
+
+        const manualStatusMessage = (
+            <FormattedMessage
+                id='modal.manual_status.message'
+                defaultMessage='Would you like to switch your status to "Online"?'
+            />
+        );
+
+        const manualStatusButton = (
+            <FormattedMessage
+                id='modal.manual_status.button'
+                defaultMessage='Yes, set my status to "Online"'
+            />
+        );
+
+        const manualStatusCancel = (
+            <FormattedMessage
+                id='modal.manual_status.cancel'
+                defaultMessage='No, keep it as "{status}"'
+                values={{
+                    status: userStatus
+                }}
+            />
+        );
+
+        const manualStatusCheckbox = (
+            <FormattedMessage
+                id='modal.manual_status.ask'
+                defaultMessage='Do not ask me again'
+            />
+        );
+
+        return (
+            <ConfirmModal
+                show={this.state.show}
+                title={manualStatusTitle}
+                message={manualStatusMessage}
+                confirmButtonText={manualStatusButton}
+                onConfirm={this.onConfirm}
+                cancelButtonText={manualStatusCancel}
+                onCancel={this.onCancel}
+                showCheckbox={true}
+                checkboxText={manualStatusCheckbox}
+            />
+        );
+    }
+}