insforge 0.3.3 → 1.3.0

package/frontend/src/features/database/components/DatabaseDataGrid.tsx

@@ -26,22 +26,24 @@ function DatabaseTextCellEditor({
   onRowChange,
   onClose,
   onCellEdit,
+  primaryKeyColumn,
 }: RenderEditCellProps<DatabaseDataGridRow> & {
   onCellEdit?: (rowId: string, columnKey: string, newValue: string) => Promise<void>;
+  primaryKeyColumn: string;
 }) {
   const handleValueChange = React.useCallback(
     (newValue: string) => {
       const oldValue = row[column.key];
 
       if (onCellEdit && String(oldValue) !== String(newValue)) {
-        void onCellEdit(String(row.id || ''), column.key, newValue);
+        void onCellEdit(String(row[primaryKeyColumn] || ''), column.key, newValue);
       }
 
       const updatedRow = { ...row, [column.key]: newValue };
       onRowChange(updatedRow);
       onClose();
     },
-    [row, column.key, onCellEdit, onRowChange, onClose]
+    [row, column.key, onCellEdit, onRowChange, onClose, primaryKeyColumn]
   );
 
   return (
@@ -61,23 +63,25 @@ function DatabaseBooleanCellEditor({
   onClose,
   onCellEdit,
   columnSchema,
+  primaryKeyColumn,
 }: RenderEditCellProps<DatabaseDataGridRow> & {
   onCellEdit?: (rowId: string, columnKey: string, newValue: string) => Promise<void>;
   columnSchema: ColumnSchema;
+  primaryKeyColumn: string;
 }) {
   const handleValueChange = React.useCallback(
     (newValue: string) => {
       const value: boolean | null = newValue === 'null' ? null : newValue === 'true';
 
       if (onCellEdit && row[column.key] !== value) {
-        void onCellEdit(String(row.id || ''), column.key, newValue);
+        void onCellEdit(String(row[primaryKeyColumn] || ''), column.key, newValue);
       }
 
       const updatedRow = { ...row, [column.key]: value };
       onRowChange(updatedRow);
       onClose();
     },
-    [row, column.key, onRowChange, onClose, onCellEdit]
+    [row, column.key, onRowChange, onClose, onCellEdit, primaryKeyColumn]
   );
 
   return (
@@ -97,9 +101,11 @@ function DatabaseDateCellEditor({
   onClose,
   onCellEdit,
   columnSchema,
+  primaryKeyColumn,
 }: RenderEditCellProps<DatabaseDataGridRow> & {
   onCellEdit?: (rowId: string, columnKey: string, newValue: string) => Promise<void>;
   columnSchema: ColumnSchema;
+  primaryKeyColumn: string;
 }) {
   const handleValueChange = React.useCallback(
     (newValue: string | null) => {
@@ -107,14 +113,14 @@ function DatabaseDateCellEditor({
         onCellEdit &&
         new Date(row[column.key] as string).getTime() !== new Date(newValue ?? '').getTime()
       ) {
-        void onCellEdit(String(row.id || ''), column.key, newValue ?? '');
+        void onCellEdit(String(row[primaryKeyColumn] || ''), column.key, newValue ?? '');
       }
 
       const updatedRow = { ...row, [column.key]: newValue };
       onRowChange(updatedRow);
       onClose();
     },
-    [onCellEdit, row, column.key, onRowChange, onClose]
+    [onCellEdit, row, column.key, onRowChange, onClose, primaryKeyColumn]
   );
 
   return (
@@ -135,21 +141,23 @@ function DatabaseJsonCellEditor({
   onClose,
   onCellEdit,
   columnSchema,
+  primaryKeyColumn,
 }: RenderEditCellProps<DatabaseDataGridRow> & {
   onCellEdit?: (rowId: string, columnKey: string, newValue: string) => Promise<void>;
   columnSchema: ColumnSchema;
+  primaryKeyColumn: string;
 }) {
   const handleValueChange = React.useCallback(
     (newValue: string) => {
       if (onCellEdit && row[column.key] !== newValue) {
-        void onCellEdit(String(row.id || ''), column.key, newValue);
+        void onCellEdit(String(row[primaryKeyColumn] || ''), column.key, newValue);
       }
 
       const updatedRow = { ...row, [column.key]: newValue };
       onRowChange(updatedRow);
       onClose();
     },
-    [column.key, onCellEdit, row, onRowChange, onClose]
+    [column.key, onCellEdit, row, onRowChange, onClose, primaryKeyColumn]
   );
 
   return (
@@ -172,6 +180,8 @@ export function convertSchemaToColumns(
     return [];
   }
 
+  const primaryKeyColumn = schema.columns.find((col) => col.isPrimaryKey)?.columnName || '';
+
   // Create typed cell renderers
   const cellRenderers = createDefaultCellRenderer<DatabaseDataGridRow>();
 
@@ -216,33 +226,57 @@ export function convertSchemaToColumns(
         />
       );
       // Note: editable is set in the column definition above
-    } else if (col.columnName === 'id') {
+    } else if (col.columnName === primaryKeyColumn) {
       column.renderCell = cellRenderers.id;
       // Note: editable is set in the column definition above
     } else if (col.type === ColumnType.BOOLEAN) {
       column.renderCell = cellRenderers.boolean;
       column.renderEditCell = (props: RenderEditCellProps<DatabaseDataGridRow>) => (
-        <DatabaseBooleanCellEditor {...props} columnSchema={col} onCellEdit={onCellEdit} />
+        <DatabaseBooleanCellEditor
+          {...props}
+          columnSchema={col}
+          onCellEdit={onCellEdit}
+          primaryKeyColumn={primaryKeyColumn}
+        />
       );
     } else if (col.type === ColumnType.DATE) {
       column.renderCell = cellRenderers.date;
       column.renderEditCell = (props: RenderEditCellProps<DatabaseDataGridRow>) => (
-        <DatabaseDateCellEditor {...props} columnSchema={col} onCellEdit={onCellEdit} />
+        <DatabaseDateCellEditor
+          {...props}
+          columnSchema={col}
+          onCellEdit={onCellEdit}
+          primaryKeyColumn={primaryKeyColumn}
+        />
       );
     } else if (col.type === ColumnType.DATETIME) {
       column.renderCell = cellRenderers.datetime;
       column.renderEditCell = (props: RenderEditCellProps<DatabaseDataGridRow>) => (
-        <DatabaseDateCellEditor {...props} columnSchema={col} onCellEdit={onCellEdit} />
+        <DatabaseDateCellEditor
+          {...props}
+          columnSchema={col}
+          onCellEdit={onCellEdit}
+          primaryKeyColumn={primaryKeyColumn}
+        />
       );
     } else if (col.type === ColumnType.JSON) {
       column.renderCell = cellRenderers.json;
       column.renderEditCell = (props: RenderEditCellProps<DatabaseDataGridRow>) => (
-        <DatabaseJsonCellEditor {...props} columnSchema={col} onCellEdit={onCellEdit} />
+        <DatabaseJsonCellEditor
+          {...props}
+          columnSchema={col}
+          onCellEdit={onCellEdit}
+          primaryKeyColumn={primaryKeyColumn}
+        />
       );
     } else {
       column.renderCell = cellRenderers.text;
       column.renderEditCell = (props: RenderEditCellProps<DatabaseDataGridRow>) => (
-        <DatabaseTextCellEditor {...props} onCellEdit={onCellEdit} />
+        <DatabaseTextCellEditor
+          {...props}
+          onCellEdit={onCellEdit}
+          primaryKeyColumn={primaryKeyColumn}
+        />
       );
     }
 
@@ -255,7 +289,6 @@ export interface DatabaseDataGridProps extends Omit<DataGridProps<DatabaseDataGr
   schema?: TableSchema;
   onCellEdit?: (rowId: string, columnKey: string, newValue: string) => Promise<void>;
   onJumpToTable?: (tableName: string) => void;
-  searchQuery?: string;
 }
 
 // Specialized DataGrid for database tables
@@ -263,7 +296,6 @@ export function DatabaseDataGrid({
   schema,
   onCellEdit,
   onJumpToTable,
-  searchQuery,
   ...props
 }: DatabaseDataGridProps) {
   const columns = useMemo(() => {
@@ -274,7 +306,6 @@ export function DatabaseDataGrid({
     <DataGrid<DatabaseDataGridRow>
       {...props}
       columns={columns}
-      emptyStateTitle={searchQuery ? 'No records match your search criteria' : undefined}
       showSelection={true}
       showPagination={true}
     />

package/frontend/src/features/database/components/ForeignKeyCell.tsx

@@ -1,17 +1,20 @@
 import { useState, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
 import { Link2, AlertCircle, X } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { TypeBadge } from '@/components/TypeBadge';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/radix/Popover';
 import {
+  Button,
+  TypeBadge,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/radix/Tooltip';
-import { databaseService } from '@/features/database/services/database.service';
-import { ConvertedValue, DataGrid } from '@/components/datagrid';
+  ConvertedValue,
+  DataGrid,
+} from '@/components';
+import { useTables } from '@/features/database/hooks/useTables';
+import { useRecords } from '@/features/database/hooks/useRecords';
 import { convertSchemaToColumns } from '@/features/database/components/DatabaseDataGrid';
 import { formatValueForDisplay } from '@/lib/utils/utils';
 
@@ -26,6 +29,8 @@ interface ForeignKeyCellProps {
 
 export function ForeignKeyCell({ value, foreignKey, onJumpToTable }: ForeignKeyCellProps) {
   const [open, setOpen] = useState(false);
+  const { useTableSchema } = useTables();
+  const recordsHook = useRecords(foreignKey.table);
 
   // Helper function to safely render any value type (including JSON objects)
   const renderValue = (val: ConvertedValue): string => {
@@ -33,41 +38,17 @@ export function ForeignKeyCell({ value, foreignKey, onJumpToTable }: ForeignKeyC
   };
 
   // Fetch the referenced record when popover opens
+  const searchValue = value ? renderValue(value) : '';
   const {
     data: recordData,
     isLoading: _isLoading,
     error,
-  } = useQuery({
-    queryKey: ['table', foreignKey.table, foreignKey.column, value],
-    queryFn: async () => {
-      if (!value) {
-        return null;
-      }
-
-      try {
-        const searchValue = renderValue(value);
-        const record = await databaseService.getRecordByForeignKeyValue(
-          foreignKey.table,
-          foreignKey.column,
-          searchValue
-        );
-        return record;
-      } catch (error) {
-        console.error('Failed to fetch foreign key record:', error);
-        throw error;
-      }
-    },
-    enabled: open && !!value,
-  });
+  } = recordsHook.useRecordByForeignKey(foreignKey.column, searchValue, open && !!value);
 
   const record = recordData;
 
   // Fetch schema for the referenced table
-  const { data: schema } = useQuery({
-    queryKey: ['schema', foreignKey.table],
-    queryFn: () => databaseService.getTableSchema(foreignKey.table),
-    enabled: open && !!value,
-  });
+  const { data: schema } = useTableSchema(foreignKey.table, open && !!value);
 
   // Convert schema to columns for the mini DataGrid
   const columns = useMemo(() => {

package/frontend/src/features/database/components/ForeignKeyPopover.tsx

@@ -1,11 +1,17 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@/components/radix/Button';
-import { Label } from '@/components/radix/Label';
-import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/radix/Dialog';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/radix/Select';
-import { useMetadata } from '@/features/metadata/hooks/useMetadata';
-import { databaseService } from '@/features/database/services/database.service';
+import {
+  Button,
+  Label,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@/components';
+import { useTables } from '@/features/database/hooks/useTables';
 import { UseFormReturn } from 'react-hook-form';
 import { TableFormSchema, TableFormForeignKeySchema } from '../schema';
 import { ColumnSchema, OnDeleteActionSchema, OnUpdateActionSchema } from '@insforge/shared-schemas';
@@ -39,6 +45,7 @@ export function ForeignKeyPopover({
   });
 
   const columns = form.watch('columns');
+  const { tables, useTableSchema } = useTables();
 
   // Set initial values when editing
   useEffect(() => {
@@ -63,23 +70,15 @@ export function ForeignKeyPopover({
   }, [open, initialValue]);
 
   // Get available tables
-  const { tables } = useMetadata({ enabled: open });
-
   const availableTables = tables.filter(
     (tableName) => mode === 'create' || tableName !== editTableName
   );
 
   // Get columns for selected reference table
-  const { data: referenceTableSchema } = useQuery({
-    queryKey: ['table-schema', newForeignKey.referenceTable],
-    queryFn: async () => {
-      if (!newForeignKey.referenceTable) {
-        return null;
-      }
-      return await databaseService.getTableSchema(newForeignKey.referenceTable);
-    },
-    enabled: !!newForeignKey.referenceTable && open,
-  });
+  const { data: referenceTableSchema } = useTableSchema(
+    newForeignKey.referenceTable || '',
+    !!newForeignKey.referenceTable && open
+  );
 
   // Get the type of the selected source column
   const getSourceFieldType = useMemo(() => {
@@ -237,7 +236,7 @@ export function ForeignKeyPopover({
                   <SelectContent className="max-w-[360px]">
                     {(() => {
                       const allColumns = referenceTableSchema?.columns || [];
-                      if (allColumns.length > 0) {
+                      if (allColumns.length) {
                         const sourceType = getSourceFieldType;
 
                         return allColumns.map((col: ColumnSchema) => {

package/frontend/src/features/database/components/LinkRecordModal.tsx

@@ -1,11 +1,13 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/radix/Dialog';
-import { Button } from '@/components/radix/Button';
-import { databaseService } from '@/features/database/services/database.service';
-import { convertSchemaToColumns } from '@/features/database/components/DatabaseDataGrid';
-import { SearchInput, DataGrid, TypeBadge } from '@/components';
+import { useState, useEffect, useMemo, useCallback, ReactNode } from 'react';
 import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  SearchInput,
+  DataGrid,
+  TypeBadge,
   type CellMouseEvent,
   type CellClickArgs,
   type RenderCellProps,
@@ -15,71 +17,57 @@ import {
   type DatabaseRecord,
   type ConvertedValue,
   type DataGridRowType,
-} from '@/components/datagrid';
+} from '@/components';
+import { useTables } from '@/features/database/hooks/useTables';
+import { useRecords } from '@/features/database/hooks/useRecords';
+import { convertSchemaToColumns } from '@/features/database/components/DatabaseDataGrid';
 import { formatValueForDisplay } from '@/lib/utils/utils';
 import { ColumnType } from '@insforge/shared-schemas';
 
 const PAGE_SIZE = 50;
 
 interface LinkRecordModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
   referenceTable: string;
   referenceColumn: string;
   onSelectRecord: (record: DatabaseRecord) => void;
-  currentValue?: string | null;
+  children: (openModal: () => void) => ReactNode;
 }
 
 export function LinkRecordModal({
-  open,
-  onOpenChange,
   referenceTable,
   referenceColumn,
   onSelectRecord,
+  children,
 }: LinkRecordModalProps) {
+  const [open, setOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedRecord, setSelectedRecord] = useState<DatabaseRecord | null>(null);
   const [sortColumns, setSortColumns] = useState<SortColumn[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const { useTableSchema } = useTables();
+  const recordsHook = useRecords(referenceTable);
 
   // Fetch table schema
-  const { data: schema } = useQuery({
-    queryKey: ['table-schema', referenceTable],
-    queryFn: () => databaseService.getTableSchema(referenceTable),
-    enabled: open,
-  });
+  const { data: schema } = useTableSchema(referenceTable, open);
 
   // Fetch records from the reference table
-  const { data: recordsData, isLoading } = useQuery({
-    queryKey: [
-      'table',
-      referenceTable,
-      currentPage,
-      PAGE_SIZE,
-      searchQuery,
-      JSON.stringify(sortColumns),
-    ],
-    queryFn: async () => {
-      const offset = (currentPage - 1) * PAGE_SIZE;
-      const [schema, records] = await Promise.all([
-        databaseService.getTableSchema(referenceTable),
-        databaseService.getTableRecords(
-          referenceTable,
-          PAGE_SIZE,
-          offset,
-          searchQuery || undefined,
-          sortColumns
-        ),
-      ]);
+  const offset = (currentPage - 1) * PAGE_SIZE;
+  const { data: recordsResponse, isLoading } = recordsHook.useTableRecords(
+    PAGE_SIZE,
+    offset,
+    searchQuery || undefined,
+    sortColumns,
+    open
+  );
 
-      return {
-        schema,
-        records: records.records,
-        totalRecords: records.pagination.total || schema.recordCount,
-      };
-    },
-    enabled: open,
-  });
+  const recordsData =
+    schema && recordsResponse
+      ? {
+          schema,
+          records: recordsResponse.records,
+          totalRecords: recordsResponse.pagination.total || schema.recordCount,
+        }
+      : undefined;
 
   // Reset page when search query changes
   useEffect(() => {
@@ -193,96 +181,103 @@ export function LinkRecordModal({
   const handleConfirmSelection = () => {
     if (selectedRecord) {
       onSelectRecord(selectedRecord);
-      onOpenChange(false);
+      setOpen(false);
     }
   };
 
   const handleCancel = () => {
-    onOpenChange(false);
+    setOpen(false);
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl h-[calc(100vh-48px)] p-0 gap-0 flex flex-col">
-        <DialogHeader className="px-6 py-3 border-b border-zinc-200 dark:border-neutral-700 flex-shrink-0 flex flex-col gap-1">
-          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
-            Link Record
-          </DialogTitle>
-          <div className="flex items-center gap-1.5">
-            <span className="text-sm text-zinc-500 dark:text-neutral-400">
-              Select a record to reference from
-            </span>
-            <TypeBadge
-              type={`${referenceTable}.${referenceColumn}`}
-              className="dark:bg-neutral-700"
+    <>
+      {children(() => setOpen(true))}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-4xl h-[calc(100vh-48px)] p-0 gap-0 flex flex-col">
+          <DialogHeader className="px-6 py-3 border-b border-zinc-200 dark:border-neutral-700 flex-shrink-0 flex flex-col gap-1">
+            <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+              Link Record
+            </DialogTitle>
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm text-zinc-500 dark:text-neutral-400">
+                Select a record to reference from
+              </span>
+              <TypeBadge
+                type={`${referenceTable}.${referenceColumn}`}
+                className="dark:bg-neutral-700"
+              />
+            </div>
+          </DialogHeader>
+
+          {/* Search Bar */}
+          <div className="p-3">
+            <SearchInput
+              value={searchQuery}
+              onChange={setSearchQuery}
+              placeholder="Search records..."
+              className="w-60 dark:text-white dark:bg-neutral-900 dark:border-neutral-700"
+              debounceTime={300}
             />
           </div>
-        </DialogHeader>
-
-        {/* Search Bar */}
-        <div className="p-3">
-          <SearchInput
-            value={searchQuery}
-            onChange={setSearchQuery}
-            placeholder="Search records..."
-            className="w-60 dark:text-white dark:bg-neutral-900 dark:border-neutral-700"
-            debounceTime={300}
-          />
-        </div>
 
-        {/* Records DataGrid */}
-        <div className="flex-1 overflow-hidden">
-          <DataGrid
-            data={records}
-            columns={columns}
-            loading={isLoading && !records.length}
-            selectedRows={selectedRows}
-            onSelectedRowsChange={(newSelectedRows) => {
-              // Handle selection changes from cell clicks
-              const selectedId = Array.from(newSelectedRows)[0];
-              if (selectedId) {
-                const record = records.find((r: DatabaseRecord) => String(r.id) === selectedId);
-                if (record) {
-                  setSelectedRecord(record);
+          {/* Records DataGrid */}
+          <div className="flex-1 overflow-hidden">
+            <DataGrid
+              data={records}
+              columns={columns}
+              loading={isLoading && !records.length}
+              selectedRows={selectedRows}
+              onSelectedRowsChange={(newSelectedRows) => {
+                // Handle selection changes from cell clicks
+                const selectedId = Array.from(newSelectedRows)[0];
+                if (selectedId) {
+                  const record = records.find((r: DatabaseRecord) => String(r.id) === selectedId);
+                  if (record) {
+                    setSelectedRecord(record);
+                  }
+                } else {
+                  setSelectedRecord(null);
                 }
-              } else {
-                setSelectedRecord(null);
+              }}
+              sortColumns={sortColumns}
+              onSortColumnsChange={setSortColumns}
+              onCellClick={handleCellClick}
+              currentPage={currentPage}
+              totalPages={totalPages}
+              pageSize={PAGE_SIZE}
+              totalRecords={totalRecords}
+              onPageChange={setCurrentPage}
+              showSelection={false}
+              showPagination={true}
+              emptyState={
+                <div className="flex flex-col items-center justify-center h-full">
+                  <p className="text-neutral-500 dark:text-neutral-400 select-none">
+                    {searchQuery ? 'No records match your search criteria' : 'No records found'}
+                  </p>
+                </div>
               }
-            }}
-            sortColumns={sortColumns}
-            onSortColumnsChange={setSortColumns}
-            onCellClick={handleCellClick}
-            currentPage={currentPage}
-            totalPages={totalPages}
-            pageSize={PAGE_SIZE}
-            totalRecords={totalRecords}
-            onPageChange={setCurrentPage}
-            showSelection={false}
-            showPagination={true}
-            emptyStateTitle={
-              searchQuery ? 'No records match your search criteria' : 'No records found'
-            }
-          />
-        </div>
+            />
+          </div>
 
-        {/* Footer */}
-        <div className="px-6 py-4 border-t border-zinc-200 dark:border-neutral-700 flex justify-end gap-3 flex-shrink-0">
-          <Button
-            variant="outline"
-            onClick={handleCancel}
-            className="dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={handleConfirmSelection}
-            disabled={!selectedRecord}
-            className="bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400"
-          >
-            Add Record
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
+          {/* Footer */}
+          <div className="px-6 py-4 border-t border-zinc-200 dark:border-neutral-700 flex justify-end gap-3 flex-shrink-0">
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              className="dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirmSelection}
+              disabled={!selectedRecord}
+              className="bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400"
+            >
+              Add Record
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }