pgkiln 0.45.0 → 0.47.0

package/src/builder/object-browser.ts

@@ -4,11 +4,14 @@ import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { readSchema } from '../ddl.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Req } from './ui.ts';
-import { sessionSchema, workshopDb } from './workspaces.ts';
+import { currentWorkspace, inWorkspaceSql, sessionSchema, workshopDb } from './workspaces.ts';
+import { objectMenu } from './object-actions.ts';
+import { owner } from '../db.ts';
+import type { Session } from '../session.ts';
 
 // (sprint 75) The SQL Workshop's Object Browser like APEX's: a schema in the header (the session's
 // schema by default), a tree with a folder per object type, a filter, a + menu that starts a CREATE
-// statement in SQL Commands, and create tiles when nothing is selected. pgkiln's own schemas (meta,
+// statement in the SQL Worksheet, and create tiles when nothing is selected. pgkiln's own schemas (meta,
 // pgkiln_plugins) and objects that belong to an extension are left out unless "Show system objects" is
 // on. A table opens in tabs: Columns, Data, Indexes, Constraints, Triggers, Grants, Row level security,
 // Dependencies, Statistics and DDL; the column actions write the ALTER TABLE statement into SQL
@@ -17,7 +20,7 @@ import { sessionSchema, workshopDb } from './workspaces.ts';
 // in the catalog before it is used, quoted.
 
 /** pgkiln's own schemas: shown with "Show system objects" only. */
