add component

src/client/js/app.jsx

@@ -59,6 +59,7 @@ import WebsocketContainer from './services/WebsocketContainer';
 import AdminMarkDownContainer from './services/AdminMarkDownContainer';
 import AdminExternalAccountsContainer from './services/AdminExternalAccountsContainer';
 import AdminNotificationContainer from './services/AdminNotificationContainer';
+import ManageGlobalNotification from './components/Admin/Notification/ManageGlobalNotification';
 
 const logger = loggerFactory('growi:app');
 
@@ -197,6 +198,7 @@ const adminComponentMappings = {
   'admin-user-page': <UserManagement />,
   'admin-external-account-setting': <ManageExternalAccount />,
   'admin-notification-setting': <NotificationSetting />,
+  'admin-global-notification-setting': <ManageGlobalNotification />,
   'admin-markdown-setting': <MarkdownSetting />,
   'admin-export-page': <ExportArchiveDataPage crowi={appContainer} />,
 };

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+
+class ManageGlobalNotification extends React.Component {
+
+  render() {
+    return (
+      <p>hoge</p>
+    );
+  }
+
+}
+
+ManageGlobalNotification.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(ManageGlobalNotification);

src/server/views/admin/global-notification-detail.html

@@ -31,16 +31,16 @@
       {% include './widget/menu.html' with {current: 'notification'} %}
     </div>
 
-    <div class="col-md-9">
+    <div class="col-md-9" id="admin-global-notification-setting">
       <a href="/admin/notification#global-notification" class="btn btn-default">
         <i class="icon-fw ti-arrow-left" aria-hidden="true"></i>
         {{ t('notification_setting.back_to_list') }}
       </a>
 
       {% if setting %}
-        {% set actionPath = '/admin/global-notification/' + setting.id + '/update' %}
+      {% set actionPath = '/admin/global-notification/' + setting.id + '/update' %}
       {% else %}
-        {% set actionPath = '/admin/global-notification/new' %}
+      {% set actionPath = '/admin/global-notification/new' %}
       {% endif %}
 
       <div class="row">
@@ -50,20 +50,24 @@
           <form action="{{ actionPath }}" method="post" class="form-horizontal" role="form">
             <fieldset class="col-sm-4">
               <div class="form-group">
-                <h3 for="triggerPath">{{ t('notification_setting.trigger_path') }} <small>{{ t('notification_setting.trigger_path_help', '<code>*</code>') }}</small></h3>
-                <input class="form-control" type="text" name="notificationGlobal[triggerPath]" value="{{ setting.triggerPath || '' }}" required>
+                <h3 for="triggerPath">{{ t('notification_setting.trigger_path') }}
+                  <small>{{ t('notification_setting.trigger_path_help', '<code>*</code>') }}</small></h3>
+                <input class="form-control" type="text" name="notificationGlobal[triggerPath]"
+                  value="{{ setting.triggerPath || '' }}" required>
               </div>
 
               <div class="form-group form-inline">
                 <h3>{{ t('notification_setting.notify_to') }}</h3>
                 <div class="radio radio-primary">
-                  <input type="radio" id="mail" name="notificationGlobal[notifyToType]" value="mail" {% if setting.__t == 'mail' %}checked{% endif %}>
+                  <input type="radio" id="mail" name="notificationGlobal[notifyToType]" value="mail"
+                    {% if setting.__t == 'mail' %}checked{% endif %}>
                   <label for="mail">
                     <p class="font-weight-bold">Email</p>
                   </label>
                 </div>
                 <div class="radio radio-primary">
-                  <input type="radio" id="slack" name="notificationGlobal[notifyToType]" value="slack" {% if setting.__t == 'slack' %}checked{% endif %}>
+                  <input type="radio" id="slack" name="notificationGlobal[notifyToType]" value="slack"
+                    {% if setting.__t == 'slack' %}checked{% endif %}>
                   <label for="slack">
                     <p class="font-weight-bold">Slack</p>
                   </label>
