Added custom bot section

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

@@ -7,13 +7,13 @@ class AccessTokenSettings extends React.Component {
   }
 
   discardHandler() {
-    console.log('Discard button pressed');
+    console.log('Generate button pressed');
   }
 
   render() {
     return (
       <Fragment>
-        <div className="form-group row">
+        <div className="form-group row my-5">
           {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label> */}
           <label className="text-left text-md-right col-md-3 col-form-label">Access Token</label>
           <div className="col-md-6">
@@ -21,14 +21,14 @@ class AccessTokenSettings extends React.Component {
           </div>
         </div>
 
-        <div className="row my-3">
-          <div className="offset-4 col-5">
-            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.updateHandler}>
-              Update
-            </button>
-            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.discardHandler}>
+        <div className="row">
+          <div className="mx-auto">
+            <button type="button" className="btn btn-outline-secondary text-nowrap mx-1" onClick={this.discardHandler}>
               Discard
             </button>
+            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.updateHandler}>
+              Generate
+            </button>
           </div>
         </div>
       </Fragment>

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

@@ -0,0 +1,69 @@
+import React, { Fragment } from 'react';
+// import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+class CustomBotNonProxySettings extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      secretState: '',
+      authState: '',
+    };
+    this.updateHandler = this.updateHandler.bind(this);
+  }
+
+  updateHandler() {
+    console.log(`Signing Secret: ${this.state.secretState}, Bot User OAuth Token: ${this.state.authState}`);
+  }
+
+  render() {
+
+    return (
+      <Fragment>
+        <div className="row my-5">
+          <div className="mx-auto">
+            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://google.com', '_blank')}>
+              Create Bot
+            </button>
+          </div>
+        </div>
+
+        <div className="form-group row">
+          {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label> */}
+          <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) => { this.state.secretState = e.target.value }}
+            />
+          </div>
+        </div>
+
+        <div className="form-group row mb-5">
+          {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label> */}
+          <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) => { this.state.authState = e.target.value }}
+            />
+          </div>
+        </div>
+
+        {/* <AdminUpdateButtonRow /> */}
+        <div className="row">
+          <div className="mx-auto">
+            <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={this.updateHandler}>
+              Update
+            </button>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+
+}
+
+export default CustomBotNonProxySettings;

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

@@ -5,6 +5,7 @@ import React, { Fragment } from 'react';
 // import AppContainer from '../../../services/AppContainer';
 
 import AccessTokenSettings from './AccessTokenSettings';
+import CustomBotNonProxySettings from './CustomBotNonProxySettings';
 
 class SlackIntegration extends React.Component {
 
@@ -17,11 +18,18 @@ class SlackIntegration extends React.Component {
           <div className="col-lg-12">
             {/* <h2 className="admin-setting-header">{t('Access Token')}</h2> */}
             <h2 className="admin-setting-header">Access Token</h2>
-
             <AccessTokenSettings />
+          </div>
+        </div>
 
+        <div className="row">
+          <div className="col-lg-12">
+            {/* <h2 className="admin-setting-header">{t('Access Token')}</h2> */}
+            <h2 className="admin-setting-header">Custom bot (non-proxy) Settings</h2>
+            <CustomBotNonProxySettings />
           </div>
         </div>
+
       </Fragment>
     );
   }