fix(query): add timeout settings entry to error page

apps/desktop/src/components/common/QueryErrorActions.vue

@@ -3,7 +3,7 @@ import { Bot, Wrench } from "@lucide/vue";
 import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
 import type { BackendError } from "@/lib/backend/errorUtils";
-import { isQueryTimeoutErrorMessage } from "@/lib/sql/queryError";
+import { isConnectionTimeoutErrorMessage, isQueryTimeoutErrorMessage } from "@/lib/sql/queryError";
 
 const props = defineProps<{
   errorMessage: string;
@@ -12,6 +12,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
+  changeConnectionTimeout: [];
   changeQueryTimeout: [];
   fixWithAi: [errorMessage: string];
 }>();
@@ -20,6 +21,10 @@ const { t } = useI18n();
 </script>
 
 <template>
+  <Button v-if="connectionId && isConnectionTimeoutErrorMessage(errorMessage, backendError)" variant="outline" size="sm" class="h-7 gap-1.5 px-2.5 text-xs" @click="emit('changeConnectionTimeout')">
+    <Wrench class="h-3.5 w-3.5" />
+    {{ t("editor.changeConnectionTimeout") }}
+  </Button>
   <Button v-if="connectionId && isQueryTimeoutErrorMessage(errorMessage, backendError)" variant="outline" size="sm" class="h-7 gap-1.5 px-2.5 text-xs" @click="emit('changeQueryTimeout')">
     <Wrench class="h-3.5 w-3.5" />
     {{ t("editor.changeQueryTimeout") }}

apps/desktop/src/components/common/__tests__/QueryErrorActions.spec.ts

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+
+import { createApp, h, nextTick, type App } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import QueryErrorActions from "@/components/common/QueryErrorActions.vue";
+import i18n from "@/i18n";
+
+const mountedApps: App[] = [];
+
+async function mountActions(errorMessage: string, onChangeConnectionTimeout = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const app = createApp({
+    setup: () => () => h(QueryErrorActions, { errorMessage, connectionId: "postgres-1", onChangeConnectionTimeout }),
+  });
+  mountedApps.push(app);
+  app.use(i18n);
+  app.mount(host);
+  await nextTick();
+  return { host, onChangeConnectionTimeout };
+}
+
+afterEach(() => {
+  for (const app of mountedApps.splice(0)) app.unmount();
+  document.body.replaceChildren();
+});
+
+describe("QueryErrorActions", () => {
+  it("offers connection timeout settings for PostgreSQL connection creation timeouts", async () => {
+    const { host, onChangeConnectionTimeout } = await mountActions("PostgreSQL connection failed: Timeout occurred while creating a new object SQL text omitted from user-facing error");
+    const timeoutButton = Array.from(host.querySelectorAll("button")).find((button) => button.textContent?.includes("Change connection timeout"));
+
+    expect(timeoutButton).toBeTruthy();
+    timeoutButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onChangeConnectionTimeout).toHaveBeenCalledOnce();
+  });
+
+  it("does not offer connection timeout settings for query timeouts", async () => {
+    const { host } = await mountActions("Query timed out after 30 seconds");
+
+    expect(host.textContent).not.toContain("Change connection timeout");
+    expect(host.textContent).toContain("Change query timeout");
+  });
+});