add component

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

@@ -6,6 +6,7 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import SlackAppConfiguration from './SlackAppConfiguration';
+import UserTriggerNotification from './UserTriggerNotification';
 
 class NotificationSetting extends React.Component {
 
@@ -13,27 +14,28 @@ class NotificationSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <ul className="nav nav-tabs" role="tablist">
-          <li role="tab" className="active">
-            <a href="#slack-configuration" data-toggle="tab" role="tab"><i className="icon-settings"></i> Slack Configuration</a>
-          </li>
-          <li role="tab">
-            <a href="#user-trigger-notification" data-toggle="tab" role="tab"><i className="icon-settings"></i> User Trigger Notification</a>
-          </li>
-          <li role="tab">
-            <a href="#global-notification" data-toggle="tab" role="tab"><i className="icon-settings"></i> Global Notification</a>
-          </li>
-        </ul>
-
-        <div className="tab-content m-t-15">
-          <div id="slack-configuration" className="tab-pane active" role="tabpanel">
-            <SlackAppConfiguration />
-          </div>
-          <div id="user-trigger-notification" className="tab-pane" role="tabpanel">
-            {/* TODO GW-775 user trigger notification component */}
-          </div>
-          <div id="global-notification" className="tab-pane" role="tabpanel">
-            {/* TODO GE-776 global notification component */}
+        <div className="notification-settings">
+          <ul className="nav nav-tabs" role="tablist">
+            <li className="active">
+              <a href="#slack-configuration" data-toggle="tab" role="tab"><i className="icon-settings"></i> Slack Configuration</a>
+            </li>
+            <li>
+              <a href="#user-trigger-notification" data-toggle="tab" role="tab"><i className="icon-settings"></i> User Trigger Notification</a>
+            </li>
+            <li>
+              <a href="#global-notification" data-toggle="tab" role="tab"><i className="icon-settings"></i> Global Notification</a>
+            </li>
+          </ul>
+          <div className="tab-content m-t-15">
+            <div id="slack-configuration" className="tab-pane active" role="tabpanel">
+              <SlackAppConfiguration />
+            </div>
+            <div id="user-trigger-notification" className="tab-pane" role="tabpanel">
+              <UserTriggerNotification />
+            </div>
+            <div id="global-notification" className="tab-pane" role="tabpanel">
+              {/* TODO GE-776 global notification component */}
+            </div>
           </div>
         </div>
       </React.Fragment>

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AppContainer from '../../../services/AppContainer';
+import SlackAppConfiguration from './SlackAppConfiguration';
+import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
+
+class UserTriggerNotification extends React.Component {
+
+  render() {
+    return (
+      <p>hoge</p>
+    );
+  }
+
+
+}
+
+
+const UserTriggerNotificationWrapper = (props) => {
+  return createSubscribedElement(SlackAppConfiguration, props, [AppContainer, AdminNotificationContainer]);
+};
+
+UserTriggerNotification.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminNotificationContainer: PropTypes.instanceOf(AdminNotificationContainer).isRequired,
+
+};
+
+export default withTranslation()(UserTriggerNotificationWrapper);