Support refreshing the table list. Reload the query and the table

core/src/test/java/tanin/backdoor/ux/RefreshTest.java

@@ -0,0 +1,102 @@
+package tanin.backdoor.ux;
+
+import org.junit.jupiter.api.Test;
+import tanin.backdoor.Base;
+import tanin.backdoor.core.engine.Engine;
+
+import java.net.URISyntaxException;
+import java.sql.SQLException;
+import java.time.Instant;
+import java.util.List;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+public class RefreshTest extends Base {
+  @Test
+  void refreshTableList() throws Exception {
+    go("/");
+    click(tid("database-item", "postgres"));
+
+    assertEquals("loaded", elem(tid("database-item", "postgres")).getDomAttribute("data-database-status"));
+    assertEquals(
+      List.of("user"),
+      elems(tid("menu-items", "postgres", null, "menu-item-table")).stream().map(e -> e.getDomAttribute("data-test-value")).toList()
+    );
+
+    try (var engine = server.engineProvider.createEngine(postgresConfig, null)) {
+      engine.connection.createStatement().execute("""
+            CREATE TABLE "new_table" (
+              id INT PRIMARY KEY
+            )
+        """);
+    }
+
+    click(tid("database-item", "postgres", null, "more-option-data-source-button"));
+    click(tid("refresh-data-source-button"));
+
+    waitUntil(() -> {
+      assertEquals(
+        List.of("new_table", "user"),
+        elems(tid("menu-items", "postgres", null, "menu-item-table")).stream().map(e -> e.getDomAttribute("data-test-value")).toList()
+      );
+    });
+  }
+
+  @Test
+  void refreshTableData() throws Exception {
+    go("/");
+    click(tid("database-item", "postgres"));
+    waitUntil(() -> assertEquals("loaded", elem(tid("database-item", "postgres")).getDomAttribute("data-database-status")));
+    click(tid("menu-items", "postgres", null, "menu-item-table", "user"));
+
+    assertColumnValues("username", "test_user_1", "test_user_2", "test_user_3", "test_user_4");
+
+    try (var engine = server.engineProvider.createEngine(postgresConfig, null)) {
+      engine.connection.createStatement().execute("""
+        INSERT INTO "user" (
+          id,
+          username,
+          password
+        ) VALUES (
+          '5',
+          'new_test_user',
+          'new_password'
+        )
+        """);
+    }
+
+    click(tid("refresh-button"));
+
+    assertColumnValues("username", "test_user_1", "test_user_2", "test_user_3", "test_user_4", "new_test_user");
+  }
+
+  @Test
+  void refreshQueryData() throws Exception {
+    go("/");
+    click(tid("database-item", "postgres"));
+    waitUntil(() -> assertEquals("loaded", elem(tid("database-item", "postgres")).getDomAttribute("data-database-status")));
+
+    fillCodeMirror("select * from \"user\" order by id asc");
+    click(tid("run-sql-button"));
+
+    assertColumnValues("username", "test_user_1", "test_user_2", "test_user_3", "test_user_4");
+
+    try (var engine = server.engineProvider.createEngine(postgresConfig, null)) {
+      engine.connection.createStatement().execute("""
+        INSERT INTO "user" (
+          id,
+          username,
+          password
+        ) VALUES (
+          '5',
+          'new_test_user',
+          'new_password'
+        )
+        """);
+    }
+
+    click(tid("refresh-button"));
+
+    assertColumnValues("username", "test_user_1", "test_user_2", "test_user_3", "test_user_4", "new_test_user");
+  }
+}

frontend/svelte/_sheet_view.svelte

