fix: QueryBlock fixes in notebook

frontend/src/notebook/NotebookPage.vue

@@ -48,9 +48,9 @@ updateDocumentTitle(pageMeta)
 	<div class="flex flex-1 overflow-hidden bg-white px-6 py-2">
 		<div
 			v-if="page.doc.name"
-			class="h-full w-full overflow-y-hidden bg-white pb-96 pt-16 text-base hover:overflow-y-auto"
+			class="h-full w-full overflow-y-auto bg-white pb-96 pt-16 text-base scrollbar-hide"
 		>
-			<div class="w-full px-[6rem] lg:mx-auto lg:max-w-[65rem]">
+			<div class="w-full px-[6rem] lg:mx-auto lg:max-w-[62rem]">
 				<div class="flex items-center">
 					<ContentEditable
 						class="flex-1 text-[36px] font-bold"

frontend/src/notebook/blocks/query/QueryBlock.vue

@@ -1,6 +1,7 @@
 <script setup>
 import NativeQueryEditor from '@/query/NativeQueryEditor.vue'
-import QueryResult from '@/query/ResultSection.vue'
+import ResultSection from '@/query/ResultSection.vue'
+import ResultFooter from '@/query/visual/ResultFooter.vue'
 import useQuery from '@/query/resources/useQuery'
 import useQueryStore from '@/stores/queryStore'
 import { provide, reactive } from 'vue'
@@ -49,17 +50,21 @@ state.removeQuery = () => {
 		<transition name="fade" mode="out-in">
 			<div
 				v-show="state.query.doc.name && !state.minimizeQuery"
-				class="w-full flex-1 overflow-hidden border-t"
+				class="flex min-h-[10rem] w-full flex-1 overflow-hidden border-t"
 			>
-				<NativeQueryEditor :showToolbar="false"></NativeQueryEditor>
+				<NativeQueryEditor></NativeQueryEditor>
 			</div>
 		</transition>
 
 		<div
 			v-if="state.query.results?.formattedResults?.length > 1 && !state.minimizeResult"
 			class="group relative flex max-h-80 flex-col overflow-hidden border-t bg-white"
 		>
-			<QueryResult />
+			<ResultSection>
+				<template #footer>
+					<ResultFooter></ResultFooter>
+				</template>
+			</ResultSection>
 		</div>
 	</div>
 	<div v-else class="flex h-20 w-full flex-col items-center justify-center">

frontend/src/notebook/blocks/query/QueryBlockHeader.vue

@@ -1,16 +1,15 @@
 <script setup lang="jsx">
+import ResizeableInput from '@/components/ResizeableInput.vue'
 import useDataSourceStore from '@/stores/dataSourceStore'
 import { copyToClipboard } from '@/utils'
 import { debounce } from 'frappe-ui'
+import { Component as ComponentIcon } from 'lucide-vue-next'
 import { computed, inject, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import ResizeableInput from '@/components/ResizeableInput.vue'
-import { Component as ComponentIcon } from 'lucide-vue-next'
+import QueryDataSourceSelector from '@/query/QueryDataSourceSelector.vue'
 
 const state = inject('state')
-const debouncedUpdateTitle = debounce(async (title) => {
-	await state.query.updateDoc({ title })
-}, 1500)
+const debouncedUpdateTitle = debounce((title) => state.query.updateTitle(title), 1500)
 
 const show_sql_dialog = ref(false)
 const formattedSQL = computed(() => {
@@ -60,7 +59,7 @@ const dataSourceOptions = computed(() => {
 })
 
 function changeDataSource(sourceName) {
-	state.query.updateDoc({ data_source: sourceName }).then(() => {
+	state.query.changeDataSource(sourceName).then(() => {
 		$notify({
 			title: 'Data source updated',
 			variant: 'success',
@@ -71,8 +70,8 @@ function changeDataSource(sourceName) {
 </script>
 
 <template>
-	<div class="flex h-9 items-center justify-between rounded-t-lg pl-3 pr-1 text-base">
-		<div class="flex items-center font-mono">
+	<div class="flex items-center justify-between rounded-t-lg p-1 pl-3 text-base">
+		<div class="flex items-center font-mono text-sm">
 			<div v-if="state.query.doc.is_stored" class="mr-1">
 				<ComponentIcon class="h-3 w-3 text-gray-600" fill="currentColor" />
 			</div>
@@ -83,22 +82,8 @@ function changeDataSource(sourceName) {
 			></ResizeableInput>
 			<p class="text-gray-600">({{ state.query.doc.name }})</p>
 		</div>
-		<div class="flex items-center space-x-2">
-			<Dropdown
-				:button="{
-					iconLeft: 'database',
-					variant: 'outline',
-					label: currentSource?.title || 'Select data source',
-				}"
-				:options="dataSourceOptions"
-			/>
-			<Button
-				variant="outline"
-				icon="play"
-				label="Execute"
-				:onClick="() => state.query.execute() || (state.minimizeResult = false)"
-				:loading="state.query.executing"
-			/>
+		<div class="flex items-center space-x-1">
+			<QueryDataSourceSelector></QueryDataSourceSelector>
 			<Dropdown
 				:button="{
 					icon: 'more-vertical',
@@ -147,7 +132,7 @@ function changeDataSource(sourceName) {
 				></p>
 				<Button
 					icon="copy"
-					variant="outline"
+					variant="ghost"
 					class="absolute bottom-2 right-2"
 					@click="copyToClipboard(state.query.doc.sql)"
 				></Button>

frontend/src/query/NativeQueryEditor.vue

@@ -56,20 +56,23 @@ watch(
 			:tables="completions.tables"
 			placeholder="Type your query here"
 		></Code>
-		<div v-if="props.showToolbar" class="sticky bottom-0 flex gap-2 border-t bg-white p-2">
+		<div v-if="props.showToolbar" class="sticky bottom-0 flex gap-1 border-t bg-white p-1">
 			<div>
 				<Button
-					variant="subtle"
-					icon="book-open"
+					variant="outline"
+					iconLeft="book-open"
 					@click="showDataExplorer = !showDataExplorer"
-				></Button>
+					label="Tables"
+				>
+				</Button>
 			</div>
 			<div>
 				<Button
-					variant="solid"
-					icon="play"
+					:variant="query.doc.status !== 'Execution Successful' ? 'solid' : 'outline'"
+					iconLeft="play"
 					@click="query.executeSQL(nativeQuery)"
 					:loading="query.loading"
+					label="Run"
 				>
 				</Button>
 			</div>

frontend/src/query/visual/ResultFooter.vue

@@ -16,24 +16,10 @@
 </template>
 
 <script setup>
-import { Download } from 'lucide-vue-next'
-import { computed, inject, ref } from 'vue'
+import { computed, inject } from 'vue'
 
 const query = inject('query')
 const executionTime = computed(() => query.doc.execution_time)
 const queriedRowCount = computed(() => query.doc.results_row_count)
 const displayedRowCount = computed(() => Math.min(query.MAX_ROWS, queriedRowCount.value))
-
-const assistedQuery = inject('assistedQuery')
-const limitInput = ref(null)
-const limit = computed({
-	get: () => assistedQuery.limit,
-	set: (value) => (assistedQuery.limit = value || 100),
-})
-const orderByColumns = computed(() => {
-	return assistedQuery.columns.filter((c) => c.order)
-})
-function getOrder(columnLabel) {
-	return assistedQuery.columns.find((c) => c.label == columnLabel)?.order
-}
 </script>