diff --git a/dashboard/src2/components/devtools/database/SQLCodeEditor.vue b/dashboard/src2/components/devtools/database/SQLCodeEditor.vue index 6b778f0b2a..0cedef2d59 100644 --- a/dashboard/src2/components/devtools/database/SQLCodeEditor.vue +++ b/dashboard/src2/components/devtools/database/SQLCodeEditor.vue @@ -22,7 +22,7 @@ export default { Codemirror }, props: ['schema'], - emits: ['update:query'], + emits: ['update:query', 'codeSelected', 'codeUnselected'], computed: { query: { get() { @@ -33,7 +33,7 @@ export default { } } }, - setup(props) { + setup(props, { emit }) { const extensions = [ sql({ dialect: MySQL, @@ -51,6 +51,25 @@ export default { const view = shallowRef(); const handleReady = payload => { view.value = payload.view; + view.value.dom.addEventListener('mouseup', handleSelectionChange); + }; + + const handleSelectionChange = () => { + if (!view.value) return; + + const { state } = view.value; + const selection = state.selection.main; + + // Get the selected text + if (!selection.empty) { + const selectedText = state.doc.sliceString( + selection.from, + selection.to + ); + emit('codeSelected', selectedText); + } else { + emit('codeUnselected'); + } }; return { extensions, diff --git a/dashboard/src2/pages/devtools/database/DatabaseSQLPlayground.vue b/dashboard/src2/pages/devtools/database/DatabaseSQLPlayground.vue index 7abd8543f8..40401b823d 100644 --- a/dashboard/src2/pages/devtools/database/DatabaseSQLPlayground.vue +++ b/dashboard/src2/pages/devtools/database/DatabaseSQLPlayground.vue @@ -63,6 +63,8 @@ v-model="query" v-if="sqlSchemaForAutocompletion" :schema="sqlSchemaForAutocompletion" + @codeSelected="handleCodeSelected" + @codeUnselected="handleCodeUnselected" />
@@ -73,13 +75,24 @@
- +
+ + +
{ - this.runSQLQuery(true); + this.runSQLQuery(true, run_selected_query); + hide(); + } + } + }); + }, + runSelectedSQLQuery() { + if (!this.selectedQuery) { + return; + } + confirmDialog({ + title: 'Verify Query', + message: ` +Are you sure you want to run the query? +
+
${this.selectedQuery}
+ `, + primaryAction: { + label: 'Run Query', + variant: 'solid', + onClick: ({ hide }) => { + this.runSQLQuery(false, true); hide(); } }