Modified the code based off the first FB

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

@@ -8,15 +8,14 @@ import AdminNotificationContainer from '~/client/services/AdminNotificationConta
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import loggerFactory from '~/utils/logger';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
 import GlobalNotificationList from './GlobalNotificationList';
 
 const logger = loggerFactory('growi:GlobalNotification');
 
 const GlobalNotification = (props) => {
 
-  const { t, adminNotificationContainer } = props;
+  const { adminNotificationContainer } = props;
+  const { t } = useTranslation('admin');
 
   // constructor() {
   //   super();
@@ -27,7 +26,7 @@ const GlobalNotification = (props) => {
   const onClickSubmit = useCallback(async() => {
     try {
       await adminNotificationContainer.updateGlobalNotificationForPages();
-      toastSuccess(t('toaster.update_successed', { target: t('External_Notification') }));
+      toastSuccess(t('toaster.update_successed', { target: t('external_notification.external_notification') }));
     }
     catch (err) {
       toastError(err);
@@ -73,7 +72,8 @@ const GlobalNotification = (props) => {
             </label>
           </div>
         </div>
-      </div><div className="row my-3">
+      </div>
+      <div className="row my-3">
         <div className="col-sm-5 offset-sm-4">
           <button
             type="button"
@@ -95,7 +95,7 @@ const GlobalNotification = (props) => {
           <tr>
             <th>ON/OFF</th>
             {/* eslint-disable-next-line react/no-danger */}
-            <th>{t('notification_settings.trigger_path')} <span dangerouslySetInnerHTML={{ __html: t('notification_setting.trigger_path_help') }} /></th>
+            <th>{t('notification_settings.trigger_path')} <span dangerouslySetInnerHTML={{ __html: t('notification_settings.trigger_path_help') }} /></th>
             <th>{t('notification_settings.trigger_events')}</th>
             <th>{t('notification_settings.notify_to')}</th>
             <th></th>
@@ -111,17 +111,17 @@ const GlobalNotification = (props) => {
 };
 
 GlobalNotification.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
   adminNotificationContainer: PropTypes.instanceOf(AdminNotificationContainer).isRequired,
-
 };
 
-const GlobalNotificationWrapperFC = (props) => {
-  const { t } = useTranslation();
+export default GlobalNotification;
 
-  return <GlobalNotification t={t} {...props} />;
-};
+// const GlobalNotificationWrapperFC = (props) => {
+//   const { t } = useTranslation('admin');
+
+//   return <GlobalNotification t={t} {...props} />;
+// };
 
-const GlobalNotificationWrapper = withUnstatedContainers(GlobalNotificationWrapperFC, [AdminNotificationContainer]);
+// const GlobalNotificationWrapper = withUnstatedContainers(GlobalNotificationWrapperFC, [AdminNotificationContainer]);
 
-export default GlobalNotificationWrapper;
+// export default GlobalNotificationWrapper;

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

@@ -23,22 +23,28 @@ export default class ManageGlobalNotification extends React.Component {
   constructor() {
     super();
 
-    let globalNotification;
-    try {
-      globalNotification = JSON.parse(document.getElementById('admin-global-notification-setting').getAttribute('data-global-notification'));
-    }
-    catch (err) {
-      // toastError(err);
-      logger.error(err);
-    }
+    const globalNotification = null;
+    // try {
+    //   globalNotification = JSON.parse(document.getElementById('admin-global-notification-setting').getAttribute('data-global-notification'));
+    // }
+    // catch (err) {
+    //   // toastError(err);
+    //   logger.error(err);
+    // }
 
     this.state = {
-      globalNotificationId: globalNotification._id || null,
-      triggerPath: globalNotification.triggerPath || '',
-      notifyToType: globalNotification.__t || 'mail',
-      emailToSend: globalNotification.toEmail || '',
-      slackChannelToSend: globalNotification.slackChannels || '',
-      triggerEvents: new Set(globalNotification.triggerEvents),
+      // globalNotificationId: globalNotification._id || null,
+      globalNotificationId: null,
+      // triggerPath: globalNotification.triggerPath || '',
+      triggerPath: '',
+      // notifyToType: globalNotification.__t || 'mail',
+      notifyToType: 'mail',
+      // emailToSend: globalNotification.toEmail || '',
+      emailToSend: '',
+      // slackChannelToSend: globalNotification.slackChannels || '',
+      slackChannelToSend: '',
+      // triggerEvents: new Set(globalNotification.triggerEvents),
+      triggerEvents: new Set(),
     };
 
     this.submitHandler = this.submitHandler.bind(this);
@@ -316,11 +322,11 @@ ManageGlobalNotification.propTypes = {
   isMailerSetup: PropTypes.bool,
 };
 
-const ManageGlobalNotificationWrapperFC = (props) => {
-  const { t } = useTranslation();
+// const ManageGlobalNotificationWrapperFC = (props) => {
+//   const { t } = useTranslation();
 
-  return <ManageGlobalNotification t={t} {...props} />;
-};
+//   return <ManageGlobalNotification t={t} {...props} />;
+// };
 
 // const ManageGlobalNotificationWrapper = withUnstatedContainers(ManageGlobalNotificationWrapperFC, [AppContainer]);
 

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

@@ -46,7 +46,7 @@ const SkeltonListItem = () => (
 
 // eslint-disable-next-line react/prop-types
 const SlackIntegrationListItem = ({ isEnabled, currentBotType }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const isCautionVisible = currentBotType === SlackbotType.OFFICIAL || currentBotType === SlackbotType.CUSTOM_WITH_PROXY;
 
@@ -68,7 +68,7 @@ const SlackIntegrationListItem = ({ isEnabled, currentBotType }) => {
 
 // eslint-disable-next-line react/prop-types
 const LegacySlackIntegrationListItem = ({ isEnabled }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return (
     <li className="list-group-item">
@@ -91,7 +91,7 @@ const LegacySlackIntegrationListItem = ({ isEnabled }) => {
 function NotificationSetting(props) {
   const { adminNotificationContainer } = props;
 
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const [isMounted, setMounted] = useState(false);
   const [activeTab, setActiveTab] = useState('user_trigger_notification');
@@ -164,7 +164,7 @@ function NotificationSetting(props) {
           {activeComponents.has('user_trigger_notification') && <UserTriggerNotification />}
         </TabPane>
         <TabPane tabId="global_notification">
-          {activeComponents.has('global_notification') && <GlobalNotification />}
+          {activeComponents.has('global_notification') && <GlobalNotification adminNotificationContainer={props.adminNotificationContainer} />}
         </TabPane>
       </TabContent>
     </div>

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

@@ -28,7 +28,6 @@ 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';
@@ -53,6 +52,7 @@ const CustomizeSettingContents = dynamic(() => import('../../components/Admin/Cu
 const DataImportPageContents = dynamic(() => import('../../components/Admin/ImportData/ImportDataPageContents'), { ssr: false });
 const ExportArchiveDataPage = dynamic(() => import('../../components/Admin/ExportArchiveDataPage'), { ssr: false });
 const NotificationSetting = dynamic(() => import('../../components/Admin/Notification/NotificationSetting'), { ssr: false });
+const ManageGlobalNotification = dynamic(() => import('../../components/Admin/Notification/ManageGlobalNotification'), { ssr: false });
 const SlackIntegration = dynamic(() => import('../../components/Admin/SlackIntegration/SlackIntegration'), { ssr: false });
 const LegacySlackIntegration = dynamic(() => import('../../components/Admin/LegacySlackIntegration/LegacySlackIntegration'), { ssr: false });
 const UserManagement = dynamic(() => import('../../components/Admin/UserManagement'), { ssr: false });
@@ -142,8 +142,8 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
     },
     'global-notification': {
       new: {
-        title: t('external_notification'),
-        component: <ManageGlobalNotification isMailerSetup={props.isMailerSetup} />,
+        title: t('external_notification.external_notification'),
+        component: <ManageGlobalNotification isMailerSetup={props.isMailerSetup} t={t} />,
       },
     },
     'slack-integration': {