-const SYSTEM_SCHEMAS = ['meta', 'pgkiln_plugins'];
+export const SYSTEM_SCHEMAS = ['meta', 'pgkiln_plugins'];
 
 export const OB_TYPES = [
   ['table', 'Tables', 'table'],
@@ -30,9 +33,9 @@ export const OB_TYPES = [
   ['procedure', 'Procedures', 'code'],
   ['trigger', 'Triggers', 'bolt'],
 ] as const;
-type ObType = (typeof OB_TYPES)[number][0];
+export type ObType = (typeof OB_TYPES)[number][0];
 
-interface Obj {
+export interface Obj {
   type: ObType;
   name: string;
   /** the object as SQL can name it: regclass, regprocedure or regtype text; a trigger: "table" */
@@ -47,7 +50,7 @@ const TABLE_TABS = [
   ['grants', 'Grants'], ['rls', 'Row level security'], ['dependencies', 'Dependencies'], ['statistics', 'Statistics'], ['ddl', 'DDL'],
 ] as const;
 
-/** CREATE statements the + menu and the tiles start with (SQL Commands shows them; nothing runs until Run). */
+/** CREATE statements the + menu and the tiles start with (the SQL Worksheet shows them; nothing runs until Run). */
 export function createTemplate(kind: string, schema: string): string | null {
   const S = pg.escapeIdentifier(schema);
   switch (kind) {
@@ -61,6 +64,43 @@ export function createTemplate(kind: string, schema: string): string | null {
 }
 
 const PAGE_SIZE = 25;
+
+/**
+ * (sprint 89, SQL-4) The parsing schema of the application changed last in the developer's workspace: the
+ * schema its database role may use (not public, pgkiln's or the system's). APEX opens the Object Browser
+ * on the workspace's parsing schema.
+ */
+async function parsingSchema(s: Session): Promise<string | null> {
+  const row = await owner.one<{ n: string }>(
+    `select n.nspname as n
+       from meta.app a join pg_roles r on r.rolname = a.db_role
+       join pg_namespace n on has_schema_privilege(r.oid, n.oid, 'USAGE')
+      where ${inWorkspaceSql('a', 1)} and n.nspname !~ '^pg_' and n.nspname not in ('information_schema', 'public') and not (n.nspname = any ($2))
+      order by a.updated_at desc, a.id desc, n.nspname limit 1`,
+    [currentWorkspace(s), SYSTEM_SCHEMAS],
+  ).catch(() => undefined);
+  return row?.n ?? null;
+}
+/**
+ * (sprint 89, SQL-4) The schema to show: the one asked for, else the last one shown (remembered per session, shared
+ * by the Object Browser and the worksheet's navigator), else the session's schema of the SQL Worksheet, else the parsing
+ * schema of the application changed last, else the first of `schemas`.
+ */
+export async function pickSchema(s: Session, db: Awaited<ReturnType<typeof workshopDb>>, schemas: string[], asked: unknown): Promise<string> {
+  const usable = (v: unknown): v is string => typeof v === 'string' && schemas.includes(v);
+  if (usable(asked)) {
+    s.state.__OBSCHEMA = asked;
+    return asked;
+  }
+  const last = s.state.__OBSCHEMA;
+  if (usable(last)) return last;
+  const own = await sessionSchema(s, db);
+  const parsing = usable(own) ? null : await parsingSchema(s);
+  const schema = usable(own) ? own : usable(parsing) ? parsing : (schemas[0] ?? '');
+  if (schema) s.state.__OBSCHEMA = schema;
+  return schema;
+}
+
 /** A column type in an action: a type name with an optional size and array brackets. */
 const TYPE_RE = /^[a-z][a-z0-9_ ]{0,40}(\(\d{1,4}(,\s?\d{1,4})?\))?(\[\])?$/i;
 const NAME_RE = /^[A-Za-z_][A-Za-z0-9_$]{0,62}$/;
@@ -81,8 +121,7 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
         [system, SYSTEM_SCHEMAS],
       )
     ).rows.map((r) => r.n);
-    const own = await sessionSchema(s, db);
-    const schema = typeof q.schema === 'string' && schemas.includes(q.schema) ? q.schema : own && schemas.includes(own) ? own : (schemas[0] ?? '');
+    const schema = await pickSchema(s, db, schemas, q.schema);
     const filter = typeof q.q === 'string' ? q.q.trim().slice(0, 100) : '';
     const objects = schema ? await listObjects(db, schema, system) : [];
     const shown = objects.filter((o) => !filter || o.name.toLowerCase().includes(filter.toLowerCase()));
@@ -97,7 +136,7 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
         if (!list.length && filter) return '';
         return html`<details class="ob-folder"${list.length && (filter || list.length <= 50 || selected?.type === t) ? raw(' open') : ''}>
           <summary>${icon(ic)}<span>${label}</span><span class="kind">${list.length}</span></summary>
-          <ul class="tree">${list.map((o) => html`<li><a href="${link({ k: o.type, o: o.ref })}"${selected === o ? raw(' aria-current="page"') : ''}>${icon(ic)}<span>${o.name}</span>${o.rls ? html`<span class="tag">RLS</span>` : ''}${o.ext ? html`<span class="tag">extension</span>` : ''}</a></li>`)}</ul>
+          <ul class="tree">${list.map((o) => html`<li class="ob-item"><a href="${link({ k: o.type, o: o.ref })}"${selected === o ? raw(' aria-current="page"') : ''}>${icon(ic)}<span>${o.name}</span>${o.rls ? html`<span class="tag">RLS</span>` : ''}${o.ext ? html`<span class="tag">extension</span>` : ''}</a>${objectMenu(schema, o)}</li>`)}</ul>
         </details>`;
       })}</div>`;
 
@@ -105,9 +144,10 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
     if (!schema) detail = html`<p class="muted">No schema you may use.</p>`;
     else if (selected) detail = await objectDetail(db, s, schema, selected, String(q.tab ?? ''), Number(q.p) || 1, link);
     else
-      detail = region(`Create database objects in ${schema}`, html`<div class="ob-tiles">${[
+      detail = region(`Create database objects in ${schema}`, html`<div class="ob-tiles">
+        <a class="create-source" href="${BASE}/sql/objects/table?${new URLSearchParams({ schema })}">${icon('table')}<span><b>Table (form)</b><small class="muted">Columns, keys, indexes and security in a form</small></span></a>${[
         ['table', 'table', 'Table'], ['view', 'layers', 'View'], ['function', 'code', 'Function'], ['sequence', 'hash', 'Sequence'], ['index', 'list', 'Index'],
-      ].map(([k, ic, label]) => html`<a class="create-source" href="${BASE}/sql/commands?${new URLSearchParams({ template: k, schema })}">${icon(ic)}<span><b>${label}</b><small class="muted">Start a CREATE ${label.toUpperCase()} statement</small></span></a>`)}
+      ].map(([k, ic, label]) => html`<a class="create-source" href="${BASE}/sql/worksheet?${new URLSearchParams({ template: k, schema })}">${icon(ic)}<span><b>${label}</b><small class="muted">Start a CREATE ${label.toUpperCase()} statement</small></span></a>`)}
         <a class="create-source" href="${BASE}/sql/quick">${icon('bolt')}<span><b>Quick SQL</b><small class="muted">A data model in shorthand</small></span></a>
         <a class="create-source" href="${BASE}/sql/load">${icon('upload')}<span><b>Load data</b><small class="muted">A table from a file</small></span></a></div>
         <p class="muted">Select an object in the tree, or filter it by name.</p>`);
@@ -121,13 +161,13 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
           <button class="btn btn-sm">Show</button></form>
         <details class="menu ob-create"><summary class="btn btn-hot">${icon('plus')} Create</summary>
           <div class="menu-panel align-right"><div class="menu-section menu-links">${['table', 'view', 'function', 'sequence', 'index'].map((k) =>
-            html`<a href="${BASE}/sql/commands?${new URLSearchParams({ template: k, schema })}">${icon('plus')} ${k[0].toUpperCase() + k.slice(1)}</a>`)}</div></div></details>
+            html`<a href="${BASE}/sql/worksheet?${new URLSearchParams({ template: k, schema })}">${icon('plus')} ${k[0].toUpperCase() + k.slice(1)}</a>`)}</div></div></details>
       </div>
       <div class="designer"><aside class="region region-standard ob-tree" aria-label="Database objects">${tree}</aside><div>${detail}</div></div>`;
     return send(reply, s, shell(s, 'Object Browser', [['SQL Workshop', `${BASE}/sql`], ['Object Browser']], main, 'sql'));
   });
 
-  // column actions: the ALTER TABLE statement, into SQL Commands to review and run
+  // column actions: the ALTER TABLE statement, into the SQL Worksheet to review and run
   app.post(`${BASE}/sql/objects/alter`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
@@ -161,6 +201,24 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
       if (!cols.includes(col)) problem = 'Choose a column of the table.';
       else if (!NAME_RE.test(to) || cols.includes(to)) problem = 'The new name must be a valid name that the table doesn\'t have yet.';
       else sql = `alter table ${table.q} rename column ${ident(col)} to ${ident(to)};`;
+    } else if (b.action === 'modify') {
+      // (sprint 89, SQL-4) type, nulls and default in one ALTER TABLE; a default is one expression, never a statement
+      const type = String(b.type ?? '').trim();
+      const expr = String(b.default ?? '').trim();
+      const parts: string[] = [];
+      const c = ident(col);
+      if (!cols.includes(col)) problem = 'Choose a column of the table.';
+      else if (type && !TYPE_RE.test(type)) problem = 'A type is a name with an optional size, e.g. text, numeric(9,2), varchar(40), int[].';
+      else if (b.default_action === 'set' && (!expr || expr.length > 200 || /;|--|\/\*/.test(expr))) problem = 'A default is one expression (at most 200 characters, without ; or comments), e.g. now(), 0 or \'new\'.';
+      else {
+        if (type) parts.push(`alter column ${c} type ${type} using ${c}::${type}`);
+        if (b.nullable === 'not_null') parts.push(`alter column ${c} set not null`);
+        else if (b.nullable === 'null') parts.push(`alter column ${c} drop not null`);
+        if (b.default_action === 'set') parts.push(`alter column ${c} set default ${expr}`);
+        else if (b.default_action === 'drop') parts.push(`alter column ${c} drop default`);
+        if (!parts.length) problem = 'Nothing to change: choose a new type, nulls or a default.';
+        else sql = `alter table ${table.q}\n  ${parts.join(',\n  ')};`;
+      }
     } else if (b.action === 'drop') {
       if (!cols.includes(col)) problem = 'Choose a column of the table.';
       else sql = `alter table ${table.q} drop column ${ident(col)};`;
@@ -171,11 +229,11 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
     }
     s.state.__SQLDRAFT = sql;
     flash(s, 'Review the statement and press Run: nothing has been changed yet.');
-    return back(reply, s, `${BASE}/sql/commands`);
+    return back(reply, s, `${BASE}/sql/worksheet`);
   });
 }
 
-async function listObjects(db: Awaited<ReturnType<typeof workshopDb>>, schema: string, system: boolean): Promise<Obj[]> {
+export async function listObjects(db: Awaited<ReturnType<typeof workshopDb>>, schema: string, system: boolean): Promise<Obj[]> {
   const ext = (cls: string, oid: string) => `exists (select 1 from pg_depend d where d.classid = '${cls}'::regclass and d.objid = ${oid} and d.deptype = 'e')`;
   const rows = (
     await db.query<Obj>(
@@ -206,11 +264,11 @@ async function listObjects(db: Awaited<ReturnType<typeof workshopDb>>, schema: s
   return system ? rows : rows.filter((o) => !o.ext);
 }
 
-async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csrf_token: string }, schema: string, o: Obj, tabAsked: string, page: number, link: (x: Record<string, string>) => string): Promise<Raw> {
+export async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csrf_token: string }, schema: string, o: Obj, tabAsked: string, page: number, link: (x: Record<string, string>) => string): Promise<Raw> {
   const table = (rows: Record<string, unknown>[], empty = 'None.') =>
     rows.length
       ? html`<div class="table-wrap"><table class="report"><thead><tr>${Object.keys(rows[0]).map((k) => html`<th scope="col">${k}</th>`)}</tr></thead>