@@ -280,6 +280,15 @@ function handleResize(event: MouseEvent) {
         {#if sheet.type === 'table'}
           <Button class="btn btn-xs btn-ghost text-success p-0" onClick={async () => {insertModal.open()}} dataTestId="insert-row-button">Insert Row</Button>
         {/if}
+        <Button
+          class="btn btn-xs btn-ghost text-info p-0"
+          onClick={async () => {
+            if (sheet) {
+              void loadDataWithNewSorts(sheet.sorts)
+            }
+          }}
+          dataTestId="refresh-button"
+        >Refresh</Button>
       </div>
       <div class="flex gap-4 items-baseline">
         <div>[{sheet.database}]</div>

frontend/svelte/_table_menu_list.svelte

@@ -24,23 +24,21 @@ let expanded = true
 
 let moreOptionTooltip: Instance;
 
-onMount(() => {
-  if (database.isAdHoc) {
-    moreOptionTooltip = tippy(moreButton, {
-      content: tooltip,
-      allowHTML: true,
-      interactive: true,
-      trigger: 'click',
-      duration: 0,
-      offset: [0, 0],
-      placement: 'bottom'
-    });
-    tooltip.style.display = "block";
-  }
-})
+$: if (moreButton && tooltip && !moreOptionTooltip) {
+  moreOptionTooltip = tippy(moreButton, {
+    content: tooltip,
+    allowHTML: true,
+    interactive: true,
+    trigger: 'click',
+    duration: 0,
+    offset: [0, 0],
+    placement: 'bottom'
+  });
+  tooltip.style.display = "block";
+}
 </script>
 
-{#if database.isAdHoc}
+<div>
   <div class="hidden" bind:this={tooltip}>
     <ul
       class="menu flex flex-col gap-0 border border-gray-500 rounded-lg bg-accent-content p-0"
@@ -58,36 +56,36 @@ onMount(() => {
           <span class="text-xs">Refresh</span>
         </div>
       </li>
-      <li>
-        <div
-          class="flex items-center gap-1 px-2 py-1 cursor-pointer"
-          data-test-id="edit-data-source-button"
-          onclick={() => {
-            moreOptionTooltip.hide()
-            onEditing()
-          }}
-        >
-          <i class="ph ph-pencil-simple text-xs"></i>
-          <span class="text-xs">Edit</span>
-        </div>
-      </li>
-      <li>
-        <div
-          class="flex items-center gap-1 px-2 py-1 cursor-pointer"
-          data-test-id="delete-data-source-button"
-          onclick={() => {
-            moreOptionTooltip.hide()
-            onDeleting()
-          }}
-        >
-          <i class="ph ph-trash text-xs"></i>
-          <span class="text-xs">Remove</span>
-        </div>
-      </li>
+      {#if database.isAdHoc}
+        <li>
+          <div
+            class="flex items-center gap-1 px-2 py-1 cursor-pointer"
+            data-test-id="edit-data-source-button"
+            onclick={() => {
+              moreOptionTooltip.hide()
+              onEditing()
+            }}
+          >
+            <i class="ph ph-pencil-simple text-xs"></i>
+            <span class="text-xs">Edit</span>
+          </div>
+        </li>
+        <li>
+          <div
+            class="flex items-center gap-1 px-2 py-1 cursor-pointer"
+            data-test-id="delete-data-source-button"
+            onclick={() => {
+              moreOptionTooltip.hide()
+              onDeleting()
+            }}
+          >
+            <i class="ph ph-trash text-xs"></i>
+            <span class="text-xs">Remove</span>
+          </div>
+        </li>
+      {/if}
     </ul>
   </div>
-{/if}
-<div>
   <div
     class="flex items-center gap-2 justify-between {isLoading ? 'cursor-progress' : 'cursor-pointer'}"
     class:opacity-50={isLoading}
@@ -118,17 +116,15 @@ onMount(() => {
       <span
         class="overflow-hidden text-ellipsis font-mono text-xs whitespace-nowrap underline">{database.nickname}</span>
     </div>
-    {#if database.isAdHoc}
-      <i
-        bind:this={moreButton}
-        class="ph ph-dots-three-vertical text-sm z-10 px-1 py-2 cursor-pointer"
-        data-test-id="more-option-data-source-button"
-        onclick={(ev) => {
-          ev.stopPropagation()
-          moreOptionTooltip.show()
-        }}
-      ></i>
-    {/if}
+    <i
+      bind:this={moreButton}
+      class="ph ph-dots-three-vertical text-sm z-10 px-1 py-2 cursor-pointer"
+      data-test-id="more-option-data-source-button"
+      onclick={(ev) => {
+        ev.stopPropagation()
+        moreOptionTooltip.show()
+      }}
+    ></i>
   </div>
   {#if database.status === 'loaded'}
     <ul

frontend/svelte/index.svelte

@@ -222,7 +222,7 @@ export async function runSql(database: string, sql: string): Promise<void> {
         </div>
       </div>
       <div class="grow-1 overflow-y-auto">
-        {#each databases as database, index (index)}
+        {#each databases as database, index (database.nickname)}
           <TableMenuList
             {database}
             {queries}

web/src/test/java/tanin/backdoor/web/AdHocDataSourceTest.java

@@ -30,7 +30,7 @@ void addExpandEditAndDeletePostgres() throws InterruptedException {
       elems(tid("menu-items", "adhoc-test", null, "menu-item-table")).stream().map(e -> e.getDomAttribute("data-test-value")).toList()
     );
 
-    click(tid("more-option-data-source-button"));
+    click(tid("database-item", "adhoc-test", null, "more-option-data-source-button"));
     click(tid("edit-data-source-button"));
     fill(tid("nickname"), "adhoc-test-updated");
     click(tid("submit-button"));
@@ -47,7 +47,7 @@ void addExpandEditAndDeletePostgres() throws InterruptedException {
     );
 
 
-    click(tid("more-option-data-source-button"));
+    click(tid("database-item", "adhoc-test-updated", null, "more-option-data-source-button"));
     click(tid("delete-data-source-button"));
     click(tid("submit-button"));
     waitUntil(() -> assertFalse(hasElem(tid("submit-button"))));
@@ -80,7 +80,7 @@ void addClickHouseAndEditValidated() throws InterruptedException {
       elems(tid("menu-items", "adhoc-test", null, "menu-item-table")).stream().map(e -> e.getDomAttribute("data-test-value")).toList()
     );
 
-    click(tid("more-option-data-source-button"));
+    click(tid("database-item", "adhoc-test", null, "more-option-data-source-button"));
     click(tid("edit-data-source-button"));
     fill(tid("url"), "jdbc:ch://127.0.0.1:8123/backdoor_test2");
     click(tid("submit-button"));