From c7f699d5e93e8636382cc8a436d9418de9cbb620 Mon Sep 17 00:00:00 2001 From: Abdou TOP Date: Fri, 16 Jan 2026 03:02:45 +0000 Subject: [PATCH] feat(Dep..Page.tsx): Add functionality to view individual table row details in a resizable drawer. --- web/pages/DeploymentPage.tsx | 207 +++++++++++++++++++++++++++-------- 1 file changed, 162 insertions(+), 45 deletions(-) diff --git a/web/pages/DeploymentPage.tsx b/web/pages/DeploymentPage.tsx index f399768..cb85359 100644 --- a/web/pages/DeploymentPage.tsx +++ b/web/pages/DeploymentPage.tsx @@ -46,6 +46,7 @@ type AnyRecord = Record const schema = api['GET/api/deployment/schema'].signal() // API signal for table data export const tableData = api['POST/api/deployment/table/data'].signal() +export const rowDetailsData = api['POST/api/deployment/table/data'].signal() // Effect to fetch schema when deployment URL changes effect(() => { @@ -328,16 +329,28 @@ const EmptyRow = ({ colSpan }: { colSpan: number }) => ( const DataRow = ( { row, columns, index }: { row: AnyRecord; columns: string[]; index: number }, -) => ( - - - {columns.map((key, i) => ( - - - - ))} - -) +) => { + const tableName = url.params.table || schema.data?.tables?.[0]?.table + const tableDef = schema.data?.tables?.find((t) => t.table === tableName) + const pk = tableDef?.columns?.[0]?.name + const rowId = pk ? String(row[pk]) : undefined + + return ( + + + + {columns.map((key, i) => ( + + + + ))} + + + ) +} const TableHeader = ({ columns }: { columns: string[] }) => ( @@ -1043,14 +1056,117 @@ const ComingSoon = ({ title }: { title: string }) => ( ) -type DrawerTab = 'history' | 'insert' +const schemaPanel = +const TabViews = { + tables: ( +
+ {schemaPanel} + +
+ ), + queries: ( +
+ {schemaPanel} + +
+ ), + logs: , + // Add other tab views here as needed +} + +effect(() => { + const rowId = url.params['row-id'] + const dep = url.params.dep + + if (dep && rowId) { + const tableName = url.params.table || schema.data?.tables?.[0]?.table + const tableDef = schema.data?.tables?.find((t) => t.table === tableName) + const pk = tableDef?.columns?.[0]?.name + + if (tableName && pk) { + rowDetailsData.fetch({ + deployment: dep, + table: tableName, + filter: [{ + key: pk, + comparator: '=', + value: rowId, + }], + sort: [], + search: '', + limit: 1, + offset: 0, + }) + } + } +}) + +const RowDetails = () => { + const row = rowDetailsData.data?.rows?.[0] + + if (rowDetailsData.pending) { + return ( +
+ +
+ ) + } + + if (rowDetailsData.error) { + return ( +
+ Error loading row: {rowDetailsData.error.message} +
+ ) + } + + if (!row) { + return ( +
+ Row not found +
+ ) + } + + return ( +
+
+

Row Details

+ + + +
+
+ {Object.entries(row).map(([key, value]) => ( +
+
+ {key} +
+
+ {typeof value === 'object' && value !== null + ? JSON.stringify(value, null, 2) + : String(value ?? 'null')} +
+
+ ))} +
+
+ ) +} + +type DrawerTab = 'history' | 'insert' | 'view-row' const drawerViews: Record = { history: , insert: , + 'view-row': , } as const -const Drawer = () => ( -
+const Drawer = ({ children }: { children: JSX.Element }) => ( +
( } }} /> -
+
+ {children} +
+
-
-
-
- {drawerViews[url.params.drawer as DrawerTab] || ( -
-

No view selected

-

Please select a view from the sidebar.

-
- )} +
+
+
+
+ {drawerViews[url.params.drawer as DrawerTab] || ( +
+

No view selected

+

Please select a view from the sidebar.

+
+ )} +
@@ -1085,23 +1218,6 @@ const Drawer = () => (
) -const schemaPanel = -const TabViews = { - tables: ( -
- {schemaPanel} - -
- ), - queries: ( -
- {schemaPanel} - -
- ), - logs: , -} - export const DeploymentPage = () => { const tab = (url.params.tab as 'tables' | 'queries' | 'logs') || 'tables' const view = TabViews[tab] @@ -1115,13 +1231,14 @@ export const DeploymentPage = () => {
-
- {view} -
+ +
+ {view} +
+
-
) }