fix ConductionStatus

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

@@ -3,25 +3,9 @@ import PropTypes from 'prop-types';
 
 
 const ConductionStatusHr = (props) => {
-  const { workspaceNames } = props;
+  const { conductionStatus } = props;
 
-  let errorCount = 0;
-  workspaceNames.forEach((w) => {
-    if (w == null) {
-      errorCount++;
-    }
-  });
 
-  let conductionStatus;
-  if (errorCount === 0 && workspaceNames.length !== 0) {
-    conductionStatus = 'green';
-  }
-  else if (errorCount === workspaceNames.length) {
-    conductionStatus = 'red';
-  }
-  else {
-    conductionStatus = 'yellow';
-  }
   return (
     <>
       {conductionStatus === 'green' && (
@@ -38,7 +22,7 @@ const ConductionStatusHr = (props) => {
 };
 
 ConductionStatusHr.propTypes = {
-  workspaceNames: PropTypes.array.isRequired,
+  conductionStatus: PropTypes.string.isRequired,
 };
 
 export default ConductionStatusHr;

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

@@ -1,11 +1,29 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+// import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import ConductionStatusHr from './ConductionStatusHr';
 
 const CustomBotWithProxyIntegrationCard = (props) => {
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
+  const { workspaceNames } = props;
 
+  let errorCount = 0;
+  workspaceNames.forEach((w) => {
+    if (w == null) {
+      errorCount++;
+    }
+  });
+
+  let conductionStatus;
+  if (errorCount === 0 && workspaceNames.length !== 0) {
+    conductionStatus = 'green';
+  }
+  else if (errorCount === workspaceNames.length) {
+    conductionStatus = 'red';
+  }
+  else {
+    conductionStatus = 'yellow';
+  }
   return (
     <div className="d-flex justify-content-center my-5 bot-integration">
 
@@ -52,7 +70,7 @@ const CustomBotWithProxyIntegrationCard = (props) => {
             <div className="circle position-absolute bg-primary border-light">
               <p className="circle-inner text-light font-weight-bold">Proxy Server</p>
             </div>
-            <ConductionStatusHr workspaceNames={props.workspaceNames} />
+            <ConductionStatusHr conductionStatus={conductionStatus} />
           </div>
         </div>
       </div>

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+// import PropTypes from 'prop-types';
+
+import { UncontrolledTooltip } from 'reactstrap';
+
+const IntegrationSuccess = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="d-none d-lg-block">
+        <p className="text-success small mt-5">
+          <i className="fa fa-check mr-1" />
+          {t('admin:slack_integration.integration_sentence.integration_successful')}
+        </p>
+        <hr className="align-self-center admin-border-success border-success"></hr>
+      </div>
+      <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+        <i className="fa fa-check mr-1 text-success" />
+        <hr className="align-self-center admin-border-success border-success"></hr>
+      </div>
+      <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+        <small>
+          {t('admin:slack_integration.integration_sentence.integration_successful')}
+        </small>
+      </UncontrolledTooltip>
+    </>
+  );
+};
+
+const IntegrationFailed = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="d-none d-lg-block">
+        <p className="mt-4">
+          <small
+            className="text-danger m-0"
+          // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+          />
+        </p>
+        <hr className="align-self-center admin-border-danger border-danger"></hr>
+
+      </div>
+      <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+        <i className="icon-info text-danger" />
+        <hr className="align-self-center admin-border-danger border-danger"></hr>
+      </div>
+      <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+        <small
+          className="m-0"
+        // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+        />
+      </UncontrolledTooltip>
+    </>
+  );
+};
+
+const SomeWorkSpaceNotIntegration = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="d-none d-lg-block">
+        <p className="mt-4">
+          <small
+            className="text-danger m-0"
+          // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_some_ws_is_not_complete') }}
+          />
+        </p>
+        <hr className="align-self-center admin-border-danger border-danger"></hr>
+
+      </div>
+      <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+        <i className="icon-info text-danger" />
+        <hr className="align-self-center admin-border-danger border-danger"></hr>
+      </div>
+      <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+        <small
+          className="m-0"
+        // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_some_ws_is_not_complete') }}
+        />
+      </UncontrolledTooltip>
+    </>
+  );
+};
+
+
+const IntegrationSuccessOrFailed = (props) => {
+
+  return (
+    <>
+      <IntegrationSuccess />
+      <IntegrationFailed />
+      <SomeWorkSpaceNotIntegration />
+    </>
+  );
+
+};
+
+export default IntegrationSuccessOrFailed;