Merge branch 'feat/growi-bot' into imprv/5878-make-component-for-with-proxy-accordion

# Conflicts:
#	src/client/js/components/Admin/SlackIntegration/WithProxyAccordion.jsx

resource/locales/en_US/admin/admin.json

@@ -308,7 +308,8 @@
       "paste_growi_url": "Since a modal is displayed, enter the following URL in <b>GROWI URL</b>.",
       "enter_access_token_for_growi_and_proxy": "Enter <b>Access Token for GROWI</b> and <b>Access Token for Proxy</b>",
       "set_proxy_url_on_growi": "Set Proxy URL on GROWI",
-      "enter_proxy_url_and_update": "Enter <b>Proxy URL</b> shown on Slack and click Update",
+      "enter_proxy_url_and_update": "1. Enter and update the Proxy URL that you copied in step ③ in the <b>Proxy URL</b>  of the <b>Custom bot with proxy integration</b> on this page.",
+      "dont_need_update": "※If the value is already in there, there is no need to update it.",
       "select_install_your_app": "Select \"Install your app\".",
       "select_install_to_workspace": "Select \"Install to Workspace\".",
       "register_official_bot_proxy_service": "Issue Access Token / Register GROWI Official Bot Proxy Service",

resource/locales/ja_JP/admin/admin.json

@@ -305,7 +305,8 @@
       "paste_growi_url": "モーダルが表示されるので、<b>GROWI URL</b> には下記のURLを入力します。",
       "enter_access_token_for_growi_and_proxy": "上記で発行した<b>Access Token for GROWI</b> と <b>Access Token for Proxy</b>を入れる",
       "set_proxy_url_on_growi": "ProxyのURLをGROWIに登録する",
-      "enter_proxy_url_and_update": "Slack上に通知された<b>Proxy URL</b>を入力し、更新してください。",
+      "enter_proxy_url_and_update": "1. 連携手順③でコピーしたProxy URLを、このページの<b>Custom bot with proxy 連携</b>の<b>Proxy URL</b>に入力、更新します。",
+      "dont_need_update": "※既に値が入っている場合は更新する必要はありません",
       "select_install_your_app": "Install your app をクリックします。",
       "select_install_to_workspace": "Install to Workspace をクリックします。",
       "register_official_bot_proxy_service": "アクセストークンの発行 / GROWI Official Bot Proxy サービスへの登録",

resource/locales/zh_CN/admin/admin.json

@@ -315,7 +315,8 @@
       "paste_growi_url": "由于显示了模式，请在 <b>GROWI URL</b> 中输入以下URL",
       "enter_access_token_for_growi_and_proxy": "插入上面发出的 <b>Access Token for GROWI</b> 和 <b>Access Token for Proxy</b>。",
       "set_proxy_url_on_growi": "向GROWI注册Proxy的URL",
-      "enter_proxy_url_and_update": "按照Slack上的通知输入并更新你的 <b>Proxy URL</b>。",
+      "enter_proxy_url_and_update": "1. 输入并更新你在步骤③中复制的ProxyURL到本页的<b>Custom bot with proxy 一体化</b>的<b>ProxyURL</b>。",
+      "dont_need_update": "※如果值已经在里面了，就不需要再更新。",
       "select_install_your_app": "选择 \"Install your app\"。",
       "select_install_to_workspace": "选择 \"Install to Workspace\"。",
       "register_official_bot_proxy_service": "发行访问令牌 / 注册 GROWI 官方 Bot 代理服务",

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import loggerFactory from '@alias/logger';
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -8,11 +9,15 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 import CustomBotWithProxyIntegrationCard from './CustomBotWithProxyIntegrationCard';
 import WithProxyAccordion from './WithProxyAccordion';
 import DeleteSlackBotSettingsModal from './DeleteSlackBotSettingsModal';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const logger = loggerFactory('growi:SlackBotSettings');
 
 const CustomBotWithProxySettings = (props) => {
   // eslint-disable-next-line no-unused-vars
   const { appContainer, adminAppContainer } = props;
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
+  const [proxyUri, setProxyUri] = useState(null);
 
   const { t } = useTranslation();
 
@@ -43,6 +48,19 @@ const CustomBotWithProxySettings = (props) => {
     }
   };
 
+  const updateProxyUri = async() => {
+    try {
+      await appContainer.apiv3.put('/slack-integration-settings/proxy-uri', {
+        proxyUri,
+      });
+      toastSuccess(t('toaster.update_successed', { target: t('Proxy URL') }));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  };
+
   return (
     <>
       <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
@@ -64,6 +82,22 @@ const CustomBotWithProxySettings = (props) => {
         }
         isSlackScopeSet
       />
+
+      <div className="form-group row my-4">
+        <label className="text-left text-md-right col-md-3 col-form-label mt-3">Proxy URL</label>
+        <div className="col-md-6 mr-3 mt-3">
+          <input
+            className="form-control"
+            type="text"
+            onChange={(e) => { setProxyUri(e.target.value) }}
+          />
+        </div>
+        <AdminUpdateButtonRow
+          disabled={false}
+          onClick={() => updateProxyUri()}
+        />
+      </div>
+
       <h2 className="admin-setting-header">{t('admin:slack_integration.cooperation_procedure')}</h2>
       <div className="mx-3">
 

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

@@ -1,15 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import loggerFactory from '@alias/logger';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { withUnstatedContainers } from '../../UnstatedUtils';
+import { toastSuccess } from '../../../util/apiNotification';
 import AppContainer from '../../../services/AppContainer';
-import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import Accordion from '../Common/Accordion';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
-
-const logger = loggerFactory('growi:SlackBotSettings');
 
 const WithProxyAccordion = (props) => {
   const [testChannel, setTestChannel] = useState('');
@@ -32,19 +28,6 @@ const WithProxyAccordion = (props) => {
     console.log('Form Submitted');
   };
 
-  const updateProxyUri = async() => {
-    try {
-      await appContainer.apiv3.put('/slack-integration-settings/proxy-uri', {
-        proxyUri,
-      });
-      toastSuccess(t('toaster.update_successed', { target: t('Proxy URL') }));
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  };
-
   const inputTestChannelHandler = (channel) => {
     setTestChannel(channel);
   };
@@ -193,26 +176,18 @@ const WithProxyAccordion = (props) => {
           </>
         )}
       >
-        <div className="p-4">
-          <p
-            className="text-center"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.enter_proxy_url_and_update') }}
-          />
-          <div className="form-group row my-4">
-            <label className="text-left text-md-right col-md-3 col-form-label">Proxy URL</label>
-            <div className="col-md-6">
-              <input
-                className="form-control"
-                type="text"
-                onChange={(e) => { setProxyUri(e.target.value) }}
-              />
-            </div>
+        <div className="p-4 d-flex flex-column align-items-center">
+          <div>
+            <span
+                // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.enter_proxy_url_and_update') }}
+            />
+            <p className="text-danger">{t('admin:slack_integration.accordion.dont_need_update')}</p>
+          </div>
+          {/* TODO: Insert photo */}
+          <div className="rounded border w-50 d-flex justify-content-center align-items-center" style={{ height: '15rem' }}>
+            <h1 className="text-muted">参考画像</h1>
           </div>
-          <AdminUpdateButtonRow
-            disabled={false}
-            onClick={() => updateProxyUri()}
-          />
         </div>
       </Accordion>
       <Accordion