@@ -71,15 +75,19 @@
               </div>
 
               <div class="form-group notify-to-option {% if setting.__t != 'mail' %}d-none{% endif %}" id="mail-input">
-                <input class="form-control" type="text" name="notificationGlobal[toEmail]" placeholder="Email" value="{{ setting.toEmail || '' }}">
+                <input class="form-control" type="text" name="notificationGlobal[toEmail]" placeholder="Email"
+                  value="{{ setting.toEmail || '' }}">
                 <p class="help">
                   <b>Hint: </b>
-                  <a href="https://ifttt.com/create" target="_blank">{{ t('notification_setting.email.ifttt_link') }} <i class="icon-share-alt"></i></a>
+                  <a href="https://ifttt.com/create" target="_blank">{{ t('notification_setting.email.ifttt_link') }} <i
+                      class="icon-share-alt"></i></a>
                 </p>
               </div>
 
-              <div class="form-group notify-to-option {% if setting.__t != 'slack' %}d-none{% endif %}" id="slack-input">
-                <input class="form-control" type="text" name="notificationGlobal[slackChannels]" placeholder="Slack Channel" value="{{ setting.slackChannels || '' }}">
+              <div class="form-group notify-to-option {% if setting.__t != 'slack' %}d-none{% endif %}"
+                id="slack-input">
+                <input class="form-control" type="text" name="notificationGlobal[slackChannels]"
+                  placeholder="Slack Channel" value="{{ setting.slackChannels || '' }}">
               </div>
             </fieldset>
 
@@ -87,45 +95,57 @@
               <div class="form-group">
                 <h3>{{ t('notification_setting.trigger_events') }}</h3>
                 <div class="checkbox checkbox-inverse">
-                  <input type="checkbox" id="trigger-event-pageCreate" name="notificationGlobal[triggerEvent:pageCreate]" value="pageCreate"
+                  <input type="checkbox" id="trigger-event-pageCreate"
+                    name="notificationGlobal[triggerEvent:pageCreate]" value="pageCreate"
                     {% if setting && (setting.triggerEvents.indexOf('pageCreate') != -1) %}checked{% endif %} />
                   <label for="trigger-event-pageCreate">
-                    <span class="label label-success"><i class="icon-doc"></i> CREATE</span> - {{ t('notification_setting.event_pageCreate') }}
+                    <span class="label label-success"><i class="icon-doc"></i> CREATE</span> -
+                    {{ t('notification_setting.event_pageCreate') }}
                   </label>
                 </div>
                 <div class="checkbox checkbox-inverse">
-                  <input type="checkbox" id="trigger-event-pageEdit" name="notificationGlobal[triggerEvent:pageEdit]" value="pageEdit"
+                  <input type="checkbox" id="trigger-event-pageEdit" name="notificationGlobal[triggerEvent:pageEdit]"
+                    value="pageEdit"
                     {% if setting && (setting.triggerEvents.indexOf('pageEdit') != -1) %}checked{% endif %} />
                   <label for="trigger-event-pageEdit">
-                    <span class="label label-warning"><i class="icon-pencil"></i> EDIT</span> - {{ t('notification_setting.event_pageEdit') }}
+                    <span class="label label-warning"><i class="icon-pencil"></i> EDIT</span> -
+                    {{ t('notification_setting.event_pageEdit') }}
                   </label>
                 </div>
                 <div class="checkbox checkbox-inverse">
-                  <input type="checkbox" id="trigger-event-pageMove" name="notificationGlobal[triggerEvent:pageMove]" value="pageMove"
+                  <input type="checkbox" id="trigger-event-pageMove" name="notificationGlobal[triggerEvent:pageMove]"
+                    value="pageMove"
                     {% if setting && (setting.triggerEvents.indexOf('pageMove') != -1) %}checked{% endif %} />
                   <label for="trigger-event-pageMove">