-        <tbody>${rows.map((r) => html`<tr>${Object.values(r).map((v) => html`<td>${v === null ? html`<span class="null">null</span>` : typeof v === 'object' ? JSON.stringify(v) : String(v)}</td>`)}</tr>`)}</tbody></table></div>`
+        <tbody>${rows.map((r) => html`<tr>${Object.values(r).map((v) => html`<td>${v === null ? '' : typeof v === 'object' ? JSON.stringify(v) : String(v)}</td>`)}</tr>`)}</tbody></table></div>`
       : html`<p class="muted">${empty}</p>`;
   const ddlOf = async (match: (x: { kind: string; name: string; table?: string }) => boolean) => {
     const objects = await readSchema(db.pool as pg.Pool, schema).catch(() => []);
@@ -247,7 +305,14 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
   const isTable = o.type === 'table';
   const tabs = TABLE_TABS.filter(([k]) => isTable || !['indexes', 'constraints', 'triggers', 'rls'].includes(k) || (o.type === 'matview' && k === 'indexes'));
   const tab = tabs.some(([k]) => k === tabAsked) ? tabAsked : 'columns';
-  const nav = html`<nav class="settings-tabs ob-tabs" aria-label="${o.name}">${tabs.map(([k, label]) => html`<a href="${link({ k: o.type, o: o.ref, tab: k })}"${k === tab ? raw(' aria-current="page"') : ''}>${label}</a>`)}</nav>`;
+  // (sprint 89, SQL-4) the tabs on one row: the main ones and the current one, the rest under More
+  const MAIN = ['columns', 'data', 'indexes', 'constraints', 'ddl'];
+  const tabLink = ([k, label]: readonly [string, string]) => html`<a href="${link({ k: o.type, o: o.ref, tab: k })}"${k === tab ? raw(' aria-current="page"') : ''}>${label}</a>`;
+  const shownTabs = tabs.filter(([k]) => MAIN.includes(k) || k === tab);
+  const moreTabs = tabs.filter(([k]) => !shownTabs.some(([x]) => x === k));
+  const nav = html`<nav class="settings-tabs ob-tabs" aria-label="${o.name}">${shownTabs.map(tabLink)}${moreTabs.length
+    ? html`<details class="menu ob-more"><summary>More ${icon('chevron-down')}</summary><div class="menu-panel"><div class="menu-section menu-links">${moreTabs.map(tabLink)}</div></div></details>`
+    : ''}</nav>`;
   let body: Raw;
   switch (tab) {
     case 'columns': {
@@ -262,20 +327,32 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
       ).rows;
       const names = cols.map((c) => String(c.column));
       const hidden = html`${raw(`<input type="hidden" name="__csrf" value="${s.csrf_token}">`)}<input type="hidden" name="table" value="${o.ref}"><input type="hidden" name="schema" value="${schema}">`;
-      const pick = (id: string) => html`<label class="sr-only" for="${id}">Column</label><select id="${id}" name="column">${names.map((n) => html`<option>${n}</option>`)}</select>`;
-      body = html`${table(cols)}${isTable
-        ? html`<div class="ob-actions">
-            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="add">
-              <b>Add column</b><label class="sr-only" for="ob-add-name">Name</label><input id="ob-add-name" name="column" placeholder="name" required>
-              <label class="sr-only" for="ob-add-type">Type</label><input id="ob-add-type" name="type" placeholder="text" required>
-              <label class="check"><input type="checkbox" name="not_null" value="true"> not null</label><button class="btn btn-sm">Show the SQL</button></form>
-            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="rename">
-              <b>Rename column</b>${pick('ob-ren-col')}<label class="sr-only" for="ob-ren-to">New name</label><input id="ob-ren-to" name="new_name" placeholder="new name" required><button class="btn btn-sm">Show the SQL</button></form>
-            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="drop">
-              <b>Drop column</b>${pick('ob-drop-col')}<button class="btn btn-sm">Show the SQL</button></form>
-            <p class="muted u-m0">Each action writes the ALTER TABLE statement into SQL Commands: review it there and press Run.</p>
+      const pick = (id: string) => html`<label class="label" for="${id}">Column</label><select id="${id}" name="column">${names.map((n) => html`<option>${n}</option>`)}</select>`;
+      // (sprint 89, SQL-4; APEX: the Columns toolbar) Add, Modify, Rename and Drop above the columns, each a small form
+      body = html`${isTable
+        ? html`<div class="ob-toolbar" role="toolbar" aria-label="Columns">
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('plus')} Add column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="add">
+                <label class="label" for="ob-add-name">Name</label><input id="ob-add-name" name="column" placeholder="name" required>
+                <label class="label" for="ob-add-type">Type</label><input id="ob-add-type" name="type" placeholder="text" required>
+                <label class="check"><input type="checkbox" name="not_null" value="true"> not null</label><button class="btn btn-sm btn-hot">Show the SQL</button></form></div></details>
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('edit')} Modify column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="modify">
+                ${pick('ob-mod-col')}
+                <label class="label" for="ob-mod-type">New type</label><input id="ob-mod-type" name="type" placeholder="the same">
+                <label class="label" for="ob-mod-null">Nulls</label><select id="ob-mod-null" name="nullable"><option value="">the same</option><option value="null">allowed</option><option value="not_null">not null</option></select>
+                <label class="label" for="ob-mod-def">Default</label><select id="ob-mod-def" name="default_action"><option value="">the same</option><option value="set">set to</option><option value="drop">none</option></select>
+                <label class="sr-only" for="ob-mod-expr">Default expression</label><input id="ob-mod-expr" name="default" placeholder="now(), 0, 'x'">
+                <button class="btn btn-sm btn-hot">Show the SQL</button></form></div></details>
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('tag')} Rename column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="rename">
+                ${pick('ob-ren-col')}<label class="label" for="ob-ren-to">New name</label><input id="ob-ren-to" name="new_name" placeholder="new name" required><button class="btn btn-sm btn-hot">Show the SQL</button></form></div></details>
+            <details class="menu ob-tool"><summary class="btn btn-sm">${icon('trash')} Drop column</summary><div class="menu-panel">
+              <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="drop">
+                ${pick('ob-drop-col')}<button class="btn btn-sm btn-danger">Show the SQL</button></form></div></details>
+            <span class="muted ob-toolbar-note">Each writes the ALTER TABLE statement into the SQL Worksheet: review it there and run it.</span>
           </div>`
-        : ''}`;
+        : ''}${table(cols)}`;
       break;
     }
     case 'data': {
@@ -288,7 +365,7 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
         const p = offset / PAGE_SIZE + 1;
         body = html`${table(rows, 'No rows.')}<nav class="pager" aria-label="Pages">${p > 1 ? html`<a href="${link({ k: o.type, o: o.ref, tab: 'data', p: String(p - 1) })}">‹ Previous</a>` : ''}
           <span>Rows ${rows.length ? offset + 1 : 0}–${offset + rows.length}</span>${more ? html`<a href="${link({ k: o.type, o: o.ref, tab: 'data', p: String(p + 1) })}">Next ›</a>` : ''}</nav>
