Conflict resolved and adding modal

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

@@ -3,28 +3,8 @@ import React from 'react';
 const ConfirmBotChangeModal = () => {
   return (
     <>
-      <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
-        Launch static backdrop modal
-      </button>
-
-      <div className="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-        <div className="modal-dialog">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title" id="staticBackdropLabel">Modal title</h5>
-              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </div>
-            <div className="modal-body">
-              ...
-            </div>
-            <div className="modal-footer">
-              <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
-              <button type="button" className="btn btn-primary">Understood</button>
-            </div>
-          </div>
-        </div>
+      <div className="modal">
+        aa
       </div>
     </>
   );

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

@@ -1,49 +1,101 @@
-/* eslint-disable no-console */
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import PropTypes from 'prop-types';
+import AppContainer from '../../../services/AppContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-function CustomBotNonProxySettings() {
-  const { t } = useTranslation('admin');
-  const [secret, setSecret] = useState('');
-  const [token, setToken] = useState('');
+const CustomBotNonProxySettings = (props) => {
+  const { appContainer } = props;
+  const { t } = useTranslation();
+
+  const [slackSigningSecret, setSlackSigningSecret] = useState('');
+  const [slackBotToken, setSlackBotToken] = useState('');
+  const [slackSigningSecretEnv, setSlackSigningSecretEnv] = useState('');
+  const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
+  const botType = 'non-proxy';
+
+  const fetchData = useCallback(async() => {
+    try {
+      const res = await appContainer.apiv3.get('/slack-integration/');
+      const {
+        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars,
+      } = res.data.slackBotSettingParams.customBotNonProxySettings;
+      setSlackSigningSecret(slackSigningSecret);
+      setSlackBotToken(slackBotToken);
+      setSlackSigningSecretEnv(slackSigningSecretEnvVars);
+      setSlackBotTokenEnv(slackBotTokenEnvVars);
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [appContainer]);
 
-  function updateHandler() {
-    console.log(`Signing Secret: ${secret}, Bot User OAuth Token: ${token}`);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  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 (
-    <div className="row">
-      <div className="col-lg-12">
-        <h2 className="admin-setting-header">{t('slack_integration.custom_bot_non_proxy_settings')}</h2>
-
-        <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')}
-            </button>
-          </div>
+    <>
+      <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')}
+          </button>
         </div>
-
-        <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)} />
-          </div>
+      </div>
+      
+      <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"
+            value={slackSigningSecret || slackSigningSecretEnv || ''}
+            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)} />
-          </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"
+            value={slackBotToken || slackBotTokenEnv || ''}
+            onChange={e => setSlackBotToken(e.target.value)}
+          />
         </div>
-
-        <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
       </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/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -12,7 +12,7 @@ const SlackIntegration = () => {
     // showModal();
   };
 
-  const currentBotType = 'custom-bot-with-proxy';
+  const currentBotType = 'custom-bot-non-proxy';
   let settingsComponent = null;
 
   switch (currentBotType) {

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

@@ -75,14 +75,16 @@ module.exports = (crowi) => {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
       },
-      cusotmBotNonProxySettings: {
+      customBotNonProxySettings: {
         // TODO impl this after GW-4939
         // AccessToken: "tempaccessdatahogehoge",
+        slackSigningSecretEnvVars: crowi.configManager.getConfigFromEnvVars('crowi', 'slackbot:signingSecret'),
+        slackBotTokenEnvVars: crowi.configManager.getConfigFromEnvVars('crowi', 'slackbot:token'),
         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",
       },