Split delete modal trigger for reuse (#5740)

Spllit delete modal trigger for reuse and make emoji delete
to use this modal trigger.

webapp/components/delete_modal_trigger.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import ConfirmModal from './confirm_modal.jsx';
+
+export default class DeleteModalTrigger extends React.Component {
+    constructor(props) {
+        super(props);
+        if (this.constructor === DeleteModalTrigger) {
+            throw new TypeError('Can not construct abstract class.');
+        }
+        this.handleConfirm = this.handleConfirm.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+        this.handleOpenModal = this.handleOpenModal.bind(this);
+
+        this.state = {
+            showDeleteModal: false
+        };
+    }
+
+    handleOpenModal(e) {
+        e.preventDefault();
+
+        this.setState({
+            showDeleteModal: true
+        });
+    }
+
+    handleConfirm(e) {
+        this.props.onDelete(e);
+    }
+
+    handleCancel() {
+        this.setState({
+            showDeleteModal: false
+        });
+    }
+
+    render() {
+        return (
+            <span>
+                <a
+                    href='#'
+                    onClick={this.handleOpenModal}
+                >
+                    { this.triggerTitle }
+                </a>
+                <ConfirmModal
+                    show={this.state.showDeleteModal}
+                    title={this.modalTitle}
+                    message={this.modalMessage}
+                    confirmButton={this.modalConfirmButton}
+                    onConfirm={this.handleConfirm}
+                    onCancel={this.handleCancel}
+                />
+            </span>
+        );
+    }
+}
+
+DeleteModalTrigger.propTypes = {
+    onDelete: React.PropTypes.func.isRequired
+};

webapp/components/emoji/components/delete_emoji_modal.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import DeleteModalTrigger from '../../delete_modal_trigger.jsx';
+
+export default class DeleteEmoji extends DeleteModalTrigger {
+    get triggerTitle() {
+        return (
+            <FormattedMessage
+                id='emoji_list.delete'
+                defaultMessage='Delete'
+            />
+        );
+    }
+
+    get modalTitle() {
+        return (
+            <FormattedMessage
+                id='emoji_list.delete.confirm.title'
+                defaultMessage='Delete Custom Emoji'
+            />
+        );
+    }
+
+    get modalMessage() {
+        return (
+            <div className='alert alert-warning'>
+                <i className='fa fa-warning'/>
+                <FormattedMessage
+                    id='emoji_list.delete.confirm.msg'
+                    defaultMessage='This action permanently deletes the custom emoji. Are you sure you want to delete it?'
+                />
+            </div>
+        );
+    }
+
+    get modalConfirmButton() {
+        return (
+            <FormattedMessage
+                id='emoji_list.delete.confirm.button'
+                defaultMessage='Delete'
+            />
+        );
+    }
+}
+
+DeleteEmoji.propTypes = {
+    onDelete: React.PropTypes.func.isRequired
+};

webapp/components/emoji/components/emoji_list_item.jsx

@@ -4,6 +4,7 @@
 import React from 'react';
 
 import EmojiStore from 'stores/emoji_store.jsx';
+import DeleteEmoji from './delete_emoji_modal.jsx';
 
 import * as Utils from 'utils/utils.jsx';
 
@@ -80,15 +81,7 @@ export default class EmojiListItem extends React.Component {
         let deleteButton = null;
         if (this.props.onDelete) {
             deleteButton = (
-                <a
+                <DeleteEmoji onDelete={this.handleDelete}/>
-                    href='#'
-                    onClick={this.handleDelete}
-                >
-                    <FormattedMessage
-                        id='emoji_list.delete'
-                        defaultMessage='Delete'
-                    />
-                </a>
             );
         }
 

webapp/components/integrations/components/delete_integration.jsx

@@ -1,48 +1,29 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import ConfirmModal from '../../confirm_modal.jsx';
+import DeleteModalTrigger from '../../delete_modal_trigger.jsx';
 
-export default class DeleteIntegration extends React.Component {
+export default class DeleteIntegration extends DeleteModalTrigger {
-    constructor(props) {
+    get triggerTitle() {
-        super(props);
+        return (
-
+            <FormattedMessage
-        this.handleConfirm = this.handleConfirm.bind(this);
+                id='installed_integrations.delete'
-        this.handleCancel = this.handleCancel.bind(this);
+                defaultMessage='Delete'
-        this.handleOpenModal = this.handleOpenModal.bind(this);
+            />
-
+        );
-        this.state = {
-            showDeleteModal: false
-        };
     }
 
-    handleOpenModal(e) {
+    get modalTitle() {
-        e.preventDefault();
+        return (
-
-        this.setState({
-            showDeleteModal: true
-        });
-    }
-
-    handleConfirm() {
-        this.props.onDelete();
-    }
-
-    handleCancel() {
-        this.setState({
-            showDeleteModal: false
-        });
-    }
-
-    render() {
-        const title = (
             <FormattedMessage
                 id='integrations.delete.confirm.title'
                 defaultMessage='Delete Integration'
             />
         );
+    }
 
-        const message = (
+    get modalMessage() {
+        return (
             <div className='alert alert-warning'>
                 <i className='fa fa-warning'/>
                 <FormattedMessage
@@ -51,35 +32,15 @@ export default class DeleteIntegration extends React.Component {
                 />
             </div>
         );
+    }
 
-        const confirmButton = (
+    get modalConfirmButton() {
+        return (
             <FormattedMessage
                 id='integrations.delete.confirm.button'
                 defaultMessage='Delete'
             />
         );
-
-        return (
-            <span>
-                <a
-                    href='#'
-                    onClick={this.handleOpenModal}
-                >
-                    <FormattedMessage
-                        id='installed_integrations.delete'
-                        defaultMessage='Delete'
-                    />
-                </a>
-                <ConfirmModal
-                    show={this.state.showDeleteModal}
-                    title={title}
-                    message={message}
-                    confirmButton={confirmButton}
-                    onConfirm={this.handleConfirm}
-                    onCancel={this.handleCancel}
-                />
-            </span>
-        );
     }
 }
 

webapp/i18n/en.json

@@ -1275,6 +1275,9 @@
   "emoji_list.add": "Add Custom Emoji",
   "emoji_list.creator": "Creator",
   "emoji_list.delete": "Delete",
+  "emoji_list.delete.confirm.button": "Delete",
+  "emoji_list.delete.confirm.msg": "This action permanently deletes the custom emoji. Are you sure you want to delete it?",
+  "emoji_list.delete.confirm.title": "Delete Custom Emoji",
   "emoji_list.empty": "No Custom Emoji Found",
   "emoji_list.header": "Custom Emoji",
   "emoji_list.help": "Custom emoji are available to everyone on your server. Type ':' in a message box to bring up the emoji selection menu. Other users may need to refresh the page before new emojis appear.",