Merge branch 'feat/growi-bot' into feat/5907-6185-imprv-accordion-header

resource/locales/ja_JP/admin/admin.json

@@ -293,7 +293,7 @@
     },
     "delete": "削除",
     "integration_procedure": "連携手順",
-    "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 設定",
+    "custom_bot_without_proxy_settings": "Custom Bot without proxy 設定",
     "integration_failed":"連携に失敗しました",
     "reset": "リセット",
     "reset_all_settings": "全ての設定をリセット",

resource/locales/zh_CN/admin/admin.json

@@ -303,7 +303,7 @@
     },
     "delete": "取消",
     "integration_procedure": "协作程序",
-    "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 设置",
+    "custom_bot_without_proxy_settings": "Custom Bot without proxy 设置",
     "integration_failed":"联动失败",
     "reset":"重置",
     "reset_all_settings": "重置所有设置",

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

@@ -60,8 +60,7 @@ const BotTypeCard = (props) => {
             </span>
           )}
 
-          {/* TODO: add an appropriate links by GW-5614 */}
-          <i className={`fa fa-external-link btn-link ${props.isActive ? 'grw-botcard-title-active' : ''}`} aria-hidden="true"></i>
+          <i className={props.isActive ? 'grw-botcard-title-active' : ''} aria-hidden="true"></i>
         </h3>
       </div>
       <div className="card-body p-4">

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

