Merge branch 'feat/growi-bot' into support/growi-bot-update-dockerfile

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

@@ -13,7 +13,7 @@ const logger = loggerFactory('growi:SlackBotSettings');
 
 const CustomBotWithProxySettings = (props) => {
   const {
-    appContainer, slackAppIntegrations, proxyServerUri, onClickAddSlackWorkspaceBtn, connectionStatuses, onUpdateTokens,
+    appContainer, slackAppIntegrations, proxyServerUri, onClickAddSlackWorkspaceBtn, connectionStatuses, onUpdateTokens, onSubmitForm,
   } = props;
   const [newProxyServerUri, setNewProxyServerUri] = useState();
   const [integrationIdToDelete, setIntegrationIdToDelete] = useState(null);
@@ -123,6 +123,7 @@ const CustomBotWithProxySettings = (props) => {
                 tokenGtoP={tokenGtoP}
                 tokenPtoG={tokenPtoG}
                 onUpdateTokens={onUpdateTokens}
+                onSubmitForm={onSubmitForm}
               />
             </React.Fragment>
           );
@@ -159,6 +160,7 @@ CustomBotWithProxySettings.propTypes = {
   proxyServerUri: PropTypes.string,
   onClickAddSlackWorkspaceBtn: PropTypes.func,
   onDeleteSlackAppIntegration: PropTypes.func,
+  onSubmitForm: PropTypes.func,
   connectionStatuses: PropTypes.object.isRequired,
   onUpdateTokens: PropTypes.func,
 };

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

@@ -150,6 +150,7 @@ const SlackIntegration = (props) => {
           onDeleteSlackAppIntegration={fetchSlackIntegrationData}
           connectionStatuses={connectionStatuses}
           onUpdateTokens={fetchSlackIntegrationData}
+          onSubmitForm={fetchSlackIntegrationData}
         />
       );
       break;

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

@@ -178,26 +178,33 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = withUnstatedContainers
   );
 }, [AppContainer]);
 
-const TestProcess = ({ apiv3Post, slackAppIntegrationId }) => {
+const TestProcess = ({
+  apiv3Post, slackAppIntegrationId, onSubmitForm, onSubmitFormFailed, isLatestConnectionSuccess,
+}) => {
+
   const { t } = useTranslation();
   const [testChannel, setTestChannel] = useState('');
   const [logsValue, setLogsValue] = useState('');
-  const [isLatestConnectionSuccess, setIsLatestConnectionSuccess] = useState(false);
   const successMessage = 'Successfully sent to Slack workspace.';
 
   const submitForm = async(e) => {
     e.preventDefault();
     try {
       await apiv3Post('/slack-integration-settings/with-proxy/relation-test', { slackAppIntegrationId, channel: testChannel });
-      setIsLatestConnectionSuccess(true);
       const newLogs = addLogs(logsValue, successMessage, null);
       setLogsValue(newLogs);
+
+      if (onSubmitForm != null) {
+        onSubmitForm();
+      }
     }
     catch (error) {
-      setIsLatestConnectionSuccess(false);
       const newLogs = addLogs(logsValue, error[0].message, error[0].code);
       setLogsValue(newLogs);
       logger.error(error);
+      if (onSubmitFormFailed != null) {
+        onSubmitFormFailed();
+      }
     }
   };
 
@@ -248,6 +255,19 @@ const TestProcess = ({ apiv3Post, slackAppIntegrationId }) => {
 
 const WithProxyAccordions = (props) => {
   const { t } = useTranslation();
+  const [isLatestConnectionSuccess, setIsLatestConnectionSuccess] = useState(false);
+
+  const submitForm = () => {
+    setIsLatestConnectionSuccess(true);
+    if (props.onSubmitForm != null) {
+      props.onSubmitForm();
+    }
+  };
+
+  const submitFormFailed = () => {
+    setIsLatestConnectionSuccess(false);
+  };
+
 
   const officialBotIntegrationProcedure = {
     '①': {
@@ -299,7 +319,13 @@ const WithProxyAccordions = (props) => {
     },
     '⑤': {
       title: 'test_connection',
-      content: <TestProcess apiv3Post={props.appContainer.apiv3.post} slackAppIntegrationId={props.slackAppIntegrationId} />,
+      content: <TestProcess
+        apiv3Post={props.appContainer.apiv3.post}
+        slackAppIntegrationId={props.slackAppIntegrationId}
+        onSubmitForm={submitForm}
+        onSubmitFormFailed={submitFormFailed}
+        isLatestConnectionSuccess={isLatestConnectionSuccess}
+      />,
     },
   };
 
@@ -312,7 +338,13 @@ const WithProxyAccordions = (props) => {
       {Object.entries(integrationProcedureMapping).map(([key, value]) => {
         return (
           <Accordion
-            title={<><span className="mr-2">{key}</span>{t(`admin:slack_integration.accordion.${value.title}`)}</>}
+            title={(
+              <>
+                <span className="mr-2">{key}</span>
+                {t(`admin:slack_integration.accordion.${value.title}`)}
+                {value.title === 'test_connection' && isLatestConnectionSuccess && <i className="ml-3 text-success fa fa-check"></i>}
+              </>
+)}
             key={key}
           >
             {value.content}