@antelopejs/dms-database 0.0.13 → 0.1.0

package/frontend-vue/app/components/QueryHistoryPanel.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import type { HistoryEntry } from "../composables/useQueryStore";
-import { formatDatabaseRelativeTime } from "../utils/relativeTime";
-
-interface Props {
-	items: HistoryEntry[];
-	total: number;
-	page: number;
-	pageSize: number;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-	"update:page": [value: number];
-	load: [entry: HistoryEntry];
-	save: [entry: HistoryEntry];
-}>();
-
-const totalPages = computed(() =>
-	Math.max(1, Math.ceil(props.total / props.pageSize)),
-);
-
-const canPrev = computed(() => props.page > 0);
-const canNext = computed(() => props.page + 1 < totalPages.value);
-
-const QUERY_PREVIEW_LIMIT = 64;
-
-function preview(query: string): string {
-	const flat = query.replace(/\s+/g, " ").trim();
-	return flat.length > QUERY_PREVIEW_LIMIT
-		? `${flat.slice(0, QUERY_PREVIEW_LIMIT)}…`
-		: flat;
-}
-
-const { t } = useI18n();
-
-function meta(item: HistoryEntry): string {
-	const count = t(
-		"dms_database.query.rowCount",
-		{ count: item.rowCount },
-		item.rowCount,
-	);
-	return `${formatDatabaseRelativeTime(item.executedAt)} · ${count}`;
-}
-
-function prev() {
-	if (canPrev.value) emit("update:page", props.page - 1);
-}
-
-function next() {
-	if (canNext.value) emit("update:page", props.page + 1);
-}
-</script>
-
-<template>
-	<DmsCard :padded="false" class="flex flex-col">
-		<header class="flex items-center gap-2.5 px-4 pt-4 pb-2.5">
-			<UIcon name="i-ph-clock" class="text-primary shrink-0" />
-			<h3 class="text-highlighted text-sm font-semibold">
-				{{ $t("dms_database.query.history") }}
-			</h3>
-		</header>
-
-		<ul
-			v-if="items.length > 0"
-			class="flex-1 overflow-y-auto px-1.5 pb-2 space-y-0.5"
-		>
-			<li
-				v-for="item in items"
-				:key="item.id"
-				class="group flex items-center gap-2.5 rounded-md px-2.5 py-2.5 cursor-pointer hover:bg-elevated transition-colors"
-				@click="emit('load', item)"
-				@keydown.enter.prevent="emit('load', item)"
-			>
-				<UIcon
-					name="i-ph-clock"
-					class="text-dimmed shrink-0 size-3.5"
-				/>
-				<div class="min-w-0 flex-1">
-					<div class="text-toned font-mono text-[11px] truncate">
-						{{ preview(item.source) }}
-					</div>
-					<div class="text-dimmed text-[10px] mt-0.5">
-						{{ meta(item) }}
-					</div>
-				</div>
-				<UButton
-					icon="i-ph-star"
-					variant="ghost"
-					color="neutral"
-					size="xs"
-					class="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity hover:text-warning"
-					:aria-label="$t('dms_database.query.saveAsFavorite')"
-					@click.stop="emit('save', item)"
-				/>
-			</li>
-		</ul>
-
-		<div
-			v-else
-			class="flex-1 flex items-center justify-center px-4 py-6 text-xs text-dimmed text-center"
-		>
-			{{ $t("dms_database.query.emptyHistory") }}
-		</div>
-
-		<footer
-			v-if="items.length > 0"
-			class="flex items-center justify-between gap-2 px-3 py-2 border-t border-default"
-		>
-			<UButton
-				size="xs"
-				variant="ghost"
-				color="neutral"
-				icon="i-ph-caret-left"
-				:disabled="!canPrev"
-				:label="$t('dms_database.query.previous')"
-				@click="prev"
-			/>
-			<span class="text-xs text-dimmed tabular-nums">
-				{{ page + 1 }} / {{ totalPages }}
-			</span>
-			<UButton
-				size="xs"
-				variant="ghost"
-				color="neutral"
-				trailing-icon="i-ph-caret-right"
-				:disabled="!canNext"
-				:label="$t('dms_database.query.next')"
-				@click="next"
-			/>
-		</footer>
-	</DmsCard>
-</template>

