Colors

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

@@ -22,12 +22,18 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
     setOpenAccordionIndexes(accordionIndexes);
   };
 
-  const onTestConnectionHandler = () => {
-    const connectionTestResponse = appContainer.apiv3.post('/notification-test-to-slack-work-space', {
-      channel: 'testchannel',
-    });
-    setConnectionErrorLog(connectionTestResponse);
-    console.log(connectionTestResponse);
+  const onTestConnectionHandler = async() => {
+    try {
+      await appContainer.apiv3.post('slack-integration/notification-test-to-slack-work-space', {
+        // TODO put proper request
+        channel: 'testchannel',
+      });
+    }
+    catch (err) {
+      setConnectionErrorLog({ connectionErrorCode: err[0].code, connectionErrorMessage: err[0].message });
+    }
+
+
   };
 
   return (
@@ -86,15 +92,15 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         <Collapse isOpen={openAccordionIndexes.has(1)}>
           <div className="card-body py-5">
             <div className="container w-75">
-              <p className="text-secondary">1. Install your app をクリックします。</p>
+              <p>1. Install your app をクリックします。</p>
               <img src="/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light img-fluid mb-5" />
-              <p className="text-secondary">2. Install to Workspace をクリックします。</p>
+              <p>2. Install to Workspace をクリックします。</p>
               <img src="/images/slack-integration/slack-bot-install-to-workspace.png" className="border border-light img-fluid mb-5" />
-              <p className="text-secondary">3. 遷移先の画面にて、Allowをクリックします。</p>
+              <p>3. 遷移先の画面にて、Allowをクリックします。</p>
               <img src="/images/slack-integration/slack-bot-install-your-app-transition-destination.png" className="border border-light img-fluid mb-5" />
-              <p className="text-secondary">4. Install your app の右側に 緑色のチェックがつけばワークスペースへのインストール完了です。</p>
+              <p>4. Install your app の右側に 緑色のチェックがつけばワークスペースへのインストール完了です。</p>
               <img src="/images/slack-integration/slack-bot-install-your-app-complete.png" className="border border-light img-fluid mb-5" />
-              <p className="text-secondary">5. GROWI bot を使いたいチャンネルに @example を使用して招待します。</p>
+              <p>5. GROWI bot を使いたいチャンネルに @example を使用して招待します。</p>
               <img src="/images/slack-integration/slack-bot-install-to-workspace-joined-bot.png" className="border border-light img-fluid mb-1" />
               <img src="/images/slack-integration/slack-bot-install-your-app-introduction-to-channel.png" className="border border-light img-fluid" />
             </div>
@@ -135,19 +141,20 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         </div>
         <Collapse isOpen={openAccordionIndexes.has(3)}>
           <div className="card-body">
-            <p className="text-secondary text-center m-4">以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう</p>
+            <p className="text-center m-4">以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう</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>
+              <button type="button" className="btn btn-info m-3 px-5 font-weight-bold" onClick={onTestConnectionHandler}>Test</button>
             </div>
-            {connectionErrorLog
+            {connectionErrorLog != null
               && (
                 <div>
                   <p className="text-danger text-center m-4">エラーが発生しました。下記のログを確認してください。</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 text-secondary mb-1 pl-2">Logs</p>
+                      <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="text-secondary m-0">{connectionErrorLog}</p>
+                        <p className="m-0">Error code: {connectionErrorLog.connectionErrorCode}</p>
+                        <p className="m-0">{connectionErrorLog.connectionErrorMessage}</p>
                       </div>
                     </div>
                   </div>