Merge branch 'feat/5587-move-secret-token-to-accordion' into feat/5613-accordion-component

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

@@ -0,0 +1,129 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const CustomBotWithoutProxySecretTokenSection = (props) => {
+  const { appContainer, adminAppContainer } = props;
+  const { t } = useTranslation();
+
+  const [slackSigningSecret, setSlackSigningSecret] = useState('');
+  const [slackBotToken, setSlackBotToken] = useState('');
+  const [slackSigningSecretEnv, setSlackSigningSecretEnv] = useState('');
+  const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
+  const currentBotType = 'custom-bot-without-proxy';
+
+  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]);
+
+  async function updateHandler() {
+    try {
+      await appContainer.apiv3.put('/slack-integration/custom-bot-without-proxy', {
+        slackSigningSecret,
+        slackBotToken,
+        currentBotType,
+      });
+      fetchData();
+      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
+  return (
+    <div className="card-body">
+      <table className="table settings-table">
+        <colgroup>
+          <col className="item-name" />
+          <col className="from-db" />
+          <col className="from-env-vars" />
+        </colgroup>
+        <thead>
+          <tr><th className="border-top-0"></th><th className="border-top-0">Database</th><th className="border-top-0">Environment variables</th></tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>Signing Secret</th>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={slackSigningSecret || ''}
+                onChange={e => setSlackSigningSecret(e.target.value)}
+              />
+            </td>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={slackSigningSecretEnv || ''}
+                readOnly
+              />
+              <p className="form-text text-muted">
+                {/* eslint-disable-next-line react/no-danger */}
+                <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_SIGNING_SECRET' }) }} />
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <th>Bot User OAuth Token</th>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={slackBotToken || ''}
+                onChange={e => setSlackBotToken(e.target.value)}
+              />
+            </td>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={slackBotTokenEnv || ''}
+                readOnly
+              />
+              <p className="form-text text-muted">
+                {/* eslint-disable-next-line react/no-danger */}
+                <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_BOT_TOKEN' }) }} />
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
+    </div>
+  );
+};
+
+const CustomBotWithoutProxySecretTokenSectionWrapper = withUnstatedContainers(CustomBotWithoutProxySecretTokenSection, [AppContainer, AdminAppContainer]);
+
+CustomBotWithoutProxySecretTokenSection.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default CustomBotWithoutProxySecretTokenSectionWrapper;

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

@@ -4,20 +4,14 @@ import PropTypes from 'prop-types';
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
-import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import { toastError } from '../../../util/apiNotification';
 import SlackGrowiBridging from './SlackGrowiBridging';
 import CustomBotWithoutProxySettingsAccordion from './CustomBotWithoutProxySettingsAccordion';
 
-
 const CustomBotWithoutProxySettings = (props) => {
   const { appContainer, adminAppContainer } = props;
   const { t } = useTranslation();
 
-  const [slackSigningSecret, setSlackSigningSecret] = useState('');
-  const [slackBotToken, setSlackBotToken] = useState('');
-  const [slackSigningSecretEnv, setSlackSigningSecretEnv] = useState('');
-  const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
   const [slackWSNameInWithoutProxy, setSlackWSNameInWithoutProxy] = useState(null);
   // get site name from this GROWI
   // eslint-disable-next-line no-unused-vars
@@ -25,7 +19,6 @@ const CustomBotWithoutProxySettings = (props) => {
   // eslint-disable-next-line no-unused-vars
   const [isSetupSlackBot, setIsSetupSlackBot] = useState(null);
   const [isConnectedToSlack, setIsConnectedToSlack] = useState(null);
-  const currentBotType = 'custom-bot-without-proxy';
 
   useEffect(() => {
     const fetchData = async() => {
@@ -47,13 +40,7 @@ const CustomBotWithoutProxySettings = (props) => {
     try {
       await adminAppContainer.retrieveAppSettingsData();
       const res = await appContainer.apiv3.get('/slack-integration/');
-      const {
-        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars, isSetupSlackBot, isConnectedToSlack,
-      } = res.data.slackBotSettingParams.customBotWithoutProxySettings;
-      setSlackSigningSecret(slackSigningSecret);
-      setSlackBotToken(slackBotToken);
-      setSlackSigningSecretEnv(slackSigningSecretEnvVars);
-      setSlackBotTokenEnv(slackBotTokenEnvVars);
+      const { isSetupSlackBot, isConnectedToSlack } = res.data.slackBotSettingParams.customBotWithoutProxySettings;
       setSiteName(adminAppContainer.state.title);
       setIsSetupSlackBot(isSetupSlackBot);
       setIsConnectedToSlack(isConnectedToSlack);
@@ -67,21 +54,6 @@ const CustomBotWithoutProxySettings = (props) => {
     fetchData();
   }, [fetchData]);
 
-  async function updateHandler() {
-    try {
-      await appContainer.apiv3.put('/slack-integration/custom-bot-without-proxy', {
-        slackSigningSecret,
-        slackBotToken,
-        currentBotType,
-      });
-      fetchData();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }
-
   return (
     <>
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_settings')}</h2>
@@ -90,66 +62,6 @@ const CustomBotWithoutProxySettings = (props) => {
         siteName={siteName}
         slackWorkSpaceName={slackWSNameInWithoutProxy}
       />
-      <table className="table settings-table">
-        <colgroup>
-          <col className="item-name" />
-          <col className="from-db" />
-          <col className="from-env-vars" />
-        </colgroup>
-        <thead>
-          <tr><th></th><th>Database</th><th>Environment variables</th></tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th>Signing Secret</th>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackSigningSecret || ''}
-                onChange={e => setSlackSigningSecret(e.target.value)}
-              />
-            </td>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackSigningSecretEnv || ''}
-                readOnly
-              />
-              <p className="form-text text-muted">
-                {/* eslint-disable-next-line react/no-danger */}
-                <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_SIGNING_SECRET' }) }} />
-              </p>
-            </td>
-          </tr>
-          <tr>
-            <th>Bot User OAuth Token</th>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackBotToken || ''}
-                onChange={e => setSlackBotToken(e.target.value)}
-              />
-            </td>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackBotTokenEnv || ''}
-                readOnly
-              />
-              <p className="form-text text-muted">
-                {/* eslint-disable-next-line react/no-danger */}
-                <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_BOT_TOKEN' }) }} />
-              </p>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
 
       <div className="my-5 mx-3">
         <CustomBotWithoutProxySettingsAccordion />

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import AppContainer from '../../../services/AppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import BotSettingsAccordion from './BotSettingsAccordion';
+import CustomBotWithoutProxySecretTokenSection from './CustomBotWithoutProxySecretTokenSection';
 
 const CustomBotWithoutProxySettingsAccordion = (props) => {
   const { appContainer } = props;
@@ -93,7 +94,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         title={t('slack_integration.without_proxy.register_secret_and_token')}
         onToggleAccordionHandler={() => onToggleAccordionHandler(2)}
       >
-        ボディー
+        <CustomBotWithoutProxySecretTokenSection />
       </BotSettingsAccordion.Item>
       <BotSettingsAccordion.Item
         isActive={openAccordionIndexes.has(3)}