Merge branch 'support/107940-make-context-tidy' of https://github.com/weseek/growi into support/107940-make-context-tidy

packages/app/_obsolete/src/client/admin.jsx

@@ -40,12 +40,12 @@ import FullTextSearchManagement from '../components/Admin/FullTextSearchManageme
 import LegacySlackIntegration from '../components/Admin/LegacySlackIntegration/LegacySlackIntegration';
 import ManageExternalAccount from '../components/Admin/ManageExternalAccount';
 // import MarkdownSetting from '../components/Admin/MarkdownSetting/MarkDownSetting';
-import ManageGlobalNotification from '../components/Admin/Notification/ManageGlobalNotification';
+// import ManageGlobalNotification from '../components/Admin/Notification/ManageGlobalNotification';
 import NotificationSetting from '../components/Admin/Notification/NotificationSetting';
 import SecurityManagement from '../components/Admin/Security/SecurityManagement';
 import SlackIntegration from '../components/Admin/SlackIntegration/SlackIntegration';
 import UserGroupPage from '../components/Admin/UserGroup/UserGroupPage';
-import UserGroupDetailPage from '../components/Admin/UserGroupDetail/UserGroupDetailPage';
+// import UserGroupDetailPage from '../components/Admin/UserGroupDetail/UserGroupDetailPage';
 import UserManagement from '../components/Admin/UserManagement';
 import ErrorBoundary from '../components/ErrorBoudary';
 
@@ -102,10 +102,10 @@ Object.assign(componentMappings, {
   'admin-notification-setting': <NotificationSetting />,
   'admin-slack-integration': <SlackIntegration />,
   'admin-slack-integration-legacy': <LegacySlackIntegration />,
-  'admin-global-notification-setting': <ManageGlobalNotification />,
+  // 'admin-global-notification-setting': <ManageGlobalNotification />,
   'admin-user-page': <UserManagement />,
   'admin-external-account-setting': <ManageExternalAccount />,
-  'admin-user-group-detail': <UserGroupDetailPage />,
+  // 'admin-user-group-detail': <UserGroupDetailPage />,
   'admin-full-text-search-management': <FullTextSearchManagement />,
   'admin-user-group-page': <UserGroupPage />,
   'admin-audit-log': <AuditLogManagement />,

packages/app/public/static/locales/en_US/admin.json

@@ -80,12 +80,9 @@
       "closed": "Closed (Invitation Only)"
     },
     "share_link_management": "Share Link Management",
+    "No_share_links":"No share links",
     "share_link_notice":"remove all share links",
     "delete_all_share_links":"Delete all share links",
-    "Share Link": "Share Link",
-    "Page Path": "Page Path",
-    "expire": "Expiration",
-    "description": "Description",
     "share_link_rights": "Share link rights",
     "enable_link_sharing": "Enable link sharing",
     "all_share_links": "All share links",
@@ -1035,5 +1032,15 @@
     "ADMIN_SEARCH_CONNECTION": "Attempting to reconnect to Elasticsearch",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "Normalize of Elasticsearch indexes",
     "ADMIN_SEARCH_INDICES_REBUILD": "Rebuild Elasticsearch indexes"
+  },
+  "toaster": {
+    "give_user_admin": "Succeeded to give {{username}} admin",
+    "remove_user_admin": "Succeeded to remove {{username}} admin",
+    "activate_user_success": "Succeeded to activating {{username}}",
+    "deactivate_user_success": "Succeeded to deactivate {{username}}",
+    "remove_user_success": "Succeeded to removing {{username}}",
+    "remove_external_user_success": "Succeeded to remove {{accountId}}",
+    "switch_disable_link_sharing_success": "Succeeded to update share link setting",
+    "failed_to_reset_password":"Failed to reset password"
   }
 }

packages/app/public/static/locales/en_US/commons.json

@@ -6,12 +6,22 @@
     "create_succeeded": "Succeeded to create {{target}}",
     "create_failed": "Failed to create {{target}}",
     "update_successed": "Succeeded to update {{target}}",
-    "update_failed": "Failed to update {{target}}"
+    "update_failed": "Failed to update {{target}}",
+
+    "remove_share_link_success": "Succeeded to remove {{shareLinkId}}",
+    "remove_share_link": "Succeeded to remove {{count}} share links"
   },
   "alert": {
     "siteUrl_is_not_set": "'Site URL' is NOT set. Set it from the {{link}}"
   },
   "headers": {
     "app_settings": "App Settings"
+  },
+
+  "share_links": {
+    "Share Link": "Share Link",
+    "Page Path": "Page Path",
+    "expire": "Expiration",
+    "description": "Description"
   }
 }

packages/app/public/static/locales/en_US/translation.json

@@ -237,9 +237,6 @@
     "Shere this page link to public": "Shere this page link to public",
     "share_link_list": "Share link list",
     "share_link_management": "Share Link Management",
-    "No_share_links":"No share links",
-    "Share Link": "Share Link",
-    "Page Path": "Page Path",
     "delete_all_share_links":"Delete all share links",
     "expire": "Expiration",
     "Days": "Days",