-                    <span class="label label-warning"><i class="icon-action-redo"></i> MOVE</span> - {{ t('notification_setting.event_pageMove') }}
+                    <span class="label label-warning"><i class="icon-action-redo"></i> MOVE</span> -
+                    {{ t('notification_setting.event_pageMove') }}
                   </label>
                 </div>
                 <div class="checkbox checkbox-inverse">
-                  <input type="checkbox" id="trigger-event-pageDelete" name="notificationGlobal[triggerEvent:pageDelete]" value="pageDelete"
+                  <input type="checkbox" id="trigger-event-pageDelete"
+                    name="notificationGlobal[triggerEvent:pageDelete]" value="pageDelete"
                     {% if setting && (setting.triggerEvents.indexOf('pageDelete') != -1) %}checked{% endif %} />
                   <label for="trigger-event-pageDelete">
-                    <span class="label label-danger"><i class="icon-fire"></i> DELETE</span> - {{ t('notification_setting.event_pageDelete') }}
+                    <span class="label label-danger"><i class="icon-fire"></i> DELETE</span> -
+                    {{ t('notification_setting.event_pageDelete') }}
                   </label>
                 </div>
                 <div class="checkbox checkbox-inverse">
-                    <input type="checkbox" id="trigger-event-pageLike" name="notificationGlobal[triggerEvent:pageLike]" value="pageLike"
-                      {% if setting && (setting.triggerEvents.indexOf('pageLike') != -1) %}checked{% endif %} />
-                    <label for="trigger-event-pageLike">
-                      <span class="label label-info"><i class="icon-like"></i> LIKE</span> - {{ t('notification_setting.event_pageLike') }}
-                    </label>
-                  </div>
+                  <input type="checkbox" id="trigger-event-pageLike" name="notificationGlobal[triggerEvent:pageLike]"
+                    value="pageLike"
+                    {% if setting && (setting.triggerEvents.indexOf('pageLike') != -1) %}checked{% endif %} />
+                  <label for="trigger-event-pageLike">
+                    <span class="label label-info"><i class="icon-like"></i> LIKE</span> -
+                    {{ t('notification_setting.event_pageLike') }}
+                  </label>
+                </div>
                 <div class="checkbox checkbox-inverse">
-                  <input type="checkbox" id="trigger-event-comment" name="notificationGlobal[triggerEvent:comment]" value="comment"
+                  <input type="checkbox" id="trigger-event-comment" name="notificationGlobal[triggerEvent:comment]"
+                    value="comment"
                     {% if setting && (setting.triggerEvents.indexOf('comment') != -1) %}checked{% endif %} />
                   <label for="trigger-event-comment">
-                    <span class="label label-default"><i class="icon-fw icon-bubble"></i> POST</span> - {{ t('notification_setting.event_comment') }}
+                    <span class="label label-default"><i class="icon-fw icon-bubble"></i> POST</span> -
+                    {{ t('notification_setting.event_comment') }}
                   </label>
                 </div>
               </div>
@@ -136,9 +156,9 @@
               <input type="hidden" name="_csrf" value="{{ csrf() }}">
               <button type="submit" class="btn btn-primary">
                 {% if setting %}
-                  {{ t('Update') }}
+                {{ t('Update') }}
                 {% else %}
-                  {{ t('Create') }}
+                {{ t('Create') }}
                 {% endif %}
               </button>
             </div>
@@ -151,19 +171,18 @@
 </div>
 
 <script>
-  $('input[name="notificationGlobal[notifyToType]"]').change(function() {
+  $('input[name="notificationGlobal[notifyToType]"]').change(function () {
     var val = $(this).val();
     $('.notify-to-option').addClass('d-none');
     $('#' + val + '-input').removeClass('d-none');
   });
 
-  $('button#global-notificatin-delete').submit(function() {
+  $('button#global-notificatin-delete').submit(function () {
     alert(123)
   });
+
 </script>
 {% endblock content_main %}
 
 {% block content_footer %}
 {% endblock content_footer %}
-
-