refactor

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,27 +12,17 @@ import DeleteSlackBotSettingsModal from './DeleteSlackBotSettingsModal';
 const logger = loggerFactory('growi:SlackBotSettings');
 
 const CustomBotWithProxySettings = (props) => {
-  const { appContainer, slackAppIntegrations } = props;
+  const { appContainer, slackAppIntegrations, proxyServerUri } = props;
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
-  const [proxyUri, setProxyUri] = useState(null);
-
   const { t } = useTranslation();
 
-  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]);
+    if (proxyServerUri != null) {
+      setNewProxyServerUri(proxyServerUri);
+    }
+  }, [proxyServerUri]);
 
   const addSlackAppIntegrationHandler = async() => {
     // TODO implement
@@ -58,7 +46,6 @@ const CustomBotWithProxySettings = (props) => {
       toastError(err);
       logger(err);
     }
-
   };
 
   const deleteSlackSettingsHandler = async() => {
@@ -75,7 +62,7 @@ const CustomBotWithProxySettings = (props) => {
   const updateProxyUri = async() => {
     try {
       await appContainer.apiv3.put('/slack-integration-settings/proxy-uri', {
-        proxyUri,
+        newProxyServerUri,
       });
       toastSuccess(t('toaster.update_successed', { target: t('Proxy URL') }));
     }
@@ -114,8 +101,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">
@@ -147,9 +134,8 @@ const CustomBotWithProxySettings = (props) => {
                 tokenPtoG={tokenPtoG}
               />
             </React.Fragment>
-        );
-          })}
-
+          );
+        })}
         <div className="row justify-content-center my-5">
           <button
             type="button"
@@ -172,10 +158,15 @@ const CustomBotWithProxySettings = (props) => {
 
 const CustomBotWithProxySettingsWrapper = withUnstatedContainers(CustomBotWithProxySettings, [AppContainer]);
 
+CustomBotWithProxySettings.defaultProps = {
+  slackAppIntegrations: [],
+};
+
 CustomBotWithProxySettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
-  slackAppIntegrations: PropTypes.array.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';
@@ -13,30 +11,57 @@ import WithProxyAccordions from './WithProxyAccordions';
 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 implement
+  };
+
+  const discardTokenHandler = async(tokenGtoP, tokenPtoG) => {
     try {
-      const res = await appContainer.apiv3.get('/slack-integration-settings');
-      const { proxyUri } = res.data.settings;
-      setProxyUri(proxyUri);
+      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 {
+      await appContainer.apiv3.put('/slack-integration-settings/access-tokens');
+    }
+    catch (err) {
+      toastError(err);
+      logger(err);
+    }
+  };
+
+  const deleteSlackSettingsHandler = async() => {
+    try {
+      // TODO imple delete PtoG and GtoP Token at GW 5861
+      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,
+        newProxyServerUri,
       });
       toastSuccess(t('toaster.update_successed', { target: t('Proxy URL') }));
     }
@@ -74,8 +99,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 +110,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={deleteSlackSettingsHandler}
+      />
     </>
 
   );
@@ -95,8 +158,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,14 +27,15 @@ const SlackIntegration = (props) => {
   const [isSendTestMessage, setIsSendTestMessage] = useState(false);
   const [slackWSNameInWithoutProxy, setSlackWSNameInWithoutProxy] = useState(null);
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
-  const [slackAppIntegrations, setSlackAppIntegrations] = useState([]);
+  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, slackAppIntegrations,
+        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars, slackAppIntegrations, proxyServerUri,
       } = data.settings;
 
       if (data.connectionStatuses != null) {
@@ -49,6 +50,7 @@ const SlackIntegration = (props) => {
       setSlackSigningSecretEnv(slackSigningSecretEnvVars);
       setSlackBotTokenEnv(slackBotTokenEnvVars);
       setSlackAppIntegrations(slackAppIntegrations);
+      setProxyServerUri(proxyServerUri);
     }
     catch (err) {
       toastError(err);
@@ -122,7 +124,7 @@ const SlackIntegration = (props) => {
 
   switch (currentBotType) {
     case 'officialBot':
-      settingsComponent = <OfficialBotSettings slackAppIntegrations={slackAppIntegrations} />;
+      settingsComponent = <OfficialBotSettings slackAppIntegrations={slackAppIntegrations} proxyServerUri={proxyServerUri} />;
       break;
     case 'customBotWithoutProxy':
       settingsComponent = (
@@ -143,7 +145,7 @@ const SlackIntegration = (props) => {
       );
       break;
     case 'customBotWithProxy':
-      settingsComponent = <CustomBotWithProxySettings slackAppIntegrations={slackAppIntegrations} />;
+      settingsComponent = <CustomBotWithProxySettings slackAppIntegrations={slackAppIntegrations} proxyServerUri={proxyServerUri} />;
       break;
   }