feat(sql-playground): allow to run selected queries of editor (#2381)

frappe · Dec 21, 2024 · 36d18b9 · 36d18b9
1 parent b95b2e8
commit 36d18b9
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 12 deletions.
diff --git 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
@@ -63,6 +63,8 @@
 					v-model="query"
 					v-if="sqlSchemaForAutocompletion"
 					:schema="sqlSchemaForAutocompletion"
+					@codeSelected="handleCodeSelected"
+					@codeUnselected="handleCodeUnselected"
 				/>
 			</div>
 			<div class="mt-2 flex flex-row items-center justify-between">
@@ -73,13 +75,24 @@
 					<Button iconLeft="file-text" @click="toggleLogsDialog">Logs</Button>
 				</div>
 
-				<Button
-					@click="() => runSQLQuery()"
-					:loading="$resources.runSQLQuery.loading"
-					iconLeft="play"
-					variant="solid"
-					>Run Query</Button
-				>
+				<div class="flex gap-2">
+					<Button
+						v-if="selectedQuery"
+						@click="runSelectedSQLQuery"
+						:loading="$resources.runSQLQuery.loading"
+						iconLeft="play"
+						variant="outline"
+					>
+						Run Selected Query
+					</Button>
+					<Button
+						@click="() => runSQLQuery()"
+						:loading="$resources.runSQLQuery.loading"
+						iconLeft="play"
+						variant="solid"
+						>Run Query</Button
+					>
+				</div>
 			</div>
 			<div
 				class="mt-4"
@@ -170,6 +183,7 @@ export default {
 			site: null,
 			tabIndex: 0,
 			query: '',
+			selectedQuery: null,
 			commit: false,
 			execution_successful: null,
 			data: null,
@@ -284,6 +298,12 @@ export default {
 		}
 	},
 	methods: {
+		handleCodeSelected(selectedCode) {
+			this.selectedQuery = selectedCode;
+		},
+		handleCodeUnselected() {
+			this.selectedQuery = null;
+		},
 		fetchTableSchemas({ site_name = null, reload = false } = {}) {
 			if (!site_name) site_name = this.site;
 			if (!site_name) return;
@@ -296,15 +316,15 @@ export default {
 				}
 			});
 		},
-		runSQLQuery(ignore_validation = false) {
+		runSQLQuery(ignore_validation = false, run_selected_query = false) {
 			if (!this.query) return;
 			if (this.mode === 'read-only' || ignore_validation) {
 				this.$resources.runSQLQuery.submit({
 					dt: 'Site',
 					dn: this.site,
 					method: 'run_sql_query_in_database',
 					args: {
-						query: this.query,
+						query: run_selected_query ? this.selectedQuery : this.query,
 						commit: this.mode === 'read-write'
 					}
 				});
@@ -321,7 +341,28 @@ Are you sure you want to run the query?`,
 					label: 'Run Query',
 					variant: 'solid',
 					onClick: ({ hide }) => {
-						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?
+<br>
+<pre class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-700">${this.selectedQuery}</pre>
+				`,
+				primaryAction: {
+					label: 'Run Query',
+					variant: 'solid',
+					onClick: ({ hide }) => {
+						this.runSQLQuery(false, true);
 						hide();
 					}
 				}