Changed Without Proxy

resource/locales/en_US/admin/admin.json

@@ -264,7 +264,7 @@
       "discard": "Discard",
       "generate": "Generate"
     },
-    "custom_bot_non_proxy_settings": "Custom bot (non-proxy) Settings",
+    "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) Settings",
     "non_proxy": {
       "create_bot": "Create Bot"
     }

resource/locales/ja_JP/admin/admin.json

@@ -262,7 +262,7 @@
       "discard": "破棄",
       "generate": "発行"
     },
-    "custom_bot_non_proxy_settings": "Custom bot (non-proxy) 設定",
+    "custom_bot_without_proxy_settings": "Custom Bot (Without Proxy) 設定",
     "non_proxy": {
       "create_bot": "Bot を作成する"
     }

resource/locales/zh_CN/admin/admin.json

@@ -272,7 +272,7 @@
       "discard": "丢弃",
       "generate": "生成"
     },
-    "custom_bot_non_proxy_settings": "Custom bot (non-proxy) 设置",
+    "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 设置",
     "non_proxy": {
       "create_bot": "创建 Bot"
     }

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

@@ -1,56 +1,44 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import {
+  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 
-const ConfirmBotChangeModal = ({ show, onButtonClick }) => {
+const ConfirmBotChangeModal = ({ show, onConfirmClick, onCancelClick }) => {
   const { t } = useTranslation('admin');
-  const dialog = useRef({});
-  useEffect(() => {
-    $(dialog.current).modal(show ? 'show' : 'hide');
-  }, [show]);
-  useEffect(() => {
-    $(dialog.current).on('hide.bs.modal', () => onButtonClick('close'));
-  }, [onButtonClick]);
 
   return (
-    <div className="modal fade" ref={dialog} id="modalDialog" tabIndex="-1" role="dialog" aria-labelledby="modalDialogLabel" aria-hidden="true">
-      <div className="modal-dialog modal-dialog-centered" role="document">
-        <div className="modal-content">
-          <div className="modal-header">
-            <h5 className="modal-title" id="modalDialogLabel">
-              {t('slack_integration.modal.warning')}
-            </h5>
-            <button type="button" className="close" aria-label="Close" onClick={() => onButtonClick('close')}>
-              <span aria-hidden="true">&times;</span>
-            </button>
+    <>
+      <Modal isOpen={show} centered>
+        <ModalHeader toggle={onCancelClick}>
+          {t('slack_integration.modal.warning')}
+        </ModalHeader>
+        <ModalBody>
+          <div>
+            <h4>{t('slack_integration.modal.sure_change_bot_type')}</h4>
           </div>
-
-          <div className="modal-body">
-            <div>
-              <h4>{t('slack_integration.modal.sure_change_bot_type')}</h4>
-            </div>
-            <div>
-              <p>{t('slack_integration.modal.changes_will_be_deleted')}</p>
-            </div>
-          </div>
-
-          <div className="modal-footer">
-            <button type="button" className="btn btn-secondary" onClick={() => onButtonClick('close')}>
-              {t('slack_integration.modal.cancel')}
-            </button>
-            <button type="button" className="btn btn-primary" onClick={() => onButtonClick('change')}>
-              {t('slack_integration.modal.change')}
-            </button>
+          <div>
+            <p>{t('slack_integration.modal.changes_will_be_deleted')}</p>
           </div>
-        </div>
-      </div>
-    </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={onCancelClick}>
+            {t('slack_integration.modal.cancel')}
+          </Button>
+          <Button color="primary" onClick={onConfirmClick}>
+            {t('slack_integration.modal.change')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
   );
 };
 
 ConfirmBotChangeModal.propTypes = {
   show: PropTypes.bool.isRequired,
-  onButtonClick: PropTypes.func.isRequired,
+  onConfirmClick: PropTypes.func.isRequired,
+  onCancelClick: PropTypes.func.isRequired,
 };
 
 export default ConfirmBotChangeModal;

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

@@ -6,7 +6,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-const CustomBotNonProxySettings = (props) => {
+const CustomBotWithoutProxySettings = (props) => {
   const { appContainer } = props;
   const { t } = useTranslation();
 
@@ -43,7 +43,7 @@ const CustomBotNonProxySettings = (props) => {
         slackBotToken,
         botType,
       });
-      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_non_proxy_settings') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
     }
     catch (err) {
       toastError(err);
@@ -52,7 +52,7 @@ const CustomBotNonProxySettings = (props) => {
 
   return (
     <>
-      <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_non_proxy_settings')}</h2>
+      <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_settings')}</h2>
       <div className="row my-5">
         <div className="mx-auto">
           <button
@@ -93,10 +93,10 @@ const CustomBotNonProxySettings = (props) => {
   );
 };
 
-const CustomBotNonProxySettingsWrapper = withUnstatedContainers(CustomBotNonProxySettings, [AppContainer]);
+const CustomBotWithoutProxySettingsWrapper = withUnstatedContainers(CustomBotWithoutProxySettings, [AppContainer]);
 
-CustomBotNonProxySettings.propTypes = {
+CustomBotWithoutProxySettings.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
-export default CustomBotNonProxySettingsWrapper;
+export default CustomBotWithoutProxySettingsWrapper;

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import AccessTokenSettings from './AccessTokenSettings';
 import OfficialBotSettings from './OfficialBotSettings';
-import CustomBotNonProxySettings from './CustomBotNonProxySettings';
+import CustomBotWithoutProxySettings from './CustomBotWithoutProxySettings';
 import CustomBotWithProxySettings from './CustomBotWithProxySettings';
 import ConfirmBotChangeModal from './ConfirmBotChangeModal';
 
@@ -12,6 +12,9 @@ const SlackIntegration = () => {
   const [modalVisibility, setmodalVisibility] = useState(false);
 
   const handleBotTypeSelect = (clickedBotType) => {
+    if (clickedBotType === currentBotType) {
+      return;
+    }
     setSelectedBotType(clickedBotType);
     setmodalVisibility(true);
   };
@@ -34,7 +37,7 @@ const SlackIntegration = () => {
       settingsComponent = <OfficialBotSettings />;
       break;
     case 'custom-bot-non-proxy':
-      settingsComponent = <CustomBotNonProxySettings />;
+      settingsComponent = <CustomBotWithoutProxySettings />;
       break;
     case 'custom-bot-with-proxy':
       settingsComponent = <CustomBotWithProxySettings />;
@@ -46,10 +49,8 @@ const SlackIntegration = () => {
       <div className="container">
         <ConfirmBotChangeModal
           show={modalVisibility}
-          onButtonClick={(button) => {
-            if (button === 'close') handleBotChangeCancel();
-            if (button === 'change') changeCurrentBotSettings();
-          }}
+          onConfirmClick={changeCurrentBotSettings}
+          onCancelClick={handleBotChangeCancel}
         />
       </div>