feat(sql_console): report errors inline

apps/client/src/components/app_context.ts

@@ -1,6 +1,6 @@
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
-import { SqlExecuteResults } from "@triliumnext/commons";
+import { SqlExecuteResponse } from "@triliumnext/commons";
 import type { NativeImage, TouchBar } from "electron";
 import { ColumnComponent } from "tabulator-tables";
 
@@ -410,7 +410,7 @@ type EventMappings = {
     addNewLabel: CommandData;
     addNewRelation: CommandData;
     sqlQueryResults: CommandData & {
-        results: SqlExecuteResults;
+        response: SqlExecuteResponse;
     };
     readOnlyTemporarilyDisabled: {
         noteContext: NoteContext;

apps/client/src/components/entrypoints.ts

@@ -1,16 +1,17 @@
-import utils from "../services/utils.js";
+import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
+
+import bundleService from "../services/bundle.js";
 import dateNoteService from "../services/date_notes.js";
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import linkService from "../services/link.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import server from "../services/server.js";
+import toastService from "../services/toast.js";
+import utils from "../services/utils.js";
+import ws from "../services/ws.js";
 import appContext, { type NoteCommandData } from "./app_context.js";
 import Component from "./component.js";
-import toastService from "../services/toast.js";
-import ws from "../services/ws.js";
-import bundleService from "../services/bundle.js";
-import froca from "../services/froca.js";
-import linkService from "../services/link.js";
-import { t } from "../services/i18n.js";
-import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -187,13 +188,8 @@ export default class Entrypoints extends Component {
         } else if (note.mime.endsWith("env=backend")) {
             await server.post(`script/run/${note.noteId}`);
         } else if (note.mime === "text/x-sqlite;schema=trilium") {
-            const resp = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
-
-            if (!resp.success) {
-                toastService.showError(t("entrypoints.sql-error", { message: resp.error }));
-            }
-
-            await appContext.triggerEvent("sqlQueryResults", { ntxId: ntxId, results: resp.results });
+            const response = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
+            await appContext.triggerEvent("sqlQueryResults", { ntxId, response });
         }
 
         toastService.showMessage(t("entrypoints.note-executed"));

apps/client/src/translations/en/translation.json

@@ -1817,6 +1817,7 @@
   "sql_result": {
     "not_executed": "The query has not been executed yet.",
     "no_rows": "No rows have been returned for this query",
+    "failed": "SQL query execution has failed",
     "execute_now": "Execute now"
   },
   "sql_table_schemas": {

apps/client/src/widgets/type_widgets/SqlConsole.tsx

@@ -1,6 +1,6 @@
 import "./SqlConsole.css";
 
-import { SchemaResponse, SqlExecuteResults } from "@triliumnext/commons";
+import { SchemaResponse, SqlExecuteResponse } from "@triliumnext/commons";
 import { useEffect, useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 import { ClipboardModule, EditModule, ExportModule, FilterModule, FormatModule, FrozenColumnsModule, KeybindingsModule, PageModule, ResizeColumnsModule, SelectRangeModule, SelectRowModule, SortModule } from "tabulator-tables";
@@ -8,7 +8,6 @@ import { ClipboardModule, EditModule, ExportModule, FilterModule, FormatModule,
 import { t } from "../../services/i18n";
 import server from "../../services/server";
 import Tabulator from "../collections/table/tabulator";
-import Alert from "../react/Alert";
 import Button from "../react/Button";
 import Dropdown from "../react/Dropdown";
 import { useTriliumEvent } from "../react/hooks";
@@ -33,14 +32,15 @@ export default function SqlConsole(props: TypeWidgetProps) {
 }
 
 function SqlResults({ ntxId }: TypeWidgetProps) {
-    const [ results, setResults ] = useState<SqlExecuteResults>();
+    const [ response, setResponse ] = useState<SqlExecuteResponse>();
 
-    useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, results }) => {
+    useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, response }) => {
         if (eventNtxId !== ntxId) return;
-        setResults(results);
+        setResponse(response);
     });
 
-    if (results === undefined) {
+    // Not yet executed.
+    if (response === undefined) {
         return (
             <NoItems
                 icon="bx bx-data"
@@ -54,26 +54,41 @@ function SqlResults({ ntxId }: TypeWidgetProps) {
         );
     }
 
+    // Executed but failed.
+    if (response && !response.success) {
+        return (
+            <NoItems
+                icon="bx bx-error"
+                text={t("sql_result.failed")}
+            >
+                <pre className="sql-error-message selectable-text">{response.error}</pre>
+            </NoItems>
+        );
+    }
+
+    // Zero results.
+    if (response?.results.length === 1 && Array.isArray(response.results[0]) && response.results[0].length === 0) {
+        return (
+            <NoItems
+                icon="bx bx-rectangle"
+                text={t("sql_result.no_rows")}
+            />
+        );
+    }
+
     return (
         <div className="sql-result-widget">
-            {results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? (
-                <NoItems
-                    icon="bx bx-rectangle"
-                    text={t("sql_result.no_rows")}
-                />
-            ) : (
-                <div className="sql-console-result-container selectable-text">
-                    {results?.map((rows, index) => {
-                        // inserts, updates
-                        if (typeof rows === "object" && !Array.isArray(rows)) {
-                            return <pre key={index}>{JSON.stringify(rows, null, "\t")}</pre>;
-                        }
+            <div className="sql-console-result-container selectable-text">
+                {response?.results.map((rows, index) => {
+                    // inserts, updates
+                    if (typeof rows === "object" && !Array.isArray(rows)) {
+                        return <pre key={index}>{JSON.stringify(rows, null, "\t")}</pre>;
+                    }
 
-                        // selects
-                        return <SqlResultTable key={index} rows={rows} />;
-                    })}
-                </div>
-            )}
+                    // selects
+                    return <SqlResultTable key={index} rows={rows} />;
+                })}
+            </div>
         </div>
     );
 }