Merge pull request #3571 from weseek/feat/5498-custom-bot-connect-to-backend

Feat/5498 custom bot connect to backend

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

@@ -1,17 +1,49 @@
-/* eslint-disable no-console */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
+import { withUnstatedContainers } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-function CustomBotNonProxySettings() {
+const CustomBotNonProxySettings = (props) => {
+  const { appContainer } = props;
+  const { t } = useTranslation();
+
+  const [slackSigningSecret, setSlackSigningSecret] = useState('');
+  const [slackBotToken, setSlackBotToken] = useState('');
+  const botType = 'non-proxy';
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const res = await appContainer.apiv3.get('/slack-integration/');
+        const { slackSigningSecret, slackBotToken } = res.data.slackBotSettingParams.customBotNonProxySettings;
+        setSlackSigningSecret(slackSigningSecret);
+        setSlackBotToken(slackBotToken);
+      }
+      catch (err) {
+        toastError(err);
+      }
+    }
+    fetchData();
 
-  const { t } = useTranslation('admin');
-  const [secret, setSecret] = useState('');
-  const [token, setToken] = useState('');
+  }, [appContainer.apiv3]);
 
-  function updateHandler() {
-    console.log(`Signing Secret: ${secret}, Bot User OAuth Token: ${token}`);
+  async function updateHandler() {
+    try {
+      await appContainer.apiv3.put('/slack-integration/custom-bot-non-proxy', {
+        slackSigningSecret,
+        slackBotToken,
+        botType,
+      });
+      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_non_proxy_settings') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
   }
 
   return (
@@ -19,7 +51,7 @@ function CustomBotNonProxySettings() {
       <div className="row my-5">
         <div className="mx-auto">
           <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
-            {t('slack_integration.non_proxy.create_bot')}
+            {t('admin:slack_integration.non_proxy.create_bot')}
           </button>
         </div>
       </div>
@@ -27,28 +59,26 @@ function CustomBotNonProxySettings() {
       <div className="form-group row">
         <label className="text-left text-md-right col-md-3 col-form-label">Signing Secret</label>
         <div className="col-md-6">
-          <input
-            className="form-control"
-            type="text"
-            onChange={e => setSecret(e.target.value)}
-          />
+          <input className="form-control" type="text" value={slackSigningSecret || ''} onChange={e => setSlackSigningSecret(e.target.value)} />
         </div>
       </div>
 
       <div className="form-group row mb-5">
         <label className="text-left text-md-right col-md-3 col-form-label">Bot User OAuth Token</label>
         <div className="col-md-6">
-          <input
-            className="form-control"
-            type="text"
-            onChange={e => setToken(e.target.value)}
-          />
+          <input className="form-control" type="text" value={slackBotToken || ''} onChange={e => setSlackBotToken(e.target.value)} />
         </div>
       </div>
 
       <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
     </>
   );
-}
+};
+
+const CustomBotNonProxySettingsWrapper = withUnstatedContainers(CustomBotNonProxySettings, [AppContainer]);
+
+CustomBotNonProxySettings.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
 
-export default CustomBotNonProxySettings;
+export default CustomBotNonProxySettingsWrapper;

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

@@ -75,14 +75,14 @@ module.exports = (crowi) => {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
       },
-      cusotmBotNonProxySettings: {
+      customBotNonProxySettings: {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
         slackSigningSecret: crowi.configManager.getConfig('crowi', 'slackbot:signingSecret'),
         slackBotToken: crowi.configManager.getConfig('crowi', 'slackbot:token'),
       },
       // TODO imple when creating with proxy
-      cusotmBotWithProxySettings: {
+      customBotWithProxySettings: {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
       },