Merge pull request #3687 from weseek/feat/GW-5802-integration-success-ui

integration success ui

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 
-const CustomBotWithProxyIntegrationCard = () => {
-
+const CustomBotWithProxyIntegrationCard = (props) => {
   const { t } = useTranslation();
 
   return (
@@ -16,17 +16,30 @@ const CustomBotWithProxyIntegrationCard = () => {
         </div>
 
         <div className="text-center w-25">
-          <small
-            className="text-secondary"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
-          />
+          {props.isSlackScopeSet && (
+            <p className="text-success small">
+              <i className="fa fa-check mr-1" />
+              {t('admin:slack_integration.integration_sentence.integration_successful')}
+            </p>
+          )}
+          {!props.isSlackScopeSet && (
+            <small
+              className="text-secondary"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+            />
+          )}
           <div className="pt-2">
             <div className="position-relative mt-5">
               <div className="circle position-absolute bg-primary border-light">
                 <p className="circle-inner text-light font-weight-bold">Proxy Server</p>
               </div>
-              <hr className="align-self-center admin-border-danger border-danger"></hr>
+              {props.isSlackScopeSet && (
+                <hr className="align-self-center border-success admin-border-success"></hr>
+              )}
+              {!props.isSlackScopeSet && (
+                <hr className="align-self-center border-danger admin-border-danger"></hr>
+              )}
             </div>
           </div>
         </div>
@@ -49,4 +62,8 @@ const CustomBotWithProxyIntegrationCard = () => {
   );
 };
 
+CustomBotWithProxyIntegrationCard.propTypes = {
+  isSlackScopeSet: PropTypes.bool.isRequired,
+};
+
 export default CustomBotWithProxyIntegrationCard;

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

@@ -15,10 +15,11 @@ const CustomBotWithProxySettings = (props) => {
   return (
     <>
 
-      {/* TODO: GW-5768 */}
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
 
-      <CustomBotWithProxyIntegrationCard />
+      <CustomBotWithProxyIntegrationCard
+        isSlackScopeSet
+      />
 
       <div className="my-5 mx-3">
         <CustomBotWithProxySettingsAccordion />