derive totalCount and errorCount in CustomBotWithoutProxyIntegrationCard

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

@@ -50,16 +50,7 @@ BridgeCore.propTypes = {
 
 const Bridge = (props) => {
   const { t } = useTranslation();
-  const { workspaceNames, withProxy } = props;
-
-  let errorCount = 0;
-  workspaceNames.forEach((w) => {
-    if (w == null) {
-      errorCount++;
-    }
-  });
-  // TODO: inject from props
-  const totalCount = workspaceNames.length;
+  const { errorCount, totalCount, withProxy } = props;
 
   let description;
   let iconClass;
@@ -95,7 +86,8 @@ const Bridge = (props) => {
 };
 
 Bridge.propTypes = {
-  workspaceNames: PropTypes.array.isRequired,
+  errorCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.number.isRequired,
   withProxy: PropTypes.bool,
 };
 

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

@@ -3,11 +3,15 @@ import PropTypes from 'prop-types';
 import Bridge from './Bridge';
 
 const CustomBotWithoutProxyIntegrationCard = (props) => {
-  const { siteName, connectionStatusValues, isConnectedFailed } = props;
-  const isEmptyconnectionStatusValues = (connectionStatusValues.length === 0);
+  const { siteName, connectionStatuses } = props;
+
+  const connectionStatusValues = Object.values(connectionStatuses); // type: ConnectionStatus[]
+
+  const totalCount = connectionStatusValues.length;
+  const errorCount = connectionStatusValues.filter(connectionStatus => connectionStatusValues.error != null).length;
 
   let workspaceName;
-  if (!isEmptyconnectionStatusValues) {
+  if (totalCount > 0) {
     workspaceName = connectionStatusValues[0].workspaceName;
   }
 
@@ -16,11 +20,11 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
       <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">
-          {isEmptyconnectionStatusValues ? '' : (
+          {totalCount > 0 ? '' : (
             <div className="card slack-work-space-name-card">
               <div className="m-2 text-center">
                 <h5 className="font-weight-bold">
-                  {isConnectedFailed ? 'Settings #1' : workspaceName}
+                  {workspaceName != null ? workspaceName : 'Settings #1'}
                 </h5>
                 <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
               </div>
@@ -30,7 +34,7 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
       </div>
 
       <div className="text-center w-25">
-        <Bridge workspaceNames={[workspaceName]} />
+        <Bridge errorCount={errorCount} totalCount={totalCount} />
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
@@ -47,8 +51,7 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
 
 CustomBotWithoutProxyIntegrationCard.propTypes = {
   siteName: PropTypes.string.isRequired,
-  connectionStatusValues: PropTypes.array.isRequired,
-  isConnectedFailed: PropTypes.bool.isRequired,
+  connectionStatuses: PropTypes.object.isRequired,
 };
 
 export default CustomBotWithoutProxyIntegrationCard;

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

@@ -19,9 +19,6 @@ const CustomBotWithoutProxySettings = (props) => {
   const [connectionErrorCode, setConnectionErrorCode] = useState(null);
   const [testChannel, setTestChannel] = useState('');
 
-  const connectionStatusValues = Object.values(connectionStatuses);
-  const isConnectedFailed = connectionStatusValues.some(e => e.error);
-
   const resetSettings = async() => {
     if (onResetSettings == null) {
       return;
@@ -59,8 +56,7 @@ const CustomBotWithoutProxySettings = (props) => {
 
       <CustomBotWithoutProxyIntegrationCard
         siteName={siteName}
-        connectionStatusValues={connectionStatusValues}
-        isConnectedFailed={isConnectedFailed}
+        connectionStatuses={connectionStatuses}
       />
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>
@@ -74,7 +70,7 @@ const CustomBotWithoutProxySettings = (props) => {
       </button>
       )}
       <div className="my-5 mx-3">
-        {isConnectedFailed && (<>Settings #1 <span className="text-danger">{t('admin:slack_integration.integration_failed')}</span></>)}
+        {/* {isConnectedFailed && (<>Settings #1 <span className="text-danger">{t('admin:slack_integration.integration_failed')}</span></>)} */}
         <CustomBotWithoutProxySettingsAccordion
           {...props}
           activeStep={botInstallationStep.CREATE_BOT}
@@ -101,10 +97,12 @@ const CustomBotWithoutProxySettingsWrapper = withUnstatedContainers(CustomBotWit
 CustomBotWithoutProxySettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+
   slackSigningSecret: PropTypes.string,
   slackSigningSecretEnv: PropTypes.string,
   slackBotToken: PropTypes.string,
   slackBotTokenEnv: PropTypes.string,
+
   isRgisterSlackCredentials: PropTypes.bool,
   isIntegrationSuccess: PropTypes.bool,
   slackWSNameInWithoutProxy: PropTypes.string,