add isEmptyConnectionStatusArray and rename

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

@@ -3,26 +3,34 @@ import PropTypes from 'prop-types';
 import IntegrationStatus from './IntegrationStatus';
 
 const CustomBotWithoutProxyIntegrationCard = (props) => {
-  const { siteName, workspaceNames } = props;
+  const { siteName, connectionStatusArray, isConnectedFailed } = props;
+  const isEmptyConnectionStatusArray = (connectionStatusArray.length === 0);
+
+  let workspaceName;
+  if (!isEmptyConnectionStatusArray) {
+    workspaceName = connectionStatusArray[0].workspaceName;
+  }
 
   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">
-          {workspaceNames[0] && (
+          {isEmptyConnectionStatusArray ? '' : (
             <div className="card slack-work-space-name-card">
               <div className="m-2 text-center">
-                <h5 className="font-weight-bold">{workspaceNames[0]}</h5>
+                <h5 className="font-weight-bold">
+                  {isConnectedFailed ? 'Setting #1' : workspaceName}
+                </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">
-        <IntegrationStatus workspaceNames={workspaceNames} isWithoutProxy />
+        <IntegrationStatus workspaceNames={[workspaceName]} isWithoutProxy />
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
@@ -39,7 +47,8 @@ const CustomBotWithoutProxyIntegrationCard = (props) => {
 
 CustomBotWithoutProxyIntegrationCard.propTypes = {
   siteName: PropTypes.string.isRequired,
-  workspaceNames: PropTypes.array.isRequired,
+  connectionStatusArray: PropTypes.array.isRequired,
+  isConnectedFailed: PropTypes.bool.isRequired,
 };
 
 export default CustomBotWithoutProxyIntegrationCard;

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

@@ -19,10 +19,9 @@ 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 connectionStatusArray = Object.values(connectionStatuses);
+  const isConnectedFailed = connectionStatusArray.some(e => e.error);
+
 
   const resetSettings = async() => {
     if (onResetSettings == null) {
@@ -61,7 +60,8 @@ const CustomBotWithoutProxySettings = (props) => {
 
       <CustomBotWithoutProxyIntegrationCard
         siteName={siteName}
-        workspaceNames={workspaceNames}
+        connectionStatusArray={connectionStatusArray}
+        isConnectedFailed={isConnectedFailed}
       />
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>
@@ -74,8 +74,8 @@ const CustomBotWithoutProxySettings = (props) => {
       >{t('admin:slack_integration.reset')}
       </button>
       )}
-
       <div className="my-5 mx-3">
+        {isConnectedFailed && (<>Settings #1 <span className="text-danger">{t('admin:slack_integration.integration_failed')}</span></>)}
         <CustomBotWithoutProxySettingsAccordion
           {...props}
           activeStep={botInstallationStep.CREATE_BOT}