Merge pull request #1488 from weseek/reactify-admin/create-notification-component

Reactify admin/create notification component

src/client/js/app.jsx

@@ -35,6 +35,7 @@ import UserPictureList from './components/User/UserPictureList';
 import TableOfContents from './components/TableOfContents';
 
 import UserGroupDetailPage from './components/Admin/UserGroupDetail/UserGroupDetailPage';
+import NotificationSetting from './components/Admin/Notification/NotificationSetting';
 import MarkdownSetting from './components/Admin/MarkdownSetting/MarkDownSetting';
 import UserManagement from './components/Admin/UserManagement';
 import ManageExternalAccount from './components/Admin/ManageExternalAccount';
@@ -55,6 +56,7 @@ import AdminUsersContainer from './services/AdminUsersContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import AdminMarkDownContainer from './services/AdminMarkDownContainer';
 import AdminExternalAccountsContainer from './services/AdminExternalAccountsContainer';
+import AdminNotificationContainer from './services/AdminNotificationContainer';
 
 const logger = loggerFactory('growi:app');
 
@@ -158,11 +160,13 @@ Object.keys(componentMappings).forEach((key) => {
 const adminCustomizeContainer = new AdminCustomizeContainer(appContainer);
 const adminUsersContainer = new AdminUsersContainer(appContainer);
 const adminExternalAccountsContainer = new AdminExternalAccountsContainer(appContainer);
+const adminNotificationContainer = new AdminNotificationContainer(appContainer);
 const adminMarkDownContainer = new AdminMarkDownContainer(appContainer);
 const adminContainers = {
   'admin-customize': adminCustomizeContainer,
   'admin-user-page': adminUsersContainer,
   'admin-external-account-setting': adminExternalAccountsContainer,
+  'admin-notification-setting': adminNotificationContainer,
   'admin-markdown-setting': adminMarkDownContainer,
   'admin-export-page': websocketContainer,
 };
@@ -176,6 +180,7 @@ const adminComponentMappings = {
   'admin-customize': <Customize />,
   'admin-user-page': <UserManagement />,
   'admin-external-account-setting': <ManageExternalAccount />,
+  'admin-notification-setting': <NotificationSetting />,
   'admin-markdown-setting': <MarkdownSetting />,
   'admin-export-page': <ExportArchiveDataPage crowi={appContainer} />,
 };

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AppContainer from '../../../services/AppContainer';
+
+class NotificationSetting extends React.Component {
+
+  render() {
+
+    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">
+            {/* TODO GW-773 create slak config component */}
+          </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>
+        </div>
+      </React.Fragment>
+    );
+  }
+
+}
+
+const NotificationSettingWrapper = (props) => {
+  return createSubscribedElement(NotificationSetting, props, [AppContainer]);
+};
+
+NotificationSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+};
+
+export default withTranslation()(NotificationSettingWrapper);

src/client/js/services/AdminNotificationContainer.js

@@ -0,0 +1,27 @@
+import { Container } from 'unstated';
+
+/**
+ * Service container for admin Notification setting page (NotificationSetting.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class AdminNotificationContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+
+    };
+
+  }
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'AdminNotificationContainer';
+  }
+
+}

src/server/views/admin/notification.html

@@ -16,7 +16,7 @@
     <div class="col-md-3">
       {% include './widget/menu.html' with {current: 'notification'} %}
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9" id="admin-notification-setting">
 
       {% set smessage = req.flash('successMessage') %}
       {% if smessage.length %}