Merge pull request #1573 from weseek/reactify-admin/i18n-notificaton-setting

Reactify admin/i18n notificaton setting

resource/locales/en-US/translation.json

@@ -593,6 +593,26 @@
     "updated_xss": "Succeeded to update XSS setting"
   },
   "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>.",
     "notification_list": "List of Notification Settings",
     "add_notification": "Add New",
     "trigger_path": "Trigger Path",

resource/locales/ja/translation.json

@@ -576,6 +576,26 @@
     "updated_xss": "XSS設定を更新しました"
   },
   "notification_setting": {
+    "slack_incoming_configuration": "Slack Incoming Webhooks 設定",
+    "prioritize_webhook": "Slack アプリより Incoming Webhook を優先する",
+    "prioritize_webhook_desc": "このオプションをオンにすると、 Slack App が有効になっていても GROWI は Incoming Webhook を使用します。",
+    "slack_app_configuration": "Slack App 設定",
+    "slack_app_configuration_desc": "Crowi 互換の機能です。<br /> <strong>設定が複雑すぎる</strong>のでオススメしません。",
+    "use_instead": "代わりに Slack Incoming Webhooks 設定を使用してください。",
+    "how_to": {
+      "header": "Incoming Webhooks の設定方法",
+      "workspace": "ワークスペースで Webhook を追加します。",
+      "workspace_desc1": "<a href='https://slack.com/services/new/incoming-webhook'>Incoming Webhooks Configuration page</a> にアクセスします。",
+      "workspace_desc2": "投稿するチャンネルを選びます。",
+      "workspace_desc3": "追加します。",
+      "at_growi": "GROWI 管理画面で Webhook URL を設定します。",
+      "at_growi_desc": "このページで &rdquo;Webhook URL&rdquo; を入力して送信します。"
+    },
+    "user_trigger_notification_header": "デフォルトパターンの通知設定",
+    "pattern": "パターン",
+    "channel": "チャンネル名",
+    "pattern_desc": "Wiki のパス名。 パスには <code>*</code> を使用できます。",
+    "channel_desc": "<code>#</code> を除いた Slack チャンネル名",
     "notification_list": "通知設定の一覧",
     "add_notification": "通知設定の追加",
     "trigger_path": "トリガーパス",

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

@@ -34,9 +34,8 @@ class SlackAppConfiguration extends React.Component {
     }
   }
 
