chore: add confirm modal when delete connection

components/ActionConfirmModal.tsx

@@ -0,0 +1,43 @@
+import Icon from "./Icon";
+
+export interface ActionConfirmModalProps {
+  title: string;
+  content: string;
+  confirmButtonStyle: string;
+  close: () => void;
+  confirm: () => void;
+}
+
+const ActionConfirmModal = (props: ActionConfirmModalProps) => {
+  const { close, confirm, title, content, confirmButtonStyle } = props;
+
+  return (
+    <div className="modal modal-middle modal-open">
+      <div className="modal-box relative">
+        <h3 className="font-bold text-lg">{title}</h3>
+        <button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
+          <Icon.IoMdClose className="w-5 h-auto" />
+        </button>
+        <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
+          <p className="text-gray-500">{content}</p>
+        </div>
+        <div className="modal-action">
+          <button className="btn btn-outline" onClick={close}>
+            Close
+          </button>
+          <button
+            className={`btn ${confirmButtonStyle}`}
+            onClick={() => {
+              confirm();
+              close();
+            }}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActionConfirmModal;

components/ConnectionSidebar.tsx

@@ -7,10 +7,12 @@ import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 import CreateConnectionModal from "./CreateConnectionModal";
 import SettingModal from "./SettingModal";
+import ActionConfirmModal, { ActionConfirmModalProps } from "./ActionConfirmModal";
 
 interface State {
   showCreateConnectionModal: boolean;
   showSettingModal: boolean;
+  showDeleteConnectionModal: boolean;
 }
 
 const ConnectionSidebar = () => {
@@ -20,7 +22,9 @@ const ConnectionSidebar = () => {
   const [state, setState] = useState<State>({
     showCreateConnectionModal: false,
     showSettingModal: false,
+    showDeleteConnectionModal: false,
   });
+  const [deleteConnectionModalContext, setDeleteConnectionModalContext] = useState<ActionConfirmModalProps>();
   const connectionList = connectionStore.connectionList;
   const currentConnectionCtx = connectionStore.currentConnectionCtx;
   const databaseList = connectionStore.databaseList.filter((database) => database.connectionId === currentConnectionCtx?.connection.id);
@@ -51,10 +55,27 @@ const ConnectionSidebar = () => {
   };
 
   const handleDeleteConnection = (connection: Connection) => {
+    setState({
+      ...state,
+      showDeleteConnectionModal: true,
+    });
+    setDeleteConnectionModalContext({
+      title: "Delete Connection",
+      content: "Are you sure to delete this connection?",
+      confirmButtonStyle: "btn-error",
+      close: () => {
+        setState({
+          ...state,
+          showDeleteConnectionModal: false,
+        });
+      },
+      confirm: () => {
         connectionStore.clearConnection((item) => item.id !== connection.id);
         if (currentConnectionCtx?.connection.id === connection.id) {
           connectionStore.setCurrentConnectionCtx(undefined);
         }
+      },
+    });
   };
 
   const handleDatabaseNameSelect = async (databaseName: string) => {
@@ -201,6 +222,18 @@ const ConnectionSidebar = () => {
       )}
 
       {createPortal(<SettingModal show={state.showSettingModal} close={() => toggleSettingModal(false)} />, document.body)}
+
+      {state.showDeleteConnectionModal &&
+        createPortal(
+          <ActionConfirmModal
+            title={deleteConnectionModalContext?.title ?? ""}
+            content={deleteConnectionModalContext?.content ?? ""}
+            confirmButtonStyle={deleteConnectionModalContext?.confirmButtonStyle ?? ""}
+            close={deleteConnectionModalContext?.close ?? (() => {})}
+            confirm={deleteConnectionModalContext?.confirm ?? (() => {})}
+          />,
+          document.body
+        )}
     </>
   );
 };