Merge pull request #1501 from weseek/reactify-admin/grobal-notification-component

Reactify admin/grobal notification component

resource/locales/en-US/translation.json

@@ -635,7 +635,7 @@
     "notification_list": "List of Notification Settings",
     "add_notification": "Add New",
     "trigger_path": "Trigger Path",
-    "trigger_path_help": "(expression with %s is supported)",
+    "trigger_path_help": "(expression with <code>*</code> is supported)",
     "trigger_events": "Trigger Events",
     "notify_to": "Notify To",
     "back_to_list": "Go back to list",

resource/locales/ja/translation.json

@@ -619,7 +619,7 @@
     "notification_list": "通知設定の一覧",
     "add_notification": "通知設定の追加",
     "trigger_path": "トリガーパス",
-    "trigger_path_help": "(%sが使用できます)",
+    "trigger_path_help": "(<code>*</code>が使用できます)",
     "trigger_events": "トリガーイベント",
     "notify_to": "通知先",
     "back_to_list": "通知設定一覧に戻る",

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import urljoin from 'url-join';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
+
+
+class GrobalNotification extends React.Component {
+
+  renderNotification() {
+    const { t, adminNotificationContainer } = this.props;
+    const { grobalNotifications } = adminNotificationContainer.state;
+
+    grobalNotifications.map((notification) => {
+      return (
+        <tr>
+          <td className="align-middle td-abs-center">
+            {/* GW-807 switch enable notification */}
+            <input type="checkbox" className="js-switch" data-size="small" data-id="{{ notification._id.toString() }}" />
+          </td>
+          <td>
+            {notification.triggerPath}
+          </td>
+          <td>
+            {notification.triggerEvents.includes('pageCreate') && (
+              <span className="label label-success" data-toggle="tooltip" data-placement="top" title="Page Create">
+                <i className="icon-doc"></i> CREATE
+              </span>
+            )}
+            {notification.triggerEvents.includes('pageEdit') && (
+              <span className="label label-warning" data-toggle="tooltip" data-placement="top" title="Page Edit">
+                <i className="icon-pencil"></i> EDIT
+              </span>
+            )}
+            {notification.triggerEvents.includes('pageMove') && (
+              <span className="label label-warning" data-toggle="tooltip" data-placement="top" title="Page Move">
+                <i className="icon-action-redo"></i> MOVE
+              </span>
+            )}
+            {notification.triggerEvents.includes('pageDelete') && (
+              <span className="label label-danger" data-toggle="tooltip" data-placement="top" title="Page Delte">
+                <i className="icon-fire"></i> DELETE
+              </span>
+            )}
+            {notification.triggerEvents.includes('pageLike') && (
+              <span className="label label-info" data-toggle="tooltip" data-placement="top" title="Page Like">
+                <i className="icon-like"></i> LIKE
+              </span>
+            )}
+            {notification.triggerEvents.includes('comment') && (
+              <span className="label label-default" data-toggle="tooltip" data-placement="top" title="New Comment">
+                <i className="icon-fw icon-bubble"></i> POST
+              </span>
+            )}
+          </td>
+          <td>
+            {notification.__t === 'mail'
+              && <span data-toggle="tooltip" data-placement="top" title="Email"><i className="ti-email"></i> {notification.toEmail}</span>}
+            {notification.__t === 'slack'
+              && <span data-toggle="tooltip" data-placement="top" title="Slack"><i className="fa fa-slack"></i> {notification.slackChannels}</span>}
+          </td>
+          <td className="td-abs-center">
+            <div className="btn-group admin-group-menu">
+              <button type="button" className="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
+                <i className="icon-settings"></i> <span className="caret"></span>
+              </button>
+              <ul className="dropdown-menu" role="menu">
+                <li>
+                  <a href={urljoin('/admin/global-notification/', notification.id)}>
+                    <i className="icon-fw icon-note"></i> {t('Edit')}
+                  </a>
+                </li>
+                {/*  TODO GW-780 create delete modal  */}
+                <li className="btn-delete">
+                  <a
+                    href="#"
+                    data-setting-id="{{ notification.id }}"
+                    data-target="#admin-delete-global-notification"
+                    data-toggle="modal"
+                  >
+                    <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
+                  </a>
+                </li>
+
+              </ul>
+            </div>
+          </td>
+        </tr>
+      );
+    });
+
+  }
+
+  render() {
+    const { t, adminNotificationContainer } = this.props;
+    const { grobalNotifications } = adminNotificationContainer.state;
+    return (
+      <React.Fragment>
+
+        <a href="/admin/global-notification/new">
+          <p className="btn btn-default">{t('notification_setting.add_notification')}</p>
+        </a>
+
+        <h2 className="border-bottom mb-5">{t('notification_setting.notification_list')}</h2>
+
+        <table className="table table-bordered">
+          <thead>
+            <tr>
+              <th>ON/OFF</th>
+              {/* eslint-disable-next-line react/no-danger */}
+              <th>{t('notification_setting.trigger_path')} <span dangerouslySetInnerHTML={{ __html: t('notification_setting.trigger_path_help') }} /></th>
+              <th>{t('notification_setting.trigger_events')}</th>
+              <th>{t('notification_setting.notify_to')}</th>
+              <th></th>
+            </tr>
+          </thead>
+          {grobalNotifications.length !== 0 && (
+            <tbody className="admin-notif-list">
+              {this.renderNotification()}
+            </tbody>
+          )}
+        </table>
+
+      </React.Fragment>
+    );
+  }
+
+}
+
+const GrobalNotificationWrapper = (props) => {
+  return createSubscribedElement(GrobalNotification, props, [AppContainer, AdminNotificationContainer]);
+};
+
+GrobalNotification.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminNotificationContainer: PropTypes.instanceOf(AdminNotificationContainer).isRequired,
+
+};
+
+export default withTranslation()(GrobalNotificationWrapper);

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

@@ -12,6 +12,7 @@ import AdminNotificationContainer from '../../../services/AdminNotificationConta
 
 import SlackAppConfiguration from './SlackAppConfiguration';
 import UserTriggerNotification from './UserTriggerNotification';
+import GrobalNotification from './GrobalNotification';
 
 const logger = loggerFactory('growi:NotificationSetting');
 
@@ -55,7 +56,7 @@ class NotificationSetting extends React.Component {
               <UserTriggerNotification />
             </div>
             <div id="global-notification" className="tab-pane" role="tabpanel">
-              {/* TODO GE-776 global notification component */}
+              <GrobalNotification />
             </div>
           </div>
         </div>

src/client/js/services/AdminNotificationContainer.js

@@ -18,6 +18,7 @@ export default class AdminNotificationContainer extends Container {
       isIncomingWebhookPrioritized: false,
       slackToken: '',
       userNotifications: [],
+      grobalNotifications: [],
     };
 
   }