Merge pull request #3628 from weseek/feat/create-done-mark-in-acordion-header

Feat/create done mark in acordion header

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

@@ -1,4 +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 AppContainer from '../../../services/AppContainer';
@@ -9,19 +9,20 @@ import SlackGrowiBridging from './SlackGrowiBridging';
 import CustomBotWithoutProxySettingsAccordion, { botInstallationStep } from './CustomBotWithoutProxySettingsAccordion';
 
 const CustomBotWithoutProxySettings = (props) => {
-  const { appContainer, adminAppContainer } = props;
+  const { appContainer } = props;
   const { t } = useTranslation();
 
   const [slackWSNameInWithoutProxy, setSlackWSNameInWithoutProxy] = useState(null);
+
   // get site name from this GROWI
   // eslint-disable-next-line no-unused-vars
   const [siteName, setSiteName] = useState('');
+
   // eslint-disable-next-line no-unused-vars
   const [isSetupSlackBot, setIsSetupSlackBot] = useState(null);
-  const [isConnectedToSlack, setIsConnectedToSlack] = useState(null);
 
   useEffect(() => {
-    const fetchData = async() => {
+    const getSlackWorkSpaceName = async() => {
       try {
         const res = await appContainer.apiv3.get('/slack-integration/custom-bot-without-proxy/slack-workspace-name');
         setSlackWSNameInWithoutProxy(res.data.slackWorkSpaceName);
@@ -31,28 +32,10 @@ const CustomBotWithoutProxySettings = (props) => {
       }
     };
     setSlackWSNameInWithoutProxy(null);
-    if (isConnectedToSlack) {
-      fetchData();
-    }
-  }, [appContainer, isConnectedToSlack]);
-
-  const fetchData = useCallback(async() => {
-    try {
-      await adminAppContainer.retrieveAppSettingsData();
-      const res = await appContainer.apiv3.get('/slack-integration/');
-      const { isSetupSlackBot, isConnectedToSlack } = res.data.slackBotSettingParams.customBotWithoutProxySettings;
-      setSiteName(adminAppContainer.state.title);
-      setIsSetupSlackBot(isSetupSlackBot);
-      setIsConnectedToSlack(isConnectedToSlack);
+    if (props.isConnectedToSlack) {
+      getSlackWorkSpaceName();
     }
-    catch (err) {
-      toastError(err);
-    }
-  }, [appContainer, adminAppContainer]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+  }, [appContainer, props.isConnectedToSlack]);
 
   return (
     <>
@@ -87,8 +70,10 @@ const CustomBotWithoutProxySettings = (props) => {
       />
 
       <div className="my-5 mx-3">
-        {/* TODO GW-5644 active create bot step temporary */}
-        <CustomBotWithoutProxySettingsAccordion activeStep={botInstallationStep.CREATE_BOT} />
+        <CustomBotWithoutProxySettingsAccordion
+          {...props}
+          activeStep={botInstallationStep.CREATE_BOT}
+        />
       </div>
 
     </>
@@ -100,6 +85,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,
+  isConnectedToSlack: PropTypes.bool,
 };
 
 export default CustomBotWithoutProxySettingsWrapper;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import AppContainer from '../../../services/AppContainer';
@@ -15,40 +15,20 @@ export const botInstallationStep = {
   CONNECTION_TEST: 'connection-test',
 };
 
-const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContainer, activeStep }) => {
+const CustomBotWithoutProxySettingsAccordion = ({
+  appContainer,
+  activeStep, slackSigningSecret, slackSigningSecretEnv, slackBotToken,
+  slackBotTokenEnv, isRegisterSlackCredentials, isSendTestMessage,
+  setSlackSigningSecret, setSlackBotToken, setIsSendTestMessage, setIsRegisterSlackCredentials,
+}) => {
   const { t } = useTranslation();
   // TODO: GW-5644 Store default open accordion
   // eslint-disable-next-line no-unused-vars
   const [defaultOpenAccordionKeys, setDefaultOpenAccordionKeys] = useState(new Set([activeStep]));
   const [connectionErrorCode, setConnectionErrorCode] = useState(null);
   const [connectionErrorMessage, setConnectionErrorMessage] = useState(null);
-  const [slackSigningSecret, setSlackSigningSecret] = useState('');
-  const [slackBotToken, setSlackBotToken] = useState('');
-  const [slackSigningSecretEnv, setSlackSigningSecretEnv] = useState('');
-  const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
   const currentBotType = 'customBotWithoutProxy';
 
-  const fetchData = useCallback(async() => {
-    try {
-      await adminAppContainer.retrieveAppSettingsData();
-      const res = await appContainer.apiv3.get('/slack-integration/');
-      const {
-        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars,
-      } = res.data.slackBotSettingParams.customBotWithoutProxySettings;
-      setSlackSigningSecret(slackSigningSecret);
-      setSlackBotToken(slackBotToken);
-      setSlackSigningSecretEnv(slackSigningSecretEnvVars);
-      setSlackBotTokenEnv(slackBotTokenEnvVars);
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }, [appContainer, adminAppContainer]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
   const updateSecretTokenHandler = async() => {
     try {
       await appContainer.apiv3.put('/slack-integration/custom-bot-without-proxy', {
@@ -56,10 +36,10 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
         slackBotToken,
         currentBotType,
       });
-      fetchData();
       toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
     }
     catch (err) {
+      setIsRegisterSlackCredentials(false);
       toastError(err);
     }
   };
@@ -80,8 +60,10 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
         // TODO put proper request
         // channel: 'testchannel',
       });
+      setIsSendTestMessage(true);
     }
     catch (err) {
+      setIsSendTestMessage(false);
       setConnectionErrorCode(err[0].code);
       setConnectionErrorMessage(err[0].message);
     }
@@ -133,7 +115,8 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
       </Accordion>
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
-        title={<><span className="mr-2">③</span>{t('admin:slack_integration.without_proxy.register_secret_and_token')}</>}
+        // eslint-disable-next-line max-len
+        title={<><span className="mr-2">③</span>{t('admin:slack_integration.without_proxy.register_secret_and_token')}{isRegisterSlackCredentials && <i className="ml-3 text-success fa fa-check"></i>}</>}
       >
         <CustomBotWithoutProxySecretTokenSection
           updateSecretTokenHandler={updateSecretTokenHandler}
@@ -147,7 +130,8 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
       </Accordion>
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CONNECTION_TEST)}
-        title={<><span className="mr-2">④</span>{t('admin:slack_integration.without_proxy.test_connection')}</>}
+        // eslint-disable-next-line max-len
+        title={<><span className="mr-2">④</span>{t('admin:slack_integration.without_proxy.test_connection')}{isSendTestMessage && <i className="ml-3 text-success fa fa-check"></i>}</>}
       >
         <p className="text-center m-4">{t('admin:slack_integration.without_proxy.test_connection_by_pressing_button')}</p>
         <div className="d-flex justify-content-center">
@@ -174,6 +158,16 @@ const CustomBotWithoutProxySettingsAccordionWrapper = withUnstatedContainers(Cus
 
 CustomBotWithoutProxySettingsAccordion.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  slackSigningSecret: PropTypes.string,
+  slackSigningSecretEnv: PropTypes.string,
+  slackBotToken: PropTypes.string,
+  slackBotTokenEnv: PropTypes.string,
+  isRegisterSlackCredentials: PropTypes.bool,
+  isSendTestMessage: PropTypes.bool,
+  setSlackSigningSecret: PropTypes.string,
+  setSlackBotToken: PropTypes.string,
+  setIsSendTestMessage: PropTypes.func,
+  setIsRegisterSlackCredentials: PropTypes.func,
   adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
   activeStep: PropTypes.oneOf(Object.values(botInstallationStep)).isRequired,
 };

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

@@ -20,18 +20,40 @@ const SlackIntegration = (props) => {
   const [currentBotType, setCurrentBotType] = useState(null);
   const [selectedBotType, setSelectedBotType] = useState(null);
   const [accessToken, setAccessToken] = useState('');
+  const [slackSigningSecret, setSlackSigningSecret] = useState('');
+  const [slackBotToken, setSlackBotToken] = useState('');
+  const [slackSigningSecretEnv, setSlackSigningSecretEnv] = useState('');
+  const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
+  const [isConnectedToSlack, setIsConnectedToSlack] = useState(null);
+  const [isRegisterSlackCredentials, setIsRegisterSlackCredentials] = useState(false);
+  const [isSendTestMessage, setIsSendTestMessage] = useState(false);
+
 
   const fetchData = useCallback(async() => {
     try {
       const response = await appContainer.apiv3.get('slack-integration/');
-      const { currentBotType, accessToken } = response.data.slackBotSettingParams;
+      const { currentBotType, customBotWithoutProxySettings, accessToken } = response.data.slackBotSettingParams;
+      const {
+        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars,
+      } = customBotWithoutProxySettings;
+
       setCurrentBotType(currentBotType);
       setAccessToken(accessToken);
+      setSlackSigningSecret(slackSigningSecret);
+      setSlackBotToken(slackBotToken);
+      setSlackSigningSecretEnv(slackSigningSecretEnvVars);
+      setSlackBotTokenEnv(slackBotTokenEnvVars);
+      setIsConnectedToSlack(isConnectedToSlack);
+
+      if ((slackBotToken && slackSigningSecret) || (slackBotTokenEnv && slackSigningSecretEnv)) {
+        setIsRegisterSlackCredentials(true);
+      }
+
     }
     catch (err) {
       toastError(err);
     }
-  }, [appContainer.apiv3]);
+  }, [appContainer.apiv3, isConnectedToSlack, slackBotTokenEnv, slackSigningSecretEnv]);
 
   useEffect(() => {
     fetchData();
@@ -45,6 +67,9 @@ const SlackIntegration = (props) => {
       setCurrentBotType(clickedBotType);
       return;
     }
+    setIsRegisterSlackCredentials(false);
+    setSlackSigningSecret('');
+    setSlackBotToken('');
     setSelectedBotType(clickedBotType);
   };
 
@@ -97,7 +122,20 @@ const SlackIntegration = (props) => {
       break;
     case 'customBotWithoutProxy':
       settingsComponent = (
-        <CustomBotWithoutProxySettings />
+        <CustomBotWithoutProxySettings
+          accessToken={accessToken}
+          isSendTestMessage={isSendTestMessage}
+          isRegisterSlackCredentials={isRegisterSlackCredentials}
+          isConnectedToSlack={isConnectedToSlack}
+          slackBotTokenEnv={slackBotTokenEnv}
+          slackBotToken={slackBotToken}
+          slackSigningSecretEnv={slackSigningSecretEnv}
+          slackSigningSecret={slackSigningSecret}
+          setSlackSigningSecret={setSlackSigningSecret}
+          setSlackBotToken={setSlackBotToken}
+          setIsSendTestMessage={setIsSendTestMessage}
+          setIsRegisterSlackCredentials={setIsRegisterSlackCredentials}
+        />
       );
       break;
     case 'customBotWithProxy':