@@ -71,30 +71,38 @@ const CustomBotWithProxySettings = (props) => {
 
   return (
     <>
-      <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
+      <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}
+        {/* TODO: add an appropriate links by GW-5614 */}
+        <i className="fa fa-external-link btn-link ml-2" aria-hidden="true"></i>
+      </h2>
+
+      {slackAppIntegrations.length !== 0 && (
+        <>
+          <CustomBotWithProxyConnectionStatus
+            siteName={siteName}
+            connectionStatuses={connectionStatuses}
+          />
 
-      <CustomBotWithProxyConnectionStatus
-        siteName={siteName}
-        connectionStatuses={connectionStatuses}
-      />
+          <div className="form-group row my-4">
+            <label className="text-left text-md-right col-md-3 col-form-label mt-3">Proxy URL</label>
+            <div className="col-md-6 mt-3">
+              <input
+                className="form-control"
+                type="text"
+                name="settingForm[proxyUrl]"
+                defaultValue={newProxyServerUri}
+                onChange={(e) => { setNewProxyServerUri(e.target.value) }}
+              />
+            </div>
+            <div className="col-md-2 mt-3 text-center text-md-left">
+              <button type="button" className="btn btn-primary" onClick={updateProxyUri}>{ t('Update') }</button>
+            </div>
+          </div>
 
-      <div className="form-group row my-4">
-        <label className="text-left text-md-right col-md-3 col-form-label mt-3">Proxy URL</label>
-        <div className="col-md-6 mt-3">
-          <input
-            className="form-control"
-            type="text"
-            name="settingForm[proxyUrl]"
-            defaultValue={newProxyServerUri}
-            onChange={(e) => { setNewProxyServerUri(e.target.value) }}
-          />
-        </div>
-        <div className="col-md-2 mt-3 text-center text-md-left">
-          <button type="button" className="btn btn-primary" onClick={updateProxyUri}>{ t('Update') }</button>
-        </div>
-      </div>
+          <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>
+        </>
+      )}
 
-      <h2 className="admin-setting-header">{t('admin:slack_integration.integration_procedure')}</h2>
       <div className="mx-3">
         {slackAppIntegrations.map((slackAppIntegration, i) => {
           const { tokenGtoP, tokenPtoG, slackBotToken } = slackAppIntegration;

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

@@ -19,7 +19,7 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
     <div className="d-flex justify-content-center my-5 bot-integration">
       <div className="card rounded shadow border-0 w-50 admin-bot-card mb-0">
         <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
-        <div className="card-body p-2 w-50 mx-auto">
+        <div className="card-body px-4 text-center mx-md-5">
           {totalCount > 0 ? (
             <div className="card slack-work-space-name-card">
               <div className="m-2 text-center">
@@ -39,8 +39,8 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
         <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
-        <div className="card-body p-4 mb-5 text-center">
-          <div className="border p-2 bg-primary text-light mx-5">
+        <div className="card-body p-4 text-center">
+          <div className="border p-2 bg-primary text-light mx-md-5">
             {siteName}
           </div>
         </div>

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

@@ -2,8 +2,15 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import AppContainer from '../../../services/AppContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
 
 const CustomBotWithoutProxySecretTokenSection = (props) => {
+  const {
+    appContainer, slackSigningSecret, slackBotToken, slackSigningSecretEnv, slackBotTokenEnv,
+  } = props;
   const { t } = useTranslation();
 
   const onChangeSigningSecretHandler = (signingSecretInput) => {
@@ -18,9 +25,19 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
     }
   };
 
-  const updateSecretTokenHandler = () => {
-    if (props.updateSecretTokenHandler != null) {
-      props.updateSecretTokenHandler();
+
+  const currentBotType = 'customBotWithoutProxy';
+  const updatedSecretToken = async() => {
+    try {
+      await appContainer.apiv3.put('/slack-integration-settings/without-proxy/update-settings', {
+        slackSigningSecret,
+        slackBotToken,
+        currentBotType,
+      });
+      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
+    }
+    catch (err) {
+      toastError(err);
     }
   };
 
@@ -35,7 +52,7 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={props.slackSigningSecret || ''}
+            value={slackSigningSecret || ''}
             onChange={e => onChangeSigningSecretHandler(e.target.value)}
           />
         </div>
@@ -45,7 +62,7 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={props.slackSigningSecretEnv || ''}
+            value={slackSigningSecretEnv || ''}
             readOnly
           />
           <p className="form-text text-muted">
@@ -64,7 +81,7 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={props.slackBotToken || ''}
+            value={slackBotToken || ''}
             onChange={e => onChangeBotTokenHandler(e.target.value)}
           />
         </div>
@@ -74,7 +91,7 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
           <input
             className="form-control"
             type="text"
-            value={props.slackBotTokenEnv || ''}
+            value={slackBotTokenEnv || ''}
             readOnly
           />
           <p className="form-text text-muted">
@@ -85,14 +102,16 @@ const CustomBotWithoutProxySecretTokenSection = (props) => {
 
       </div>
 
-      <AdminUpdateButtonRow onClick={updateSecretTokenHandler} disabled={false} />
+      <AdminUpdateButtonRow onClick={updatedSecretToken} disabled={false} />
 
     </div>
   );
 };
 
+const CustomBotWithoutProxySecretTokenSectionWrapper = withUnstatedContainers(CustomBotWithoutProxySecretTokenSection, [AppContainer]);
+
 CustomBotWithoutProxySecretTokenSection.propTypes = {
-  updateSecretTokenHandler: PropTypes.func,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   onChangeSigningSecretHandler: PropTypes.func,
   onChangeBotTokenHandler: PropTypes.func,
   slackSigningSecret: PropTypes.string,
@@ -101,4 +120,4 @@ CustomBotWithoutProxySecretTokenSection.propTypes = {
   slackBotTokenEnv: PropTypes.string,
 };
 
-export default CustomBotWithoutProxySecretTokenSection;
+export default CustomBotWithoutProxySecretTokenSectionWrapper;

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

@@ -53,7 +53,10 @@ const CustomBotWithoutProxySettings = (props) => {
   return (
 
     <>
-      <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_integration')}</h2>
+      <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_integration')}
+        {/* TODO: add an appropriate links by GW-5614 */}
+        <i className="fa fa-external-link btn-link ml-2" aria-hidden="true"></i>
+      </h2>
 
       <CustomBotWithoutProxyConnectionStatus
         siteName={siteName}

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

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import AppContainer from '../../../services/AppContainer';
-import AdminAppContainer from '../../../services/AdminAppContainer';
-import { withUnstatedContainers } from '../../UnstatedUtils';
 import Accordion from '../Common/Accordion';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
 import CustomBotWithoutProxySecretTokenSection from './CustomBotWithoutProxySecretTokenSection';
 
 export const botInstallationStep = {
@@ -16,36 +12,15 @@ export const botInstallationStep = {
 };
 
 const CustomBotWithoutProxySettingsAccordion = ({
-  appContainer, activeStep,
+  activeStep,
   connectionMessage, connectionErrorCode, testChannel, slackSigningSecret, slackSigningSecretEnv, slackBotToken, slackBotTokenEnv,
   isRegisterSlackCredentials, isIntegrationSuccess,
-  fetchSlackIntegrationData, inputTestChannelHandler, onTestFormSubmitted, onSetSlackSigningSecret, onSetSlackBotToken,
+  inputTestChannelHandler, onTestFormSubmitted, onSetSlackSigningSecret, onSetSlackBotToken,
 }) => {
   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 currentBotType = 'customBotWithoutProxy';
-
-
-  const updateSecretTokenHandler = async() => {
-    try {
-      await appContainer.apiv3.put('/slack-integration-settings/without-proxy/update-settings', {
-        slackSigningSecret,
-        slackBotToken,
-        currentBotType,
-      });
-
-      if (fetchSlackIntegrationData == null) {
-        return null;
-      }
-      fetchSlackIntegrationData();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
-    }
-    catch (err) {
-      toastError(err);
-    }
-  };
 
   const onChangeSigningSecretHandler = (signingSecretInput) => {
     if (onSetSlackSigningSecret != null) {
@@ -123,7 +98,6 @@ const CustomBotWithoutProxySettingsAccordion = ({
         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>}</>}
       >
         <CustomBotWithoutProxySecretTokenSection
-          updateSecretTokenHandler={updateSecretTokenHandler}
           onChangeSigningSecretHandler={onChangeSigningSecretHandler}
           onChangeBotTokenHandler={onChangeBotTokenHandler}
           slackSigningSecret={slackSigningSecret}
@@ -189,10 +163,8 @@ const CustomBotWithoutProxySettingsAccordion = ({
   );
 };
 
-const CustomBotWithoutProxySettingsAccordionWrapper = withUnstatedContainers(CustomBotWithoutProxySettingsAccordion, [AppContainer, AdminAppContainer]);
 
 CustomBotWithoutProxySettingsAccordion.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   slackSigningSecret: PropTypes.string,
   slackSigningSecretEnv: PropTypes.string,
   slackBotToken: PropTypes.string,
@@ -207,8 +179,7 @@ CustomBotWithoutProxySettingsAccordion.propTypes = {
   onSetSlackBotToken: PropTypes.func,
   connectionMessage: PropTypes.string,
   connectionErrorCode: PropTypes.string,
-  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
   activeStep: PropTypes.oneOf(Object.values(botInstallationStep)).isRequired,
 };
 
-export default CustomBotWithoutProxySettingsAccordionWrapper;
+export default CustomBotWithoutProxySettingsAccordion;

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

@@ -77,7 +77,10 @@ const OfficialBotSettings = (props) => {
 
   return (
     <>
-      <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_integration')}</h2>
+      <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_integration')}
+        {/* TODO: add an appropriate links by GW-5614 */}
+        <i className="fa fa-external-link btn-link ml-2" aria-hidden="true"></i>
+      </h2>
       <CustomBotWithProxyConnectionStatus
         siteName={siteName}
         connectionStatuses={connectionStatuses}

src/client/styles/scss/_admin.scss

@@ -90,9 +90,6 @@ $slack-work-space-name-card-border: #efc1f6;
   Slack Integration
   */
   .selecting-bot-type {
-    .btn-link {
-      font-size: 1rem;
-    }
     .supplementary-bot-name {
       font-size: 1rem;
     }
@@ -118,6 +115,14 @@ $slack-work-space-name-card-border: #efc1f6;
     }
   }
 
+  .admin-slack-integration {
+    .admin-setting-header {
+      .btn-link {
+        font-size: 1rem;
+      }
+    }
+  }
+
   .bot-integration {
     .admin-bot-card {
       border-radius: 8px !important;