Merge pull request #3838 from weseek/fix/input-form-of-secret-and-token

Fix/input form of secret and token

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
@@ -9,31 +9,32 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 const CustomBotWithoutProxySecretTokenSection = (props) => {
   const {
-    appContainer, slackSigningSecret, slackBotToken, slackSigningSecretEnv, slackBotTokenEnv,
+    appContainer, slackSigningSecret, slackBotToken, slackSigningSecretEnv, slackBotTokenEnv, onUpdatedSecretToken,
   } = props;
   const { t } = useTranslation();
 
-  const onChangeSigningSecretHandler = (signingSecretInput) => {
-    if (props.onChangeSigningSecretHandler != null) {
-      props.onChangeSigningSecretHandler(signingSecretInput);
-    }
-  };
-
-  const onChangeBotTokenHandler = (botTokenInput) => {
-    if (props.onChangeBotTokenHandler != null) {
-      props.onChangeBotTokenHandler(botTokenInput);
-    }
-  };
+  const [inputSigningSecret, setInputSigningSecret] = useState(slackSigningSecret || '');
+  const [inputBotToken, setInputBotToken] = useState(slackBotToken || '');
 
+  // update states when props are updated
+  useEffect(() => {
+    setInputSigningSecret(slackSigningSecret || '');
+  }, [slackSigningSecret]);
+  useEffect(() => {
+    setInputBotToken(slackBotToken || '');
+  }, [slackBotToken]);
 
-  const currentBotType = 'customBotWithoutProxy';
   const updatedSecretToken = async() => {
     try {
       await appContainer.apiv3.put('/slack-integration-settings/without-proxy/update-settings', {
-        slackSigningSecret,
-        slackBotToken,
-        currentBotType,
+        slackSigningSecret: inputSigningSecret,
+        slackBotToken: inputBotToken,
       });
+
+      if (onUpdatedSecretToken != null) {
+        onUpdatedSecretToken(inputSigningSecret, inputBotToken);
+      }
+
       toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
     }
     catch (err) {
@@ -52,8 +53,8 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={slackSigningSecret || ''}
-            onChange={e => onChangeSigningSecretHandler(e.target.value)}
+            value={inputSigningSecret}
+            onChange={e => setInputSigningSecret(e.target.value)}
           />
         </div>
 
@@ -62,7 +63,7 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={slackSigningSecretEnv || ''}
+            defaultValue={slackSigningSecretEnv}
             readOnly
           />
           <p className="form-text text-muted">
@@ -81,8 +82,8 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={slackBotToken || ''}
-            onChange={e => onChangeBotTokenHandler(e.target.value)}
+            value={inputBotToken}
+            onChange={e => setInputBotToken(e.target.value)}
           />
         </div>
 
@@ -91,7 +92,7 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={slackBotTokenEnv || ''}
+            defaultValue={slackBotTokenEnv}
             readOnly
           />
           <p className="form-text text-muted">
@@ -112,8 +113,8 @@ const CustomBotWithoutProxySecretTokenSectionWrapper = withUnstatedContainers(Cu
 
 CustomBotWithoutProxySecretTokenSection.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  onChangeSigningSecretHandler: PropTypes.func,
-  onChangeBotTokenHandler: PropTypes.func,
+
+  onUpdatedSecretToken: PropTypes.func,
   slackSigningSecret: PropTypes.string,
   slackSigningSecretEnv: PropTypes.string,
   slackBotToken: PropTypes.string,

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

@@ -85,9 +85,7 @@ CustomBotWithoutProxySettings.propTypes = {
   slackBotToken: PropTypes.string,
   slackBotTokenEnv: PropTypes.string,
 
-  isRgisterSlackCredentials: PropTypes.bool,
   isIntegrationSuccess: PropTypes.bool,
-  slackWSNameInWithoutProxy: PropTypes.string,
   connectionStatuses: PropTypes.object.isRequired,
 };
 

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

@@ -11,29 +11,19 @@ export const botInstallationStep = {
   CONNECTION_TEST: 'connection-test',
 };
 
-const CustomBotWithoutProxySettingsAccordion = ({
-  activeStep,
-  connectionMessage, testChannel, slackSigningSecret, slackSigningSecretEnv, slackBotToken, slackBotTokenEnv,
-  isRegisterSlackCredentials, isIntegrationSuccess,
-  inputTestChannelHandler, onTestFormSubmitted, onSetSlackSigningSecret, onSetSlackBotToken,
-}) => {
+const CustomBotWithoutProxySettingsAccordion = (props) => {
+  const {
+    activeStep, connectionMessage, testChannel,
+    slackSigningSecret, slackBotToken, slackSigningSecretEnv, slackBotTokenEnv,
+    isIntegrationSuccess,
+    inputTestChannelHandler, onTestFormSubmitted,
+  } = props;
+
   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 onChangeSigningSecretHandler = (signingSecretInput) => {
-    if (onSetSlackSigningSecret != null) {
-      onSetSlackSigningSecret(signingSecretInput);
-    }
-  };
-
-  const onChangeBotTokenHandler = (botTokenInput) => {
-    if (onSetSlackBotToken != null) {
-      onSetSlackBotToken(botTokenInput);
-    }
-  };
-
   const submitForm = (e) => {
     e.preventDefault();
 
@@ -51,6 +41,13 @@ const CustomBotWithoutProxySettingsAccordion = ({
     value = [connectionMessage.code, connectionMessage.message];
   }
 
+  const slackSigningSecretCombined = slackSigningSecret || slackSigningSecretEnv;
+  const slackBotTokenCombined = slackBotToken || slackBotTokenEnv;
+  const isEnterdSecretAndToken = (
+    (slackSigningSecretCombined != null && slackSigningSecretCombined.length > 0)
+    && (slackBotTokenCombined != null && slackBotTokenCombined.length > 0)
+  );
+
   return (
     <div className="card border-0 rounded-lg shadow overflow-hidden">
       <Accordion
@@ -94,15 +91,14 @@ const CustomBotWithoutProxySettingsAccordion = ({
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
         // eslint-disable-next-line max-len
-        title={<><span className="mr-2">③</span>{t('admin:slack_integration.accordion.register_secret_and_token')}{isRegisterSlackCredentials && <i className="ml-3 text-success fa fa-check"></i>}</>}
+        title={<><span className="mr-2">③</span>{t('admin:slack_integration.accordion.register_secret_and_token')}{isEnterdSecretAndToken && <i className="ml-3 text-success fa fa-check"></i>}</>}
       >
         <CustomBotWithoutProxySecretTokenSection
-          onChangeSigningSecretHandler={onChangeSigningSecretHandler}
-          onChangeBotTokenHandler={onChangeBotTokenHandler}
-          slackSigningSecret={slackSigningSecret}
-          slackSigningSecretEnv={slackSigningSecretEnv}
-          slackBotToken={slackBotToken}
-          slackBotTokenEnv={slackBotTokenEnv}
+          onUpdatedSecretToken={props.onUpdatedSecretToken}
+          slackSigningSecret={props.slackSigningSecret}
+          slackSigningSecretEnv={props.slackSigningSecretEnv}
+          slackBotToken={props.slackBotToken}
+          slackBotTokenEnv={props.slackBotTokenEnv}
         />
       </Accordion>
       <Accordion
@@ -128,7 +124,7 @@ const CustomBotWithoutProxySettingsAccordion = ({
             <button
               type="submit"
               className="btn btn-info mx-3 font-weight-bold"
-              disabled={testChannel.trim() === ''}
+              disabled={testChannel.trim().length === 0}
             >Test
             </button>
           </form>
@@ -164,20 +160,20 @@ const CustomBotWithoutProxySettingsAccordion = ({
 
 
 CustomBotWithoutProxySettingsAccordion.propTypes = {
+  activeStep: PropTypes.oneOf(Object.values(botInstallationStep)).isRequired,
+
+  onUpdatedSecretToken: PropTypes.func,
   slackSigningSecret: PropTypes.string,
   slackSigningSecretEnv: PropTypes.string,
   slackBotToken: PropTypes.string,
   slackBotTokenEnv: PropTypes.string,
+
+  connectionMessage: PropTypes.string,
+  connectionErrorCode: PropTypes.string,
   testChannel: PropTypes.string,
-  isRegisterSlackCredentials: PropTypes.bool,
   isIntegrationSuccess: PropTypes.bool,
-  fetchSlackIntegrationData: PropTypes.func,
   inputTestChannelHandler: PropTypes.func,
   onTestFormSubmitted: PropTypes.func,
-  onSetSlackSigningSecret: PropTypes.func,
-  onSetSlackBotToken: PropTypes.func,
-  connectionMessage: PropTypes.string,
-  activeStep: PropTypes.oneOf(Object.values(botInstallationStep)).isRequired,
 };
 
 export default CustomBotWithoutProxySettingsAccordion;

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

@@ -78,6 +78,11 @@ const SlackIntegration = (props) => {
     }
   };
 
+  const changeSecretAndToken = (secret, token) => {
+    setSlackSigningSecret(secret);
+    setSlackBotToken(token);
+  };
+
   useEffect(() => {
     fetchSlackIntegrationData();
   }, [fetchSlackIntegrationData]);
@@ -140,9 +145,8 @@ const SlackIntegration = (props) => {
           slackSigningSecretEnv={slackSigningSecretEnv}
           slackSigningSecret={slackSigningSecret}
           slackWSNameInWithoutProxy={slackWSNameInWithoutProxy}
-          onSetSlackSigningSecret={setSlackSigningSecret}
-          onSetSlackBotToken={setSlackBotToken}
           fetchSlackIntegrationData={fetchSlackIntegrationData}
+          onUpdatedSecretToken={changeSecretAndToken}
           connectionStatuses={connectionStatuses}
         />
       );