Merge pull request #3625 from weseek/feat/create-input-slack-ws-for-test

Feat/create input slack ws for test

resource/locales/en_US/admin/admin.json

@@ -300,7 +300,8 @@
       "register_secret_and_token": "Set Signing Secret and Bot Token",
       "test_connection": "Test Connection",
       "test_connection_by_pressing_button": "Press the button to test the connection",
-      "error_check_logs_below": "An error has occurred. Please check the logs below."
+      "error_check_logs_below": "An error has occurred. Please check the logs below.",
+      "send_message_to_slack_work_space": "Send message to Slack work space."
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy integration",
     "integration_sentence": {

resource/locales/ja_JP/admin/admin.json

@@ -298,7 +298,8 @@
       "register_secret_and_token": "Signing Secret と Bot Token を登録する",
       "test_connection": "連携状況のテストをする",
       "test_connection_by_pressing_button": "以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう",
-      "error_check_logs_below": "エラーが発生しました。下記のログを確認してください。"
+      "error_check_logs_below": "エラーが発生しました。下記のログを確認してください。",
+      "send_message_to_slack_work_space": "Slack ワークスペースに送信しました"
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy 連携",
     "integration_sentence": {

resource/locales/zh_CN/admin/admin.json

@@ -308,7 +308,8 @@
       "register_secret_and_token": "设置签名秘密和BOT令牌",
       "test_connection": "测试连接",
       "test_connection_by_pressing_button": "按下按钮以测试连接",
-      "error_check_logs_below": "发生了错误。请检查以下日志。"
+      "error_check_logs_below": "发生了错误。请检查以下日志。",
+      "send_message_to_slack_work_space": "发送到 Slack 工作区。"
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy 一体化",
     "integration_sentence": {

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

@@ -27,6 +27,8 @@ const CustomBotWithoutProxySettingsAccordion = ({
   const [defaultOpenAccordionKeys, setDefaultOpenAccordionKeys] = useState(new Set([activeStep]));
   const [connectionErrorCode, setConnectionErrorCode] = useState(null);
   const [connectionErrorMessage, setConnectionErrorMessage] = useState(null);
+  const [connectionSuccessMessage, setConnectionSuccessMessage] = useState(null);
+  const [testChannel, setTestChannel] = useState('');
   const currentBotType = 'customBotWithoutProxy';
 
   const updateSecretTokenHandler = async() => {
@@ -55,11 +57,12 @@ const CustomBotWithoutProxySettingsAccordion = ({
   const onTestConnectionHandler = async() => {
     setConnectionErrorCode(null);
     setConnectionErrorMessage(null);
+    setConnectionSuccessMessage(null);
     try {
-      await appContainer.apiv3.post('admin:slack-integration/notification-test-to-slack-work-space', {
-        // TODO put proper request
-        // channel: 'testchannel',
+      const res = await appContainer.apiv3.post('slack-integration/notification-test-to-slack-work-space', {
+        channel: testChannel,
       });
+      setConnectionSuccessMessage(res.data.message);
       setIsSendTestMessage(true);
     }
     catch (err) {
@@ -69,6 +72,18 @@ const CustomBotWithoutProxySettingsAccordion = ({
     }
   };
 
+  const inputTestChannelHandler = (channel) => {
+    setTestChannel(channel);
+  };
+
+  let value = '';
+  if (connectionErrorMessage != null) {
+    value = [connectionErrorCode, connectionErrorMessage];
+  }
+  if (connectionSuccessMessage != null) {
+    value = connectionSuccessMessage;
+  }
+
   return (
     <div className="card border-0 rounded-lg shadow overflow-hidden">
       <Accordion
@@ -135,20 +150,43 @@ const CustomBotWithoutProxySettingsAccordion = ({
       >
         <p className="text-center m-4">{t('admin:slack_integration.without_proxy.test_connection_by_pressing_button')}</p>
         <div className="d-flex justify-content-center">
-          <button type="button" className="btn btn-info m-3 px-5 font-weight-bold" onClick={onTestConnectionHandler}>Test</button>
+          <form className="form-row align-items-center w-25">
+            <div className="col-8 input-group-prepend">
+              <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
+              <input
+                className="form-control w-100"
+                type="text"
+                value={testChannel}
+                placeholder="Slack Channel"
+                onChange={e => inputTestChannelHandler(e.target.value)}
+              />
+            </div>
+            <div className="col-4">
+              <button
+                type="button"
+                className="btn btn-info mx-3 font-weight-bold"
+                disabled={testChannel.trim() === ''}
+                onClick={onTestConnectionHandler}
+              >Test
+              </button>
+            </div>
+          </form>
         </div>
         {connectionErrorMessage != null
-          && <p className="text-danger text-center m-4">{t('admin:slack_integration.without_proxy.error_check_logs_below')}</p>
-        }
-        <div className="row m-3 justify-content-center">
-          <div className="col-sm-5 slack-connection-error-log">
-            <p className="border-info slack-connection-error-log-title mb-1 pl-2">Logs</p>
-            <div className="card border-info slack-connection-error-log-body rounded-lg px-5 py-4">
-              <p className="m-0">{connectionErrorCode}</p>
-              <p className="m-0">{connectionErrorMessage}</p>
+        && <p className="text-danger text-center my-4">{t('admin:slack_integration.without_proxy.error_check_logs_below')}</p>}
+        {connectionSuccessMessage != null
+         && <p className="text-info text-center my-4">{t('admin:slack_integration.without_proxy.send_message_to_slack_work_space')}</p>}
+        <form>
+          <div className="row my-3 justify-content-center">
+            <div className="form-group slack-connection-log w-25">
+              <label className="mb-1"><p className="border-info slack-connection-log-title pl-2">Logs</p></label>
+              <textarea
+                className="form-control card border-info slack-connection-log-body rounded-lg"
+                value={value}
+              />
             </div>
           </div>
-        </div>
+        </form>
       </Accordion>
     </div>
   );

src/client/styles/scss/_admin.scss

@@ -105,11 +105,11 @@
     }
   }
   // TODO: change to utility class on Bootstrap 5
-  .slack-connection-error-log {
-    .slack-connection-error-log-title {
+  .slack-connection-log {
+    .slack-connection-log-title {
       border-left: 2px solid;
     }
-    .slack-connection-error-log-body {
+    .slack-connection-log-body {
       min-height: 6rem;
       border: 2px solid;
     }

src/server/routes/apiv3/slack-integration.js

@@ -57,7 +57,8 @@ module.exports = (crowi) => {
         .isIn(['officialBot', 'customBotWithoutProxy', 'customBotWithProxy']),
     ],
     NotificationTestToSlackWorkSpace: [
-      body('channel').isString(),
+      body('channel').trim().not().isEmpty()
+        .isString(),
     ],
   };
 
@@ -301,7 +302,7 @@ module.exports = (crowi) => {
       logger.debug('SlackBot: setup is done');
 
       try {
-        this.client.chat.postMessage({
+        await this.client.chat.postMessage({
           channel: `#${channel}`,
           text: 'Your test was successful!',
         });
@@ -312,7 +313,7 @@ module.exports = (crowi) => {
         return res.apiv3({ message });
       }
       catch (error) {
-        const msg = 'Error occured in testing to notify slack work space';
+        const msg = `Error: ${error.data.error}. Needed:${error.data.needed}`;
         logger.error('Error', error);
         return res.apiv3Err(new ErrorV3(msg, 'notification-test-slack-work-space-failed'), 500);
       }