Merge pull request #3548 from weseek/feat/GW-5459-test

Slack Integration button added

resource/locales/en_US/translation.json

@@ -108,6 +108,8 @@
   "Site URL settings": "Site URL settings",
   "Markdown Settings": "Markdown Settings",
   "Customize": "Customize",
+  "Notification Settings": "Notification Settings",
+  "slack_integration": "Slack Integration",
   "External_Notification": "External Notification",
   "Legacy_External_Notification": "Legacy External Notification",
   "User_Management": "User Management",

resource/locales/ja_JP/translation.json

@@ -109,6 +109,8 @@
   "Site URL settings": "サイトURL設定",
   "Markdown Settings": "マークダウン設定",
   "Customize": "カスタマイズ",
+  "Notification Settings": "通知設定",
+  "slack_integration": "Slack連携",
   "External_Notification": "外部ツールへの通知",
   "Legacy_External_Notification": "外部ツールへの通知 (レガシー)",
   "User_Management": "ユーザー管理",

resource/locales/zh_CN/translation.json

@@ -117,6 +117,8 @@
 	"Site URL settings": "主页URL设置",
 	"Markdown Settings": "Markdown设置",
 	"Customize": "页面定制",
+	"Notification Settings": "通知设置",
+  "slack_integration": "Slack一体化",
   "External_Notification": "外部通知",
   "Legacy_External_Notification": "旧版外部通知",
 	"User_Management": "用户管理",

src/client/js/admin.jsx

@@ -10,6 +10,7 @@ import ErrorBoundary from './components/ErrorBoudary';
 import AdminHome from './components/Admin/AdminHome/AdminHome';
 import UserGroupDetailPage from './components/Admin/UserGroupDetail/UserGroupDetailPage';
 import NotificationSetting from './components/Admin/Notification/NotificationSetting';
+import SlackIntegration from './components/Admin/SlackIntegration/SlackIntegration';
 import ManageGlobalNotification from './components/Admin/Notification/ManageGlobalNotification';
 import MarkdownSetting from './components/Admin/MarkdownSetting/MarkDownSetting';
 import UserManagement from './components/Admin/UserManagement';