-          <p class="muted">To change rows, use SQL Commands, or an interactive grid on the table in an application.</p>`;
+          <p class="muted">To change rows, use the SQL Worksheet, or an interactive grid on the table in an application.</p>`;
       }
       break;
     }
@@ -338,5 +415,6 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
     default:
       body = await ddlOf((x) => (x.kind === 'table' || x.kind === 'view' || x.kind === 'materialized view') ? x.name === relname : x.table === relname);
   }
-  return html`<h2 class="ob-title">${icon(OB_TYPES.find(([t]) => t === o.type)![2])} ${o.ref}${o.rls ? html` <span class="tag">RLS</span>` : ''}</h2>${nav}${region(tabs.find(([k]) => k === tab)![1], body)}`;
+  return html`<h2 class="ob-title">${icon(OB_TYPES.find(([t]) => t === o.type)![2])} ${o.ref}${o.rls ? html` <span class="tag">RLS</span>` : ''}${o.type === 'table'
+    ? html` <a class="btn btn-sm" href="${BASE}/sql/objects/table?${new URLSearchParams({ schema, o: o.ref })}">${icon('edit')} Edit table</a>` : ''}</h2>${nav}${region(tabs.find(([k]) => k === tab)![1], body)}`;
 }

package/src/builder/querybuilder.ts