@@ -522,19 +519,8 @@
   "toaster": {
     "file_upload_succeeded": "File upload succeeded.",
     "file_upload_failed": "File upload failed.",
-    "initialize_successed": "Succeeded to initialize {{target}}",
-    "give_user_admin": "Succeeded to give {{username}} admin",
-    "remove_user_admin": "Succeeded to remove {{username}} admin",
-    "activate_user_success": "Succeeded to activating {{username}}",
-    "deactivate_user_success": "Succeeded to deactivate {{username}}",
-    "remove_user_success": "Succeeded to removing {{username}}",
-    "remove_external_user_success": "Succeeded to remove {{accountId}}",
-    "remove_share_link_success": "Succeeded to remove {{shareLinkId}}",
-    "issue_share_link": "Succeeded to issue new share link",
-    "remove_share_link": "Succeeded to remove {{count}} share links",
-    "switch_disable_link_sharing_success": "Succeeded to update share link setting",
-    "failed_to_reset_password":"Failed to reset password",
-    "save_succeeded": "Saved successfully"
+    "save_succeeded": "Saved successfully",
+    "issue_share_link": "Succeeded to issue new share link"
   },
   "template": {
     "modal_label": {

packages/app/public/static/locales/ja_JP/admin.json

@@ -87,12 +87,9 @@
       "closed": "非公開 (登録には管理者による招待が必要)"
     },
     "share_link_management": "共有リンク管理",
+    "No_share_links":"共有リンクが存在しません",
     "share_link_notice":"共有リンクを全て削除します",
     "delete_all_share_links":"全ての共有リンクを削除します",
-    "Share Link": "共有用リンク",
-    "Page Path": "ページパス",
-    "expire": "有効期限",
-    "description": "概要",
     "share_link_rights": "シェアリンクの権限",
     "enable_link_sharing": "リンクのシェアを許可",
     "all_share_links": "全てのシェアリンク",
@@ -283,7 +280,8 @@
     "delete_notification_pattern": "通知パターンを削除しました。",
     "delete_notification_pattern_desc1": "Path: {{path}} を削除します。",
     "delete_notification_pattern_desc2": "Once deleted, it cannot be recovered",
-    "toggle_notification": "{{path}}の通知設定を変更しました"
+    "toggle_notification": "{{path}}の通知設定を変更しました",
+    "not_found_global_notification_triggerid": "アクセス先の通知設定は見つかりませんでした"
   },
   "full_text_search_management": {
     "full_text_search_management": "全文検索管理",
@@ -1041,5 +1039,15 @@
     "ADMIN_SEARCH_CONNECTION": "Elasticsearch の再接続の試行",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "Elasticsearch のインデックスの正規化",
     "ADMIN_SEARCH_INDICES_REBUILD": "Elasticsearch のインデックスのリビルド"
+  },
+  "toaster": {
+    "give_user_admin": "{{username}}を管理者に設定しました",
+    "remove_user_admin": "{{username}}を管理者から外しました",
+    "activate_user_success": "{{username}}を有効化しました",
+    "deactivate_user_success": "{{username}}を無効化しました",
+    "remove_user_success": "{{username}}を削除しました",
+    "remove_external_user_success": "{{accountId}}を削除しました",
+    "switch_disable_link_sharing_success": "共有リンクの設定を変更しました",
+    "failed_to_reset_password":"パスワードのリセットに失敗しました"
   }
 }

packages/app/public/static/locales/ja_JP/commons.json

@@ -6,12 +6,22 @@
     "create_succeeded": "新しい{{target}}が作成されました",
     "create_failed": "{{target}}の作成に失敗しました",
     "update_successed": "{{target}}を更新しました",
-    "update_failed": "{{target}}の更新に失敗しました"
+    "update_failed": "{{target}}の更新に失敗しました",
+
+    "remove_share_link_success": "{{shareLinkId}}を削除しました",
+    "remove_share_link": "共有リンクを{{count}}件削除しました"
   },
   "alert": {
     "siteUrl_is_not_set": "'サイトURL' が設定されていません。{{link}} から設定してください。"
   },
   "headers": {
     "app_settings": "アプリ設定"
+  },
+
+  "share_links": {
+    "Share Link": "共有用リンク",
+    "Page Path": "ページパス",
+    "expire": "有効期限",
+    "description": "概要"
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -233,9 +233,6 @@
     "Shere this page link to public": "外部に共有するリンクを発行する",
     "share_link_list": "共有リンクリスト",
     "share_link_management": "共有リンク管理",
-    "No_share_links":"共有リンクが存在しません",
-    "Share Link": "共有用リンク",
-    "Page Path": "ページパス",
     "delete_all_share_links":"全ての共有リンクを削除します",
     "expire": "有効期限",
     "Days": "日間",
@@ -516,19 +513,8 @@
   "toaster": {
     "file_upload_succeeded": "ファイルをアップロードしました",
     "file_upload_failed": "ファイルのアップロードに失敗しました",
-    "initialize_successed": "{{target}}を初期化しました",
-    "give_user_admin": "{{username}}を管理者に設定しました",
-    "remove_user_admin": "{{username}}を管理者から外しました",
-    "activate_user_success": "{{username}}を有効化しました",
-    "deactivate_user_success": "{{username}}を無効化しました",
-    "remove_user_success": "{{username}}を削除しました",
-    "remove_external_user_success": "{{accountId}}を削除しました",
-    "remove_share_link_success": "{{shareLinkId}}を削除しました",
-    "issue_share_link": "共有リンクを作成しました",
-    "remove_share_link": "共有リンクを{{count}}件削除しました",
-    "switch_disable_link_sharing_success": "共有リンクの設定を変更しました",
-    "failed_to_reset_password":"パスワードのリセットに失敗しました",
-    "save_succeeded": "保存に成功しました"
+    "save_succeeded": "保存に成功しました",
+    "issue_share_link": "共有リンクを作成しました"
   },
   "template": {
     "modal_label": {

packages/app/public/static/locales/zh_CN/admin.json

@@ -89,12 +89,9 @@
 			"closed": "已关闭（仅限邀请）"
 		},
     "share_link_management": "Share Link Management",
+    "No_share_links":"No share links",
     "share_link_notice":"remove all share links",
     "delete_all_share_links":"Delete all share links",
-    "Share Link": "Share Link",
-    "Page Path": "Page Path",
-    "expire": "Expiration",
-    "description": "Description",
     "share_link_rights": "分享链接权",
     "enable_link_sharing": "启用链接共享",
     "all_share_links": "所有共享链接",
@@ -241,6 +238,56 @@
 			"ABLCRule": "Rule"
 		}
   },
