Merge pull request #3652 from weseek/feat/GW-5706-success-integration-ui

Feat/gw 5706 success integration ui

resource/locales/en_US/admin/admin.json

@@ -305,8 +305,9 @@
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy integration",
     "integration_sentence": {
-      "integration_is_not_complete": "Integration is not complete.",
-      "proceed_with_the_following_integration_procedure": "Proceed with the following integration procedure."
+      "integration_is_not_complete": "Integration is not complete.<br>Proceed with the following integration procedure.",
+      "proceed_with_the_following_integration_procedure": "Proceed with the following integration procedure.",
+      "integration_sucessed": "integration sucessed"
     },
     "custom_bot_with_proxy_integration": "Custom bot with proxy integration"
   },

resource/locales/ja_JP/admin/admin.json

@@ -303,8 +303,9 @@
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy 連携",
     "integration_sentence": {
-      "integration_is_not_complete": "連携は完了していません。",
-      "proceed_with_the_following_integration_procedure": "下記の連携手順を進めてください。"
+      "integration_is_not_complete": "連携は完了していません。<br>下記の連携手順を進めてください。",
+      "proceed_with_the_following_integration_procedure": "下記の連携手順を進めてください。",
+      "integration_sucessed": "連携が完了しました。"
     },
     "custom_bot_with_proxy_integration": "Custom bot with proxy 連携"
   },

resource/locales/zh_CN/admin/admin.json

@@ -313,8 +313,9 @@
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy 一体化",
     "integration_sentence": {
-      "integration_is_not_complete": "一体化未完成。",
-      "proceed_with_the_following_integration_procedure": "进行以下一体化程序。"
+      "integration_is_not_complete": "一体化未完成。<br>进行以下一体化程序。",
+      "proceed_with_the_following_integration_procedure": "进行以下一体化程序。",
+      "integration_sucessed": "一体化成功"
     },
     "custom_bot_with_proxy_integration": "Custom bot with proxy 一体化"
   },

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

@@ -57,10 +57,19 @@ const CustomBotWithoutProxySettings = (props) => {
           </div>
         </div>
 
-        <div className="text-center w-25 mt-4">
-          <p className="text-secondary m-0"><small>{t('admin:slack_integration.integration_sentence.integration_is_not_complete')}</small></p>
-          <p className="text-secondary"><small>{t('admin:slack_integration.integration_sentence.proceed_with_the_following_integration_procedure')}</small></p>
-          <hr className="border-danger align-self-center admin-border"></hr>
+        <div className="text-center w-25">
+          {props.isSetupSlackBot && (
+            <div className="mt-5">
+              <p className="text-success"><small className="fa fa-check"> {t('admin:slack_integration.integration_sentence.integration_sucessed')}</small></p>
+              <hr className="align-self-center admin-border-success border-success"></hr>
+            </div>
+          )}
+          {!props.isSetupSlackBot && (
+            <div className="mt-4">
+              <small className="text-secondary m-0" dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }} />
+              <hr className="align-self-center admin-border-danger border-danger"></hr>
+            </div>
+          )}
         </div>
 
         <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">

src/client/styles/scss/_admin.scss

@@ -122,10 +122,13 @@ $slack-work-space-name-card-border: #efc1f6;
     .admin-bot-card {
       border-radius: 8px !important;
     }
-    .admin-border {
+    .admin-border-danger {
       border-style : dashed;
       border-width : 2px;
     }
+    .admin-border-success {
+      border-width : 3px;
+    }
     .circle{
       width: 100px;
       height: 100px;