Merge pull request #3664 from weseek/feat/GW-5749-integration-diagram-component

Feat/gw 5749 without proxy integration diagram component

resource/locales/en_US/admin/admin.json

@@ -306,8 +306,7 @@
     "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.",
-      "proceed_with_the_following_integration_procedure": "Proceed with the following integration procedure.",
-      "integration_sucessed": "integration sucessed"
+      "integration_successful": "Integration successful"
     },
     "custom_bot_with_proxy_integration": "Custom bot with proxy integration"
   },

resource/locales/ja_JP/admin/admin.json

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

resource/locales/zh_CN/admin/admin.json

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

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

@@ -13,6 +13,7 @@ const CustomBotWithProxySettings = (props) => {
   return (
     <>
 
+      {/* TODO: GW-5768 */}
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
 
       <div className="d-flex justify-content-center my-5 bot-integration">

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+
+const CustomBotWithoutProxyIntegrationCard = (props) => {
+
+  const { t } = useTranslation();
+
+  return (
+    <>
+
+      <div className="d-flex justify-content-center my-5 bot-integration">
+        <div className="card rounded shadow border-0 w-50 admin-bot-card">
+          <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
+          <div className="card-body p-2 w-50 mx-auto">
+            {props.slackWSNameInWithoutProxy && (
+              <div className="card slack-work-space-name-card">
+                <div className="m-2 text-center">
+                  <h5 className="font-weight-bold">{ props.slackWSNameInWithoutProxy }</h5>
+                  <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <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_successful')}</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"
+                // 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>
+
+        <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
+          <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
+          <div className="card-body p-4 mb-5 text-center">
+            <div className="btn btn-primary">{ props.siteName }</div>
+          </div>
+        </div>
+      </div>
+
+    </>
+  );
+};
+
+CustomBotWithoutProxyIntegrationCard.propTypes = {
+  siteName: PropTypes.string.isRequired,
+  slackWSNameInWithoutProxy: PropTypes,
+  isSetupSlackBot: PropTypes.bool.isRequired,
+};
+
+export default CustomBotWithoutProxyIntegrationCard;

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

@@ -5,6 +5,7 @@ import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import CustomBotWithoutProxySettingsAccordion, { botInstallationStep } from './CustomBotWithoutProxySettingsAccordion';
+import CustomBotWithoutProxyIntegrationCard from './CustomBotWithoutProxyIntegrationCard';
 
 const CustomBotWithoutProxySettings = (props) => {
   const { appContainer } = props;
@@ -21,47 +22,11 @@ const CustomBotWithoutProxySettings = (props) => {
     <>
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_integration')}</h2>
 
-      <div className="d-flex justify-content-center my-5 bot-integration">
-        <div className="card rounded shadow border-0 w-50 admin-bot-card">
-          <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
-          <div className="card-body p-2 w-50 mx-auto">
-            {props.slackWSNameInWithoutProxy && (
-              <div className="card p-20 slack-work-space-name-card">
-                <div className="m-2 text-center">
-                  <h5 className="font-weight-bold">{ props.slackWSNameInWithoutProxy }</h5>
-                  <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <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"
-                // 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>
-
-        <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
-          <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
-          <div className="card-body p-4 mb-5 text-center">
-            <div className="btn btn-primary">{ siteName }</div>
-          </div>
-        </div>
-      </div>
+      <CustomBotWithoutProxyIntegrationCard
+        siteName={siteName}
+        slackWSNameInWithoutProxy={props.slackWSNameInWithoutProxy}
+        isSetupSlackBot={props.isSetupSlackBot}
+      />
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_settings')}</h2>