feat: add delete function for SQL snippets in QueryConsole

frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue

@@ -5,16 +5,20 @@
     :visible.sync="iVisible"
     width="40%"
     :modal="false"
+    :append-to-body="true"
   >
     <div>
       <el-table class="snippet-table" :data="snippets">
         <el-table-column property="name" :label="$tc('Name')" width="120px" />
         <el-table-column show-overflow-tooltip property="args" :label="$tc('Content')" />
-        <el-table-column width="80px" label="">
+        <el-table-column width="140px" label="">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="onSelectSnippet(scope.row)">
               {{ $tc('Insert') }}
             </el-button>
+            <el-button type="text" size="small" @click="onDeleteSnippet(scope.row)">
+              {{ $tc('Delete') }}
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -23,6 +27,8 @@
 </template>
 
 <script>
+import axios from 'axios'
+import VueCookie from 'vue-cookie'
 import store from '@/store'
 import { getSnippets } from '@/api/jms'
 
@@ -53,6 +59,14 @@ export default {
     this.loadSnippets()
   },
   methods: {
+    getCsrfToken() {
+      let cookieNamePrefix = VueCookie.get('SESSION_COOKIE_NAME_PREFIX')
+      if (!cookieNamePrefix || ['""', '\'\''].indexOf(cookieNamePrefix) > -1) {
+        cookieNamePrefix = ''
+      }
+      const TOKEN_KEY = `${cookieNamePrefix}csrftoken`
+      return VueCookie.get(TOKEN_KEY)
+    },
     loadSnippets() {
       const sqlType = store.getters.profile?.dbType
       getSnippets().then(data => {
@@ -61,6 +75,23 @@ export default {
     },
     onSelectSnippet(item) {
       this.$emit('select', item.args)
+    },
+    onDeleteSnippet(item) {
+      this.$confirm(this.$tc('ConfirmDelete'), this.$tc('Warning'), {
+        confirmButtonText: this.$tc('Confirm'),
+        cancelButtonText: this.$tc('Cancel'),
+        type: 'warning'
+      }).then(() => {
+        const csrfToken = this.getCsrfToken()
+        axios.delete(`/api/v1/ops/adhocs/${item.id}/`, {
+          headers: {
+            'X-CSRFToken': csrfToken
+          }
+        }).then(() => {
+          this.$message.success(this.$tc('DeleteSuccess'))
+          this.loadSnippets()
+        })
+      }).catch(() => {})
     }
   }
 }