insforge 0.3.1

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

@@ -0,0 +1,378 @@
+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 { UseFormReturn } from 'react-hook-form';
+import { TableFormSchema, TableFormForeignKeySchema } from '../schema';
+import { ColumnSchema, OnDeleteActionSchema, OnUpdateActionSchema } from '@insforge/shared-schemas';
+import { cn } from '@/lib/utils/utils';
+
+interface ForeignKeyPopoverProps {
+  form: UseFormReturn<TableFormSchema>;
+  mode: 'create' | 'edit';
+  editTableName?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAddForeignKey: (fk: TableFormForeignKeySchema) => void;
+  initialValue?: TableFormForeignKeySchema;
+}
+
+export function ForeignKeyPopover({
+  form,
+  mode,
+  editTableName,
+  open,
+  onOpenChange,
+  onAddForeignKey,
+  initialValue,
+}: ForeignKeyPopoverProps) {
+  const [newForeignKey, setNewForeignKey] = useState<TableFormForeignKeySchema>({
+    columnName: '',
+    referenceTable: '',
+    referenceColumn: '',
+    onDelete: 'NO ACTION',
+    onUpdate: 'NO ACTION',
+  });
+
+  const columns = form.watch('columns');
+
+  // Set initial values when editing
+  useEffect(() => {
+    if (open && initialValue) {
+      setNewForeignKey({
+        columnName: initialValue.columnName,
+        referenceTable: initialValue.referenceTable,
+        referenceColumn: initialValue.referenceColumn,
+        onDelete: initialValue.onDelete,
+        onUpdate: initialValue.onUpdate,
+      });
+    } else if (!open) {
+      // Reset when closing
+      setNewForeignKey({
+        columnName: '',
+        referenceTable: '',
+        referenceColumn: '',
+        onDelete: 'NO ACTION',
+        onUpdate: 'NO ACTION',
+      });
+    }
+  }, [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,
+  });
+
+  // Get the type of the selected source column
+  const getSourceFieldType = useMemo(() => {
+    if (!newForeignKey.columnName) {
+      return null;
+    }
+    const sourceColumn = columns.find((col) => col.columnName === newForeignKey.columnName);
+    return sourceColumn?.type || null;
+  }, [newForeignKey.columnName, columns]);
+
+  // Calculate if the button should be enabled
+  const isAddButtonEnabled = Boolean(
+    newForeignKey.columnName && newForeignKey.referenceTable && newForeignKey.referenceColumn
+  );
+
+  const handleAddForeignKey = () => {
+    if (newForeignKey.columnName && newForeignKey.referenceTable && newForeignKey.referenceColumn) {
+      onAddForeignKey(newForeignKey);
+      setNewForeignKey({
+        columnName: '',
+        referenceTable: '',
+        referenceColumn: '',
+        onDelete: 'NO ACTION',
+        onUpdate: 'NO ACTION',
+      });
+      onOpenChange(false);
+    }
+  };
+
+  const handleCancelAddForeignKey = () => {
+    setNewForeignKey({
+      columnName: '',
+      referenceTable: '',
+      referenceColumn: '',
+      onDelete: 'NO ACTION',
+      onUpdate: 'NO ACTION',
+    });
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[520px] p-0 gap-0">
+        <div className="flex flex-col">
+          {/* Header */}
+          <div className="flex flex-col gap-1 px-6 py-3 border-b border-zinc-200 dark:border-neutral-700">
+            <DialogTitle className="text-lg font-semibold dark:text-white">
+              {initialValue ? 'Edit Foreign Key' : 'Add Foreign Key'}
+            </DialogTitle>
+            <DialogDescription className="text-sm text-zinc-500 dark:text-neutral-400">
+              {initialValue
+                ? 'Modify the relationship between tables'
+                : 'Create a relationship between this table and another table'}
+            </DialogDescription>
+          </div>
+
+          {/* Form Content */}
+          <div className="flex flex-col gap-6 p-6">
+            {/* Column selector */}
+            <div className="flex flex-row gap-10 items-center">
+              <Label className="text-sm text-black dark:text-white flex-1">Column</Label>
+              <Select
+                value={newForeignKey.columnName}
+                onValueChange={(value) =>
+                  setNewForeignKey((prev) => ({ ...prev, columnName: value }))
+                }
+              >
+                <SelectTrigger className="w-70 h-10 border-zinc-200 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+                  <span
+                    className={cn(
+                      'text-sm text-muted-foreground dark:text-neutral-400',
+                      newForeignKey.columnName && 'text-black dark:text-white'
+                    )}
+                  >
+                    {newForeignKey.columnName || 'Select column'}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  {columns
+                    .filter((col) => col.columnName)
+                    .map((col, index) => (
+                      <SelectItem
+                        key={col.columnName || index}
+                        value={col.columnName}
+                        disabled={col.isSystemColumn}
+                      >
+                        <div className="flex flex-row items-center justify-between gap-2">
+                          <span className="truncate max-w-[160px] block">{col.columnName}</span>
+                          <span className="text-xs text-muted-foreground dark:text-neutral-400 flex-shrink-0">
+                            ({col.type})
+                          </span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Reference Table selector */}
+            <div className="flex flex-row gap-10 items-center">
+              <Label className="text-sm text-black dark:text-white flex-1">Reference Table</Label>
+              <Select
+                value={newForeignKey.referenceTable}
+                onValueChange={(value) => {
+                  setNewForeignKey((prev) => ({
+                    ...prev,
+                    referenceTable: value,
+                    referenceColumn: '', // Reset column when table changes
+                  }));
+                }}
+              >
+                <SelectTrigger className="w-70 h-10 border-zinc-200 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+                  <span
+                    className={cn(
+                      'text-sm text-muted-foreground dark:text-neutral-400',
+                      newForeignKey.referenceTable && 'text-black dark:text-white'
+                    )}
+                  >
+                    {newForeignKey.referenceTable || 'Select table'}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  {availableTables.map((tableName) => (
+                    <SelectItem key={tableName} value={tableName}>
+                      {tableName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Reference Column selector - only shown after table and source column are selected */}
+            {newForeignKey.referenceTable && newForeignKey.columnName && (
+              <div className="flex flex-row gap-10 items-center">
+                <Label className="text-sm text-black dark:text-white flex-1">
+                  Reference Column
+                </Label>
+                <Select
+                  key={`column-select-${newForeignKey.referenceTable}`}
+                  value={newForeignKey.referenceColumn}
+                  onValueChange={(value) =>
+                    setNewForeignKey((prev) => ({ ...prev, referenceColumn: value }))
+                  }
+                >
+                  <SelectTrigger className="w-70 h-10 border-zinc-200 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+                    <span
+                      className={cn(
+                        'text-sm text-muted-foreground dark:text-neutral-400',
+                        newForeignKey.referenceColumn && 'text-black dark:text-white'
+                      )}
+                    >
+                      {newForeignKey.referenceColumn || 'Select column'}
+                    </span>
+                  </SelectTrigger>
+                  <SelectContent className="max-w-[360px]">
+                    {(() => {
+                      const allColumns = referenceTableSchema?.columns || [];
+                      if (allColumns.length > 0) {
+                        const sourceType = getSourceFieldType;
+
+                        return allColumns.map((col: ColumnSchema) => {
+                          // Check if types match exactly (sourceType should always exist at this point since we require columnName)
+                          const typesMatch =
+                            sourceType && col.type.toLowerCase() === sourceType.toLowerCase();
+
+                          // Disable if not a valid reference or types don't match
+                          const isDisabled = !col.isUnique || !typesMatch;
+
+                          // Determine what to show on the right side
+                          let rightText = '';
+                          if (!col.isUnique) {
+                            rightText = 'Not unique';
+                          } else if (!typesMatch) {
+                            rightText = 'Columntype not match';
+                          }
+
+                          return (
+                            <SelectItem
+                              key={col.columnName}
+                              value={col.columnName}
+                              disabled={isDisabled}
+                              className="relative flex items-center justify-between pr-16"
+                            >
+                              <div className="flex flex-row items-center justify-between gap-2">
+                                <span
+                                  className="flex-1 truncate max-w-[180px] block"
+                                  title={col.columnName}
+                                >
+                                  {col.columnName}
+                                </span>
+                                <span className="text-xs text-muted-foreground dark:text-neutral-400">
+                                  ({col.type})
+                                </span>
+                                {rightText && (
+                                  <span className="text-right text-xs text-muted-foreground dark:text-neutral-400">
+                                    {rightText}
+                                  </span>
+                                )}
+                              </div>
+                            </SelectItem>
+                          );
+                        });
+                      }
+
+                      return (
+                        <div className="px-2 py-1.5 text-sm text-muted-foreground">
+                          No columns available
+                        </div>
+                      );
+                    })()}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* On Update action */}
+            <div className="flex flex-row gap-10 items-center">
+              <Label className="text-sm text-black dark:text-white flex-1">On Update</Label>
+              <Select
+                value={newForeignKey.onUpdate}
+                onValueChange={(value) =>
+                  setNewForeignKey((prev) => ({
+                    ...prev,
+                    onUpdate: value as OnUpdateActionSchema,
+                  }))
+                }
+              >
+                <SelectTrigger className="w-70 h-10 border-zinc-200 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+                  <span className="text-sm text-black dark:text-white">
+                    {newForeignKey.onUpdate}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="NO ACTION">No Action</SelectItem>
+                  <SelectItem value="CASCADE">Cascade</SelectItem>
+                  <SelectItem value="RESTRICT">Restrict</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* On Delete action */}
+            <div className="flex flex-row gap-10 items-center">
+              <Label className="text-sm text-black dark:text-white flex-1">On Delete</Label>
+              <Select
+                value={newForeignKey.onDelete}
+                onValueChange={(value) =>
+                  setNewForeignKey((prev) => ({
+                    ...prev,
+                    onDelete: value as OnDeleteActionSchema,
+                  }))
+                }
+              >
+                <SelectTrigger className="w-70 h-10 border-zinc-200 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+                  <span className="text-sm text-black dark:text-white">
+                    {newForeignKey.onDelete}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="NO ACTION">No Action</SelectItem>
+                  <SelectItem value="CASCADE">Cascade</SelectItem>
+                  <SelectItem value="SET NULL">Set Null</SelectItem>
+                  <SelectItem value="SET DEFAULT">Set Default</SelectItem>
+                  <SelectItem value="RESTRICT">Restrict</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end gap-3 p-6 border-t border-zinc-200 dark:border-neutral-700">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancelAddForeignKey}
+              className="h-10 px-4 dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleAddForeignKey}
+              disabled={!isAddButtonEnabled}
+              className={`h-10 px-4 ${
+                !isAddButtonEnabled
+                  ? 'bg-zinc-950/40 dark:bg-emerald-300/40'
+                  : 'bg-zinc-950 dark:text-zinc-950 dark:bg-emerald-300 dark:hover:bg-emerald-400'
+              } text-white dark:text-zinc-950 shadow-sm`}
+            >
+              {initialValue ? 'Update Foreign Key' : 'Add Foreign Key'}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,288 @@
+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 {
+  type CellMouseEvent,
+  type CellClickArgs,
+  type RenderCellProps,
+  type RenderHeaderCellProps,
+  type SortColumn,
+  SortableHeaderRenderer,
+  type DatabaseRecord,
+  type ConvertedValue,
+  type DataGridRowType,
+} from '@/components/datagrid';
+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;
+}
+
+export function LinkRecordModal({
+  open,
+  onOpenChange,
+  referenceTable,
+  referenceColumn,
+  onSelectRecord,
+}: LinkRecordModalProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedRecord, setSelectedRecord] = useState<DatabaseRecord | null>(null);
+  const [sortColumns, setSortColumns] = useState<SortColumn[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Fetch table schema
+  const { data: schema } = useQuery({
+    queryKey: ['table-schema', referenceTable],
+    queryFn: () => databaseService.getTableSchema(referenceTable),
+    enabled: 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
+        ),
+      ]);
+
+      return {
+        schema,
+        records: records.records,
+        totalRecords: records.pagination.total || schema.recordCount,
+      };
+    },
+    enabled: open,
+  });
+
+  // Reset page when search query changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery]);
+
+  const records = useMemo(
+    (): DataGridRowType[] => recordsData?.records || [],
+    [recordsData?.records]
+  );
+  const totalRecords = recordsData?.totalRecords || 0;
+  const totalPages = Math.ceil(totalRecords / PAGE_SIZE);
+
+  // Create selected rows set for highlighting
+  const selectedRows = useMemo(() => {
+    if (!selectedRecord) {
+      return new Set<string>();
+    }
+    return new Set([String(selectedRecord.id || '')]);
+  }, [selectedRecord]);
+
+  // Handle cell click to select record - only for reference column
+  const handleCellClick = useCallback(
+    (args: CellClickArgs<DataGridRowType>, event: CellMouseEvent) => {
+      // Only allow selection when clicking on the reference column
+      if (args.column.key !== referenceColumn) {
+        // Prevent the default selection behavior for non-reference columns
+        event?.preventDefault();
+        event?.stopPropagation();
+        return;
+      }
+
+      const record = records.find((r: DatabaseRecord) => String(r.id) === String(args.row.id));
+      if (record) {
+        setSelectedRecord(record);
+      }
+    },
+    [records, referenceColumn]
+  );
+
+  // Convert schema to columns for the DataGrid with visual distinction
+  const columns = useMemo(() => {
+    const cols = convertSchemaToColumns(schema);
+    // Add visual indication for the reference column (clickable column)
+    return cols.map((col) => {
+      const baseCol = {
+        ...col,
+        width: 210,
+        minWidth: 210,
+        resizable: true,
+        editable: false,
+      };
+
+      // Helper function to render cell value properly based on type
+      const renderCellValue = (value: ConvertedValue, type: ColumnType | undefined) => {
+        return formatValueForDisplay(value, type);
+      };
+
+      if (col.key === referenceColumn) {
+        return {
+          ...baseCol,
+          renderCell: (props: RenderCellProps<DataGridRowType>) => {
+            const displayValue = renderCellValue(String(props.row[col.key]), col.type);
+            return (
+              <div className="w-full h-full flex items-center cursor-pointer">
+                <span className="truncate font-medium" title={displayValue}>
+                  {displayValue}
+                </span>
+              </div>
+            );
+          },
+          renderHeaderCell: (props: RenderHeaderCellProps<DataGridRowType>) => (
+            <SortableHeaderRenderer
+              column={col}
+              sortDirection={props.sortDirection}
+              columnType={col.type}
+              showTypeBadge={true}
+              mutedHeader={false}
+            />
+          ),
+        };
+      }
+
+      return {
+        ...baseCol,
+        cellClass: 'link-modal-disabled-cell',
+        renderCell: (props: RenderCellProps<DataGridRowType>) => {
+          const displayValue = renderCellValue(String(props.row[col.key]), col.type);
+          return (
+            <div className="w-full h-full flex items-center cursor-not-allowed relative">
+              <div className="absolute inset-0 pointer-events-none opacity-0 hover:opacity-10 bg-gray-200 dark:bg-gray-600 transition-opacity z-5" />
+              <span className="truncate dark:text-zinc-300 opacity-70" title={displayValue}>
+                {displayValue}
+              </span>
+            </div>
+          );
+        },
+        renderHeaderCell: (props: RenderHeaderCellProps<DataGridRowType>) => (
+          <SortableHeaderRenderer
+            column={col}
+            sortDirection={props.sortDirection}
+            columnType={col.type}
+            showTypeBadge={true}
+            mutedHeader={true}
+          />
+        ),
+      };
+    });
+  }, [schema, referenceColumn]);
+
+  const handleConfirmSelection = () => {
+    if (selectedRecord) {
+      onSelectRecord(selectedRecord);
+      onOpenChange(false);
+    }
+  };
+
+  const handleCancel = () => {
+    onOpenChange(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"
+            />
+          </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);
+                }
+              } else {
+                setSelectedRecord(null);
+              }
+            }}
+            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>
+
+        {/* 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>
+  );
+}