-  // TODO GW-788 i18n
   render() {
-    const { adminNotificationContainer } = this.props;
+    const { t, adminNotificationContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -65,7 +64,7 @@ class SlackAppConfiguration extends React.Component {
         </div>
         {adminNotificationContainer.state.selectSlackOption === 'Incoming Webhooks' ? (
           <React.Fragment>
-            <h2 className="border-bottom mb-5">Slack Incoming Webhooks Configuration</h2>
+            <h2 className="border-bottom mb-5">{t('notification_setting.slack_incoming_configuration')}</h2>
 
             <div className="row mb-5">
               <label className="col-xs-3 text-right">Webhook URL</label>
@@ -89,11 +88,11 @@ class SlackAppConfiguration extends React.Component {
                     onChange={() => { adminNotificationContainer.switchIsIncomingWebhookPrioritized() }}
                   />
                   <label htmlFor="cbPrioritizeIWH">
-                    Prioritize Incoming Webhook than Slack App
+                    {t('notification_setting.prioritize_webhook')}
                   </label>
                 </div>
                 <p className="help-block">
-                  Check this option and GROWI use Incoming Webhooks even if Slack App settings are enabled.
+                  {t('notification_setting.prioritize_webhook_desc')}
                 </p>
               </div>
             </div>
@@ -101,23 +100,21 @@ class SlackAppConfiguration extends React.Component {
         )
           : (
             <React.Fragment>
-              <h2 className="border-bottom mb-5">Slack App Configuration</h2>
+              <h2 className="border-bottom mb-5">{t('notification_setting.slack_app_configuration')}</h2>
 
               <div className="well">
                 <i className="icon-fw icon-exclamation text-danger"></i><span className="text-danger">NOT RECOMMENDED</span>
                 <br /><br />
-                This is the way that compatible with Crowi,<br />
-                but not recommended in GROWI because it is <strong>too complex</strong>.
+                {/* eslint-disable-next-line react/no-danger */}
+                <span dangerouslySetInnerHTML={{ __html: t('notification_setting.slack_app_configuration_desc') }} />
                 <br /><br />
-                Please use
                 <a
                   href="#slack-incoming-webhooks"
                   data-toggle="tab"
                   onClick={() => adminNotificationContainer.switchSlackOption('Incoming Webhooks')}
                 >
-                  Slack incomming webhooks Configuration
-                </a>
-                instead.
+                  {t('notification_setting.use_instead')}
+                </a>{' '}
               </div>
 
               <div className="row mb-5">
@@ -144,23 +141,25 @@ class SlackAppConfiguration extends React.Component {
         <hr />
 
         <h3>
-          <i className="icon-question" aria-hidden="true"></i>
-          <a href="#collapseHelpForIwh" data-toggle="collapse"> How to configure Incoming Webhooks?</a>
+          <i className="icon-question" aria-hidden="true"></i>{' '}
+          <a href="#collapseHelpForIwh" data-toggle="collapse">{t('notification_setting.how_to.header')}</a>
         </h3>
 
         <ol id="collapseHelpForIwh" className="collapse">
           <li>
-            (At Workspace) Add a hook
+            {t('notification_setting.how_to.workspace')}
             <ol>
-              <li>Go to <a href="https://slack.com/services/new/incoming-webhook">Incoming Webhooks Configuration page</a>.</li>
-              <li>Choose the default channel to post.</li>
-              <li>Add.</li>
+              {/* eslint-disable-next-line react/no-danger */}
+              <li dangerouslySetInnerHTML={{ __html:  t('notification_setting.how_to.workspace_desc1') }} />
+              <li>{t('notification_setting.how_to.workspace_desc2')}</li>
+              <li>{t('notification_setting.how_to.workspace_desc3')}</li>
             </ol>
           </li>
           <li>
-            (At GROWI admin page) Set Webhook URL
+            {t('notification_setting.how_to.at_growi')}
             <ol>
-              <li>Input &rdquo;Webhook URL&rdquo; and submit on this page.</li>
+              {/* eslint-disable-next-line react/no-danger */}
+              <li dangerouslySetInnerHTML={{ __html: t('notification_setting.how_to.at_growi_desc') }} />
             </ol>
           </li>
         </ol>

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

@@ -76,20 +76,19 @@ class UserTriggerNotification extends React.Component {
     }
   }
 
-  // TODO GW-788 i18n
   render() {
     const { t, adminNotificationContainer } = this.props;
 
     return (
       <React.Fragment>
-        <h2 className="border-bottom mb-5">Default Notification Settings for Patterns</h2>
+        <h2 className="border-bottom mb-5">{t('notification_setting.user_trigger_notification_header')}</h2>
 
         <table className="table table-bordered">
           <thead>
             <tr>
-              <th>Pattern</th>
-              <th>Channel</th>
-              <th>Operation</th>
+              <th>{t('notification_setting.pattern')}</th>
+              <th>{t('notification_setting.channel')}</th>
+              <th />
             </tr>
           </thead>
           <tbody className="admin-notif-list">
@@ -103,10 +102,10 @@ class UserTriggerNotification extends React.Component {
                   placeholder="e.g. /projects/xxx/MTG/*"
                   onChange={(e) => { this.changePathPattern(e.target.value) }}
                 />
-                <p className="help-block">
-                  Path name of wiki. Pattern expression with <code>*</code> can be used.
-                </p>
+                {/* eslint-disable-next-line react/no-danger */}
+                <p className="help-block" dangerouslySetInnerHTML={{ __html: t('notification_setting.pattern_desc') }} />
               </td>
+
               <td>
                 <input
                   className="form-control form-inline"
@@ -116,9 +115,9 @@ class UserTriggerNotification extends React.Component {
                   placeholder="e.g. project-xxx"
                   onChange={(e) => { this.changeChannel(e.target.value) }}
                 />
-                <p className="help-block">
-                  Slack channel name. Without <code>#</code>.
-                </p>
+                {/* eslint-disable-next-line react/no-danger */}
+                <p className="help-block" dangerouslySetInnerHTML={{ __html: t('notification_setting.channel_desc') }} />
+
               </td>
               <td>
                 <button type="button" className="btn btn-primary" disabled={!this.validateForm()} onClick={this.onClickSubmit}>{t('add')}</button>