package/frontend-vue/app/components/SchemaTableInspector.vue

@@ -1,278 +0,0 @@
-<script setup lang="ts">
-import type {
-	FieldDescriptor,
-	TableSummary,
-} from "../composables/useDatabaseSchemas";
-import { inferFieldTypeIcon, isPrimaryKey } from "../utils/databaseFieldTypeIcons";
-
-// Body panel for the shared dms drawer (useDrawer). The drawer owns the chrome
-// (themed surface, header with the table name + subtitle, close button); this
-// component only renders the inspector content: columns / indexes / preview
-// tabs and the footer. It is opened from schemas.vue via `useDrawer().open()`.
-
-// Descriptor kinds that admit null/undefined on their own: an explicit
-// null/undefined, or an untyped any/unknown.
-const NULLISH_KINDS = new Set<FieldDescriptor["kind"]>([
-	"null",
-	"undefined",
-	"any",
-	"unknown",
-]);
-
-// A field is nullable when its descriptor admits null/undefined — directly, as
-// an untyped any/unknown, or as a member of a union. Anything else is required.
-function isNullable(descriptor: FieldDescriptor): boolean {
-	if (NULLISH_KINDS.has(descriptor.kind)) return true;
-	if (descriptor.kind === "union") {
-		return descriptor.members.some(
-			(member) => member.kind === "null" || member.kind === "undefined",
-		);
-	}
-	return false;
-}
-
-interface Props {
-	schemaId: string | null;
-	table: TableSummary | null;
-	// Injected by the shared DynamicDrawer; unused here (read-only panel).
-	containerId?: string;
-}
-
-const props = defineProps<Props>();
-
-// The shared DynamicDrawer dismisses the drawer when the body emits `success`.
-const emit = defineEmits<{ success: [] }>();
-
-const { t } = useI18n();
-const router = useDmsRouter();
-const { $authFetch } = useAuthFetch();
-
-const DATA_PATH = "/modules/database/data";
-const BROWSE_LIST = "/api/database/browse/list";
-const FILTER_MODE_IS = "is";
-
-type Tab = "columns" | "indexes" | "preview";
-const tab = ref<Tab>("columns");
-
-const tabItems = computed(() => [
-	{ label: t("dms_database.schemas.inspector.columns"), value: "columns" as const, icon: "i-ph-layout" },
-	{ label: t("dms_database.schemas.inspector.indexes"), value: "indexes" as const, icon: "i-ph-key" },
-	{ label: t("dms_database.schemas.inspector.preview"), value: "preview" as const, icon: "i-ph-table" },
-]);
-
-const fieldEntries = computed(() =>
-	Object.entries(props.table?.fields ?? {}).map(([name, descriptor]) => {
-		const meta = inferFieldTypeIcon(descriptor, name);
-		const pk = isPrimaryKey(name, props.table?.indexes ?? {});
-		// Primary keys are never nullable; otherwise read it off the descriptor.
-		const nullable = pk ? false : isNullable(descriptor);
-		return { name, meta, pk, nullable };
-	}),
-);
-
-const indexEntries = computed(() =>
-	Object.entries(props.table?.indexes ?? {}).map(([name, def]) => ({
-		name,
-		fields: def.fields ?? [],
-		multi: Boolean(def.multi),
-	})),
-);
-
-// --- preview (single sample row) ---
-const previewRow = ref<Record<string, unknown> | null>(null);
-const previewLoading = ref(false);
-const previewError = ref(false);
-const previewLoadedFor = ref<string | null>(null);
-
-async function loadPreview() {
-	if (!props.schemaId || !props.table) return;
-	const key = `${props.schemaId}::${props.table.name}`;
-	if (previewLoadedFor.value === key) return;
-	previewLoading.value = true;
-	previewError.value = false;
-	try {
-		const res = await $authFetch<{ results: Record<string, unknown>[] }>(
-			BROWSE_LIST,
-			{
-				query: {
-					filter_schema: `${FILTER_MODE_IS}:${props.schemaId}`,
-					filter_table: `${FILTER_MODE_IS}:${props.table.name}`,
-					limit: 1,
-				},
-			},
-		);
-		previewRow.value = res.results?.[0] ?? null;
-		previewLoadedFor.value = key;
-	} catch {
-		previewError.value = true;
-		previewRow.value = null;
-	} finally {
-		previewLoading.value = false;
-	}
-}
-
-const previewJson = computed(() =>
-	previewRow.value ? JSON.stringify(previewRow.value, null, 2) : "",
-);
-
-// The panel is mounted only while the drawer is open, so the preview loads as
-// soon as its tab is selected (no `open` prop to gate on anymore).
-watch(
-	() => [tab.value, props.table?.name] as const,
-	() => {
-		if (tab.value === "preview") loadPreview();
-	},
-);
-
-const browseTo = computed(() => {
-	if (!props.schemaId || !props.table) return DATA_PATH;
-	return `${DATA_PATH}?schema=${encodeURIComponent(props.schemaId)}&table=${encodeURIComponent(props.table.name)}`;
-});
-
-// "Browse data" navigates to the data browser and closes the drawer so the user
-// lands on the table without the panel lingering over it.
-function browseData() {
-	router.push(browseTo.value);
-	emit("success");
-}
-</script>
-
-<template>
-	<!-- Fixed width so the right-side drawer keeps a stable, comfortable size
-	     instead of shrinking/growing with the active tab's content (the shared
-	     DynamicDrawer sizes a right drawer to its content and exposes no width). -->
-	<div class="flex h-full w-[36rem] max-w-[calc(100vw-3rem)] flex-col">
-		<!-- tabs -->
-		<div class="border-b border-default pb-3">
-			<DmsSegmented v-model="tab" :items="tabItems" />
-		</div>
-
-		<!-- body -->
-		<div class="flex-1 overflow-y-auto py-4">
-			<!-- columns -->
-			<table v-if="tab === 'columns'" class="w-full text-sm">
-				<thead>
-					<tr class="border-b border-default text-left">
-						<th class="text-dimmed py-2 pr-3 text-xs font-semibold">
-							{{ $t("dms_database.schemas.inspector.colName") }}
-						</th>
-						<th class="text-dimmed py-2 px-3 text-xs font-semibold">
-							{{ $t("dms_database.schemas.inspector.colType") }}
-						</th>
-						<th class="text-dimmed py-2 pl-3 text-xs font-semibold">
-							{{ $t("dms_database.schemas.inspector.colNullable") }}
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr
-						v-for="field in fieldEntries"
-						:key="field.name"
-						class="border-b border-default/60 last:border-0"
-					>
-						<td class="py-2 pr-3">
-							<span class="flex items-center gap-2 font-mono text-toned">
-								<UIcon
-									:name="field.pk ? 'i-ph-key' : field.meta.icon"
-									class="size-3.5 shrink-0"
-									:class="field.pk ? 'text-warning' : field.meta.color"
-								/>
-								{{ field.name }}
-							</span>
-						</td>
-						<td class="py-2 px-3">
-							<span
-								class="font-mono text-[11px]"
-								:class="field.meta.color"
-							>
-								{{ field.pk ? "pk" : field.meta.label }}
-							</span>
-						</td>
-						<td class="py-2 pl-3 text-dimmed">
-							{{
-								field.nullable
-									? $t("dms_database.schemas.inspector.yes")
-									: $t("dms_database.schemas.inspector.no")
-							}}
-						</td>
-					</tr>
-				</tbody>
-			</table>
-
-			<!-- indexes -->
-			<div v-else-if="tab === 'indexes'" class="space-y-2.5">
-				<div
-					v-for="idx in indexEntries"
-					:key="idx.name"
-					class="flex items-center gap-3 rounded-md border border-default bg-default px-3 py-2.5"
-				>
-					<UBadge
-						:color="idx.multi ? 'info' : 'neutral'"
-						variant="soft"
-						size="sm"
-					>
-						{{
-							idx.multi
-								? $t("dms_database.schemas.inspector.multi")
-								: $t("dms_database.schemas.inspector.single")
-						}}
-					</UBadge>
-					<span class="font-mono text-[12.5px] text-toned">{{ idx.name }}</span>
-					<span
-						v-if="idx.fields.length"
-						class="font-mono text-[11px] text-dimmed ml-auto truncate"
-					>
-						{{ idx.fields.join(", ") }}
-					</span>
-				</div>
-				<p
-					v-if="indexEntries.length === 0"
-					class="text-dimmed text-sm py-6 text-center"
-				>
-					{{ $t("dms_database.schemas.inspector.noIndexes") }}
-				</p>
-			</div>
-
-			<!-- preview -->
-			<div v-else>
-				<div v-if="previewLoading" class="py-10 text-center">
-					<UProgress size="sm" />
-				</div>
-				<div
-					v-else-if="previewError"
-					class="text-dimmed text-sm py-10 text-center"
-				>
-					{{ $t("dms_database.schemas.inspector.previewError") }}
-				</div>
-				<div
-					v-else-if="!previewRow"
-					class="text-dimmed text-sm py-10 text-center"
-				>
-					{{ $t("dms_database.schemas.inspector.previewEmpty") }}
-				</div>
-				<pre
-					v-else
-					class="text-xs rounded-lg border border-default bg-default p-4 overflow-auto whitespace-pre text-toned"
-					>{{ previewJson }}</pre
-				>
-			</div>
-		</div>
-
-		<!-- footer -->
-		<div class="flex items-center gap-2 border-t border-default pt-4">
-			<span class="flex items-center gap-1.5 text-xs text-success">
-				<UIcon name="i-ph-check-circle" class="size-3.5" />
-				{{ $t("dms_database.schemas.inspector.healthy") }}
-			</span>
-			<UButton
-				color="neutral"
-				variant="outline"
-				size="sm"
-				icon="i-ph-rows"
-				:label="$t('dms_database.schemas.browseData')"
-				class="ml-auto"
-				@click="browseData"
-			/>
-		</div>
-	</div>
-</template>

