Merge pull request #3778 from weseek/fix/5913-6026-refactor-with-proxy

Fix/5913 6026 refactor with proxy

packages/slack/src/utils/check-communicable.ts

@@ -96,6 +96,5 @@ export const getConnectionStatuses = async(tokens: string[]): Promise<{[key: str
  */
 export const relationTestToSlack = async(token:string): Promise<void> => {
   const client = generateWebClient(token);
-  // TODO GW-6002 fire chat.postMessage
   await testSlackApiServer(client);
 };

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

@@ -1,6 +1,4 @@
-import React, {
-  useState, useEffect, useCallback,
-} from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
@@ -14,50 +12,26 @@ import DeleteSlackBotSettingsModal from './DeleteSlackBotSettingsModal';
 const logger = loggerFactory('growi:SlackBotSettings');
 
 const CustomBotWithProxySettings = (props) => {
-  const { appContainer } = props;
+  const { appContainer, slackAppIntegrations, proxyServerUri } = props;
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
-  const [proxyUri, setProxyUri] = useState(null);
-
   const { t } = useTranslation();
-  // TODO: Multiple accordion logic
-  const [tokenPtoG, setTokenPtoG] = useState(null);
-  const [tokenGtoP, setTokenGtoP] = useState(null);
 
-  const retrieveProxyUri = useCallback(async() => {
-    try {
-      const res = await appContainer.apiv3.get('/slack-integration-settings');
-      const { proxyUri } = res.data.settings;
-      setProxyUri(proxyUri);
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  }, [appContainer.apiv3]);
+  const [newProxyServerUri, setNewProxyServerUri] = useState();
 
   useEffect(() => {
-    retrieveProxyUri();
-  }, [retrieveProxyUri]);
-
-  // TODO: Multiple accordion logic
-  const [accordionComponentsCount, setAccordionComponentsCount] = useState(0);
-  const addAccordionHandler = () => {
-    setAccordionComponentsCount(
-      prevState => prevState + 1,
-    );
-  };
-  // TODO: Delete accordion logic
-  const deleteAccordionHandler = () => {
-    setAccordionComponentsCount(
-      prevState => prevState - 1,
-    );
+    if (proxyServerUri != null) {
+      setNewProxyServerUri(proxyServerUri);
+    }
+  }, [proxyServerUri]);
+
+  const addSlackAppIntegrationHandler = async() => {
+    // TODO GW-6067 implement
   };
 
-  const discardTokenHandler = async() => {
+  const discardTokenHandler = async(tokenGtoP, tokenPtoG) => {
     try {
+      // GW-6068 set new value after this
       await appContainer.apiv3.delete('/slack-integration-settings/slack-app-integration', { tokenGtoP, tokenPtoG });
-      setTokenGtoP(null);
-      setTokenPtoG(null);
     }
     catch (err) {
       toastError(err);
@@ -67,23 +41,19 @@ const CustomBotWithProxySettings = (props) => {
 
   const generateTokenHandler = async() => {
     try {
-      const { data: { tokenGtoP, tokenPtoG } } = await appContainer.apiv3.put('/slack-integration-settings/access-tokens');
-      setTokenGtoP(tokenGtoP);
-      setTokenPtoG(tokenPtoG);
+      // GW-6068 set new value after this
+      await appContainer.apiv3.put('/slack-integration-settings/access-tokens');
     }
     catch (err) {
       toastError(err);
       logger(err);
     }
-
   };
 
-  const deleteSlackSettingsHandler = async() => {
+  const deleteSlackAppIntegrationHandler = async() => {
     try {
-      // TODO imple delete PtoG and GtoP Token at GW 5861
-      await appContainer.apiv3.put('/slack-integration-settings/custom-bot-with-proxy', {
-      });
-      deleteAccordionHandler();
+      // TODO GW-5923 delete SlackAppIntegration
+      // await appContainer.apiv3.put('/slack-integration-settings/custom-bot-with-proxy');
       toastSuccess('success');
     }
     catch (err) {
@@ -94,7 +64,7 @@ const CustomBotWithProxySettings = (props) => {
   const updateProxyUri = async() => {
     try {
       await appContainer.apiv3.put('/slack-integration-settings/proxy-uri', {
-        proxyUri,
+        proxyUri: newProxyServerUri,
       });
       toastSuccess(t('toaster.update_successed', { target: t('Proxy URL') }));
     }
@@ -133,8 +103,8 @@ const CustomBotWithProxySettings = (props) => {
             className="form-control"
             type="text"
             name="settingForm[proxyUrl]"
-            defaultValue={proxyUri}
-            onChange={(e) => { setProxyUri(e.target.value) }}
+            defaultValue={newProxyServerUri}
+            onChange={(e) => { setNewProxyServerUri(e.target.value) }}
           />
         </div>
         <div className="col-md-2 mt-3 text-center text-md-left">
@@ -144,38 +114,35 @@ const CustomBotWithProxySettings = (props) => {
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>
       <div className="mx-3">
-
-        {/* TODO: Multiple accordion logic */}
-        {/* TODO: Undefined key fix */}
-        {Array(...Array(accordionComponentsCount)).map(i => (
-          <React.Fragment key={i}>
-            <div className="d-flex justify-content-end">
-              <button
-                className="my-3 btn btn-outline-danger"
-                type="button"
-                onClick={() => setIsDeleteConfirmModalShown(true)}
-              >
-                <i className="icon-trash mr-1" />
-                {t('admin:slack_integration.delete')}
-              </button>
-            </div>
-            <WithProxyAccordions
-              botType="customBotWithProxy"
-              discardTokenHandler={discardTokenHandler}
-              generateTokenHandler={generateTokenHandler}
-              tokenPtoG={tokenPtoG}
-              tokenGtoP={tokenGtoP}
-            />
-          </React.Fragment>
-        ))}
-
-        {/* TODO: Disable button when integration is incomplete */}
-        {/* TODO: i18n */}
+        {slackAppIntegrations.map((slackAppIntegration) => {
+          const { tokenGtoP, tokenPtoG } = slackAppIntegration;
+          return (
+            <React.Fragment key={slackAppIntegration.id}>
+              <div className="d-flex justify-content-end">
+                <button
+                  className="my-3 btn btn-outline-danger"
+                  type="button"
+                  onClick={() => setIsDeleteConfirmModalShown(true)}
+                >
+                  <i className="icon-trash mr-1" />
+                  {t('admin:slack_integration.delete')}
+                </button>
+              </div>
+              <WithProxyAccordions
+                botType="customBotWithProxy"
+                discardTokenHandler={() => discardTokenHandler(tokenGtoP, tokenPtoG)}
+                generateTokenHandler={generateTokenHandler}
+                tokenGtoP={tokenGtoP}
+                tokenPtoG={tokenPtoG}
+              />
+            </React.Fragment>
+          );
+        })}
         <div className="row justify-content-center my-5">
           <button
             type="button"
             className="btn btn-outline-primary"
-            onClick={addAccordionHandler}
+            onClick={addSlackAppIntegrationHandler}
           >
             {`+ ${t('admin:slack_integration.accordion.add_slack_workspace')}`}
           </button>
@@ -185,7 +152,7 @@ const CustomBotWithProxySettings = (props) => {
         isResetAll={false}
         isOpen={isDeleteConfirmModalShown}
         onClose={() => setIsDeleteConfirmModalShown(false)}
-        onClickDeleteButton={deleteSlackSettingsHandler}
+        onClickDeleteButton={deleteSlackAppIntegrationHandler}
       />
     </>
   );
@@ -193,8 +160,15 @@ const CustomBotWithProxySettings = (props) => {
 
 const CustomBotWithProxySettingsWrapper = withUnstatedContainers(CustomBotWithProxySettings, [AppContainer]);
 
+CustomBotWithProxySettings.defaultProps = {
+  slackAppIntegrations: [],
+};
+
 CustomBotWithProxySettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  slackAppIntegrations: PropTypes.array,
+  proxyServerUri: PropTypes.string,
 };
 
 export default CustomBotWithProxySettingsWrapper;

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

@@ -1,6 +1,4 @@
-import React, {
-  useState, useEffect, useCallback,
-} from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 import { useTranslation } from 'react-i18next';
@@ -9,34 +7,64 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import CustomBotWithProxyIntegrationCard from './CustomBotWithProxyIntegrationCard';
 import WithProxyAccordions from './WithProxyAccordions';
+import DeleteSlackBotSettingsModal from './DeleteSlackBotSettingsModal';
 
 const logger = loggerFactory('growi:SlackBotSettings');
 
 const OfficialBotSettings = (props) => {
-  const { appContainer } = props;
+  const { appContainer, slackAppIntegrations, proxyServerUri } = props;
+  const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
   const { t } = useTranslation();
-  const [proxyUri, setProxyUri] = useState(null);
 
-  const retrieveProxyUri = useCallback(async() => {
+  const [newProxyServerUri, setNewProxyServerUri] = useState();
+
+  useEffect(() => {
+    if (proxyServerUri != null) {
+      setNewProxyServerUri(proxyServerUri);
+    }
+  }, [proxyServerUri]);
+
+  const addSlackAppIntegrationHandler = async() => {
+    // TODO GW-6067 implement
+  };
+
+  const discardTokenHandler = async(tokenGtoP, tokenPtoG) => {
     try {
-      const res = await appContainer.apiv3.get('/slack-integration-settings');
-      const { proxyUri } = res.data.settings;
-      setProxyUri(proxyUri);
+      // GW-6068 set new value after this
+      await appContainer.apiv3.delete('/slack-integration-settings/slack-app-integration', { tokenGtoP, tokenPtoG });
     }
     catch (err) {
       toastError(err);
-      logger.error(err);
+      logger(err);
     }
-  }, [appContainer.apiv3]);
+  };
 
-  useEffect(() => {
-    retrieveProxyUri();
-  }, [retrieveProxyUri]);
+  const generateTokenHandler = async() => {
+    try {
+      // GW-6068 set new value after this
+      await appContainer.apiv3.put('/slack-integration-settings/access-tokens');
+    }
+    catch (err) {
+      toastError(err);
+      logger(err);
+    }
+  };
+
+  const deleteSlackAppIntegrationHandler = async() => {
+    try {
+      // TODO GW-5923 delete SlackAppIntegration
+      // await appContainer.apiv3.put('/slack-integration-settings/custom-bot-with-proxy');
+      toastSuccess('success');
+    }
+    catch (err) {
+      toastError(err);
+    }
+  };
 
   const updateProxyUri = async() => {
     try {
       await appContainer.apiv3.put('/slack-integration-settings/proxy-uri', {
-        proxyUri,
+        proxyUri: newProxyServerUri,
       });
       toastSuccess(t('toaster.update_successed', { target: t('Proxy URL') }));
     }
@@ -74,8 +102,8 @@ const OfficialBotSettings = (props) => {
             className="form-control"
             type="text"
             name="settingForm[proxyUrl]"
-            defaultValue={proxyUri}
-            onChange={(e) => { setProxyUri(e.target.value) }}
+            defaultValue={newProxyServerUri}
+            onChange={(e) => { setNewProxyServerUri(e.target.value) }}
           />
         </div>
         <div className="col-md-2 mt-3 text-center text-md-left">
@@ -85,9 +113,47 @@ const OfficialBotSettings = (props) => {
 
       <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_settings')}</h2>
 
-      <div className="my-5 mx-3">
-        <WithProxyAccordions botType="officialBot" />
+      <div className="mx-3">
+        {slackAppIntegrations.map((slackAppIntegration) => {
+          const { tokenGtoP, tokenPtoG } = slackAppIntegration;
+          return (
+            <React.Fragment key={slackAppIntegration.id}>
+              <div className="d-flex justify-content-end">
+                <button
+                  className="my-3 btn btn-outline-danger"
+                  type="button"
+                  onClick={() => setIsDeleteConfirmModalShown(true)}
+                >
+                  <i className="icon-trash mr-1" />
+                  {t('admin:slack_integration.delete')}
+                </button>
+              </div>
+              <WithProxyAccordions
+                botType="officialBot"
+                discardTokenHandler={() => discardTokenHandler(tokenGtoP, tokenPtoG)}
+                generateTokenHandler={generateTokenHandler}
+                tokenGtoP={tokenGtoP}
+                tokenPtoG={tokenPtoG}
+              />
+            </React.Fragment>
+          );
+        })}
+        <div className="row justify-content-center my-5">
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            onClick={addSlackAppIntegrationHandler}
+          >
+            {`+ ${t('admin:slack_integration.accordion.add_slack_workspace')}`}
+          </button>
+        </div>
       </div>
+      <DeleteSlackBotSettingsModal
+        isResetAll={false}
+        isOpen={isDeleteConfirmModalShown}
+        onClose={() => setIsDeleteConfirmModalShown(false)}
+        onClickDeleteButton={deleteSlackAppIntegrationHandler}
+      />
     </>
 
   );
@@ -95,8 +161,15 @@ const OfficialBotSettings = (props) => {
 
 const OfficialBotSettingsWrapper = withUnstatedContainers(OfficialBotSettings, [AppContainer]);
 
+OfficialBotSettings.defaultProps = {
+  slackAppIntegrations: [],
+};
+
 OfficialBotSettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  slackAppIntegrations: PropTypes.array,
+  proxyServerUri: PropTypes.string,
 };
 
 export default OfficialBotSettingsWrapper;

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

@@ -27,18 +27,21 @@ const SlackIntegration = (props) => {
   const [isSendTestMessage, setIsSendTestMessage] = useState(false);
   const [slackWSNameInWithoutProxy, setSlackWSNameInWithoutProxy] = useState(null);
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
+  const [slackAppIntegrations, setSlackAppIntegrations] = useState();
+  const [proxyServerUri, setProxyServerUri] = useState();
 
 
   const fetchSlackIntegrationData = useCallback(async() => {
     try {
       const { data } = await appContainer.apiv3.get('/slack-integration-settings');
       const {
-        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars,
+        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars, slackAppIntegrations, proxyServerUri,
       } = data.settings;
 
       if (data.connectionStatuses != null) {
-        const { workspaceName } = data.connectionStatuses[slackBotToken];
-        setSlackWSNameInWithoutProxy(workspaceName);
+        // TODO fix
+        // const { workspaceName } = data.connectionStatuses[slackBotToken];
+        // setSlackWSNameInWithoutProxy(workspaceName);
       }
 
       setCurrentBotType(data.currentBotType);
@@ -46,6 +49,8 @@ const SlackIntegration = (props) => {
       setSlackBotToken(slackBotToken);
       setSlackSigningSecretEnv(slackSigningSecretEnvVars);
       setSlackBotTokenEnv(slackBotTokenEnvVars);
+      setSlackAppIntegrations(slackAppIntegrations);
+      setProxyServerUri(proxyServerUri);
     }
     catch (err) {
       toastError(err);
@@ -119,7 +124,7 @@ const SlackIntegration = (props) => {
 
   switch (currentBotType) {
     case 'officialBot':
-      settingsComponent = <OfficialBotSettings />;
+      settingsComponent = <OfficialBotSettings slackAppIntegrations={slackAppIntegrations} proxyServerUri={proxyServerUri} />;
       break;
     case 'customBotWithoutProxy':
       settingsComponent = (
@@ -140,7 +145,7 @@ const SlackIntegration = (props) => {
       );
       break;
     case 'customBotWithProxy':
-      settingsComponent = <CustomBotWithProxySettings />;
+      settingsComponent = <CustomBotWithProxySettings slackAppIntegrations={slackAppIntegrations} proxyServerUri={proxyServerUri} />;
       break;
   }
 

src/server/routes/apiv3/slack-integration-settings.js

@@ -142,7 +142,7 @@ module.exports = (crowi) => {
       settings.slackBotToken = configManager.getConfig('crowi', 'slackbot:token');
     }
     else {
-      settings.proxyUri = crowi.configManager.getConfig('crowi', 'slackbot:serverUri');
+      settings.proxyServerUri = crowi.configManager.getConfig('crowi', 'slackbot:serverUri');
       settings.proxyUriEnvVars = configManager.getConfigFromEnvVars('crowi', 'slackbot:serverUri');
     }
 
@@ -166,9 +166,9 @@ module.exports = (crowi) => {
       }
     }
     else {
-      const proxyUri = settings.proxyUri;
+      const proxyServerUri = settings.proxyServerUri;
 
-      if (proxyUri != null) {
+      if (proxyServerUri != null) {
         try {
           const slackAppIntegrations = await SlackAppIntegration.find();
           settings.slackAppIntegrations = slackAppIntegrations;