Made modal

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

@@ -1,50 +1,42 @@
 import React, { useRef, useEffect } from 'react';
 
-const ConfirmBotChangeModal = ({ show, onButtonClick }) => {
 
+const ConfirmBotChangeModal = ({ show, onButtonClick }) => {
   const dialog = useRef({});
-  useEffect(() => { $(dialog.current).modal(show ? 'show' : 'hide') }, [show]);
-  useEffect(() => { $(dialog.current).on('hide.bs.modal', () => onButtonClick('close')) }, []);
+  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" role="document">
+    <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">TITLE</h5>
-            <button
-              type="button"
-              className="close"
-              aria-label="Close"
-              onClick={() => onButtonClick('close')}
-          >
+            <h5 className="modal-title" id="modalDialogLabel">
+              Warning
+            </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>
+              <h4>Are you sure you want to change the bot type?</h4>
+            </div>
+            <div>
+              <p>Settings from other bots will be deleted.</p>
+            </div>
           </div>
+
           <div className="modal-footer">
-            <button
-              type="button"
-              className="btn btn-secondary"
-              onClick={() => onButtonClick('close')}
-            >
+            <button type="button" className="btn btn-secondary" onClick={() => onButtonClick('close')}>
               Close
             </button>
-            <button
-              type="button"
-              className="btn btn-primary"
-              onClick={() => onButtonClick('save')}
-            >
+            <button type="button" className="btn btn-primary" onClick={() => onButtonClick('save')}>
               Save
             </button>
           </div>

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

@@ -7,9 +7,12 @@ import CustomBotWithProxySettings from './CustomBotWithProxySettings';
 import ConfirmBotChangeModal from './ConfirmBotChangeModal';
 
 const SlackIntegration = () => {
+
+  const [modalVisibility, setmodalVisibility] = useState(false);
+
   const handleBotTypeSelect = (clickedBotType) => {
     console.log(clickedBotType);
-    // showModal();
+    setmodalVisibility(true);
   };
 
   const currentBotType = 'custom-bot-non-proxy';
@@ -30,28 +33,19 @@ const SlackIntegration = () => {
       break;
   }
 
-  const [showDialog, setShowDialog] = useState(false);
+
 
   return (
     <>
       <div className="container">
         <ConfirmBotChangeModal
           title="Modal Title"
-          show={showDialog}
+          show={modalVisibility}
           onButtonClick={(button) => {
-            if (button === 'close') setShowDialog(false);
+            if (button === 'close') setmodalVisibility(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">