@@ -363,7 +363,7 @@ export async function queryBuilderRoutes(app: FastifyInstance) {
     const output = built
       ? html`<div class="u-spacer"></div>${region('SQL', html`<pre class="source" tabindex="0" aria-label="Generated SQL">${built.sql}</pre>
           <form method="post" action="${BASE}/sql">${csrf(s)}<input type="hidden" name="sql" value="${built.sql}">
-            <div class="buttons"><button class="btn btn-hot">${icon('play')} Run in SQL Commands</button></div></form>`)}`
+            <div class="buttons"><button class="btn btn-hot">${icon('play')} Run in the SQL Worksheet</button></div></form>`)}`
       : '';
     return send(reply, s, shell(s, 'Query Builder', [['SQL Workshop', `${BASE}/sql`], ['Query Builder']], html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('query')}${form}${output}`, 'sql'));
   });

package/src/builder/region-help.ts

@@ -21,6 +21,7 @@ export const REGION_CONFIG_HELP: [string[], string][] = [
   [['*'], '{"display_selector":true} puts it in the page\'s display selector'],
   [['report', 'chart', 'cards', 'dynamic', 'tree', 'template_component'], '{"lazy":true} loads it after the page shows, {"cache":{"scope":"user"|"session"|"all","seconds":300}} keeps its HTML (a submit of the page empties it)'],
   [['data_reporter'], '{"sources":[{"id":"orders","label":"Orders","description":"…","schema":"sales","table":"order_v","columns":[{"name":"total","label":"Total","format":"FML999G990D00"}]}],"sharing":true,"share_authz":"SCHEME","page_size":25} (the Data Reporter settings below edit it)'],
+  [['form_designer'], '{"sources":[{"id":"orders","label":"Orders","description":"…","schema":"sales","table":"orders","key":"id","columns":[{"name":"customer","label":"Customer"},{"name":"status","lov":"LOV:ORDER_STATUS"}],"insert":true,"update":true,"delete":false}],"design_authz":"SCHEME","page_size":25} (the Form Designer region\'s Settings; users that pass design_authz design forms)'],
   [['ai_assistant'], '{"service":"NAME","system":"…","welcome":"…","context":[{"name":"policy","sql":"select … :AI_PROMPT …"}],"tools":[{"name":"my_leave","description":"…","sql":"select … where status = :STATUS","parameters":{"STATUS":{"type":"string","enum":["PENDING"]}}},{"name":"dept","type":"rest","source":"DEPARTMENT","description":"…"}],"max_rounds":5,"max_turns":20} (the AI assistant settings below edit it)'],
   [['report'], '{"ai_filter":{"service":"NAME"}} adds an "Ask in your own words" box (natural-language filters)'],
   [['plugin'], '{"plugin":"name","attributes":{"NAME":"value"}} (a region plug-in; a Source SELECT feeds its template)'],
@@ -45,6 +46,7 @@ const ANCHORS: Record<string, string> = {
   tree: 'tree',
   list: 'list-lists',
   data_reporter: 'data-reporter-data-reporter',
+  form_designer: 'form_designer-form-designer',
   ai_assistant: 'ai-assistant-ai-assistant',
   template_component: 'template-components',
   static: 'static-and-dynamic-content',

package/src/builder/region-settings.ts

@@ -16,6 +16,7 @@ import { LIST_TEMPLATES } from '../runtime/lists.ts';
 import { MAX_EXTRA_LAYERS } from '../runtime/maps.ts';
 import { postgis } from '../runtime/spatial.ts';
 import { reporterSettingsForm } from './reporter.ts';
+import { formDesignerSettingsForm } from './form-designer.ts';
 
 // Page designer → a region → Settings: the region's "config" JSON as a form
 // for grid, chart, cards, calendar and faceted search regions (report
@@ -732,6 +733,7 @@ export async function regionSettingsForm(pageId: number, appId: number, r: Regio
   if (r.type === 'ai_assistant') return assistantSettingsForm(pageId, appId, r, s);
   if (r.type === 'template_component') return templateRegionForm(pageId, appId, r, s);
   if (r.type === 'data_reporter') return reporterSettingsForm(pageId, appId, r, s);
+  if (r.type === 'form_designer') return formDesignerSettingsForm(pageId, appId, r, s);
   if (!(SETTINGS_TYPES as readonly string[]).includes(r.type)) return '';
   const cfg = r.config ?? {};
   const id = (n: string) => `rg_${r.id}_${n}`;

package/src/builder/reporter.ts

@@ -43,7 +43,7 @@ async function objectByOid(oid: number): Promise<DbObject | null> {
 }
 
 /** The tables and views to choose from, with whether the application's role may read them. */
-async function objectList(dbRole: string | null) {
+export async function objectList(dbRole: string | null) {
   return (
     await owner.query<{ oid: number; name: string; access: boolean }>(
       `select c.oid::int as oid, format('%I.%I', n.nspname, c.relname) as name,

package/src/builder/routes.ts

@@ -13,7 +13,7 @@ import { documentShell } from '../layout.ts';
 import { passwordProblem } from '../accounts.ts';
 import { clientIp, createSession, destroySession, getSession, loginThrottled, logActivity, saveState, takeFlash } from '../session.ts';
 import { loginSettingsFields, saveLoginSettings } from './login-page.ts';
-import { APP_COLORS, appHeader, back, BASE, builderHead, csrf, developer, flash, input, region, select, send, shell, THEME_COOKIE, validTheme, type Req } from './ui.ts';
+import { APP_COLORS, appHeader, back, BASE, designerUrl, builderHead, csrf, developer, flash, input, region, select, send, shell, THEME_COOKIE, validTheme, type Req } from './ui.ts';
 import { appOr404 } from './forms.ts';
 import { docToFiles, filesToZip } from '../appfiles.ts';
 import { homeRoutes, rememberApp } from './home.ts';
@@ -278,11 +278,11 @@ export async function builderRoutes(app: FastifyInstance) {
               <select id="f_group" name="group">${[['', 'All pages'], ...groups.map((g) => [g, g]), ['-', 'Without a group']].map(([v, l]) => html`<option value="${v}"${v === groupFilter ? raw(' selected') : ''}>${l}</option>`)}</select></div>
               <button class="btn u-selfend">Show</button></form>`
           : ''}${icons
-          ? html`<ul class="page-icons" id="pages-rows">${shownPages.map((p) => html`<li><a href="${BASE}/pages/${p.id}" class="page-icon"><span class="page-icon-no">${p.page_no}</span><b>${p.name}</b><small class="muted">${p.mode}, ${p.regions} region${p.regions === 1 ? '' : 's'}</small></a></li>`)}</ul>`
+          ? html`<ul class="page-icons" id="pages-rows">${shownPages.map((p) => html`<li><a href="${designerUrl(a.id, p.page_no)}" class="page-icon"><span class="page-icon-no">${p.page_no}</span><b>${p.name}</b><small class="muted">${p.mode}, ${p.regions} region${p.regions === 1 ? '' : 's'}</small></a></li>`)}</ul>`
           : html`<div class="table-wrap"><table class="report">
           <thead><tr><th class="num">Page</th><th>Name</th>${grouped ? html`<th>Group</th>` : ''}<th>Mode</th><th class="num">Regions</th><th class="num">Items</th><th class="num">DAs</th><th class="num">Processes</th><th>Authorization</th><th>Protection</th><th>Lock</th><th></th></tr></thead>
           <tbody id="pages-rows">${shownPages.map((p) => html`<tr>
-            <td class="num">${p.page_no}</td><td><a href="${BASE}/pages/${p.id}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
+            <td class="num">${p.page_no}</td><td><a href="${designerUrl(a.id, p.page_no)}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
             <td class="num">${p.regions}</td><td class="num">${p.items}</td><td class="num">${p.das}</td><td class="num">${p.processes}</td>
             <td>${p.requires_auth ? (p.authz ?? '—') : 'public'}</td><td>${p.protection}</td>
             <td>${((l) => (l ? html`<span class="lock-tag" title="${lockText(l)}">${icon('key')}<span>${l.locked_by === s.username ? 'you' : l.locked_by}</span></span>` : '—'))(locks.get(p.page_no))}</td>
@@ -401,6 +401,7 @@ export async function builderRoutes(app: FastifyInstance) {
             <div class="form-grid">
               ${input('name', 'Name', a.name, { required: true })}
               ${input('alias', 'Alias', a.alias, { required: true })}
+              ${input('version', 'Version', a.version ?? '', { placeholder: 'Release 1.0', help: 'Shown in the footer of the application\'s pages; empty: none.' })}
               ${input('home_page', 'Home page', a.home_page, { type: 'number' })}
               ${select('app_type', 'Application type', a.app_type ?? 'standard', APP_TYPES.map((t): [string, string] => [t, APP_TYPE_LABELS[t]]),
                 'Theme and library applications offer their theme or shared components to other applications (Shared Components → Subscriptions); Create application can start from a boilerplate application.')}
@@ -546,7 +547,7 @@ export async function builderRoutes(app: FastifyInstance) {
                 date_format = $14, timestamp_format = $15, remember_me_days = $16, ldap_directories = $17,
                 header_name = $18, header_auto_create = $19, logout_url = $20, db_auth_roles = $21, db_auth_member_of = $22,
                 custom_auth_function = $23, custom_auth_code = $24, custom_auth_post_code = $25, nav_list = $26, navbar_list = $27,
-                app_type = $28, session_group = $29, updated_at = now() where id = $1`,
+                app_type = $28, session_group = $29, version = $30, updated_at = now() where id = $1`,
         [req.params.id, b.name?.trim(), b.alias?.trim().toLowerCase(), Number(b.home_page) || 1, b.authentication, b.db_role?.trim() || null, b.debug === 'true',
          JSON.stringify({
            base: baseStyleOf({ base: b.base }) === 'standard' ? undefined : baseStyleOf({ base: b.base }),
@@ -579,7 +580,8 @@ export async function builderRoutes(app: FastifyInstance) {
          b.nav_list?.trim().toUpperCase() || null,
          b.navbar_list?.trim().toUpperCase() || null,
          (APP_TYPES as readonly string[]).includes(b.app_type ?? '') ? b.app_type : 'standard',
-         /^[a-z][a-z0-9_]{0,29}$/.test(b.session_group?.trim().toLowerCase() ?? '') ? b.session_group!.trim().toLowerCase() : null],
+         /^[a-z][a-z0-9_]{0,29}$/.test(b.session_group?.trim().toLowerCase() ?? '') ? b.session_group!.trim().toLowerCase() : null,
+         (b.version ?? '').trim().slice(0, 40) || null],
       );
       await saveTimeZoneSettings(req.params.id, b);
       await saveLoginSettings(req.params.id, b);

package/src/builder/sampledata.ts

@@ -40,7 +40,7 @@ import { currentWorkspace, workshopDb } from './workspaces.ts';
 // nulls, all proposed from the catalog. The form posts (CSRF) to preview
 // (insert and roll back), insert (one transaction, parents first), download
 // as SQL or CSV, or save the definition (meta.data_generator) to rerun.
-// Runs on a connection of its own as the owner, like SQL Commands, with a
+// Runs on a connection of its own as the owner, like the SQL Worksheet, with a
 // statement timeout; the connection is closed afterwards. No JavaScript needed.
 
 /** The statement timeout of a run (PostgreSQL interval syntax). */
@@ -109,7 +109,7 @@ export async function sampleDataRoutes(app: FastifyInstance) {
 
   const intro = html`<p class="muted">Generate realistic rows for the tables of a schema: names, e-mail addresses, dates and numbers in a range, values from a list,
     foreign keys that pick existing parent rows. Preview them, insert them in one transaction (parents first) or download them as SQL or CSV.
-    Runs as the builder's owner connection (an isolated workspace's developer login for its developers), like <a href="${BASE}/sql">SQL Commands</a>.</p>`;
+    Runs as the builder's owner connection (an isolated workspace's developer login for its developers), like the <a href="${BASE}/sql/worksheet">SQL Worksheet</a>.</p>`;
 
   // ------------------------------------------------------------ step 1 and 2: schema and tables
   const start = async (s: Session, reply: FastifyReply, schema: string | undefined) => {

package/src/builder/scripts.ts

@@ -12,7 +12,7 @@ import { currentWorkspace, sessionSchema, workshopDb } from './workspaces.ts';
 // SQL Workshop → SQL Scripts: saved scripts (create, edit, upload, download,
 // delete), run with a result per statement (stop at the first error or go on,
 // optionally in one transaction), and the run history. Scripts run on the
-// owner connection, like SQL Commands, on a connection of their own that is
+// owner connection, like the SQL Worksheet, on a connection of their own that is
 // closed afterwards (a script may SET ROLE or change settings). Scripts and runs belong
 // to the current workspace; an isolated workspace's run on its developer login (090).
 
@@ -139,11 +139,11 @@ export async function scriptRoutes(app: FastifyInstance) {
     ).rows;
     const runs = (await owner.query('select * from meta.sql_script_run where workspace_id = $1 order by id desc limit 20', [currentWorkspace(s)])).rows;
     const list = scripts.length
-      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Script</th><th>Updated</th><th class="num">Size</th><th>Last run</th><th>File</th></tr></thead><tbody>
+      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Script</th><th>Updated</th><th class="num">Size</th><th>Last run</th><th>Open</th></tr></thead><tbody>
           ${scripts.map((x) => html`<tr><td><a href="${BASE}/sql/scripts/${x.id}">${x.name}</a>${x.description ? html`<br><span class="muted small">${x.description}</span>` : ''}</td>
             <td>${when(x.updated_at)}${x.updated_by ? html` <span class="muted small">by ${x.updated_by}</span>` : ''}</td><td class="num">${bytes(Number(x.size))}</td>
             <td>${x.last_run ? html`${when(x.last_run)} ${x.last_failed ? html`<span class="tag tag-error">Errors</span>` : html`<span class="tag tag-ok">OK</span>`}` : html`<span class="muted">never</span>`}</td>
-            <td><a class="btn btn-sm" href="${BASE}/sql/scripts/${x.id}/download">${icon('download')} Download</a></td></tr>`)}
+            <td><a class="btn btn-sm" href="${BASE}/sql/worksheet?script=${x.id}">${icon('code')} Worksheet</a> <a class="btn btn-sm" href="${BASE}/sql/scripts/${x.id}/download">${icon('download')} Download</a></td></tr>`)}
         </tbody></table></div>`
       : html`<p class="muted">No scripts yet. Create one, upload a .sql file, or generate one with Quick SQL.</p>`;
     return page(

package/src/builder/search.ts

@@ -3,7 +3,7 @@ import { owner } from '../db.ts';
 import { html, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { COMPONENTS, type FieldKind } from './components.ts';
-import { appHeader, BASE, developer, region, send, shell, type Req } from './ui.ts';
+import { appHeader, BASE, designerUrl, developer, region, send, shell, type Req } from './ui.ts';
 
 // App Builder → Search and "Where used": every component of an application
 // (pages, regions, items, buttons, dynamic actions, validations, processes
@@ -46,7 +46,7 @@ export async function appEntries(appId: number, query: (sql: string, params?: un
   const pageById = new Map(pages.map((p) => [p.id, p]));
   const out: Entry[] = pages.map((p) => ({
     kind: 'page', id: p.id, label: `Page ${p.page_no}: ${p.name}`, kindLabel: 'Page', icon: 'file', pageNo: p.page_no,
-    url: `${BASE}/pages/${p.id}?c=page`,
+    url: designerUrl(appId, p.page_no, 'c=page'),
     fields: PAGE_FIELDS.map((f) => ({ ...f, value: asText(p[f.name]) })),
   }));
   for (const [kind, spec] of Object.entries(COMPONENTS)) {
@@ -57,7 +57,7 @@ export async function appEntries(appId: number, query: (sql: string, params?: un
       const page = spec.scope === 'page' ? pageById.get(row.page_id) : null;
       out.push({
         kind, id: row.id, label: spec.summary(row), kindLabel: spec.label, icon: spec.icon, pageNo: page?.page_no ?? null,
-        url: page ? `${BASE}/pages/${page.id}?c=${kind}-${row.id}` : `${BASE}/apps/${appId}/shared?c=${kind}-${row.id}`,
+        url: page ? designerUrl(appId, page.page_no, `c=${kind}-${row.id}`) : `${BASE}/apps/${appId}/shared?c=${kind}-${row.id}`,
         fields: spec.fields.filter((f) => TEXT_KINDS.has(f.kind)).map((f) => ({ name: f.name, label: f.label, kind: f.kind, value: asText(row[f.name]) })),
       });
     }

package/src/builder/shared.ts

@@ -13,7 +13,7 @@ import { layoutExtras } from './layouts.ts';
 import { templateExtras, templateImport } from './templates.ts';
 import { credentialExtras, needsSecret, restSourceExtras } from './websources.ts';
 import { dataLoadDefExtras } from './dataload.ts';
-import { appHeader, back, BASE, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
+import { appHeader, back, BASE, designerUrl, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
 import { endSessions, grantAccess, roleHints, roleHintsHtml, splitRoles } from './users.ts';
 import { appOr404, componentForm, lookups, saveComponent } from './forms.ts';
 import { catalogPicker } from './rest-catalogs.ts';
@@ -89,7 +89,7 @@ export async function sharedRoutes(app: FastifyInstance) {
       if (!kids.length) return html``;
       return html`<ul class="tree">${kids.map((p) => {
         const next = new Set(seen).add(p.page_no);
-        return html`<li><a href="${BASE}/pages/${p.id}">${icon('file')}<span>${p.name}</span><span class="kind">p${p.page_no}</span></a>${tree(p.page_no, next)}</li>`;
+        return html`<li><a href="${designerUrl(a.id, p.page_no)}">${icon('file')}<span>${p.name}</span><span class="kind">p${p.page_no}</span></a>${tree(p.page_no, next)}</li>`;
       })}</ul>`;
     };
     const main = html`${appHeader(a, 'shared')}