feat(sql_console): add not yet executed message

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

@@ -1815,7 +1815,9 @@
     "configure_launchbar": "Configure Launchbar"
   },
   "sql_result": {
-    "no_rows": "No rows have been returned for this query"
+    "not_executed": "The query has not been executed yet.",
+    "no_rows": "No rows have been returned for this query",
+    "execute_now": "Execute now"
   },
   "sql_table_schemas": {
     "tables": "Tables"

apps/client/src/widgets/react/NoItems.css

@@ -0,0 +1,18 @@
+.no-items {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    flex-direction: column;
+    padding: 0.75em;
+    color: var(--muted-text-color);
+    height: 100%;
+
+    .tn-icon {
+        font-size: 3em;
+    }
+
+    button {
+        margin-top: 1em;
+    }
+}

apps/client/src/widgets/react/NoItems.tsx

@@ -0,0 +1,21 @@
+import "./NoItems.css";
+
+import { ComponentChildren } from "preact";
+
+import Icon from "./Icon";
+
+interface NoItemsProps {
+    icon: string;
+    text: string;
+    children?: ComponentChildren;
+}
+
+export default function NoItems({ icon, text, children }: NoItemsProps) {
+    return (
+        <div className="no-items">
+            <Icon icon={icon} />
+            {text}
+            {children}
+        </div>
+    );
+}

apps/client/src/widgets/sidebar/RightPanelContainer.css

@@ -40,22 +40,4 @@ body.experimental-feature-new-layout #right-pane {
     .gutter-vertical + .card .card-header {
         padding-top: 0;
     }
-
-    .no-items {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-grow: 1;
-        flex-direction: column;
-        padding: 0.75em;
-        color: var(--muted-text-color);
-
-        .tn-icon {
-            font-size: 3em;
-        }
-
-        button {
-            margin-top: 1em;
-        }
-    }
 }

apps/client/src/widgets/sidebar/RightPanelContainer.tsx

@@ -3,7 +3,7 @@ import "./RightPanelContainer.css";
 
 import Split from "@triliumnext/split.js";
 import { VNode } from "preact";
-import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import { useCallback,useEffect, useRef, useState } from "preact/hooks";
 
 import appContext from "../../components/app_context";
 import { WidgetsByParent } from "../../services/bundle";
@@ -13,6 +13,7 @@ import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
 import Button from "../react/Button";
 import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumEvent, useTriliumOptionJson } from "../react/hooks";
 import Icon from "../react/Icon";
+import NoItems from "../react/NoItems";
 import LegacyRightPanelWidget from "../right_panel_widget";
 import HighlightsList from "./HighlightsList";
 import PdfAttachments from "./pdf/PdfAttachments";
@@ -47,14 +48,15 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare
                 items.length > 0 ? (
                     items
                 ) : (
-                    <div className="no-items">
-                        <Icon icon="bx bx-sidebar" />
-                        {t("right_pane.empty_message")}
+                    <NoItems
+                        icon="bx bx-sidebar"
+                        text={t("right_pane.empty_message")}
+                    >
                         <Button
                             text={t("right_pane.empty_button")}
                             triggerCommand="toggleRightPane"
                         />
-                    </div>
+                    </NoItems>
                 )
             )}
         </div>

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

@@ -9,8 +9,10 @@ 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";
+import NoItems from "../react/NoItems";
 import SplitEditor from "./helpers/SplitEditor";
 import { TypeWidgetProps } from "./type_widget";
 
@@ -30,7 +32,7 @@ export default function SqlConsole(props: TypeWidgetProps) {
     );
 }
 
-function SqlResults({ note, ntxId }: TypeWidgetProps) {
+function SqlResults({ ntxId }: TypeWidgetProps) {
     const [ results, setResults ] = useState<SqlExecuteResults>();
 
     useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, results }) => {
@@ -38,27 +40,38 @@ function SqlResults({ note, ntxId }: TypeWidgetProps) {
         setResults(results);
     });
 
-    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium";
-    return (
-        <div className={`sql-result-widget ${!isEnabled ? "hidden-ext" : ""}`}>
-            {isEnabled && (
-                results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? (
-                    <Alert type="info">
-                        {t("sql_result.no_rows")}
-                    </Alert>
-                ) : (
-                    <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>;
-                            }
+    if (results === undefined) {
+        return (
+            <NoItems
+                icon="bx bx-data"
+                text={t("sql_result.not_executed")}
+            >
+                <Button
+                    text={t("sql_result.execute_now")}
+                    triggerCommand="runActiveNote"
+                />
+            </NoItems>
+        );
+    }
 
-                            // selects
-                            return <SqlResultTable key={index} rows={rows} />;
-                        })}
-                    </div>
-                )
+    return (
+        <div className="sql-result-widget">
+            {results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? (
+                <Alert type="info">
+                    {t("sql_result.no_rows")}
+                </Alert>
+            ) : (
+                <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>;
+                        }
+
+                        // selects
+                        return <SqlResultTable key={index} rows={rows} />;
+                    })}
+                </div>
             )}
         </div>
     );