Staging (#53)

Changes for DatePicker Feature in OOO

components/admin_console/admin_definition.jsx

@@ -3011,6 +3011,14 @@ export default {
                             help_text: t('admin.customization.showOutOfOfficeInStatusDropdownDesc'),
                             help_text_default: 'Allows user to change status to Out Of Office either from status dropdown or from notification tab in settings sidebar.',
                         },
+                        {
+                            type: Constants.SettingsTypes.TYPE_BOOL,
+                            key: 'ServiceSettings.EnableOutOfOfficeDatePicker',
+                            label: t('admin.customization.enableOutOfOfficeDatePicker'),
+                            label_default: 'Enable Out Of Office Date Picker:',
+                            help_text: t('admin.customization.enableOutOfOfficeDatePickerDesc'),
+                            help_text_default: 'Allows user to select date range for Out Of Office status.',
+                        },
                     ],
                 },
             },

components/status_dropdown/index.jsx

@@ -45,3 +45,4 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(StatusDropdown);
+

components/status_dropdown/ooo_settings/modal/ooo_settings_modal.jsx

@@ -156,7 +156,7 @@ class AutoResponderModal extends React.Component {
                     <Modal.Title id='oooAutoResponderTitle'>
                         <FormattedMessage
                             id='status.dropdown.modal.title'
-                            defaultMessage='Automatic Replies(Out of Office)'
+                            defaultMessage='Automatic Replies (Out of Office)'
                         />
                     </Modal.Title>
                 </Modal.Header>

components/status_dropdown/ooo_settings/ooo_auto_responder/index.js

@@ -12,9 +12,11 @@ function mapStateToProps(state) {
     const config = getConfig(state);
 
     const enableAutoResponder = config.ExperimentalEnableAutomaticReplies === 'true';
+    const enableOutOfOfficeDatePicker = config.EnableOutOfOfficeDatePicker === 'true' && enableAutoResponder;
 
     return {
         enableAutoResponder,
+        enableOutOfOfficeDatePicker,
     };
 }
 

components/status_dropdown/ooo_settings/ooo_auto_responder/ooo_auto_reponder.jsx

@@ -3,14 +3,30 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+import {getUserTimezone} from 'mattermost-redux/src/selectors/entities/timezone';
+import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
 
+import store from 'stores/redux_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import ManageAutoResponder from 'components/user_settings/notifications/manage_auto_responder.jsx';
 
+import {getBrowserUtcOffset, getUtcOffsetForTimeZone} from '../../../../utils/timezone';
+
 function getNotificationsStateFromProps(props) {
     const user = props.user;
 
+    const state = store.getState();
+    const userId = getCurrentUserId(state);
+    const userTimezone = getUserTimezone(state, userId);
+    const userCurrentTimezone = getUserCurrentTimezone(userTimezone);
+    const timezoneOffset = (userCurrentTimezone.length > 0 ? getUtcOffsetForTimeZone(userCurrentTimezone) : getBrowserUtcOffset()) * 60;
+
+    const fromDate = '';
+    const toDate = '';
+    const fromTime = '';
+    const toTime = '';
     let autoResponderActive = false;
     let autoResponderMessage = Utils.localizeMessage(
         'user.settings.notifications.autoResponderDefault',
@@ -30,13 +46,20 @@ function getNotificationsStateFromProps(props) {
 
         autoResponderActive,
         autoResponderMessage,
+        fromDate,
+        fromTime,
+        toTime,
+        toDate,
+        timezoneOffset,
         isSaving: false,
     };
 }
 
 export default class oooAutoResponder extends React.Component {
     static propTypes = {
+        user: PropTypes.object,
         updateSection: PropTypes.func,
+        enableOutOfOfficeDatePicker: PropTypes.bool,
         enableAutoResponder: PropTypes.bool,
         actions: PropTypes.shape({
             updateMe: PropTypes.func.isRequired,
@@ -65,6 +88,12 @@ export default class oooAutoResponder extends React.Component {
             );
         }
 
+        data.fromDate = this.state.fromDate;
+        data.fromTime = this.state.fromTime;
+        data.toDate = this.state.toDate;
+        data.toTime = this.state.toTime;
+        data.offset = this.state.timezoneOffset.toString();
+
         this.setState({isSaving: true});
 
         this.props.actions.updateMe({notify_props: data}).
@@ -109,6 +138,7 @@ export default class oooAutoResponder extends React.Component {
         const autoResponderSection = (
             <div>
                 <ManageAutoResponder
+                    isOooDatePickerEnabled={this.props.enableOutOfOfficeDatePicker}
                     isOooStatusDropdown={true}
                     autoResponderActive={true}
                     autoResponderMessage={this.state.autoResponderMessage}

components/status_dropdown/status_dropdown.jsx

@@ -169,7 +169,7 @@ export default class StatusDropdown extends React.Component {
                     <MenuGroup>
                         <MenuItemAction
                             show={this.isUserOutOfOffice()}
-                            onClick={() => null}
+                            onClick={this.setOutOfOffice}
                             text={localizeMessage('status_dropdown.set_ooo', 'Out of office')}
                             extraText={localizeMessage('status_dropdown.set_ooo.extra', 'Automatic Replies are enabled')}
                         />

components/time_picker.jsx

@@ -0,0 +1,52 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import PropTypes from 'prop-types';
+import React from 'react';
+import Select from 'react-select';
+
+export default class TimePicker extends React.PureComponent {
+    static proptypes = {
+        keyValue: PropTypes.string,
+        defaultValue: PropTypes.string,
+        submit: PropTypes.func.isRequired,
+        options: PropTypes.array.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+        this.onSelectChange = this.onSelectChange.bind(this);
+        this.state = {
+            // eslint-disable-next-line react/prop-types
+            selectedOption: {value: this.props.defaultValue, label: this.props.defaultValue},
+        };
+    }
+    async onSelectChange(selectedOption) {
+        this.setState({selectedOption}, async () => {
+            // eslint-disable-next-line react/prop-types
+            await this.props.submit(this.props.keyValue, selectedOption.label);
+        });
+    }
+
+    render() {
+        // eslint-disable-next-line react/prop-types
+        var options = this.props.options;
+        return (
+            <Select
+                value={this.state.selectedOption}
+                styles={customStyles}
+                onChange={this.onSelectChange}
+                options={options}
+            />
+        );
+    }
+}
+
+const customStyles = {
+    control: (base) => ({
+        ...base,
+        width: '150px',
+        minHeight: '10px',
+        textAlign: 'center',
+    }),
+};
+