Added modal

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

@@ -1,13 +1,57 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
+
+const ConfirmBotChangeModal = ({ show, onButtonClick }) => {
+
+  const dialog = useRef({});
+  useEffect(() => { $(dialog.current).modal(show ? 'show' : 'hide') }, [show]);
+  useEffect(() => { $(dialog.current).on('hide.bs.modal', () => onButtonClick('close')) }, []);
 
-const ConfirmBotChangeModal = () => {
   return (
-    <>
-      <div className="modal">
-        aa
+    <div
+      className="modal fade"
+      ref={dialog}
+      id="modalDialog"
+      tabIndex="-1"
+      role="dialog"
+      aria-labelledby="modalDialogLabel"
+      aria-hidden="true"
+    >
+      <div className="modal-dialog" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title" id="modalDialogLabel">TITLE</h5>
+            <button
+              type="button"
+              className="close"
+              aria-label="Close"
+              onClick={() => onButtonClick('close')}
+          >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            <h1>asdfasdfasdfasdf</h1>
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={() => onButtonClick('close')}
+            >
+              Close
+            </button>
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => onButtonClick('save')}
+            >
+              Save
+            </button>
+          </div>
+        </div>
       </div>
-    </>
+    </div>
   );
-}
+};
 
 export default ConfirmBotChangeModal;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import AccessTokenSettings from './AccessTokenSettings';
 import OfficialBotSettings from './OfficialBotSettings';
@@ -30,9 +30,29 @@ const SlackIntegration = () => {
       break;
   }
 
+  const [showDialog, setShowDialog] = useState(false);
+
   return (
     <>
-      <ConfirmBotChangeModal />
+      <div className="container">
+        <ConfirmBotChangeModal
+          title="Modal Title"
+          show={showDialog}
+          onButtonClick={(button) => {
+            if (button === 'close') setShowDialog(false);
+            if (button === 'save') console.log('save button clicked');
+          }}
+        />
+        <button
+          className="btn btn-primary"
+          type="button"
+          onClick={() => {
+          setShowDialog(true);
+        }}
+        >
+          Show Dialog
+        </button>
+      </div>
 
       <div className="row">
         <div className="col-lg-12">