Merge pull request #3806 from weseek/imprv/yellow-condition-if-some-ws-got-error

Imprv/yellow condition if some ws got error

resource/locales/en_US/admin/admin.json

@@ -336,7 +336,8 @@
     "custom_bot_without_proxy_integration": "Custom Bot Without Proxy Integration",
     "integration_sentence": {
       "integration_is_not_complete": "Integration is not complete.<br>Proceed with the following integration procedure.",
-      "integration_successful": "Integration successful"
+      "integration_successful": "Integration successful",
+      "integration_some_ws_is_not_complete": "Some work spaces is not linked"
     },
     "custom_bot_with_proxy_integration": "Custom Bot With Proxy Integration",
     "official_bot_integration": "Official bot integration"

resource/locales/ja_JP/admin/admin.json

@@ -333,7 +333,9 @@
     "custom_bot_without_proxy_integration": "Custom bot without proxy 連携",
     "integration_sentence": {
       "integration_is_not_complete": "連携は完了していません。<br>下記の連携手順を進めてください。",
-      "integration_successful": "連携は完了しています。"
+      "integration_successful": "連携は完了しています。",
+      "integration_some_ws_is_not_complete": "連携に失敗している ワークスペースがあります。"
+
     },
     "custom_bot_with_proxy_integration": "Custom bot with proxy 連携",
     "official_bot_integration": "Official bot 連携"

resource/locales/zh_CN/admin/admin.json

@@ -343,7 +343,8 @@
     "custom_bot_without_proxy_integration": "Custom bot without proxy 一体化",
     "integration_sentence": {
       "integration_is_not_complete": "一体化未完成。<br>进行以下一体化程序。",
-      "integration_successful": "一体化成功"
+      "integration_successful": "一体化成功",
+      "integration_some_ws_is_not_complete": "有的工作空间未能连接"
     },
     "custom_bot_with_proxy_integration": "Custom bot with proxy 一体化",
     "official_bot_integration": "Official bot 一体化"

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ConductionStatusHr = (props) => {
+  const { errorCount, totalCount } = props;
+
+  return (
+    <>
+      {errorCount === 0 && totalCount !== 0 && <hr className="align-self-center border-success admin-border-success"></hr>}
+      {errorCount === totalCount && <hr className="align-self-center border-danger admin-border-danger"></hr>}
+      {errorCount >= 1 && errorCount < totalCount && <hr className="align-self-center border-warning admin-border-danger"></hr>}
+    </>
+  );
+};
+
+ConductionStatusHr.propTypes = {
+  errorCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.array.isRequired,
+};
+
+export default ConductionStatusHr;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import IntegrationStatus from './IntegrationStatus';
 
 const CustomBotWithProxyIntegrationCard = (props) => {
-  const { t } = useTranslation();
+  const { workspaceNames } = props;
 
   return (
     <div className="d-flex justify-content-center my-5 bot-integration">
@@ -25,33 +25,7 @@ const CustomBotWithProxyIntegrationCard = (props) => {
       </div>
 
       <div className="text-center w-25 mt-3">
-        {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-danger"
-            // 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>
-            {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>
+        <IntegrationStatus workspaceNames={workspaceNames} />
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
@@ -75,6 +49,7 @@ CustomBotWithProxyIntegrationCard.propTypes = {
   siteName: PropTypes.string.isRequired,
   slackWorkSpaces: PropTypes.array,
   isSlackScopeSet: PropTypes.bool,
+  workspaceNames: PropTypes.array.isRequired,
 };
 
 export default CustomBotWithProxyIntegrationCard;

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

@@ -97,7 +97,7 @@ const CustomBotWithProxySettings = (props) => {
             { name: 'wsName2', active: false },
           ]
         }
-        isSlackScopeSet
+        workspaceNames={workspaceNames}
       />
 
       <div className="form-group row my-4">

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import { UncontrolledTooltip } from 'reactstrap';
+
+import ConductionStatusHr from './ConductionStatusHr';
+
+const IntegrationSuccess = (props) => {
+  const { t } = useTranslation();
+  const { errorCount, totalCount } = props;
+
+  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>
+        <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>
+          </div>
+        </div>
+        <ConductionStatusHr errorCount={errorCount} totalCount={totalCount} />
+      </div>
+      <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+        <i className="fa fa-check mr-1 text-success" />
+        <ConductionStatusHr errorCount={errorCount} totalCount={totalCount} />
+      </div>
+      <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+        <small>
+          {t('admin:slack_integration.integration_sentence.integration_successful')}
+        </small>
+      </UncontrolledTooltip>
+    </>
+  );
+};
+
+IntegrationSuccess.propTypes = {
+  errorCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.array.isRequired,
+};
+
+
+const IntegrationFailed = (props) => {
+  const { t } = useTranslation();
+  const { errorCount, totalCount } = props;
+
+  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>
+        <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>
+          </div>
+        </div>
+        <ConductionStatusHr errorCount={errorCount} totalCount={totalCount} />
+      </div>
+      <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+        <i className="icon-info text-danger" />
+        <ConductionStatusHr errorCount={errorCount} totalCount={totalCount} />
+      </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>
+    </>
+  );
+};
+
+IntegrationFailed.propTypes = {
+  errorCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.array.isRequired,
+
+};
+
+
+const SomeWorkSpacesNotIntegration = (props) => {
+  const { t } = useTranslation();
+  const { errorCount, totalCount } = props;
+
+  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>
+        <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>
+          </div>
+        </div>
+        <ConductionStatusHr errorCount={errorCount} totalCount={totalCount} />
+      </div>
+      <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+        <i className="icon-info text-danger" />
+        <ConductionStatusHr errorCount={errorCount} totalCount={totalCount} />
+      </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>
+    </>
+  );
+};
+
+SomeWorkSpacesNotIntegration.propTypes = {
+  errorCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.array.isRequired,
+
+};
+
+
+const IntegrationStatus = (props) => {
+  const { workspaceNames } = props;
+
+  let errorCount = 0;
+  workspaceNames.forEach((w) => {
+    if (w == null) {
+      errorCount++;
+    }
+  });
+
+  return (
+    <>
+      {errorCount === 0 && workspaceNames.length !== 0 && (
+      <IntegrationSuccess
+        errorCount={errorCount}
+        totalCount={workspaceNames.length}
+      />
+      )}
+      {errorCount === workspaceNames.length && (
+      <IntegrationFailed
+        errorCount={errorCount}
+        totalCount={workspaceNames.length}
+      />
+      )}
+
+      {errorCount >= 1 && errorCount < workspaceNames.length && (
+      <SomeWorkSpacesNotIntegration
+        errorCount={errorCount}
+        totalCount={workspaceNames.length}
+      />
+      )}
+    </>
+  );
+};
+
+IntegrationStatus.propTypes = {
+  workspaceNames: PropTypes.array.isRequired,
+};
+
+export default IntegrationStatus;