insforge 1.2.10 → 1.4.8

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

@@ -1,4 +1,5 @@
 import { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Link2, AlertCircle, X } from 'lucide-react';
 import {
   Button,
@@ -17,6 +18,9 @@ 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 { useQuery } from '@tanstack/react-query';
+import { useUsers } from '@/features/auth/hooks/useUsers';
+import { AUTH_USERS_TABLE, authUsersSchema } from '../constants';
 
 interface ForeignKeyCellProps {
   value: string;
@@ -29,9 +33,16 @@ interface ForeignKeyCellProps {
 
 export function ForeignKeyCell({ value, foreignKey, onJumpToTable }: ForeignKeyCellProps) {
   const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
   const { useTableSchema } = useTables();
+  const isAuthUsers = foreignKey.table === AUTH_USERS_TABLE;
+
+  // Regular table records hook (disabled for auth.users)
   const recordsHook = useRecords(foreignKey.table);
 
+  // Auth users hook
+  const { getUser } = useUsers({ enabled: false });
+
   // Helper function to safely render any value type (including JSON objects)
   const renderValue = (val: ConvertedValue): string => {
     return formatValueForDisplay(val);
@@ -39,16 +50,28 @@ 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,
-  } = recordsHook.useRecordByForeignKey(foreignKey.column, searchValue, open && !!value);
 
-  const record = recordData;
+  // For auth.users, fetch user by ID
+  const { data: authUserData, error: authUserError } = useQuery({
+    queryKey: ['user', searchValue],
+    queryFn: () => getUser(searchValue),
+    enabled: isAuthUsers && open && !!value,
+  });
+
+  // For regular tables, fetch by foreign key
+  const { data: recordData, error: recordError } = recordsHook.useRecordByForeignKey(
+    foreignKey.column,
+    searchValue,
+    !isAuthUsers && open && !!value
+  );
+
+  // Use appropriate data source based on table type
+  const record = isAuthUsers ? authUserData : recordData;
+  const error = isAuthUsers ? authUserError : recordError;
 
-  // Fetch schema for the referenced table
-  const { data: schema } = useTableSchema(foreignKey.table, open && !!value);
+  // Fetch schema for the referenced table (skip for auth.users)
+  const { data: fetchedSchema } = useTableSchema(foreignKey.table, !isAuthUsers && open && !!value);
+  const schema = isAuthUsers ? authUsersSchema : fetchedSchema;
 
   // Convert schema to columns for the mini DataGrid
   const columns = useMemo(() => {
@@ -142,18 +165,22 @@ export function ForeignKeyCell({ value, foreignKey, onJumpToTable }: ForeignKeyC
                   </div>
 
                   {/* Jump to Table Button */}
-                  {onJumpToTable && (
+                  {(onJumpToTable || isAuthUsers) && (
                     <div className="flex justify-end p-6 border-t border-border-gray dark:border-neutral-700">
                       <Button
                         variant="outline"
                         size="sm"
                         className="h-9 px-3 py-2 text-sm font-medium dark:text-white bg-bg-gray dark:bg-neutral-600"
                         onClick={() => {
-                          onJumpToTable(foreignKey.table);
+                          if (isAuthUsers) {
+                            void navigate('/dashboard/users');
+                          } else if (onJumpToTable) {
+                            onJumpToTable(foreignKey.table);
+                          }
                           setOpen(false);
                         }}
                       >
-                        Open Table
+                        {isAuthUsers ? 'Open Users' : 'Open Table'}
                       </Button>
                     </div>
                   )}

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

@@ -16,6 +16,7 @@ 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';
+import { AUTH_USERS_TABLE } from '../constants';
 
 interface ForeignKeyPopoverProps {
   form: UseFormReturn<TableFormSchema>;
@@ -69,17 +70,26 @@ export function ForeignKeyPopover({
     }
   }, [open, initialValue]);
 
-  // Get available tables
-  const availableTables = tables.filter(
-    (tableName) => mode === 'create' || tableName !== editTableName
-  );
+  // Get available tables (include auth.users as a special option)
+  const availableTables = [
+    AUTH_USERS_TABLE,
+    ...tables.filter((tableName) => mode === 'create' || tableName !== editTableName),
+  ];
 
-  // Get columns for selected reference table
-  const { data: referenceTableSchema } = useTableSchema(
+  // Get columns for selected reference table (skip fetch for auth.users)
+  const isAuthUsers = newForeignKey.referenceTable === AUTH_USERS_TABLE;
+  const { data: fetchedTableSchema } = useTableSchema(
     newForeignKey.referenceTable || '',
-    !!newForeignKey.referenceTable && open
+    !!newForeignKey.referenceTable && !isAuthUsers && open
   );
 
+  // Use hardcoded schema for auth.users, otherwise use fetched schema
+  const referenceTableSchema = isAuthUsers
+    ? {
+        columns: [{ columnName: 'id', type: 'uuid', isUnique: true, isNullable: false }],
+      }
+    : fetchedTableSchema;
+
   // Get the type of the selected source column
   const getSourceFieldType = useMemo(() => {
     if (!newForeignKey.columnName) {
@@ -252,7 +262,7 @@ export function ForeignKeyPopover({
                           if (!col.isUnique) {
                             rightText = 'Not unique';
                           } else if (!typesMatch) {
-                            rightText = 'Columntype not match';
+                            rightText = 'Column types mismatch';
                           }
 
                           return (

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

@@ -20,9 +20,11 @@ import {
 } from '@/components';
 import { useTables } from '@/features/database/hooks/useTables';
 import { useRecords } from '@/features/database/hooks/useRecords';
+import { useUsers } from '@/features/auth/hooks/useUsers';
 import { convertSchemaToColumns } from '@/features/database/components/DatabaseDataGrid';
 import { formatValueForDisplay } from '@/lib/utils/utils';
 import { ColumnType } from '@insforge/shared-schemas';
+import { AUTH_USERS_TABLE, authUsersSchema } from '../constants';
 
 const PAGE_SIZE = 50;
 
@@ -45,29 +47,67 @@ export function LinkRecordModal({
   const [sortColumns, setSortColumns] = useState<SortColumn[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const { useTableSchema } = useTables();
-  const recordsHook = useRecords(referenceTable);
+  const isAuthUsers = referenceTable === AUTH_USERS_TABLE;
 
-  // Fetch table schema
-  const { data: schema } = useTableSchema(referenceTable, open);
+  // Regular table records hook (disabled for auth.users)
+  const recordsHook = useRecords(isAuthUsers ? '' : referenceTable);
 
-  // Fetch records from the reference table
+  // Auth users hook
+  const {
+    users,
+    totalUsers,
+    isLoading: isLoadingUsers,
+    setCurrentPage: setUsersCurrentPage,
+  } = useUsers({
+    pageSize: PAGE_SIZE,
+    enabled: isAuthUsers && open,
+    searchQuery: isAuthUsers ? searchQuery : '',
+  });
+
+  // Sync current page with users hook
+  useEffect(() => {
+    if (isAuthUsers) {
+      setUsersCurrentPage(currentPage);
+    }
+  }, [currentPage, isAuthUsers, setUsersCurrentPage]);
+
+  // Fetch table schema (skip for auth.users)
+  const { data: fetchedSchema } = useTableSchema(referenceTable, !isAuthUsers && open);
+  const schema = isAuthUsers ? authUsersSchema : fetchedSchema;
+
+  // Fetch records from the reference table (skip for auth.users)
   const offset = (currentPage - 1) * PAGE_SIZE;
-  const { data: recordsResponse, isLoading } = recordsHook.useTableRecords(
+  const { data: recordsResponse, isLoading: isLoadingRecords } = recordsHook.useTableRecords(
     PAGE_SIZE,
     offset,
     searchQuery || undefined,
     sortColumns,
-    open
+    !isAuthUsers && open
   );
 
-  const recordsData =
-    schema && recordsResponse
+  // Combine data from either source
+  const recordsData = useMemo(() => {
+    if (isAuthUsers) {
+      return users.length > 0 || open
+        ? {
+            schema: authUsersSchema,
+            records: users as DatabaseRecord[],
+            totalRecords: totalUsers,
+          }
+        : undefined;
+    }
+    return schema && recordsResponse
       ? {
           schema,
           records: recordsResponse.records,
-          totalRecords: recordsResponse.pagination.total || schema.recordCount,
+          totalRecords:
+            recordsResponse.pagination.total ??
+            ('recordCount' in schema ? (schema.recordCount as number) : 0),
         }
       : undefined;
+  }, [isAuthUsers, users, totalUsers, open, schema, recordsResponse]);
+
+  const isLoading = isAuthUsers ? isLoadingUsers : isLoadingRecords;
 
   // Reset page when search query changes
   useEffect(() => {
@@ -122,15 +162,23 @@ export function LinkRecordModal({
       };
 
       // Helper function to render cell value properly based on type
-      const renderCellValue = (value: ConvertedValue, type: ColumnType | undefined) => {
-        return formatValueForDisplay(value, type);
+      // Accepts DatabaseRecord value type and converts to display string
+      const renderCellValue = (
+        value: ConvertedValue | { [key: string]: string }[],
+        type: ColumnType | undefined
+      ): string => {
+        // For JSON type, if value is already an object/array, stringify it for formatValueForDisplay
+        if (type === ColumnType.JSON && value !== null && typeof value === 'object') {
+          return formatValueForDisplay(JSON.stringify(value), type);
+        }
+        return formatValueForDisplay(value as ConvertedValue, type);
       };
 
       if (col.key === referenceColumn) {
         return {
           ...baseCol,
           renderCell: (props: RenderCellProps<DataGridRowType>) => {
-            const displayValue = renderCellValue(String(props.row[col.key]), col.type);
+            const displayValue = renderCellValue(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}>
@@ -155,7 +203,7 @@ export function LinkRecordModal({
         ...baseCol,
         cellClass: 'link-modal-disabled-cell',
         renderCell: (props: RenderCellProps<DataGridRowType>) => {
-          const displayValue = renderCellValue(String(props.row[col.key]), col.type);
+          const displayValue = renderCellValue(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" />

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

@@ -495,7 +495,7 @@ export function RecordFormField({ field, form, tableName }: RecordFormFieldProps
                         onChange={(newValue) => {
                           const result = convertValueForColumn(ColumnType.JSON, newValue as string);
                           if (result.success) {
-                            formField.onChange(result.value as JSON);
+                            formField.onChange(result.value);
                           } else {
                             // If parsing fails, keep the string value
                             formField.onChange(newValue);

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

@@ -0,0 +1,75 @@
+import { ExternalLink } from 'lucide-react';
+import CodeMirror from '@uiw/react-codemirror';
+import { sql } from '@codemirror/lang-sql';
+import { EditorView } from '@codemirror/view';
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components';
+import { useTheme } from '@/lib/contexts/ThemeContext';
+
+const customTheme = EditorView.theme({
+  '&': { backgroundColor: 'transparent', maxHeight: '400px' },
+  '.cm-scroller': { overflow: 'auto' },
+  '.cm-gutters': { display: 'none' },
+  '.cm-content': { padding: '16px' },
+  '.cm-line': { padding: '0' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-selectionBackground': { backgroundColor: 'transparent !important' },
+  '&.cm-focused .cm-selectionBackground': { backgroundColor: 'transparent !important' },
+  '.cm-cursor': { display: 'none' },
+});
+
+interface SQLModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  value: string;
+}
+
+export function SQLModal({ open, onOpenChange, title, value }: SQLModalProps) {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-zinc-950 dark:text-white">{title}</DialogTitle>
+        </DialogHeader>
+        <div className="mt-2 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-900">
+          <CodeMirror
+            value={value}
+            theme={[resolvedTheme === 'dark' ? vscodeDark : vscodeLight, customTheme]}
+            extensions={[sql(), EditorView.lineWrapping, EditorView.editable.of(false)]}
+            editable={false}
+            basicSetup={false}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface SQLCellButtonProps {
+  value: string | null;
+  onClick: () => void;
+}
+
+export function SQLCellButton({ value, onClick }: SQLCellButtonProps) {
+  if (!value) {
+    return <span className="text-sm">-</span>;
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-1 min-w-0">
+      <span className="text-sm truncate">{value}</span>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick();
+        }}
+        className="shrink-0 p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded transition-colors"
+      >
+        <ExternalLink className="size-4 text-zinc-400 dark:text-neutral-400" />
+      </button>
+    </div>
+  );
+}

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

@@ -360,9 +360,6 @@ export function TableForm({
       // Invalidate all table data queries for this table (with all parameter combinations)
       void queryClient.invalidateQueries({ queryKey: ['table', editTable?.tableName] });
 
-      // Invalidate the separate table schema query used by AddRecordSheet
-      void queryClient.invalidateQueries({ queryKey: ['table-schema', editTable?.tableName] });
-
       showToast(`Table "${data.tableName}" updated successfully!`, 'success');
 
       form.reset();
@@ -373,7 +370,6 @@ export function TableForm({
     onError: (err) => {
       // Invalidate queries to ensure we have fresh data after failed request
       void queryClient.invalidateQueries({ queryKey: ['table', editTable?.tableName] });
-      void queryClient.invalidateQueries({ queryKey: ['table-schema', editTable?.tableName] });
 
       const errorMessage = err.message || 'Failed to update table';
       setError(errorMessage);

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

@@ -37,9 +37,6 @@ export function TableSidebar({
       editLabel="Edit Table"
       deleteLabel="Delete Table"
       icon={Table}
-      filterItems={(tableNames) =>
-        tableNames.filter((name) => name !== 'auth' && name !== 'profiles' && name !== 'identifies')
-      }
       renderSkeleton={() => <TableListSkeleton />}
       renderEmptyState={(searchTerm) => <TableEmptyState searchTerm={searchTerm} />}
     />

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

@@ -15,7 +15,7 @@ export function TablesEmptyState({
   onTemplateClick,
 }: TablesEmptyStateProps) {
   return (
-    <div className="flex justify-center w-full h-full bg-bg-gray dark:bg-neutral-800 px-6">
+    <div className="flex justify-center w-full h-full bg-bg-gray dark:bg-neutral-800 px-6 overflow-y-auto">
       <div className="flex flex-col gap-6 max-w-[1024px] w-full pb-9 pt-6">
         <h2 className="text-xl font-semibold text-zinc-950 dark:text-white leading-7 tracking-[-0.1px]">
           Create Your First Table

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

@@ -70,7 +70,7 @@ export function TemplatePreview({ template, onCancel }: TemplatePreviewProps) {
             externalSchemas={template.visualizerSchema}
             metadata={{
               auth: {
-                oauths: [],
+                providers: [],
               },
               database: {
                 tables: [],
@@ -80,7 +80,6 @@ export function TemplatePreview({ template, onCancel }: TemplatePreviewProps) {
                 buckets: [],
                 totalSizeInGB: 0,
               },
-              functions: [],
             }}
             showControls={false}
             showMiniMap={false}

package/frontend/src/features/database/constants.ts

@@ -1,6 +1,22 @@
 import { Type, Clock, Calendar, Hash, Percent, ToggleLeft, Fingerprint, Code } from 'lucide-react';
 import { ColumnType } from '@insforge/shared-schemas';
 
+// Special handling for auth.users foreign key references
+export const AUTH_USERS_TABLE = 'auth.users';
+
+// schema for auth.users - used for displaying user records
+export const authUsersSchema = {
+  tableName: 'auth.users',
+  columns: [
+    { columnName: 'id', type: 'uuid', isUnique: true, isNullable: false },
+    { columnName: 'email', type: 'string', isUnique: true, isNullable: false },
+    { columnName: 'emailVerified', type: 'boolean', isUnique: false, isNullable: false },
+    { columnName: 'providers', type: 'json', isUnique: false, isNullable: true },
+    { columnName: 'createdAt', type: 'timestamp', isUnique: false, isNullable: false },
+    { columnName: 'updatedAt', type: 'timestamp', isUnique: false, isNullable: false },
+  ],
+};
+
 export const columnTypeIcons: Record<ColumnType, React.ComponentType<{ className?: string }>> = {
   [ColumnType.STRING]: Type,
   [ColumnType.DATE]: Calendar,
@@ -22,31 +38,3 @@ export const columnTypeDescriptions: Record<ColumnType, string> = {
   [ColumnType.UUID]: 'Unique identifiers (auto-generated)',
   [ColumnType.JSON]: 'Complex structured data',
 };
-
-/**
- * System tables that should be filtered out from user-facing database views
- */
-export const SYSTEM_TABLES = ['users'];
-export const SYSTEM_FUNCTIONS = [
-  'create_default_policies',
-  'create_policies_after_rls',
-  'email',
-  'reload_postgrest_schema',
-  'role',
-  'uid',
-  'update_updated_at_column',
-];
-
-/**
- * Check if a table name is a system table
- */
-export function isSystemTable(tableName: string): boolean {
-  return tableName.startsWith('_') || SYSTEM_TABLES.includes(tableName);
-}
-
-/**
- * Check if a function name is a system function
- */
-export function isSystemFunction(functionName: string): boolean {
-  return SYSTEM_FUNCTIONS.includes(functionName);
-}

package/frontend/src/features/database/hooks/useCSVImport.ts

@@ -1,8 +1,9 @@
 import { useMutation } from '@tanstack/react-query';
-import { recordService, CSVImportResponse } from '../services/record.service.js';
+import { recordService } from '../services/record.service.js';
+import { BulkUpsertResponse } from '@insforge/shared-schemas';
 
 interface UseCSVImportOptions {
-  onSuccess?: (data: CSVImportResponse) => void;
+  onSuccess?: (data: BulkUpsertResponse) => void;
   onError?: (error: Error) => void;
 }
 

package/frontend/src/features/database/hooks/useDatabase.ts

@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query';
+import { databaseService } from '../services/database.service';
+
+export function useFunctions(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'functions'],
+    queryFn: () => databaseService.getFunctions(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function useIndexes(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'indexes'],
+    queryFn: () => databaseService.getIndexes(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function usePolicies(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'policies'],
+    queryFn: () => databaseService.getPolicies(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function useTriggers(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'triggers'],
+    queryFn: () => databaseService.getTriggers(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}

package/frontend/src/features/database/hooks/useRawSQL.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { advanceService, RawSQLResponse } from '../services/advance.service';
+import { advanceService } from '../services/advance.service';
+import { RawSQLResponse } from '@insforge/shared-schemas';
 import { useToast } from '@/lib/hooks/useToast';
 
 interface UseRawSQLOptions {
@@ -28,7 +29,7 @@ export function useRawSQL(options?: UseRawSQLOptions) {
       void queryClient.invalidateQueries({ queryKey: ['tables', 'schemas'] });
 
       if (options?.showSuccessToast !== false) {
-        const message = data.message || 'SQL query executed successfully';
+        const message = 'SQL query executed successfully';
         showToast(message, 'success');
       }
       options?.onSuccess?.(data);