package/frontend-vue/app/composables/useDataBrowserTabs.ts

@@ -1,255 +0,0 @@
-// Shared state for the data-browser tabs: each tab pins a (schema, instance,
-// table) triplet. The active tab is mirrored to the URL query (deep-links) and
-// the whole tab set is persisted to sessionStorage (survives a page refresh,
-// stays per browser tab).
-
-export const DEFAULT_INSTANCE_VALUE = "__DEFAULT__";
-export const CROSS_INSTANCE_VALUE = "__CROSS_INSTANCE__";
-
-export interface BrowserTab {
-	id: string;
-	schema: string;
-	// DEFAULT_INSTANCE_VALUE, CROSS_INSTANCE_VALUE or a named instance id.
-	instance: string;
-	table: string;
-	// VS Code-style preview tab: the next openTab reuses it instead of adding
-	// a new tab. At most one per session; pinning (double-click, pin icon,
-	// drag-reorder, editing a cell) clears the flag.
-	preview?: boolean;
-}
-
-const STORAGE_KEY = "dms-database:data-browser:tabs";
-
-function browserTabId(
-	schema: string,
-	instance: string,
-	table: string,
-): string {
-	return `${schema}::${instance}::${table}`;
-}
-
-interface PersistedTabs {
-	tabs: BrowserTab[];
-	activeId: string | null;
-}
-
-function readPersisted(): PersistedTabs | null {
-	if (typeof window === "undefined") return null;
-	try {
-		const raw = window.sessionStorage.getItem(STORAGE_KEY);
-		if (!raw) return null;
-		const parsed = JSON.parse(raw) as PersistedTabs;
-		if (!Array.isArray(parsed.tabs)) return null;
-		const tabs = parsed.tabs
-			.filter(
-				(tab) =>
-					tab &&
-					typeof tab.schema === "string" &&
-					typeof tab.instance === "string" &&
-					typeof tab.table === "string",
-			)
-			.map((tab) => ({
-				...tab,
-				id: browserTabId(tab.schema, tab.instance, tab.table),
-				preview: tab.preview === true,
-			}))
-			// Recomputed ids can collide on a legacy/hand-edited payload; duplicate
-			// ids would break the tab bar's v-for keys and closeTab.
-			.filter(
-				(tab, index, all) => all.findIndex((t) => t.id === tab.id) === index,
-			);
-		// The preview slot is a singleton; a hand-edited payload could carry
-		// several — honour only the first.
-		const firstPreview = tabs.findIndex((tab) => tab.preview);
-		for (const [index, tab] of tabs.entries()) {
-			if (index !== firstPreview) tab.preview = false;
-		}
-		const activeId = tabs.some((tab) => tab.id === parsed.activeId)
-			? parsed.activeId
-			: (tabs[0]?.id ?? null);
-		return { tabs, activeId };
-	} catch {
-		return null;
-	}
-}
-
-export function useDataBrowserTabs() {
-	const tabs = useDmsState<BrowserTab[]>("dms-database-browser-tabs", () => []);
-	const activeId = useDmsState<string | null>(
-		"dms-database-browser-active",
-		() => null,
-	);
-	const route = useDmsRoute();
-	const router = useDmsRouter();
-	// Captured at setup so closeTab can drop the closed tab's
-	// grid state itself instead of relying on every caller to remember to.
-	const grid = useDataBrowserGrid();
-
-	const activeTab = computed(
-		() => tabs.value.find((tab) => tab.id === activeId.value) ?? null,
-	);
-	// When tabs span several schemas the tab bar disambiguates its labels.
-	const hasMultipleSchemas = computed(
-		() => new Set(tabs.value.map((tab) => tab.schema)).size > 1,
-	);
-
-	function persist() {
-		if (typeof window === "undefined") return;
-		try {
-			window.sessionStorage.setItem(
-				STORAGE_KEY,
-				JSON.stringify({ tabs: tabs.value, activeId: activeId.value }),
-			);
-		} catch {
-			// Quota/private-mode failures only cost tab restoration.
-		}
-	}
-
-	// The URL carries the ACTIVE tab only (deep-links); per-tab grid state
-	// deliberately stays out of it.
-	function syncUrl() {
-		const tab = activeTab.value;
-		const query = { ...route.query };
-		delete query.schema;
-		delete query.instance;
-		delete query.table;
-		if (tab) {
-			query.schema = tab.schema;
-			query.table = tab.table;
-			if (tab.instance !== DEFAULT_INSTANCE_VALUE) query.instance = tab.instance;
-		}
-		if (
-			Object.keys(query).length === Object.keys(route.query).length &&
-			Object.entries(query).every(([key, value]) => route.query[key] === value)
-		) return;
-		router.replace({ query });
-	}
-
-	function activateTab(id: string) {
-		if (!tabs.value.some((tab) => tab.id === id)) return;
-		activeId.value = id;
-		syncUrl();
-		persist();
-	}
-
-	// Promote a preview tab to a permanent one (double-click, pin icon, drag).
-	function pinTab(id: string) {
-		const tab = tabs.value.find((t) => t.id === id);
-		if (!tab?.preview) return;
-		tabs.value = tabs.value.map((t) =>
-			t.id === id ? { ...t, preview: false } : t,
-		);
-		persist();
-	}
-
-	// Opens as a preview by default (VS Code-style: single-click reuses the
-	// preview slot). Pass preview = false for an explicitly permanent open
-	// (sidebar double-click, deep-links) — it also pins the tab if already
-	// open as preview.
-	function openTab(
-		schema: string,
-		instance: string,
-		table: string,
-		preview = true,
-	) {
-		const id = browserTabId(schema, instance, table);
-		const existing = tabs.value.find((tab) => tab.id === id);
-		if (existing) {
-			if (!preview) pinTab(id);
-			activateTab(id);
-			return;
-		}
-		const tab: BrowserTab = { id, schema, instance, table, preview };
-		const previewIndex = tabs.value.findIndex((t) => t.preview);
-		if (preview && previewIndex >= 0) {
-			// Reuse the preview slot in place: swap its content, drop the replaced
-			// tab's grid state (its id dies with it).
-			const replaced = tabs.value[previewIndex]!;
-			const next = [...tabs.value];
-			next[previewIndex] = tab;
-			tabs.value = next;
-			grid.drop(replaced.id);
-		} else {
-			tabs.value = [...tabs.value, tab];
-		}
-		activateTab(id);
-	}
-
-	function closeTab(id: string) {
-		const index = tabs.value.findIndex((tab) => tab.id === id);
-		if (index < 0) return;
-		const next = tabs.value.filter((tab) => tab.id !== id);
-		tabs.value = next;
-		if (activeId.value === id) {
-			// Right neighbour first, then left — mirrors browser tab behaviour.
-			activeId.value = (next[index] ?? next[index - 1])?.id ?? null;
-		}
-		// The closed tab's grid state and cached rows go with it — otherwise they
-		// leak for the rest of the session.
-		grid.drop(id);
-		syncUrl();
-		persist();
-	}
-
-	// Reorder (drag & drop): move the dragged tab to the target tab's position.
-	// Pure reorder — pin-on-drag is a gesture policy and lives at the drop site
-	// (the tab bar's onDrop), not in this primitive.
-	function moveTab(draggedId: string, targetId: string) {
-		if (draggedId === targetId) return;
-		const next = [...tabs.value];
-		const from = next.findIndex((tab) => tab.id === draggedId);
-		const to = next.findIndex((tab) => tab.id === targetId);
-		if (from < 0 || to < 0) return;
-		const [moved] = next.splice(from, 1);
-		if (!moved) return;
-		next.splice(to, 0, moved);
-		tabs.value = next;
-		persist();
-	}
-
-	// Restore persisted tabs, then let the URL win for the active selection so
-	// existing deep-links keep working. Call exactly once, from the page's
-	// onMounted.
-	function restore() {
-		const persisted = readPersisted();
-		if (persisted) {
-			tabs.value = persisted.tabs;
-			activeId.value = persisted.activeId;
-		}
-		const schema = route.query.schema;
-		const table = route.query.table;
-		if (
-			typeof schema === "string" &&
-			schema &&
-			typeof table === "string" &&
-			table
-		) {
-			const instance =
-				typeof route.query.instance === "string" && route.query.instance
-					? route.query.instance
-					: DEFAULT_INSTANCE_VALUE;
-			// Deep-links carry explicit intent (overview row double-click, the
-			// inspector's "browse data" button, shared URLs): open permanently, the
-			// preview slot is for casual sidebar browsing only.
-			openTab(schema, instance, table, false);
-		} else if (!schema && activeTab.value) {
-			// Only reclaim the URL when it carries no selection at all: a
-			// schema-only deep-link (?schema=X) is the sidebar's to honour and
-			// must not be clobbered by the restored tab.
-			syncUrl();
-		}
-	}
-
-	return {
-		tabs,
-		activeId,
-		activeTab,
-		hasMultipleSchemas,
-		openTab,
-		closeTab,
-		activateTab,
-		pinTab,
-		moveTab,
-		restore,
-	};
-}