@@ -96,6 +97,7 @@ Object.assign(componentMappings, {
   'admin-importer': <ImportDataPage />,
   'admin-export-page': <ExportArchiveDataPage />,
   'admin-notification-setting': <NotificationSetting />,
+  'admin-slack-integration': <SlackIntegration />,
   'admin-global-notification-setting': <ManageGlobalNotification />,
   'admin-user-page': <UserManagement />,
   'admin-external-account-setting': <ManageExternalAccount />,

src/client/js/components/Admin/Common/AdminNavigation.jsx

@@ -14,19 +14,20 @@ const AdminNavigation = (props) => {
   // eslint-disable-next-line react/prop-types
   const MenuLabel = ({ menu }) => {
     switch (menu) {
-      case 'app':           return <><i className="icon-fw icon-settings"></i>        { t('App Settings') }</>;
-      case 'security':      return <><i className="icon-fw icon-shield"></i>          { t('security_settings') }</>;
-      case 'markdown':      return <><i className="icon-fw icon-note"></i>            { t('Markdown Settings') }</>;
-      case 'customize':     return <><i className="icon-fw icon-wrench"></i>          { t('Customize') }</>;
-      case 'importer':      return <><i className="icon-fw icon-cloud-upload"></i>    { t('Import Data') }</>;
-      case 'export':        return <><i className="icon-fw icon-cloud-download"></i>  { t('Export Archive Data') }</>;
-      case 'notification':  return <><i className="icon-fw icon-bell"></i>            { t('External_Notification') }</>;
+      case 'app':               return <><i className="icon-fw icon-settings"></i>        { t('App Settings') }</>;
+      case 'security':          return <><i className="icon-fw icon-shield"></i>          { t('security_settings') }</>;
+      case 'markdown':          return <><i className="icon-fw icon-note"></i>            { t('Markdown Settings') }</>;
+      case 'customize':         return <><i className="icon-fw icon-wrench"></i>          { t('Customize') }</>;
+      case 'importer':          return <><i className="icon-fw icon-cloud-upload"></i>    { t('Import Data') }</>;
+      case 'export':            return <><i className="icon-fw icon-cloud-download"></i>  { t('Export Archive Data') }</>;
+      case 'notification':      return <><i className="icon-fw icon-bell"></i>            { t('External_Notification') }</>;
       // TODO change icon for legacy-external-notification by GW-5466
       case 'legacy-external-notification':  return <> <i className="icon-fw icon-bell"></i>{ t('Legacy_External_Notification') }</>;
-      case 'users':         return <><i className="icon-fw icon-user"></i>            { t('User_Management') }</>;
-      case 'user-groups':   return <><i className="icon-fw icon-people"></i>          { t('UserGroup Management') }</>;
-      case 'search':        return <><i className="icon-fw icon-magnifier"></i>       { t('Full Text Search Management') }</>;
-      default:              return <><i className="icon-fw icon-home"></i>            { t('Wiki Management Home Page') }</>;
+      case 'slack-integration': return <><i className="icon-fw icon-paper-plane"></i>     { t('slack_integration') }</>;
+      case 'users':             return <><i className="icon-fw icon-user"></i>            { t('User_Management') }</>;
+      case 'user-groups':       return <><i className="icon-fw icon-people"></i>          { t('UserGroup Management') }</>;
+      case 'search':            return <><i className="icon-fw icon-magnifier"></i>       { t('Full Text Search Management') }</>;
+      default:                  return <><i className="icon-fw icon-home"></i>            { t('Wiki Management Home Page') }</>;
     }
   };
 
@@ -64,6 +65,7 @@ const AdminNavigation = (props) => {
         <MenuLink menu="export"       isListGroupItems isActive={isActiveMenu('/export')} />
         <MenuLink menu="notification" isListGroupItems isActive={isActiveMenu('/notification') || isActiveMenu('/global-notification')} />
         <MenuLink menu="legacy-external-notification" isListGroupItems isActive={isActiveMenu('/legacy-external-notification')} />
+        <MenuLink menu="slack-integration" isListGroupItems isActive={isActiveMenu('/slack-integration')} />
         <MenuLink menu="users"        isListGroupItems isActive={isActiveMenu('/users')} />
         <MenuLink menu="user-groups"  isListGroupItems isActive={isActiveMenu('/user-groups')} />
         <MenuLink menu="search"       isListGroupItems isActive={isActiveMenu('/search')} />
@@ -90,17 +92,18 @@ const AdminNavigation = (props) => {
           aria-expanded="false"
         >
           <span className="float-left">
-            {pathname === '/admin' &&         <MenuLabel menu="home" />}
-            {isActiveMenu('/app') &&          <MenuLabel menu="app" />}
-            {isActiveMenu('/security') &&     <MenuLabel menu="security" />}
-            {isActiveMenu('/markdown') &&     <MenuLabel menu="markdown" />}
-            {isActiveMenu('/customize') &&    <MenuLabel menu="customize" />}
-            {isActiveMenu('/importer') &&     <MenuLabel menu="importer" />}
-            {isActiveMenu('/export') &&       <MenuLabel menu="export" />}
+            {pathname === '/admin' &&              <MenuLabel menu="home" />}
+            {isActiveMenu('/app') &&               <MenuLabel menu="app" />}
+            {isActiveMenu('/security') &&          <MenuLabel menu="security" />}
+            {isActiveMenu('/markdown') &&          <MenuLabel menu="markdown" />}
+            {isActiveMenu('/customize') &&         <MenuLabel menu="customize" />}
+            {isActiveMenu('/importer') &&          <MenuLabel menu="importer" />}
+            {isActiveMenu('/export') &&            <MenuLabel menu="export" />}
             {(isActiveMenu('/notification') || isActiveMenu('/global-notification')) && <MenuLabel menu="notification" />}
-            {isActiveMenu('/users') &&        <MenuLabel menu="users" />}
-            {isActiveMenu('/user-groups') &&  <MenuLabel menu="user-groups" />}
-            {isActiveMenu('/search') &&       <MenuLabel menu="search" />}
+            {isActiveMenu('/slack-integration') && <MenuLabel menu="slack-integration" />}
+            {isActiveMenu('/users') &&             <MenuLabel menu="users" />}
+            {isActiveMenu('/user-groups') &&       <MenuLabel menu="user-groups" />}
+            {isActiveMenu('/search') &&            <MenuLabel menu="search" />}
           </span>
         </button>
         <div className="dropdown-menu" aria-labelledby="dropdown-admin-navigation">

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -0,0 +1,42 @@
+import React, { Fragment } from 'react';
+// import PropTypes from 'prop-types';
+
+// import { withUnstatedContainers } from '../../UnstatedUtils';
+// import AppContainer from '../../../services/AppContainer';
+
+class SlackIntegration extends React.Component {
+
+  render() {
+    // const { t } = this.props;
+
+    return (
+      <Fragment>
+        <div className="row">
+          <div className="col-lg-12">
+            {/* <h2 className="admin-setting-header">{t('Access Token')}</h2> */}
+            <h2 className="admin-setting-header">Access Token</h2>
+            <div className="form-group row">
+              {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label> */}
+              <label className="text-left text-md-right col-md-3 col-form-label">Access Token</label>
+
+              <div className="col-md-6">
+                <input className="form-control" type="text" placeholder="access-token" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+
+}
+
+// const SlackIntegrationWrapper = withUnstatedContainers(SlackIntegration, [AppContainer]);
+
+// SlackIntegration.propTypes = {
+//   t: PropTypes.func.isRequired, // i18next
+//   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+// slackIntegrationContainer: PropTypes.instanceOf(SlackIntegrationContainer).isRequired,
+// };
+
+export default SlackIntegration;

src/server/routes/admin.js

@@ -228,6 +228,10 @@ module.exports = function(crowi, app) {
     return res.render('admin/legacy-external-notification');
   };
 
+  actions.slackIntegration = {};
+  actions.slackIntegration = function(req, res) {
+    return res.render('admin/slack-integration');
+  };
 
   actions.userGroup = {};
   actions.userGroup.index = function(req, res) {

src/server/routes/index.js

@@ -94,6 +94,7 @@ module.exports = function(crowi, app) {
   app.get('/admin/global-notification/new'              , loginRequiredStrictly , adminRequired , admin.globalNotification.detail);
   app.get('/admin/global-notification/:id'              , loginRequiredStrictly , adminRequired , admin.globalNotification.detail);
   app.get('/admin/legacy-external-notification'         , loginRequiredStrictly , adminRequired,  admin.legacyExternalNotification);
+  app.get('/admin/slack-integration'                    , loginRequiredStrictly , adminRequired,  admin.slackIntegration);
 
   app.get('/admin/users'                                , loginRequiredStrictly , adminRequired , admin.user.index);
 

src/server/views/admin/slack-integration.html

@@ -0,0 +1,9 @@
+{% extends '../layout/admin.html' %}
+
+{% block content_header %}
+<h1 class="title">{{ t('slack_integration') }}</h1>
+{% endblock %}
+
+{% block content_main %}
+<div id="admin-slack-integration" class="admin-slack-integration"></div>
+{% endblock content_main %}