+  "notification_settings": {
+		"slack_incoming_configuration": "Slack Incoming Webhooks configuration",
+		"prioritize_webhook": "Prioritize incoming webhook than Slack App",
+		"prioritize_webhook_desc": "Check this option and GROWI use Incoming Webhooks even if Slack App settings are enabled.",
+		"slack_app_configuration": "Slack app configuration",
+		"slack_app_configuration_desc": "This is the way that compatible with Crowi,<br /> but not recommended in GROWI because it is <strong>too complex</strong>.",
+		"use_instead": "Please use Slack Incoming Webhooks Configuration instead.",
+		"how_to": {
+			"header": "How to configure Incoming Webhooks?",
+			"workspace": "(At Workspace) Add a hook",
+			"workspace_desc1": "Go to <a href='https://slack.com/services/new/incoming-webhook'>Incoming Webhooks configuration page</a>.",
+			"workspace_desc2": "Choose the default channel to post.",
+			"workspace_desc3": "Add.",
+			"at_growi": "(At GROWI admin page) Set Webhook URL",
+			"at_growi_desc": "Input &rdquo;Webhook URL&rdquo; and submit on this page."
+		},
+		"user_trigger_notification_header": "Default notification settings for patterns",
+		"pattern": "Pattern",
+		"channel": "Channel",
+		"pattern_desc": "Path name of wiki. Pattern expression with <code>*</code> can be used.",
+		"channel_desc": "Slack channel name. Without <code>#</code>.",
+		"valid_page": "启用/禁用通知",
+		"link_notification_help": "<strong>只有那些知道“链接的任何人”链接的人才能查看的页面并不总是得到通知。</strong> ",
+		"just_me_notification_help": "<strong>被“仅限我”限制的页在编辑时被通知。</strong>",
+		"group_notification_help": "<strong>被“用户组”限制的页面在编辑时被通知。</strong>",
+		"notification_list": "List of notification settings",
+		"add_notification": "Add new",
+		"trigger_path": "Trigger path",
+		"trigger_path_help": "(expression with <code>*</code> is supported)",
+		"trigger_events": "Trigger events",
+		"notify_to": "Notify to",
+		"back_to_list": "Go back to list",
+		"notification_detail": "Notification Setting Details",
+		"event_pageCreate": "When new page is \"CREATED\"",
+		"event_pageEdit": "When page is \"EDITED\"",
+		"event_pageDelete": "When page is \"DELETED\"",
+		"event_pageMove": "When page is \"MOVED\" (renamed)",
+		"event_pageLike": "When someone \"LIKES\" page",
+		"event_comment": "When someone \"COMMENTS\" on page",
+		"email": {
+			"ifttt_link": "Create a new IFTTT applet with Email trigger"
+		},
+		"updated_slackApp": "Succeeded to update Slack App Configuration setting",
+		"add_notification_pattern": "Add user trigger notification patterns",
+		"delete_notification_pattern": "Delete notification pattern",
+		"delete_notification_pattern_desc1": "Delete Path: {{path}}",
+		"delete_notification_pattern_desc2": "Once deleted, it cannot be recovered",
+		"toggle_notification": "Updated setting of {{path}}",
+    "not_found_global_notification_triggerid": "未找到全局通知 ID"
+	},
   "full_text_search_management": {
     "full_text_search_management": "全文搜索管理",
 		"elasticsearch_management": "Elasticsearch管理",
@@ -1008,5 +1055,15 @@
     "ADMIN_SEARCH_CONNECTION": "重试Elasticsearch连接",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "试图重新连接Elasticsearch",
     "ADMIN_SEARCH_INDICES_REBUILD": "重建 Elasticsearch 索引"
+  },
+  "toaster": {
+    "give_user_admin": "Succeeded to give {{username}} admin",
+    "remove_user_admin": "Succeeded to remove {{username}} admin ",
+		"activate_user_success": "Succeeded to activating {{username}}",
+		"deactivate_user_success": "Succeeded to deactivate {{username}}",
+    "remove_user_success": "Succeeded to removing {{username}}",
+    "remove_external_user_success": "Succeeded to remove {{accountId}}",
+    "switch_disable_link_sharing_success": "成功更新分享链接设置",
+    "failed_to_reset_password":"Failed to reset password"
   }
 }

packages/app/public/static/locales/zh_CN/commons.json

@@ -6,12 +6,22 @@
     "create_succeeded": "Succeeded to create {{target}}",
     "create_failed": "Failed to create {{target}}",
     "update_successed": "Succeeded to update {{target}}",
-    "update_failed": "Failed to update {{target}}"
+    "update_failed": "Failed to update {{target}}",
+
+    "remove_share_link_success": "Succeeded to remove {{shareLinkId}}",
+    "remove_share_link": "Succeeded to remove {{count}} share links"
   },
   "alert": {
     "siteUrl_is_not_set": "主页URL未设置，通过 {{link}} 设置"
   },
   "headers": {
     "app_settings": "系统设置"
+  },
+
+  "share_links": {
+    "Share Link": "Share Link",
+    "Page Path": "Page Path",
+    "expire": "Expiration",
+    "description": "Description"
   }
 }

packages/app/public/static/locales/zh_CN/translation.json

