Added modal for changing bot settings

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

@@ -1,7 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+// import { useTranslation } from 'react-i18next';
 
 const ConfirmBotChangeModal = ({ show, onButtonClick }) => {
+  // const { t } = useTranslation();
   const dialog = useRef({});
   useEffect(() => {
     $(dialog.current).modal(show ? 'show' : 'hide');

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

@@ -7,20 +7,28 @@ import CustomBotWithProxySettings from './CustomBotWithProxySettings';
 import ConfirmBotChangeModal from './ConfirmBotChangeModal';
 
 const SlackIntegration = () => {
-
+  const [currentBotType, setcurrentBotType] = useState(null);
+  const [selectedBotType, setSelectedBotType] = useState(null);
   const [modalVisibility, setmodalVisibility] = useState(false);
-  const [currentBotType, setcurrentBotType] = useState('custom-bot-non-proxy');
-  let settingsComponent = null;
-
-  const changeBotSettings = (botType) => {
-    console.log(botType);
-  }
 
   const handleBotTypeSelect = (clickedBotType) => {
-    console.log(clickedBotType);
+    setSelectedBotType(clickedBotType);
     setmodalVisibility(true);
   };
 
+  const handleBotChangeCancel = () => {
+    setSelectedBotType(null);
+    setmodalVisibility(false);
+  };
+
+  const changeCurrentBotSettings = () => {
+    setcurrentBotType(selectedBotType);
+    setSelectedBotType(null);
+    setmodalVisibility(false);
+  };
+
+  let settingsComponent = null;
+
   switch (currentBotType) {
     case 'official-bot':
       settingsComponent = <OfficialBotSettings />;
@@ -31,9 +39,6 @@ const SlackIntegration = () => {
     case 'custom-bot-with-proxy':
       settingsComponent = <CustomBotWithProxySettings />;
       break;
-    default:
-      settingsComponent = <OfficialBotSettings />;
-      break;
   }
 
   return (
@@ -42,8 +47,8 @@ const SlackIntegration = () => {
         <ConfirmBotChangeModal
           show={modalVisibility}
           onButtonClick={(button) => {
-            if (button === 'close') setmodalVisibility(false);
-            if (button === 'change') changeBotSettings();
+            if (button === 'close') handleBotChangeCancel();
+            if (button === 'change') changeCurrentBotSettings();
           }}
         />
       </div>
@@ -61,7 +66,7 @@ const SlackIntegration = () => {
           <div className={`card mx-3 py-5 rounded ${currentBotType === 'official-bot' ? 'border-info' : ''}`}>
             <div className="card-body">
               <h5 className="card-title">Official Bot</h5>
-              <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
               <a href="#" className="stretched-link" onClick={() => handleBotTypeSelect('official-bot')} />
             </div>
           </div>
@@ -77,7 +82,7 @@ const SlackIntegration = () => {
           <div className={`card mx-3 py-5 rounded ${currentBotType === 'custom-bot-with-proxy' ? 'border-info' : ''}`}>
             <div className="card-body">
               <h5 className="card-title">Custom Bot (With Proxy)</h5>
-              <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longerThis is a wider card with supporting text below as a natural lead-This is a wider card with supporting text below as a natural lead-This is a wider card with supporting text below as a natural lead-This is a wider card with supporting text below as a natural lead-</p>
+              <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
               <a href="#" className="stretched-link" onClick={() => handleBotTypeSelect('custom-bot-with-proxy')} />
             </div>
           </div>