refactor

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

@@ -1,76 +1,18 @@
 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>
-    </>
-  );
-};
+import IntegrationStatus from './IntegrationStatus';
 
 const CustomBotWithoutProxyIntegrationCard = (props) => {
-
+  const { siteName, workspaceNames } = props;
   return (
     <div className="d-flex justify-content-center my-5 bot-integration">
       <div className="card rounded shadow border-0 w-50 admin-bot-card mb-0">
         <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
         <div className="card-body p-2 w-50 mx-auto">
-          {props.isIntegrationSuccess && props.slackWSNameInWithoutProxy != null && (
+          {workspaceNames[0] && (
             <div className="card slack-work-space-name-card">
               <div className="m-2 text-center">
-                <h5 className="font-weight-bold">{props.slackWSNameInWithoutProxy}</h5>
+                <h5 className="font-weight-bold">{workspaceNames[0]}</h5>
                 <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
               </div>
             </div>
@@ -79,14 +21,15 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
       </div>
 
       <div className="text-center w-25">
-        {props.isIntegrationSuccess ? <IntegrationSuccess /> : <IntegrationFailed />}
+        {/* {props.isIntegrationSuccess ? <IntegrationSuccess /> : <IntegrationFailed />} */}
+        <IntegrationStatus workspaceNames={workspaceNames} />
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
         <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="border p-2 bg-primary text-light mx-5">
-            {props.siteName}
+            {siteName}
           </div>
         </div>
       </div>
@@ -96,8 +39,9 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
 
 CustomBotWithoutProxyIntegrationCard.propTypes = {
   siteName: PropTypes.string.isRequired,
-  slackWSNameInWithoutProxy: PropTypes.string,
-  isIntegrationSuccess: PropTypes.bool,
+  workspaceNames: PropTypes.array.isRequired,
+  // slackWSNameInWithoutProxy: PropTypes.string,
+  // isIntegrationSuccess: PropTypes.bool,
 };
 
 export default CustomBotWithoutProxyIntegrationCard;

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

@@ -9,7 +9,7 @@ import CustomBotWithoutProxyIntegrationCard from './CustomBotWithoutProxyIntegra
 import DeleteSlackBotSettingsModal from './DeleteSlackBotSettingsModal';
 
 const CustomBotWithoutProxySettings = (props) => {
-  const { appContainer, onResetSettings } = props;
+  const { appContainer, onResetSettings, connectionStatuses } = props;
   const { t } = useTranslation();
 
   const [siteName, setSiteName] = useState('');
@@ -19,6 +19,11 @@ const CustomBotWithoutProxySettings = (props) => {
   const [connectionErrorCode, setConnectionErrorCode] = useState(null);
   const [testChannel, setTestChannel] = useState('');
 
+  const workspaceNameObjects = Object.values(connectionStatuses);
+  const workspaceNames = workspaceNameObjects.map((w) => {
+    return w.workspaceName;
+  });
+
   const resetSettings = async() => {
     if (onResetSettings == null) {
       return;
@@ -56,8 +61,9 @@ const CustomBotWithoutProxySettings = (props) => {
 
       <CustomBotWithoutProxyIntegrationCard
         siteName={siteName}
-        slackWSNameInWithoutProxy={props.slackWSNameInWithoutProxy}
-        isIntegrationSuccess={isIntegrationSuccess}
+        // slackWSNameInWithoutProxy={props.slackWSNameInWithoutProxy}
+        // isIntegrationSuccess={isIntegrationSuccess}
+        workspaceNames={workspaceNames}
       />
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>

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

@@ -160,6 +160,7 @@ const SlackIntegration = (props) => {
           onSetSlackBotToken={setSlackBotToken}
           onResetSettings={resetWithOutSettings}
           fetchSlackIntegrationData={fetchSlackIntegrationData}
+          connectionStatuses={connectionStatuses}
         />
       );
       break;