@@ -497,16 +497,8 @@
 	"toaster": {
     "file_upload_succeeded": "文件上传成功",
     "file_upload_failed": "文件上传失败",
-    "initialize_successed": "Succeeded to initialize {{target}}",
-    "give_user_admin": "Succeeded to give {{username}} admin",
-    "remove_user_admin": "Succeeded to remove {{username}} admin ",
-		"activate_user_success": "Succeeded to activating {{username}}",
-		"deactivate_user_success": "Succeeded to deactivate {{username}}",
-		"remove_user_success": "Succeeded to removing {{username}} ",
-    "remove_external_user_success": "Succeeded to remove {{accountId}} ",
-    "switch_disable_link_sharing_success": "成功更新分享链接设置",
-    "failed_to_reset_password":"Failed to reset password",
-    "save_succeeded": "已成功保存"
+    "save_succeeded": "已成功保存",
+    "issue_share_link": "Succeeded to issue new share link"
   },
 	"template": {
 		"modal_label": {
@@ -586,9 +578,6 @@
     "Shere this page link to public": "Shere this page link to public",
     "share_link_list": "Share link list",
     "share_link_management": "Share Link Management",
-    "No_share_links":"No share links",
-    "Share Link": "Share Link",
-    "Page Path": "Page Path",
     "delete_all_share_links":"Delete all share links",
     "expire": "Expiration",
     "Days": "Days",
@@ -601,55 +590,6 @@
     "Invalid_Number_of_Date" : "You entered invalid value",
     "link_sharing_is_disabled": "链接共享已被禁用"
   },
-	"notification_setting": {
-		"slack_incoming_configuration": "Slack Incoming Webhooks configuration",
-		"prioritize_webhook": "Prioritize incoming webhook than Slack App",
-		"prioritize_webhook_desc": "Check this option and GROWI use Incoming Webhooks even if Slack App settings are enabled.",
-		"slack_app_configuration": "Slack app configuration",
-		"slack_app_configuration_desc": "This is the way that compatible with Crowi,<br /> but not recommended in GROWI because it is <strong>too complex</strong>.",
-		"use_instead": "Please use Slack Incoming Webhooks Configuration instead.",
-		"how_to": {
-			"header": "How to configure Incoming Webhooks?",
-			"workspace": "(At Workspace) Add a hook",
-			"workspace_desc1": "Go to <a href='https://slack.com/services/new/incoming-webhook'>Incoming Webhooks configuration page</a>.",
-			"workspace_desc2": "Choose the default channel to post.",
-			"workspace_desc3": "Add.",
-			"at_growi": "(At GROWI admin page) Set Webhook URL",
-			"at_growi_desc": "Input &rdquo;Webhook URL&rdquo; and submit on this page."
-		},
-		"user_trigger_notification_header": "Default notification settings for patterns",
-		"pattern": "Pattern",
-		"channel": "Channel",
-		"pattern_desc": "Path name of wiki. Pattern expression with <code>*</code> can be used.",
-		"channel_desc": "Slack channel name. Without <code>#</code>.",
-		"valid_page": "启用/禁用通知",
-		"link_notification_help": "<strong>只有那些知道“链接的任何人”链接的人才能查看的页面并不总是得到通知。</strong> ",
-		"just_me_notification_help": "<strong>被“仅限我”限制的页在编辑时被通知。</strong>",
-		"group_notification_help": "<strong>被“用户组”限制的页面在编辑时被通知。</strong>",
-		"notification_list": "List of notification settings",
-		"add_notification": "Add new",
-		"trigger_path": "Trigger path",
-		"trigger_path_help": "(expression with <code>*</code> is supported)",
-		"trigger_events": "Trigger events",
-		"notify_to": "Notify to",
-		"back_to_list": "Go back to list",
-		"notification_detail": "Notification Setting Details",
-		"event_pageCreate": "When new page is \"CREATED\"",
-		"event_pageEdit": "When page is \"EDITED\"",
-		"event_pageDelete": "When page is \"DELETED\"",
-		"event_pageMove": "When page is \"MOVED\" (renamed)",
-		"event_pageLike": "When someone \"LIKES\" page",
-		"event_comment": "When someone \"COMMENTS\" on page",
-		"email": {
-			"ifttt_link": "Create a new IFTTT applet with Email trigger"
-		},
-		"updated_slackApp": "Succeeded to update Slack App Configuration setting",
-		"add_notification_pattern": "Add user trigger notification patterns",
-		"delete_notification_pattern": "Delete notification pattern",
-		"delete_notification_pattern_desc1": "Delete Path: {{path}}",
-		"delete_notification_pattern_desc2": "Once deleted, it cannot be recovered",
-		"toggle_notification": "Updated setting of {{path}}"
-	},
 	"personal_dropdown": {
 		"home": "家",
 		"settings": "设置",

packages/app/src/components/Admin/App/AppSetting.jsx

@@ -23,7 +23,7 @@ const AppSetting = (props) => {
   const submitHandler = useCallback(async() => {
     try {
       await adminAppContainer.updateAppSettingHandler();
-      toastSuccess(t('toaster.update_successed', { target: t('commons:headers.app_settings') }));
+      toastSuccess(t('toaster.update_successed', { target: t('commons:headers.app_settings'), ns: 'commons' }));
     }
     catch (err) {
       toastError(err);

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

@@ -1,12 +1,16 @@
-import React, { useCallback, useState } from 'react';
+import React, {
+  useCallback, useMemo, useEffect, useState,
+} from 'react';
 
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 
 import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3Post, apiv3Put } from '~/client/util/apiv3-client';
 import { useIsMailerSetup } from '~/stores/context';
+import { useSWRxGlobalNotification } from '~/stores/global-notification';
 import loggerFactory from '~/utils/logger';
 
 
@@ -18,18 +22,48 @@ import TriggerEventCheckBox from './TriggerEventCheckBox';
 
 const logger = loggerFactory('growi:manageGlobalNotification');
 
-const ManageGlobalNotification = (props) => {
 
-  let globalNotification;
-  // TODO: securely fetch the data of globalNotification variable without using swig. URL https://redmine.weseek.co.jp/issues/103901
-  // globalNotification = JSON.parse(document.getElementById('admin-global-notification-setting').getAttribute('data-global-notification'));
+const ManageGlobalNotification = (props) => {
 
-  const [globalNotificationId, setGlobalNotificationId] = useState(null);
   const [triggerPath, setTriggerPath] = useState('');
-  const [notifyToType, setNotifyToType] = useState('mail');
+  const [notifyType, setNotifyType] = useState('mail');
   const [emailToSend, setEmailToSend] = useState('');
   const [slackChannelToSend, setSlackChannelToSend] = useState('');
-  const [triggerEvents, setTriggerEvents] = useState(new Set(globalNotification?.triggerEvents));
+  const [triggerEvents, setTriggerEvents] = useState(new Set());
+  const { data: globalNotificationData, update: updateGlobalNotification } = useSWRxGlobalNotification(props.globalNotificationId);
+  const globalNotification = useMemo(() => globalNotificationData?.globalNotification, [globalNotificationData?.globalNotification]);
+
+  const router = useRouter();
+
+
+  useEffect(() => {
+    if (globalNotification != null) {
+      const notifyType = globalNotification.__t;
+      setNotifyType(notifyType);
+
+      setTriggerPath(globalNotification.triggerPath);
+      setTriggerEvents(new Set(globalNotification.triggerEvents));
+
+      if (notifyType === 'mail') {
+        setEmailToSend(globalNotification.toEmail);
+      }
+      else {
+        setSlackChannelToSend(globalNotification.slackChannels);
+      }
+    }
+
+
+  }, [globalNotification]);
+
+  const isLoading = globalNotificationData === undefined;
+  const notExistsGlobalNotification = !isLoading && globalNotificationData == null;
+
+  useEffect(() => {
+    if (notExistsGlobalNotification) {
+      router.push('/admin/notification');
+    }
+  }, [notExistsGlobalNotification, router]);
+
 
   const onChangeTriggerEvents = useCallback((triggerEvent) => {
     let newTriggerEvents;
@@ -44,29 +78,35 @@ const ManageGlobalNotification = (props) => {
     }
   }, [triggerEvents]);
 
-  const updateButtonClickedHandler = useCallback(async() => {
 
+  const updateButtonClickedHandler = useCallback(async() => {
     const requestParams = {
       triggerPath,
-      notifyToType,
+      notifyType,
       toEmail: emailToSend,
       slackChannels: slackChannelToSend,
       triggerEvents: [...triggerEvents],
     };
 
+    const { _id: globalNotificationId } = globalNotification;
+
     try {
       if (globalNotificationId != null) {
-        await apiv3Put(`/notification-setting/global-notification/${globalNotificationId}`, requestParams);
+        await updateGlobalNotification(requestParams);
+        router.push('/admin/notification');
+        // await apiv3Put(`/notification-setting/global-notification/${globalNotificationId}`, requestParams);
       }
       else {
         await apiv3Post('/notification-setting/global-notification', requestParams);
+        router.push('/admin/notification');
       }
     }
     catch (err) {
       toastError(err);
       logger.error(err);
     }
-  }, [emailToSend, globalNotificationId, notifyToType, slackChannelToSend, triggerEvents, triggerPath]);
+  }, [emailToSend, globalNotification, notifyType, router, slackChannelToSend, triggerEvents, triggerPath, updateGlobalNotification]);
+
 
   const { data: isMailerSetup } = useIsMailerSetup();
   const { adminNotificationContainer } = props;
@@ -110,10 +150,10 @@ const ManageGlobalNotification = (props) => {
                 className="custom-control-input"
                 type="radio"
                 id="mail"
-                name="notifyToType"
+                name="notifyType"
                 value="mail"
-                checked={notifyToType === 'mail'}
-                onChange={() => { setNotifyToType('mail') }}
+                checked={notifyType === 'mail'}
+                onChange={() => { setNotifyType('mail') }}
               />
               <label className="custom-control-label" htmlFor="mail">
                 <p className="font-weight-bold">Email</p>
@@ -124,10 +164,10 @@ const ManageGlobalNotification = (props) => {
                 className="custom-control-input"
                 type="radio"
                 id="slack"
-                name="notifyToType"
+                name="notifyType"
                 value="slack"
-                checked={notifyToType === 'slack'}
-                onChange={() => { setNotifyToType('slack') }}
+                checked={notifyType === 'slack'}
+                onChange={() => { setNotifyType('slack') }}
               />
               <label className="custom-control-label" htmlFor="slack">
                 <p className="font-weight-bold">Slack</p>
@@ -135,7 +175,7 @@ const ManageGlobalNotification = (props) => {
             </div>
           </div>
 
-          {notifyToType === 'mail'
+          {notifyType === 'mail'
             ? (
               <>
                 <div className="input-group notify-to-option" id="mail-input">
@@ -278,6 +318,7 @@ const ManageGlobalNotification = (props) => {
 
 ManageGlobalNotification.propTypes = {
   adminNotificationContainer: PropTypes.instanceOf(AdminNotificationContainer).isRequired,
+  globalNotificationId: PropTypes.string,
 };
 
 const ManageGlobalNotificationWrapper = withUnstatedContainers(ManageGlobalNotification, [AdminNotificationContainer]);

packages/app/src/components/Admin/Security/ShareLinkSetting.tsx

@@ -70,7 +70,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
     try {
       const res = await apiv3Delete('/share-links/all');
       const { deletedCount } = res.data;
-      toastSuccess(t('toaster.remove_share_link', { count: deletedCount }));
+      toastSuccess(t('toaster.remove_share_link', { count: deletedCount, ns: 'commons' }));
     }
     catch (err) {
       toastError(err);
@@ -82,7 +82,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
     try {
       const res = await apiv3Delete(`/share-links/${shareLinkId}`);
       const { deletedShareLink } = res.data;
-      toastSuccess(t('toaster.remove_share_link_success', { shareLinkId: deletedShareLink._id }));
+      toastSuccess(t('toaster.remove_share_link_success', { shareLinkId: deletedShareLink._id, ns: 'commons' }));
     }
     catch (err) {
       toastError(err);
@@ -148,7 +148,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
           isAdmin
         />
       )
-        : (<p className="text-center">{t('share_links.No_share_links')}</p>
+        : (<p className="text-center">{t('security_settings.No_share_links')}</p>
         )
       }
 

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -37,7 +37,7 @@ const UpdateParentConfirmModal = dynamic(() => import('./UpdateParentConfirmModa
 
 
 type Props = {
-  userGroupId?: string,
+  userGroupId: string,
 }
 
 const UserGroupDetailPage = (props: Props): JSX.Element => {

packages/app/src/components/Admin/Users/GiveAdminButton.tsx

@@ -15,7 +15,7 @@ type GiveAdminButtonProps = {
 
 const GiveAdminButton = (props: GiveAdminButtonProps): JSX.Element => {
 
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   const { adminUsersContainer, user } = props;
 
   const onClickGiveAdminBtnHandler = useCallback(async() => {
@@ -30,7 +30,7 @@ const GiveAdminButton = (props: GiveAdminButtonProps): JSX.Element => {
 
   return (
     <button className="dropdown-item" type="button" onClick={() => onClickGiveAdminBtnHandler()}>
-      <i className="icon-fw icon-user-following"></i> {t('admin:user_management.user_table.give_admin_access')}
+      <i className="icon-fw icon-user-following"></i> {t('user_management.user_table.give_admin_access')}
     </button>
   );
 

packages/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -42,11 +42,11 @@ class PasswordResetModal extends React.Component {
     return (
       <>
         <p>
-          {t('admin:user_management.reset_password_modal.password_never_seen')}<br />
-          <span className="text-danger">{t('admin:user_management.reset_password_modal.send_new_password')}</span>
+          {t('user_management.reset_password_modal.password_never_seen')}<br />
+          <span className="text-danger">{t('user_management.reset_password_modal.send_new_password')}</span>
         </p>
         <p>
-          {t('admin:user_management.reset_password_modal.target_user')}: <code>{userForPasswordResetModal.email}</code>
+          {t('user_management.reset_password_modal.target_user')}: <code>{userForPasswordResetModal.email}</code>
         </p>
       </>
     );
@@ -57,12 +57,12 @@ class PasswordResetModal extends React.Component {
 
     return (
       <>
-        <p className="alert alert-danger">{t('admin:user_management.reset_password_modal.password_reset_message')}</p>
+        <p className="alert alert-danger">{t('user_management.reset_password_modal.password_reset_message')}</p>
         <p>
-          {t('admin:user_management.reset_password_modal.target_user')}: <code>{userForPasswordResetModal.email}</code>
+          {t('user_management.reset_password_modal.target_user')}: <code>{userForPasswordResetModal.email}</code>
         </p>
         <p>
-          {t('admin:user_management.reset_password_modal.new_password')}: <code>{this.state.temporaryPassword}</code>
+          {t('user_management.reset_password_modal.new_password')}: <code>{this.state.temporaryPassword}</code>
         </p>
       </>
     );
@@ -72,7 +72,7 @@ class PasswordResetModal extends React.Component {
     const { t } = this.props;
     return (
       <button type="submit" className="btn btn-danger" onClick={this.resetPassword}>
-        {t('admin:user_management.reset_password')}
+        {t('user_management.reset_password')}
       </button>
     );
   }
@@ -94,7 +94,7 @@ class PasswordResetModal extends React.Component {
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
         <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-warning text-light">
-          {t('admin:user_management.reset_password') }
+          {t('user_management.reset_password') }
         </ModalHeader>
         <ModalBody>
           {this.state.isPasswordResetDone ? this.returnModalBodyAfterReset() : this.renderModalBodyBeforeReset()}
@@ -109,7 +109,7 @@ class PasswordResetModal extends React.Component {
 }
 
 const PasswordResetModalWrapperFC = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   return <PasswordResetModal t={t} {...props} />;
 };
 

packages/app/src/components/Admin/Users/RemoveAdminButton.tsx

@@ -16,7 +16,7 @@ type RemoveAdminButtonProps = {
 
 const RemoveAdminButton = (props: RemoveAdminButtonProps): JSX.Element => {
 
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   const { data: currentUser } = useCurrentUser();
   const { adminUsersContainer, user } = props;
 
@@ -33,7 +33,7 @@ const RemoveAdminButton = (props: RemoveAdminButtonProps): JSX.Element => {
   const renderRemoveAdminBtn = () => {
     return (
       <button className="dropdown-item" type="button" onClick={() => onClickRemoveAdminBtnHandler()}>
-        <i className="icon-fw icon-user-unfollow"></i>{t('admin:user_management.user_table.remove_admin_access')}
+        <i className="icon-fw icon-user-unfollow"></i>{t('user_management.user_table.remove_admin_access')}
       </button>
     );
   };
@@ -41,8 +41,8 @@ const RemoveAdminButton = (props: RemoveAdminButtonProps): JSX.Element => {
   const renderRemoveAdminAlert = () => {
     return (
       <div className="px-4">
-        <i className="icon-fw icon-user-unfollow mb-2"></i>{t('admin:user_management.user_table.remove_admin_access')}
-        <p className="alert alert-danger">{t('admin:user_management.user_table.cannot_remove')}</p>
+        <i className="icon-fw icon-user-unfollow mb-2"></i>{t('user_management.user_table.remove_admin_access')}
+        <p className="alert alert-danger">{t('user_management.user_table.cannot_remove')}</p>
       </div>
     );
   };

packages/app/src/components/Admin/Users/RemoveAdminMenuItem.tsx

@@ -29,7 +29,7 @@ type Props = {
 }
 
 const RemoveAdminMenuItem = (props: Props): JSX.Element => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const { adminUsersContainer, user } = props;
 
@@ -49,7 +49,7 @@ const RemoveAdminMenuItem = (props: Props): JSX.Element => {
   return user.username !== currentUser?.username
     ? (
       <button className="dropdown-item" type="button" onClick={clickRemoveAdminBtnHandler}>
-        <i className="icon-fw icon-user-unfollow"></i> {t('admin:user_management.user_table.remove_admin_access')}
+        <i className="icon-fw icon-user-unfollow"></i> {t('user_management.user_table.remove_admin_access')}
       </button>
     )
     : <RemoveAdminAlert />;

packages/app/src/components/Admin/Users/StatusActivateButton.jsx

@@ -33,7 +33,7 @@ class StatusActivateButton extends React.Component {
 
     return (
       <button className="dropdown-item" type="button" onClick={() => { this.onClickAcceptBtn() }}>
-        <i className="icon-fw icon-user-following"></i> {t('admin:user_management.user_table.accept')}
+        <i className="icon-fw icon-user-following"></i> {t('user_management.user_table.accept')}
       </button>
     );
   }
@@ -41,7 +41,7 @@ class StatusActivateButton extends React.Component {
 }
 
 const StatusActivateFormWrapperFC = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   return <StatusActivateButton t={t} {...props} />;
 };
 

packages/app/src/components/Admin/Users/StatusSuspendMenuItem.tsx

@@ -28,7 +28,7 @@ type Props = {
 }
 
 const StatusSuspendMenuItem = (props: Props): JSX.Element => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const { adminUsersContainer, user } = props;
 
@@ -47,7 +47,7 @@ const StatusSuspendMenuItem = (props: Props): JSX.Element => {
   return user.username !== currentUser?.username
     ? (
       <button className="dropdown-item" type="button" onClick={clickDeactiveBtnHandler}>
-        <i className="icon-fw icon-ban"></i> {t('admin:user_management.user_table.deactivate_account')}
+        <i className="icon-fw icon-ban"></i> {t('user_management.user_table.deactivate_account')}
       </button>
     )
     : <SuspendAlert />;

packages/app/src/components/Admin/Users/UserRemoveButton.jsx

@@ -49,7 +49,7 @@ UserRemoveButton.propTypes = {
 };
 
 const UserRemoveButtonWrapperFC = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   return <UserRemoveButton t={t} {...props} />;
 };
 

packages/app/src/components/ShareLink/ShareLink.tsx

@@ -29,7 +29,7 @@ const ShareLink = (): JSX.Element => {
     try {
       const res = await apiv3Delete('/share-links/', { relatedPage: currentPageId });
       const count = res.data.n;
-      toastSuccess(t('toaster.remove_share_link', { count }));
+      toastSuccess(t('toaster.remove_share_link', { count, ns: 'commons' }));
       mutate();
     }
     catch (err) {
@@ -41,7 +41,7 @@ const ShareLink = (): JSX.Element => {
     try {
       const res = await apiv3Delete(`/share-links/${shareLinkId}`);
       const { deletedShareLink } = res.data;
-      toastSuccess(t('toaster.remove_share_link_success', { shareLinkId: deletedShareLink._id }));
+      toastSuccess(t('toaster.remove_share_link_success', { shareLinkId: deletedShareLink._id, ns: 'commons' }));
       mutate();
     }
     catch (err) {

packages/app/src/components/ShareLink/ShareLinkList.tsx

@@ -69,7 +69,7 @@ type Props = {
 
 const ShareLinkList = (props: Props): JSX.Element => {
 
-  const { t } = useTranslation('admin');
+  const { t } = useTranslation('commons');
 
   function renderShareLinks() {
     return (
@@ -96,10 +96,10 @@ const ShareLinkList = (props: Props): JSX.Element => {
       <table className="table table-bordered">
         <thead>
           <tr>
-            <th>{t('security_settings.Share Link')}</th>
-            {props.isAdmin && <th>{t('security_settings.Page Path')}</th>}
-            <th>{t('security_settings.expire')}</th>
-            <th>{t('security_settings.description')}</th>
+            <th>{t('share_links.Share Link', { ns: 'commons' })}</th>
+            {props.isAdmin && <th>{t('share_links.Page Path', { ns: 'commons' })}</th>}
+            <th>{t('share_links.expire', { ns: 'commons' })}</th>
+            <th>{t('share_links.description', { ns: 'commons' })}</th>
             <th></th>
           </tr>
         </thead>

packages/app/src/pages/admin/global-notification/[globalNotificationId].page.tsx

@@ -0,0 +1,73 @@
+import { useEffect } from 'react';
+
+import { isClient, objectIdUtils } from '@growi/core';
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import { Container, Provider } from 'unstated';
+
+import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
+import { toastError } from '~/client/util/apiNotification';
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+
+import { retrieveServerSideProps } from '../../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const ManageGlobalNotification = dynamic(() => import('~/components/Admin/Notification/ManageGlobalNotification'), { ssr: false });
+
+
+const AdminGlobalNotificationNewPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+  const router = useRouter();
+  const { globalNotificationId } = router.query;
+  const currentGlobalNotificationId = Array.isArray(globalNotificationId) ? globalNotificationId[0] : globalNotificationId;
+
+
+  useEffect(() => {
+    if (globalNotificationId == null) {
+      router.push('/admin/notification');
+    }
+    if ((currentGlobalNotificationId != null && !objectIdUtils.isValidObjectId(currentGlobalNotificationId))) {
+      toastError(t('notification_settings.not_found_global_notification_triggerid'));
+      router.push('/admin/global-notification/new');
+      return;
+    }
+  }, [currentGlobalNotificationId, globalNotificationId, router, t]);
+
+
+  const title = t('external_notification.external_notification');
+  const customTitle = useCustomTitle(props, title);
+
+
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminNotificationContainer = new AdminNotificationContainer();
+    injectableContainers.push(adminNotificationContainer);
+  }
+
+
+  return (
+    <Provider inject={[...injectableContainers]}>
+      <AdminLayout title={customTitle} componentTitle={title} >
+        {
+          currentGlobalNotificationId != null && router.isReady
+      && <ManageGlobalNotification globalNotificationId={currentGlobalNotificationId} />
+        }
+      </AdminLayout>
+    </Provider>
+  );
+
+};
+
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminGlobalNotificationNewPage;

packages/app/src/pages/admin/user-group-detail/[userGroupId].page.tsx

@@ -0,0 +1,45 @@
+import {
+  NextPage, GetServerSideProps, GetServerSidePropsContext,
+} from 'next';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+
+import { CommonProps, useCustomTitle } from '~/pages/utils/commons';
+import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
+
+import { retrieveServerSideProps } from '../../../utils/admin-page-util';
+
+const AdminLayout = dynamic(() => import('~/components/Layout/AdminLayout'), { ssr: false });
+const UserGroupDetailPage = dynamic(() => import('~/components/Admin/UserGroupDetail/UserGroupDetailPage'), { ssr: false });
+
+
+const AdminUserGroupDetailPage: NextPage<CommonProps> = (props) => {
+  const { t } = useTranslation('admin');
+  useIsMaintenanceMode(props.isMaintenanceMode);
+  const router = useRouter();
+  const { userGroupId } = router.query;
+
+  const title = t('user_group_management.user_group_management');
+  const customTitle = useCustomTitle(props, title);
+
+
+  const currentUserGroupId = Array.isArray(userGroupId) ? userGroupId[0] : userGroupId;
+
+  return (
+    <AdminLayout title={customTitle} componentTitle={title} >
+      {
+        currentUserGroupId != null && router.isReady
+      && <UserGroupDetailPage userGroupId={currentUserGroupId} />
+      }
+    </AdminLayout>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const props = await retrieveServerSideProps(context);
+  return props;
+};
+
+
+export default AdminUserGroupDetailPage;

packages/app/src/server/routes/admin.js

@@ -175,22 +175,22 @@ module.exports = function(crowi, app) {
     return res.redirect('/admin/notification');
   };
 
-  actions.globalNotification = {};
-  actions.globalNotification.detail = async(req, res) => {
-    const notificationSettingId = req.params.id;
-    let globalNotification;
-
-    if (notificationSettingId) {
-      try {
-        globalNotification = await GlobalNotificationSetting.findOne({ _id: notificationSettingId });
-      }
-      catch (err) {
-        logger.error(`Error in finding a global notification setting with {_id: ${notificationSettingId}}`);
-      }
-    }
-
-    return res.render('admin/global-notification-detail', { globalNotification });
-  };
+  // actions.globalNotification = {};
+  // actions.globalNotification.detail = async(req, res) => {
+  //   const notificationSettingId = req.params.id;
+  //   let globalNotification;
+
+  //   if (notificationSettingId) {
+  //     try {
+  //       globalNotification = await GlobalNotificationSetting.findOne({ _id: notificationSettingId });
+  //     }
+  //     catch (err) {
+  //       logger.error(`Error in finding a global notification setting with {_id: ${notificationSettingId}}`);
+  //     }
+  //   }
+
+  //   return res.render('admin/global-notification-detail', { globalNotification });
+  // };
 
   actions.search = {};
   actions.search.index = function(req, res) {
@@ -263,17 +263,17 @@ module.exports = function(crowi, app) {
   };
 
   // グループ詳細
-  actions.userGroup.detail = async function(req, res) {
-    const userGroupId = req.params.id;
-    const userGroup = await UserGroup.findOne({ _id: userGroupId }).populate('parent');
+  // actions.userGroup.detail = async function(req, res) {
+  //   const userGroupId = req.params.id;
+  //   const userGroup = await UserGroup.findOne({ _id: userGroupId }).populate('parent');
 
-    if (userGroup == null) {
-      logger.error('no userGroup is exists. ', userGroupId);
-      return res.redirect('/admin/user-groups');
-    }
+  //   if (userGroup == null) {
+  //     logger.error('no userGroup is exists. ', userGroupId);
+  //     return res.redirect('/admin/user-groups');
+  //   }
 
-    return res.render('admin/user-group-detail', { userGroup });
-  };
+  //   return res.render('admin/user-group-detail', { userGroup });
+  // };
 
   // AuditLog
   actions.auditLog = {};

packages/app/src/server/routes/apiv3/index.js

@@ -66,6 +66,7 @@ module.exports = (crowi, app, isInstalled) => {
 
   router.use('/personal-setting', require('./personal-setting')(crowi));
 
+  router.use('/user-group-relations', require('./user-group-relation')(crowi));
   router.use('/user-group-relations', require('./user-group-relation')(crowi));
 
   router.use('/statistics', require('./statistics')(crowi));

packages/app/src/server/routes/apiv3/notification-setting.js

@@ -26,12 +26,12 @@ const validator = {
   globalNotification: [
     body('triggerPath').isString().trim().not()
       .isEmpty(),
-    body('notifyToType').isString().trim().isIn(['mail', 'slack']),
+    body('notifyType').isString().trim().isIn(['mail', 'slack']),
     body('toEmail').trim().custom((value, { req }) => {
-      return (req.body.notifyToType === 'mail') ? (!!value && value.match(/.+@.+\..+/)) : true;
+      return (req.body.notifyType === 'mail') ? (!!value && value.match(/.+@.+\..+/)) : true;
     }),
     body('slackChannels').trim().custom((value, { req }) => {
-      return (req.body.notifyToType === 'slack') ? !!value : true;
+      return (req.body.notifyType === 'slack') ? !!value : true;
     }),
   ],
   notifyForPageGrant: [
@@ -72,7 +72,7 @@ const validator = {
  *      GlobalNotificationParams:
  *        type: object
  *        properties:
- *          notifyToType:
+ *          notifyType:
  *            type: string
  *            description: What is type for notify
  *          toEmail:
@@ -232,6 +232,24 @@ module.exports = (crowi) => {
 
   });
 
+
+  router.get('/global-notification/:id', loginRequiredStrictly, adminRequired, validator.globalNotification, async(req, res) => {
+
+    const notificationSettingId = req.params.id;
+    let globalNotification;
+
+    if (notificationSettingId) {
+      try {
+        globalNotification = await GlobalNotificationSetting.findOne({ _id: notificationSettingId });
+      }
+      catch (err) {
+        logger.error(`Error in finding a global notification setting with {_id: ${notificationSettingId}}`);
+      }
+    }
+
+    return res.apiv3({ globalNotification });
+  });
+
   /**
    * @swagger
    *
@@ -260,16 +278,16 @@ module.exports = (crowi) => {
   router.post('/global-notification', loginRequiredStrictly, adminRequired, addActivity, validator.globalNotification, apiV3FormValidator, async(req, res) => {
 
     const {
-      notifyToType, toEmail, slackChannels, triggerPath, triggerEvents,
+      notifyType, toEmail, slackChannels, triggerPath, triggerEvents,
     } = req.body;
 
     let notification;
 
-    if (notifyToType === GlobalNotificationSetting.TYPE.MAIL) {
+    if (notifyType === GlobalNotificationSetting.TYPE.MAIL) {
       notification = new GlobalNotificationMailSetting(crowi);
       notification.toEmail = toEmail;
     }
-    if (notifyToType === GlobalNotificationSetting.TYPE.SLACK) {
+    if (notifyType === GlobalNotificationSetting.TYPE.SLACK) {
       notification = new GlobalNotificationSlackSetting(crowi);
       notification.slackChannels = slackChannels;
     }
@@ -328,7 +346,7 @@ module.exports = (crowi) => {
   router.put('/global-notification/:id', loginRequiredStrictly, adminRequired, addActivity, validator.globalNotification, apiV3FormValidator, async(req, res) => {
     const { id } = req.params;
     const {
-      notifyToType, toEmail, slackChannels, triggerPath, triggerEvents,
+      notifyType, toEmail, slackChannels, triggerPath, triggerEvents,
     } = req.body;
 
     const models = {
@@ -342,7 +360,7 @@ module.exports = (crowi) => {
 
       // when switching from one type to another,
       // remove toEmail from slack setting and slackChannels from mail setting
-      if (setting.__t !== notifyToType) {
+      if (setting.__t !== notifyType) {
         setting = models[setting.__t].hydrate(setting);
         setting.toEmail = undefined;
         setting.slackChannels = undefined;
@@ -350,16 +368,16 @@ module.exports = (crowi) => {
         setting = setting.toObject();
       }
 
-      if (notifyToType === GlobalNotificationSetting.TYPE.MAIL) {
+      if (notifyType === GlobalNotificationSetting.TYPE.MAIL) {
         setting = GlobalNotificationMailSetting.hydrate(setting);
         setting.toEmail = toEmail;
       }
-      if (notifyToType === GlobalNotificationSetting.TYPE.SLACK) {
+      if (notifyType === GlobalNotificationSetting.TYPE.SLACK) {
         setting = GlobalNotificationSlackSetting.hydrate(setting);
         setting.slackChannels = slackChannels;
       }
 
-      setting.__t = notifyToType;
+      setting.__t = notifyType;
       setting.triggerPath = triggerPath;
       setting.triggerEvents = triggerEvents || [];
 

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

@@ -1,4 +1,4 @@
-{% extends '../layout/admin.html' %}
+<!-- {% extends '../layout/admin.html' %}
 
 {% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('external_notification.external_notification')) }}{% endblock %}
 
@@ -9,4 +9,4 @@
 {% block content_main %}
 <div id="admin-global-notification-setting"
     data-global-notification="{{ globalNotification|json }}"></div>
-{% endblock content_main %}
+{% endblock content_main %} -->

packages/app/src/server/views/admin/user-group-detail.html

@@ -1,4 +1,4 @@
-{% extends '../layout/admin.html' %}
+<!-- {% extends '../layout/admin.html' %}
 
 {% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('user_group_management.user_group_management') + '/' + userGroup.name) | preventXss }}{% endblock %}
 
@@ -12,4 +12,4 @@
   data-user-group="{{ userGroup|json }}"
 >
 </div>
-{% endblock content_main %}
+{% endblock content_main %} -->

packages/app/src/stores/global-notification.ts

@@ -0,0 +1,37 @@
+import { SWRResponseWithUtils, withUtils } from '@growi/core';
+import useSWRImmutable from 'swr/immutable';
+
+
+import { apiv3Get, apiv3Put } from '../client/util/apiv3-client';
+
+
+type Util = {
+  update(updateData: any): Promise<void>
+};
+
+
+// TODO: typescriptize
+export const useSWRxGlobalNotification = (globalNotificationId: string): SWRResponseWithUtils<Util, any, Error> => {
+  const swrResult = useSWRImmutable(
+    globalNotificationId != null ? `/notification-setting/global-notification/${globalNotificationId}` : null,
+    endpoint => apiv3Get(endpoint).then((response) => {
+      return {
+        globalNotification: response.data.globalNotification,
+      };
+    }),
+  );
+
+
+  const update = async(updateData) => {
+    const { data } = swrResult;
+
+    if (data == null) {
+      return;
+    }
+
+    // invoke API
+    await apiv3Put(`/notification-setting/global-notification/${globalNotificationId}`, updateData);
+  };
+
+  return withUtils<Util, any, Error>(swrResult, { update });
+};