add delete function

resource/locales/en-US/translation.json

@@ -373,7 +373,7 @@
     "siteurl_help": "Site full URL beginning from <code>http://</code> or <code>https://</code>.",
     "Confidential name": "Confidential name",
     "Default Language for new users": "Default Language for new users",
-    "ex) internal use only":"ex): internal use only",
+    "ex) internal use only": "ex): internal use only",
     "File Uploading": "File Uploading",
     "enable_files_except_image": "Enable file upload other than image files.",
     "attach_enable": "You can attach files other than image files if you enable this option.",
@@ -611,7 +611,8 @@
       "ifttt_link": "Create a new IFTTT applet with Email trigger"
     },
     "updated_slackApp": "Succeeded to update Slack App Configuration setting",
-    "add_notification_pattern": "Add user trigger notification patterns"
+    "add_notification_pattern": "Add user trigger notification patterns",
+    "delete__notification_pattern": "Delete notification pattern"
   },
   "customize_page": {
     "recommended": "Recommended",

resource/locales/ja/translation.json

@@ -594,7 +594,8 @@
       "ifttt_link": "IFTTT でメールトリガの新しいアプレットを作る"
     },
     "updated_slackApp": "SlackApp設定を更新しました",
-    "add_notification_pattern": "通知パターンを追加しました。"
+    "add_notification_pattern": "通知パターンを追加しました。",
+    "delete__notification_pattern": "通知パターンを削除しました。"
   },
   "customize_page": {
     "recommended": "おすすめ",

src/client/js/components/Admin/Notification/GlobalNotificationList.jsx

@@ -2,13 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import urljoin from 'url-join';
+import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
 import NotificationDeleteModal from './NotificationDeleteModal';
 
+const logger = loggerFactory('growi:GolobalNotificationList');
 
 class GlobalNotificationList extends React.Component {
 
@@ -20,12 +23,27 @@ class GlobalNotificationList extends React.Component {
     };
 
     this.toggleDeleteModal = this.toggleDeleteModal.bind(this);
+    this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
   toggleDeleteModal() {
     this.setState({ isNotificationDeleteModalShown: !this.state.isNotificationDeleteModalShown });
   }
 
+  async onClickSubmit() {
+    const { t } = this.props;
+
+    try {
+      // await this.props.adminMarkDownContainer.updateLineBreakSetting();
+      toastSuccess(t('notification_setting.delete__notification_pattern'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+    this.setState({ isNotificationDeleteModalShown: false });
+  }
+
   render() {
     const { t, adminNotificationContainer } = this.props;
     const { globalNotifications } = adminNotificationContainer.state;
@@ -102,7 +120,11 @@ class GlobalNotificationList extends React.Component {
             </tr>
           );
         })}
-        <NotificationDeleteModal isOpen={this.state.isNotificationDeleteModalShown} onClose={this.toggleDeleteModal} />;
+        <NotificationDeleteModal
+          isOpen={this.state.isNotificationDeleteModalShown}
+          onClose={this.toggleDeleteModal}
+          onClickSubmit={this.onClickSubmit}
+        />;
       </React.Fragment>
     );
 

src/client/js/components/Admin/Notification/NotificationDeleteModal.jsx

@@ -7,16 +7,7 @@ import Modal from 'react-bootstrap/es/Modal';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
-class NotificationDeleteModal extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-    };
-
-  }
-
+class NotificationDeleteModal extends React.PureComponent {
 
   render() {
 
@@ -24,13 +15,20 @@ class NotificationDeleteModal extends React.Component {
       <Modal show={this.props.isOpen} onHide={this.props.onClose}>
         <Modal.Header className="modal-header" closeButton>
           <Modal.Title>
+            <div className="modal-header bg-danger">
+              <i className="icon icon-fire"></i> Delete Global Notification Setting
+            </div>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          hoge
+          <span className="text-danger">
+            削除すると元に戻すことはできませんのでご注意ください。
+          </span>
         </Modal.Body>
-        <Modal.Footer className="d-flex">
-
+        <Modal.Footer className="text-right">
+          <button type="button" className="btn btn-sm btn-danger" onClick={this.props.onClickSubmit}>
+            <i className="icon icon-fire"></i> 削除
+          </button>
         </Modal.Footer>
       </Modal>
     );
@@ -51,6 +49,7 @@ NotificationDeleteModal.propTypes = {
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  onClickSubmit: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(NotificationDeleteModalWrapper);