Added the new path and made GlobalNotifiation FC

packages/app/src/components/Admin/Notification/GlobalNotification.jsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import { React, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 
 import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
@@ -13,17 +14,17 @@ import GlobalNotificationList from './GlobalNotificationList';
 
 const logger = loggerFactory('growi:GlobalNotification');
 
-class GlobalNotification extends React.Component {
+const GlobalNotification = (props) => {
 
-  constructor() {
-    super();
+  const { t, adminNotificationContainer } = props;
 
-    this.onClickSubmit = this.onClickSubmit.bind(this);
-  }
+  // constructor() {
+  //   super();
 
-  async onClickSubmit() {
-    const { t, adminNotificationContainer } = this.props;
+  //   this.onClickSubmit = this.onClickSubmit.bind(this);
+  // }
 
+  const onClickSubmit = useCallback(async() => {
     try {
       await adminNotificationContainer.updateGlobalNotificationForPages();
       toastSuccess(t('toaster.update_successed', { target: t('External_Notification') }));
@@ -32,100 +33,80 @@ class GlobalNotification extends React.Component {
       toastError(err);
       logger.error(err);
     }
-  }
-
-  render() {
-    const { t, adminNotificationContainer } = this.props;
-    const { globalNotifications } = adminNotificationContainer.state;
-    return (
-      <React.Fragment>
-
-        <h2 className="border-bottom my-4">{t('notification_setting.valid_page')}</h2>
-
-        <p className="card well">
-          {/* eslint-disable-next-line react/no-danger */}
-          <span dangerouslySetInnerHTML={{ __html: t('notification_setting.link_notification_help') }} />
-        </p>
-
-
-        <div className="row mb-4">
-          <div className="col-md-8 offset-md-2">
-            <div className="custom-control custom-checkbox custom-checkbox-success">
-              <input
-                id="isNotificationForOwnerPageEnabled"
-                className="custom-control-input"
-                type="checkbox"
-                checked={adminNotificationContainer.state.isNotificationForOwnerPageEnabled || false}
-                onChange={() => { adminNotificationContainer.switchIsNotificationForOwnerPageEnabled() }}
-              />
-              <label className="custom-control-label" htmlFor="isNotificationForOwnerPageEnabled">
-                {/* eslint-disable-next-line react/no-danger */}
-                <span dangerouslySetInnerHTML={{ __html: t('notification_setting.just_me_notification_help') }} />
-              </label>
-            </div>
-          </div>
+  }, [adminNotificationContainer, t]);
+
+  const router = useRouter();
+  const { globalNotifications } = adminNotificationContainer.state;
+  return (
+    <><h2 className="border-bottom my-4">{t('notification_setting.valid_page')}</h2><p className="card well">
+      {/* eslint-disable-next-line react/no-danger */}
+      <span dangerouslySetInnerHTML={{ __html: t('notification_setting.link_notification_help') }} />
+    </p><div className="row mb-4">
+      <div className="col-md-8 offset-md-2">
+        <div className="custom-control custom-checkbox custom-checkbox-success">
+          <input
+            id="isNotificationForOwnerPageEnabled"
+            className="custom-control-input"
+            type="checkbox"
+            checked={adminNotificationContainer.state.isNotificationForOwnerPageEnabled || false}
+            onChange={() => { adminNotificationContainer.switchIsNotificationForOwnerPageEnabled() } } />
+          <label className="custom-control-label" htmlFor="isNotificationForOwnerPageEnabled">
+            {/* eslint-disable-next-line react/no-danger */}
+            <span dangerouslySetInnerHTML={{ __html: t('notification_setting.just_me_notification_help') }} />
+          </label>
         </div>
-
-
-        <div className="row mb-4">
-          <div className="col-md-8 offset-md-2">
-            <div className="custom-control custom-checkbox custom-checkbox-success">
-              <input
-                id="isNotificationForGroupPageEnabled"
-                className="custom-control-input"
-                type="checkbox"
-                checked={adminNotificationContainer.state.isNotificationForGroupPageEnabled || false}
-                onChange={() => { adminNotificationContainer.switchIsNotificationForGroupPageEnabled() }}
-              />
-              <label className="custom-control-label" htmlFor="isNotificationForGroupPageEnabled">
-                {/* eslint-disable-next-line react/no-danger */}
-                <span dangerouslySetInnerHTML={{ __html: t('notification_setting.group_notification_help') }} />
-              </label>
-            </div>
-          </div>
+      </div>
+    </div><div className="row mb-4">
+      <div className="col-md-8 offset-md-2">
+        <div className="custom-control custom-checkbox custom-checkbox-success">
+          <input
+            id="isNotificationForGroupPageEnabled"
+            className="custom-control-input"
+            type="checkbox"
+            checked={adminNotificationContainer.state.isNotificationForGroupPageEnabled || false}
+            onChange={() => { adminNotificationContainer.switchIsNotificationForGroupPageEnabled() } } />
+          <label className="custom-control-label" htmlFor="isNotificationForGroupPageEnabled">
+            {/* eslint-disable-next-line react/no-danger */}
+            <span dangerouslySetInnerHTML={{ __html: t('notification_setting.group_notification_help') }} />
+          </label>
         </div>
-
-        <div className="row my-3">
-          <div className="col-sm-5 offset-sm-4">
-            <button
-              type="button"
-              className="btn btn-primary"
-              onClick={this.onClickSubmit}
-              disabled={adminNotificationContainer.state.retrieveError}
-            >{t('Update')}
-            </button>
-          </div>
-        </div>
-
-        <h2 className="border-bottom mb-5">{t('notification_setting.notification_list')}
-          <a href="/admin/global-notification/new">
-            <p className="btn btn-outline-secondary pull-right">{t('notification_setting.add_notification')}</p>
-          </a>
-        </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>
-          {globalNotifications.length !== 0 && (
-            <tbody className="admin-notif-list">
-              <GlobalNotificationList />
-            </tbody>
-          )}
-        </table>
-
-      </React.Fragment>
-    );
-  }
-
-}
+      </div>
+    </div><div className="row my-3">
+      <div className="col-sm-5 offset-sm-4">
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={onClickSubmit}
+          disabled={adminNotificationContainer.state.retrieveError}
+        >{t('Update')}
+        </button>
+      </div>
+    </div><h2 className="border-bottom mb-5">{t('notification_setting.notification_list')}
+      <div className="btn btn-outline-secondary pull-right">
+        <button type="button" onClick={() => router.push('/admin/global-notification/new')}>{t('notification_setting.add_notification')}</button>
+      </div>
+      {/* <a href="/admin/global-notification/new">
+    <p className="btn btn-outline-secondary pull-right">{t('notification_setting.add_notification')}</p>
+  </a> */}
+    </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>
+      {globalNotifications.length !== 0 && (
+        <tbody className="admin-notif-list">
+          <GlobalNotificationList />
+        </tbody>
+      )}
+    </table></>
+  );
+};
 
 GlobalNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next

packages/app/src/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import urljoin from 'url-join';
 
-import AppContainer from '~/client/services/AppContainer';
-import { toastError } from '~/client/util/apiNotification';
+// import AppContainer from '~/client/services/AppContainer';
+// import { toastError } from '~/client/util/apiNotification';
 import { apiv3Post, apiv3Put } from '~/client/util/apiv3-client';
 import loggerFactory from '~/utils/logger';
 
@@ -18,7 +18,7 @@ import TriggerEventCheckBox from './TriggerEventCheckBox';
 
 const logger = loggerFactory('growi:manageGlobalNotification');
 
-class ManageGlobalNotification extends React.Component {
+export default class ManageGlobalNotification extends React.Component {
 
   constructor() {
     super();
@@ -26,9 +26,11 @@ class ManageGlobalNotification extends React.Component {
     let globalNotification;
     try {
       globalNotification = JSON.parse(document.getElementById('admin-global-notification-setting').getAttribute('data-global-notification'));
+      console.log('Did it work?\n');
     }
     catch (err) {
-      toastError(err);
+      // toastError(err);
+      console.log('It did not work\n');
       logger.error(err);
     }
 
@@ -93,15 +95,15 @@ class ManageGlobalNotification extends React.Component {
       window.location.href = urljoin(window.location.origin, '/admin/notification#global-notification');
     }
     catch (err) {
-      toastError(err);
+      // toastError(err);
       logger.error(err);
     }
   }
 
 
   render() {
-    const { t, appContainer } = this.props;
-    const { isMailerSetup } = appContainer.config;
+    const { t } = this.props;
+    // const { isMailerSetup } = appContainer.config;
 
     return (
       <React.Fragment>
@@ -188,7 +190,7 @@ class ManageGlobalNotification extends React.Component {
 
                   <p className="p-2">
                     {/* eslint-disable-next-line react/no-danger */}
-                    {!isMailerSetup && <span className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />}
+                    {/* {!isMailerSetup && <span className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />} */}
                     <b>Hint: </b>
                     <a href="https://ifttt.com/create" target="blank">{t('notification_setting.email.ifttt_link')}
                       <i className="icon-share-alt" />
@@ -314,7 +316,7 @@ class ManageGlobalNotification extends React.Component {
 
 ManageGlobalNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  // appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
 };
 
@@ -324,7 +326,7 @@ const ManageGlobalNotificationWrapperFC = (props) => {
   return <ManageGlobalNotification t={t} {...props} />;
 };
 
-const ManageGlobalNotificationWrapper = withUnstatedContainers(ManageGlobalNotificationWrapperFC, [AppContainer]);
+// const ManageGlobalNotificationWrapper = withUnstatedContainers(ManageGlobalNotificationWrapperFC, [AppContainer]);
 
 
-export default ManageGlobalNotificationWrapper;
+// export default ManageGlobalNotificationWrapper;

packages/app/src/pages/admin/[[...path]].page.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { isClient, objectIdUtils } from '@growi/core';
 import {
@@ -28,6 +28,7 @@ import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityConta
 import AdminSlackIntegrationLegacyContainer from '~/client/services/AdminSlackIntegrationLegacyContainer';
 import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
 import AdminUsersContainer from '~/client/services/AdminUsersContainer';
+import ManageGlobalNotification from '~/components/Admin/Notification/ManageGlobalNotification';
 import { SupportedActionType } from '~/interfaces/activity';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 import PluginUtils from '~/server/plugins/plugin-utils';
@@ -140,8 +141,14 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
       component: <NotificationSetting />,
     },
     'global-notification': {
-      title: '',
-      component: <>global-notification</>,
+      new: {
+        title: useCustomTitle(props, t('Add_new')),
+        component: <ManageGlobalNotification />,
+      },
+      setting: {
+        title: useCustomTitle(props, t('settings')),
+        component: <ManageGlobalNotification />,
+      },
     },
     'slack-integration': {
       title: useCustomTitle(props, t('slack_integration')),