tablewalk 0.0.1

package/dist/client/connections.js

@@ -0,0 +1,234 @@
+/**
+ * The connection picker.
+ *
+ * The server holds the connection strings and this file never sees one — the
+ * list it renders carries an id, a name, a dialect and a redacted detail. A
+ * password cannot leak through a UI that was never given one.
+ *
+ * Connections added here are session-only. Writing them back to the config
+ * file would mean a web page quietly editing a file on disk, which is a
+ * surprise nobody asked for; the dialog says so rather than leaving you to
+ * discover it after a restart.
+ */
+import { $, api, connectionChanged, el, render, state, svgEl, toast } from './core.js';
+import { dropdown } from './dropdown.js';
+import { syncWriteMode } from './write.js';
+import { openConnections } from './connmanager.js';
+import { clearPeekCache } from './peek.js';
+import { forgetPages } from './page.js';
+import { loadSavedSql } from './sqlsaved.js';
+
+export async function initConnections(onSwitched) {
+  state.onSwitched = onSwitched;
+  await refreshList();
+}
+
+/**
+ * Read the schema again, for the connection in hand.
+ *
+ * What changed is reported rather than swallowed: "nothing changed" is a real
+ * answer to "did my migration land", and a button that always says "done"
+ * cannot tell you it did nothing.
+ */
+async function reintrospect() {
+  const before = state.schema;
+  try {
+    const { schema } = await api('/api/connections/refresh', { id: state.activeConnection });
+    state.schema = schema;
+    /* Rows cached against the old schema describe columns that may no longer
+       exist. The connection is unchanged, so the peek cache's own key does
+       not rule them out — this is the one case where it has to be emptied. */
+    clearPeekCache();
+    forgetPages();
+
+    const was = new Set((before?.tables ?? []).map((t) => t.id));
+    const now = new Set(schema.tables.map((t) => t.id));
+    const added = [...now].filter((id) => !was.has(id));
+    const gone = [...was].filter((id) => !now.has(id));
+    const columnsBefore = (before?.tables ?? []).reduce((n, t) => n + t.columns.length, 0);
+    const columnsNow = schema.tables.reduce((n, t) => n + t.columns.length, 0);
+
+    const changes = [
+      added.length ? `${added.length} table${added.length === 1 ? '' : 's'} added` : null,
+      gone.length ? `${gone.length} removed` : null,
+      columnsNow !== columnsBefore ? `${Math.abs(columnsNow - columnsBefore)} column${Math.abs(columnsNow - columnsBefore) === 1 ? '' : 's'} ${columnsNow > columnsBefore ? 'added' : 'removed'}` : null,
+    ].filter(Boolean);
+
+    state.onSwitched?.();
+    render();
+    toast(
+      changes.length
+        ? `Schema re-read — ${changes.join(', ')}.`
+        : `Schema re-read — nothing changed (${schema.tables.length} tables).`,
+      'ok',
+    );
+  } catch (err) {
+    toast(err.message, 'error');
+  }
+}
+
+/**
+ * Redraw the picker from the server's list.
+ *
+ * Exported because a deep link switches connection without going through
+ * `selectConnection` — it opens the connection the link names and rebuilds
+ * the trail — and the picker was left showing whatever the server called
+ * active. Landing on a link into one database with the sidebar naming another
+ * is the interface disagreeing with itself about where you are.
+ */
+export async function refreshConnections() {
+  await refreshList();
+}
+
+async function refreshList() {
+  let data;
+  try {
+    data = await api('/api/connections');
+  } catch {
+    /* One connection, no config file: the picker has nothing to offer, so it
+       gets out of the way rather than showing a control with one option.
+    
+       `conn-select` was the `<select>` this used to be, and there has been no
+       such element since it became a custom dropdown — so this line, on the
+       one path that runs when the connection list cannot be read, threw a
+       TypeError out of the handler meant to recover from the failure. It
+       escaped `initConnections`, which boot awaits, and the page never
+       finished starting: a server hiccup on one request took the whole app
+       down rather than hiding a picker. */
+    $('conn-picker').hidden = true;
+    $('db-label').hidden = false;
+    return;
+  }
+  state.connections = data.connections;
+  state.activeConnection = data.active;
+
+  /* Write mode is remembered per connection, and until now it was only
+     re-read when someone *switched* connection — never on the way in. So a
+     page reload landed on the active connection with write mode off, and the
+     setting quietly came back the moment you switched away and back. `initWriteMode`
+     runs before this, when `state.activeConnection` is still undefined, so
+     there is nothing it could have read. */
+  syncWriteMode();
+
+  const picker = $('conn-picker');
+  // A lone connection with no config file is not worth a picker.
+  picker.hidden = data.connections.length < 2 && !data.connections.some((c) => c.source === 'config');
+  /* The picker and the plain `name · dialect` label answer the same question,
+     so exactly one of them is on screen. With a single unconfigured database
+     there is nothing to pick between and the label is the honest form — and
+     it still opens Connections, which is how a second one gets added. */
+  $('db-label').hidden = !picker.hidden;
+  if (picker.hidden) return;
+
+  const control = dropdown({
+    ariaLabel: 'Database connection',
+    value: data.active,
+    /* The detail is the redacted form — host and database, never a password.
+       It is the second line rather than a tooltip because it is what tells
+       two connections called "app" apart, and a tooltip you have to hover to
+       read is no help when choosing between them. */
+    items: data.connections.map((conn) => ({
+      value: conn.id,
+      label: conn.name,
+      detail: conn.detail,
+      badge: conn.dialect,
+      tone: conn.error ? 'error' : conn.connected ? 'ok' : undefined,
+    })),
+    onChange: (id) => void selectConnection(id),
+    actions: [
+      /* Re-introspection, on demand.
+
+         The schema is read once when a connection is opened and then trusted,
+         which is right for browsing and wrong the moment the database changes
+         underneath you — a migration runs in another window and tablewalk goes
+         on describing the schema it met at boot, reporting a real column as
+         unknown. Rather than polling for a change that almost never happens,
+         this is the button for the moment you know it did. */
+      { label: '↻ Re-read the schema', onSelect: () => void reintrospect() },
+    ],
+  });
+
+  picker.replaceChildren(
+    control,
+    /* Out of the dropdown and onto the row.
+    
+       Managing connections was the last item of a menu you open to switch
+       databases — findable only by someone who had already opened it looking
+       for something else. It is a destination, not a variation on the thing
+       above it. */
+    el('button', {
+      type: 'button',
+      class: 'conn-manage',
+      title: 'Manage connections',
+      'aria-label': 'Manage connections',
+      onclick: () => void openConnections(),
+    }, svgEl('svg', {
+      /* A cog with teeth, not a circle with spokes. The first draft was a
+         circle and eight radiating lines, which is a *sun* — it read as a
+         brightness or theme control sitting next to the database picker, and
+         the tooltip was doing all the work of saying otherwise. An icon that
+         has to be hovered to be understood is not doing its job. */
+      viewBox: '0 0 24 24', width: '17', height: '17', 'aria-hidden': 'true',
+      fill: 'none', stroke: 'currentColor', 'stroke-width': '2',
+      'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+    }, [
+      svgEl('path', {
+        d: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08'
+          + 'a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51'
+          + 'a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08'
+          + 'a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18'
+          + 'a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39'
+          + 'a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09'
+          + 'a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25'
+          + 'a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z',
+      }),
+      svgEl('circle', { cx: '12', cy: '12', r: '3' }),
+    ])),
+  );
+}
+
+/**
+ * Switch database, and reset everything that belonged to the last one.
+ *
+ * Exported because the command palette can switch connections too, and two
+ * implementations of "open a different database" would drift on exactly the
+ * parts that matter — clearing the trail, the write mode, and the query bar.
+ */
+export async function selectConnection(id) {
+  if (id === state.activeConnection) return;
+  const previous = state.activeConnection;
+  try {
+    const { schema } = await api('/api/connections/select', { id });
+    state.schema = schema;
+    state.activeConnection = id;
+    /* Switching database invalidates the trail entirely: a crumb naming a
+       table in the old one would look like a step you could walk back to. */
+    state.stack = [];
+    state.page = 0;
+    $('query').value = '';
+    $('db-label').textContent = `${schema.label} · ${schema.dialect}`;
+    document.title = `${schema.label} — tablewalk`;
+    await refreshList();
+    // The new connection has its own write setting, and must not inherit the
+    // previous one in either direction.
+    syncWriteMode();
+    /* The new connection's committed statements, which the old ones are not.
+       Without this the saved bar kept whatever the last connection had until
+       the page was reloaded. */
+    await loadSavedSql();
+    state.onSwitched?.();
+    /* Everything that lives outside the rendered view and is keyed to a
+       database — the SQL editor is the one today — rebuilds here, after the
+       schema and the per-connection loads have landed. */
+    connectionChanged();
+    render();
+  } catch (err) {
+    toast(err.message, 'error');
+    /* Redrawn from the server rather than set back by hand. The same dead
+       `conn-select` was assigned here, so a failed switch threw a second
+       error on top of the one it was reporting — and even spelled correctly,
+       a custom dropdown has no `.value` to put back. Asking the server which
+       connection is active is the only answer that cannot drift from it. */
+    await refreshList();
+  }
+}