Merge pull request #3780 from weseek/feat/GW-6018-responsive-integration-diagram

responsive integration diagram

resource/locales/ja_JP/admin/admin.json

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

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
+import { UncontrolledTooltip } from 'reactstrap';
+
 const CustomBotWithoutProxyIntegrationCard = (props) => {
 
   const { t } = useTranslation();
@@ -23,24 +25,32 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
       </div>
 
       <div className="text-center w-25">
-        {/* TODO apply correct condition GW-5895 */}
-        <div className="mt-4">
-          <small
-            className="text-warning m-0"
-            // eslint-disable-next-line react/no-danger
-            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 className="mt-5">
-          <p className="text-success small">
+        <div className="d-none d-lg-block">
+          {/* TODO GW-5998 switching logic */}
+          {/* <p className="text-success small mt-5">
             <i className="fa fa-check mr-1" />
             {t('admin:slack_integration.integration_sentence.integration_successful')}
+          </p> */}
+
+          <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-success border-success"></hr>
         </div>
 
+        {/* TODO GW-5998  */}
+        <div id="integration-line-for-tooltip" className="d-block d-lg-none mt-5">
+          {/* <i className="fa fa-check mr-1 text-success" /> */}
+          <i className="icon-info text-danger" />
+        </div>
+
+        {/* TODO GW-5998 */}
+        {/* <hr className="align-self-center admin-border-success border-success"></hr> */}
+        <hr className="align-self-center admin-border-danger border-danger"></hr>
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
@@ -49,6 +59,18 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
           <div className="btn btn-primary">{ props.siteName }</div>
         </div>
       </div>
+
+      <UncontrolledTooltip placement="top" fade={false} target="integration-line-for-tooltip">
+        {/* TODO GW-5998 */}
+        {/* <small>
+          {t('admin:slack_integration.integration_sentence.integration_successful')}
+        </small> */}
+        <small
+          className="m-0"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
+        />
+      </UncontrolledTooltip>
     </div>
   );
 };