Merge pull request #3800 from weseek/imprv/numbering-each-accordion-and-display-words-at-error

Imprv/numbering each accordion and display words at error

resource/locales/en_US/admin/admin.json

@@ -297,6 +297,7 @@
     "delete": "Delete",
     "integration_procedure": "Integration Procedure",
     "custom_bot_without_proxy_settings": "Custom Bot without proxy Settings",
+    "integration_failed":"Integration failed",
     "official_bot_settings": "Official bot Settings",
     "reset": "Reset",
     "reset_all_settings": "Reset all settings",

resource/locales/ja_JP/admin/admin.json

@@ -295,6 +295,7 @@
     "delete": "削除",
     "integration_procedure": "連携手順",
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 設定",
+    "integration_failed":"連携に失敗しました",
     "reset": "リセット",
     "reset_all_settings": "全ての設定をリセット",
     "delete_slackbot_settings": "Slack Bot 設定をリセットする",

resource/locales/zh_CN/admin/admin.json

@@ -305,6 +305,7 @@
     "delete": "取消",
     "integration_procedure": "协作程序",
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 设置",
+    "integration_failed":"联动失败",
     "reset":"重置",
     "reset_all_settings": "重置所有设置",
     "delete_slackbot_settings": "重置 Slack Bot 设置",

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

@@ -13,12 +13,20 @@ const logger = loggerFactory('growi:SlackBotSettings');
 
 const CustomBotWithProxySettings = (props) => {
   const {
-    appContainer, slackAppIntegrations, proxyServerUri, onClickAddSlackWorkspaceBtn,
+    appContainer, slackAppIntegrations, proxyServerUri, onClickAddSlackWorkspaceBtn, connectionStatuses,
   } = props;
   const [newProxyServerUri, setNewProxyServerUri] = useState();
   const [integrationIdToDelete, setIntegrationIdToDelete] = useState(null);
   const { t } = useTranslation();
 
+  let workspaceNames;
+  if (connectionStatuses != null) {
+    const workspaceNameObjects = Object.values(connectionStatuses);
+    workspaceNames = workspaceNameObjects.map((w) => {
+      return w.workspaceName;
+    });
+  }
+
   useEffect(() => {
     if (proxyServerUri != null) {
       setNewProxyServerUri(proxyServerUri);
@@ -113,7 +121,7 @@ const CustomBotWithProxySettings = (props) => {
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>
       <div className="mx-3">
-        {slackAppIntegrations.map((slackAppIntegration) => {
+        {slackAppIntegrations.map((slackAppIntegration, i) => {
           const { tokenGtoP, tokenPtoG } = slackAppIntegration;
           return (
             <React.Fragment key={slackAppIntegration._id}>
@@ -127,6 +135,7 @@ const CustomBotWithProxySettings = (props) => {
                   {t('admin:slack_integration.delete')}
                 </button>
               </div>
+              {workspaceNames[i] == null && (<>Settings #{i + 1} <span className="text-danger">{t('admin:slack_integration.integration_failed')}</span></>)}
               <WithProxyAccordions
                 botType="customBotWithProxy"
                 slackAppIntegrationId={slackAppIntegration._id}
@@ -161,6 +170,7 @@ const CustomBotWithProxySettingsWrapper = withUnstatedContainers(CustomBotWithPr
 
 CustomBotWithProxySettings.defaultProps = {
   slackAppIntegrations: [],
+  connectionStatuses: null,
 };
 
 CustomBotWithProxySettings.propTypes = {
@@ -169,6 +179,7 @@ CustomBotWithProxySettings.propTypes = {
   proxyServerUri: PropTypes.string,
   onClickAddSlackWorkspaceBtn: PropTypes.func,
   fetchSlackIntegrationData: PropTypes.func,
+  connectionStatuses: PropTypes.object,
 };
 
 export default CustomBotWithProxySettingsWrapper;

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

@@ -28,6 +28,7 @@ const SlackIntegration = (props) => {
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
   const [slackAppIntegrations, setSlackAppIntegrations] = useState();
   const [proxyServerUri, setProxyServerUri] = useState();
+  const [connectionStatuses, setConnectionStatuses] = useState(null);
 
 
   const fetchSlackIntegrationData = useCallback(async() => {
@@ -41,6 +42,8 @@ const SlackIntegration = (props) => {
         // TODO fix
         // const { workspaceName } = data.connectionStatuses[slackBotToken];
         // setSlackWSNameInWithoutProxy(workspaceName);
+        setConnectionStatuses(data.connectionStatuses);
+
       }
 
       setCurrentBotType(data.currentBotType);
@@ -164,6 +167,7 @@ const SlackIntegration = (props) => {
           proxyServerUri={proxyServerUri}
           onClickAddSlackWorkspaceBtn={createSlackIntegrationData}
           fetchSlackIntegrationData={fetchSlackIntegrationData}
+          connectionStatuses={connectionStatuses}
         />
       );
       break;