Added 2 components

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

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 function CustomBotNonProxySettings() {
-
   const { t } = useTranslation('admin');
   const [secret, setSecret] = useState('');
   const [token, setToken] = useState('');
@@ -15,39 +14,35 @@ function CustomBotNonProxySettings() {
   }
 
   return (
-    <>
-      <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 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>
-      </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 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>
 
-      <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 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>
-      </div>
 
-      <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
-    </>
+        <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
+      </div>
+    </div>
   );
 }
 

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const CustomBotWithProxySettings = () => {
+
+  return (
+    <div className="row my-5">
+      <h1>With Proxy Component</h1>
+    </div>
+  );
+}
+
+export default CustomBotWithProxySettings;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const OfficialBotSettings = () => {
+
+  return (
+    <div className="row my-5">
+      <h1>OfficialBotSettings Component</h1>
+    </div>
+  );
+}
+
+export default OfficialBotSettings;

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

@@ -2,11 +2,34 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AccessTokenSettings from './AccessTokenSettings';
+import OfficialBotSettings from './CustomBotNonProxySettings';
 import CustomBotNonProxySettings from './CustomBotNonProxySettings';
+import CustomBotWithProxySettings from './CustomBotWithProxySettings';
 
-function SlackIntegration() {
+const SlackIntegration = () => {
+
+
+  const handleBotTypeSelect = (e) => {
+    console.log(e.target.value);
+  };
+
+  // const selectedBotType = 'official-bot';
+  const selectedBotType = 'custom-bot-non-proxy';
+  // const selectedBotType = 'custom-bot-with-proxy';
+  let settingsComponent = '';
+
+  switch (selectedBotType) {
+    case 'custom-bot-non-proxy':
+      settingsComponent = <CustomBotNonProxySettings />;
+      break;
+    case 'custom-bot-with-proxy':
+      settingsComponent = <CustomBotWithProxySettings />;
+      break;
+    default:
+      settingsComponent = <OfficialBotSettings />;
+      break;
+  }
 
-  const { t } = useTranslation('admin');
   return (
     <>
       <div className="row">
@@ -16,24 +39,25 @@ function SlackIntegration() {
         </div>
       </div>
 
-      <div className="row mx-auto my-5 btn-group btn-group-toggle" data-toggle="buttons">
-        <label className="btn btn-secondary active">
-          <input type="radio" name="options" id="option1" checked /> Official Bot
-        </label>
-        <label className="btn btn-secondary">
-          <input type="radio" name="options" id="option2" /> Custom Bot (Non-Proxy)
-        </label>
-        <label className="btn btn-secondary">
-          <input type="radio" name="options" id="option3" /> Custom Bot (With-Proxy)
-        </label>
-      </div>
-
-      <div className="row">
-        <div className="col-lg-12">
-          <h2 className="admin-setting-header">{t('slack_integration.custom_bot_non_proxy_settings')}</h2>
-          <CustomBotNonProxySettings />
+      <div className="row my-5">
+        <div className="mx-auto form-check" onChange={handleBotTypeSelect}>
+          <div className="form-check-inline">
+            <input className="form-check-input" type="radio" id="checkbox1" value="official-bot" />
+            <label className="form-check-label" htmlFor="checkbox1">Official Bot</label>
+          </div>
+          <div className="form-check-inline">
+            <input className="form-check-input" type="radio" id="checkbox2" value="custom-bot-non-proxy" />
+            <label className="form-check-label" htmlFor="checkbox2">Custom Bot (Non Proxy)</label>
+          </div>
+          <div className="form-check-inline">
+            <input className="form-check-input" type="radio" id="checkbox3" value="custom-bot-with-proxy" />
+            <label className="form-check-label" htmlFor="checkbox3">Custom Bot (With Proxy)</label>
+          </div>
         </div>
       </div>
+
+      {settingsComponent}
+
     </>
   );
 }