convert_channel_modal.jsx

// 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 {Modal} from 'react-bootstrap';
import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';

import {trackEvent} from 'actions/diagnostics_actions.jsx';
import Constants from 'utils/constants.jsx';

import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';

export default class ConvertChannelModal extends React.PureComponent {
    static propTypes = {

        /**
        * Function called when modal is dismissed
        */
        onHide: PropTypes.func.isRequired,
        channelId: PropTypes.string.isRequired,
        channelDisplayName: PropTypes.string.isRequired,

        actions: PropTypes.shape({

            /**
            * Function called for converting channel to private,
            */
            convertChannelToPrivate: PropTypes.func.isRequired,
        }),
    }

    constructor(props) {
        super(props);

        this.state = {show: true};
    }

    handleConvert = () => {
        const {actions, channelId} = this.props;
        if (channelId.length !== Constants.CHANNEL_ID_LENGTH) {
            return;
        }

        actions.convertChannelToPrivate(channelId);
        trackEvent('actions', 'convert_to_private_channel', {channel_id: channelId});
        this.onHide();
    }

    onHide = () => {
        this.setState({show: false});
    }

    render() {
        const {
            channelDisplayName,
            onHide,
        } = this.props;

        return (
            <Modal
                show={this.state.show}
                onHide={this.onHide}
                onExited={onHide}
            >
                <Modal.Header closeButton={true}>
                    <h4 className='modal-title'>
                        <FormattedMessage
                            id='convert_channel.title'
                            defaultMessage='Convert {display_name} to a private channel?'
                            values={{
                                display_name: channelDisplayName,
                            }}
                        />
                    </h4>
                </Modal.Header>
                <Modal.Body>
                    <p>
                        <FormattedMarkdownMessage
                            id='convert_channel.question1'
                            defaultMessage='When you convert **{display_name}** to a private channel, history and membership are preserved. Publicly shared files remain accessible to anyone with the link. Membership in a private channel is by invitation only.'
                            values={{
                                display_name: channelDisplayName,
                            }}
                        />
                    </p>
                    <p>
                        <FormattedHTMLMessage
                            id='convert_channel.question2'
                            defaultMessage='The change is permanent and cannot be undone.'
                        />
                    </p>
                    <p>
                        <FormattedMarkdownMessage
                            id='convert_channel.question3'
                            defaultMessage='Are you sure you want to convert **{display_name}** to a private channel?'
                            values={{
                                display_name: channelDisplayName,
                            }}
                        />
                    </p>
                </Modal.Body>
                <Modal.Footer>
                    <button
                        type='button'
                        className='btn btn-link'
                        onClick={this.onHide}
                        tabIndex='2'
                    >
                        <FormattedMessage
                            id='convert_channel.cancel'
                            defaultMessage='No, cancel'
                        />
                    </button>
                    <button
                        type='button'
                        className='btn btn-primary'
                        data-dismiss='modal'
                        onClick={this.handleConvert}
                        autoFocus={true}
                        tabIndex='1'
                    >
                        <FormattedMessage
                            id='convert_channel.confirm'
                            defaultMessage='Yes, convert to private channel'
                        />
                    </button>
                </Modal.Footer>
            </Modal>
        );
    }
}