Add delete functionality for samples

ui/src/pages/Samples/SampleList.jsx

@@ -2,55 +2,60 @@ import Button from "src/components/Button/Button"
 import { HiOutlinePlusCircle } from "react-icons/hi";
 import { FaPen } from "react-icons/fa6"
 import { BsQuestionSquare } from "react-icons/bs";
+import { FaTrash } from "react-icons/fa";
 import Table from "src/components/Table/Table"
 import style from "./Samples.module.css"
 import TitleDescription from "src/components/TitleDescription/TitleDescription";
 
 
-const SampleList = ({data, onCreate=()=>{}, onEdit = ()=>{}})=>{
-
-
-    const tableColums = [
-        {
-            name: 'Question List',
-            selector: row =><div className="flex flex-align-center flex-gap-10"> <span> <BsQuestionSquare color="#BEBEBE" size={18}/></span> <span> {row.description}</span> </div>  ,
-            grow: 1,
-        },
-        {
-            name: '',
-            selector: row => <><span onClick={()=>onEdit(row)}> <FaPen color="#84BCFF" size={16}/> </span></> ,
-            width: "80px"
-        },
-    ]
-
-    const rowExpandComponent = (row)=>{
-        return(
-             <div className={style.SampleExpandContaner}>
-                <div className={style.SampleExpandRow}>
-                    <span className={style.SampleRowLabel}>Query :</span> <span>{row.data?.sql_metadata?.query}</span>
-                </div>
-                <div className={style.SampleExpandRow}>
-                    <span className={style.SampleRowLabel} style={{marginRight: "5px"}}>Metadata :</span><span>{row.data?.sql_metadata?.metadata}</span>
-                </div>
-            </div>
-        )
-    }
-
-
-    return(
-        <div>
-            <div className="text-align-right" style={{marginBottom: "41px"}}>
-                <Button onClick={onCreate}>Create Sample <HiOutlinePlusCircle/></Button>
-            </div>
-            <div>
-                <TitleDescription title="Samples List" description="Please provide additional samples to enhance the accuracy and effectiveness of the results. More examples will help improve the quality of analysis and ensure better outcomes." />
-            </div>
-            <div>
-                <Table columns={tableColums} data={data} expandableRows={true} expandableRowsComponent={rowExpandComponent} />
-            </div>
+const SampleList = ({ data, onCreate = () => { }, onEdit = () => { }, onDelete = () => { } }) => {
+
+
+  const tableColums = [
+    {
+      name: 'Question List',
+      selector: row => <div className="flex flex-align-center flex-gap-10"> <span> <BsQuestionSquare color="#BEBEBE" size={18} /></span> <span> {row.description}</span> </div>,
+      grow: 1,
+    },
+    {
+      name: '',
+      selector: row => (
+        <div className="flex flex-align-center flex-gap-10">
+          <span onClick={() => onEdit(row)}> <FaPen color="#84BCFF" size={16} /> </span>
+          <span onClick={() => onDelete(row)}> <FaTrash color="#FF6B6B" size={16} /> </span>
+        </div>
+      ),
+      width: "120px"
+    },
+  ]
+  const rowExpandComponent = (row) => {
+    return (
+      <div className={style.SampleExpandContaner}>
+        <div className={style.SampleExpandRow}>
+          <span className={style.SampleRowLabel}>Query :</span> <span>{row.data?.sql_metadata?.query}</span>
+        </div>
+        <div className={style.SampleExpandRow}>
+          <span className={style.SampleRowLabel} style={{ marginRight: "5px" }}>Metadata :</span><span>{row.data?.sql_metadata?.metadata}</span>
         </div>
+      </div>
     )
+  }
+
+
+  return (
+    <div>
+      <div className="text-align-right" style={{ marginBottom: "41px" }}>
+        <Button onClick={onCreate}>Create Sample <HiOutlinePlusCircle /></Button>
+      </div>
+      <div>
+        <TitleDescription title="Samples List" description="Please provide additional samples to enhance the accuracy and effectiveness of the results. More examples will help improve the quality of analysis and ensure better outcomes." />
+      </div>
+      <div>
+        <Table columns={tableColums} data={data} expandableRows={true} expandableRowsComponent={rowExpandComponent} />
+      </div>
+    </div>
+  )
 
 }
 
-export default SampleList
+export default SampleList

ui/src/pages/Samples/Samples.jsx

@@ -3,48 +3,68 @@ import EmptySample from "./EmptySample"
 import Modal from "src/components/Modal/Modal"
 import { useEffect, useState } from "react"
 import SampleForm from "./SampleForm"
-import { getSamples } from "src/services/Sample"
+import { getSamples, deleteSample } from "src/services/Sample"
 import SampleList from "./SampleList"
+import { confirmDialog } from "src/utils/confirmDialog"
+import { toast } from "react-toastify"
 
+const Samples = () => {
+  const [sampleList, setSampleList] = useState([])
+  const [showSampleModal, setSampleModal] = useState(false)
+  const [editSample, setEditSample] = useState({})
 
-const Samples = ()=>{
+  const getAllSamples = () => {
+    getSamples().then(response => {
+      setSampleList(response.data?.data?.sql ?? [])
+    })
+  }
 
-    const [sampleList, setSampleList] = useState([])
-    const [showSampleModal, setSampleModal] = useState(false)
-    const [editSample, setEditSample] = useState({})
+  const onEdit = (sampleData) => {
+    setSampleModal(true)
+    setEditSample(sampleData)
+  }
 
-    const  getAllSamples = ()=>{
-        getSamples().then(response=>{
-            setSampleList(response.data?.data?.sql ?? [])
-        })
-    }
-
-    const onEdit = (sampleData)=>{
-        setSampleModal(true)
-        setEditSample(sampleData)
-    }
-
-    const onCreateNew = ()=>{
-        setSampleModal(true)
-        setEditSample({})
-    }
+  const onCreateNew = () => {
+    setSampleModal(true)
+    setEditSample({})
+  }
 
+  const onDelete = (sampleData) => {
+    confirmDialog({
+      title: "Delete Sample",
+      message: "Are you sure you want to delete this sample?",
+      onConfirm: () => {
+        deleteSample(sampleData.id).then(() => {
+          getAllSamples()
+          toast.success("Sample deleted successfully")
+        }).catch(error => {
+          console.error("Error deleting sample:", error)
+          toast.error("Failed to delete sample. Please try again.")
+        })
+      }
+    })
+  }
 
-    useEffect(()=>{
-        getAllSamples()
-    }, [])
-
-    return(
-       <DashboardBody title="Samples">
-
-        { sampleList?.length == 0 && <EmptySample onCreateClick={()=>setSampleModal(true)} /> }
-        { sampleList?.length > 0 && <SampleList data={sampleList} onCreate={onCreateNew} onEdit={onEdit} /> }
+  useEffect(() => {
+    getAllSamples()
+  }, [])
 
-        <Modal title="Create Sample" show={showSampleModal} onClose={()=>setSampleModal(false)} >
-            <SampleForm sample={editSample} afterCreate={getAllSamples} onCancel={()=>setSampleModal(false)} />
-        </Modal>
-       </DashboardBody>
-    )
+  return (
+    <DashboardBody title="Samples">
+      {sampleList?.length == 0 && <EmptySample onCreateClick={() => setSampleModal(true)} />}
+      {sampleList?.length > 0 && (
+        <SampleList
+          data={sampleList}
+          onCreate={onCreateNew}
+          onEdit={onEdit}
+          onDelete={onDelete}
+        />
+      )}
+      <Modal title="Create Sample" show={showSampleModal} onClose={() => setSampleModal(false)}>
+        <SampleForm sample={editSample} afterCreate={getAllSamples} onCancel={() => setSampleModal(false)} />
+      </Modal>
+    </DashboardBody>
+  )
 }
 
-export default Samples
+export default Samples

ui/src/services/Sample.js

@@ -1,25 +1,28 @@
 import { API_URL } from "src/config/const";
 import GetService from "src/utils/http/GetService";
 import PostService from "src/utils/http/PostService";
+import DeleteService from "src/utils/http/DeleteService";
 
-export const getSamples = ()=>{
-    return GetService(API_URL + "/sql/list")
+export const getSamples = () => {
+  return GetService(API_URL + "/sql/list")
 }
 
-export const saveSamples = (sampleId, data)=>{
-    let apiURL = "/sql/create";
-    if(sampleId){
-        apiURL = `/sql/update/${sampleId}`;
-    }
+export const saveSamples = (sampleId, data) => {
+  let apiURL = "/sql/create";
+  if (sampleId) {
+    apiURL = `/sql/update/${sampleId}`;
+  }
 
-    return PostService(API_URL + apiURL, {
-        connector_id: data.connect_id,
-        description:  data.question,
-        sql_metadata: {
-            query: data.query,
-            metadata:  data.metadata
-        }
-    })
+  return PostService(API_URL + apiURL, {
+    connector_id: data.connect_id,
+    description: data.question,
+    sql_metadata: {
+      query: data.query,
+      metadata: data.metadata
+    }
+  })
 }
 
-
+export const deleteSample = (sampleId) => {
+  return DeleteService(API_URL + `/api/v1/sqldelete/${sampleId}`);
+}