insforge 1.2.10 → 1.3.0

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

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
 import { tableService } from '../services/table.service';
 import { useToast } from '@/lib/hooks/useToast';
 import {
@@ -6,7 +6,6 @@ import {
   GetTableSchemaResponse,
   UpdateTableSchemaRequest,
 } from '@insforge/shared-schemas';
-import { useMemo } from 'react';
 
 export function useTables() {
   const queryClient = useQueryClient();
@@ -24,19 +23,7 @@ export function useTables() {
     staleTime: 2 * 60 * 1000, // Cache for 2 minutes
   });
 
-  // Query to fetch all table schemas
-  const {
-    data: allSchemas,
-    isLoading: isLoadingSchemas,
-    error: schemasError,
-    refetch: refetchAllSchemas,
-  } = useQuery({
-    queryKey: ['tables', 'schemas'],
-    queryFn: () => tableService.getAllTableSchemas(),
-    staleTime: 2 * 60 * 1000,
-  });
-
-  // Query to fetch a specific table schema
+  // Query to fetch a specific table schema (cached per table)
   const useTableSchema = (tableName: string, enabled = true) => {
     return useQuery({
       queryKey: ['tables', tableName, 'schema'],
@@ -52,7 +39,6 @@ export function useTables() {
       tableService.createTable(tableName, columns),
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: ['tables'] });
-      void queryClient.invalidateQueries({ queryKey: ['tables', 'schemas'] });
       showToast('Table created successfully', 'success');
     },
     onError: (error: Error) => {
@@ -66,7 +52,6 @@ export function useTables() {
     mutationFn: (tableName: string) => tableService.deleteTable(tableName),
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: ['tables'] });
-      void queryClient.invalidateQueries({ queryKey: ['tables', 'schemas'] });
       showToast('Table deleted successfully', 'success');
     },
     onError: (error: Error) => {
@@ -85,7 +70,6 @@ export function useTables() {
       operations: UpdateTableSchemaRequest;
     }) => tableService.updateTableSchema(tableName, operations),
     onSuccess: (_, { tableName }) => {
-      void queryClient.invalidateQueries({ queryKey: ['tables', 'schemas'] });
       void queryClient.invalidateQueries({ queryKey: ['tables', tableName, 'schema'] });
       showToast('Table schema updated successfully', 'success');
     },
@@ -98,34 +82,54 @@ export function useTables() {
   return {
     // Data
     tables: tables || [],
-    allSchemas: useMemo(
-      () => allSchemas?.filter((schema) => schema.tableName !== 'users') || [],
-      [allSchemas]
-    ),
     tablesCount: tables?.length || 0,
 
     // Loading states
     isLoadingTables,
-    isLoadingSchemas,
     isCreating: createTableMutation.isPending,
     isDeleting: deleteTableMutation.isPending,
     isUpdating: updateTableSchemaMutation.isPending,
 
     // Errors
     tablesError,
-    schemasError,
 
     // Actions
     createTable: createTableMutation.mutate,
     deleteTable: deleteTableMutation.mutate,
     updateTableSchema: updateTableSchemaMutation.mutate,
     refetchTables,
-    refetchAllSchemas,
 
     // Helpers
     useTableSchema,
-    getSchemaByTableName: (tableName: string): GetTableSchemaResponse | undefined => {
-      return allSchemas?.find((schema) => schema.tableName === tableName);
-    },
+  };
+}
+
+/**
+ * Hook to fetch all table schemas on demand.
+ * Use this only when you need ALL schemas (e.g., for visualizations).
+ * For individual tables, use useTables().useTableSchema() instead.
+ */
+export function useAllTableSchemas(enabled = true) {
+  const { tables, isLoadingTables } = useTables();
+
+  const { allSchemas, isLoadingSchemas } = useQueries({
+    queries: enabled
+      ? tables
+          .filter((name) => name !== 'users')
+          .map((tableName) => ({
+            queryKey: ['tables', tableName, 'schema'],
+            queryFn: () => tableService.getTableSchema(tableName),
+            staleTime: 2 * 60 * 1000,
+          }))
+      : [],
+    combine: (results) => ({
+      allSchemas: results.filter((r) => r.data).map((r) => r.data as GetTableSchemaResponse),
+      isLoadingSchemas: results.some((r) => r.isLoading),
+    }),
+  });
+
+  return {
+    allSchemas,
+    isLoading: isLoadingTables || isLoadingSchemas,
   };
 }

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

@@ -4,6 +4,7 @@ export { TableListSkeleton } from './components/TableListSkeleton';
 export { TableSidebar } from './components/TableSidebar';
 export { TableForm } from './components/TableForm';
 export { RecordFormDialog } from './components/RecordFormDialog';
+export { SQLModal, SQLCellButton } from './components/SQLModal';
 
 // Services
 export { tableService } from './services/table.service';

package/frontend/src/features/database/{page → pages}/FunctionsPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
 import {
   Button,
@@ -13,16 +13,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components';
-import { useFullMetadata } from '../hooks/useFullMetadata';
-import type { ExportDatabaseResponse, ExportDatabaseJsonData } from '@insforge/shared-schemas';
+import { useFunctions } from '../hooks/useDatabase';
+import { SQLModal, SQLCellButton } from '../components/SQLModal';
+import type { DatabaseFunctionsResponse } from '@insforge/shared-schemas';
 import { isSystemFunction } from '../constants';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 
 interface FunctionRow extends DataGridRowType {
   id: string;
@@ -32,15 +26,16 @@ interface FunctionRow extends DataGridRowType {
   [key: string]: ConvertedValue | { [key: string]: string }[];
 }
 
-function parseFunctionsFromMetadata(metadata: ExportDatabaseResponse | undefined): FunctionRow[] {
-  if (!metadata || metadata.format !== 'json' || typeof metadata.data === 'string') {
+function parseFunctionsFromResponse(
+  response: DatabaseFunctionsResponse | undefined
+): FunctionRow[] {
+  if (!response?.functions) {
     return [];
   }
 
-  const data = metadata.data as ExportDatabaseJsonData;
   const functions: FunctionRow[] = [];
 
-  data.functions.forEach((func) => {
+  response.functions.forEach((func) => {
     if (isSystemFunction(func.functionName)) {
       return;
     }
@@ -59,29 +54,10 @@ function parseFunctionsFromMetadata(metadata: ExportDatabaseResponse | undefined
 export default function FunctionsPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const { data: metadata, isLoading, error, refetch } = useFullMetadata(true);
-
-  const { socket, isConnected } = useSocket();
-
-  const allFunctions = useMemo(() => parseFunctionsFromMetadata(metadata), [metadata]);
-
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
+  const { data, isLoading, error, refetch } = useFunctions(true);
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
 
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.DATABASE) {
-        void refetch();
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, refetch]);
+  const allFunctions = useMemo(() => parseFunctionsFromResponse(data), [data]);
 
   const filteredFunctions = useMemo(() => {
     if (!searchQuery.trim()) {
@@ -132,9 +108,17 @@ export default function FunctionsPage() {
         name: 'Definition',
         width: 'minmax(400px, 8fr)',
         resizable: true,
+        renderCell: ({ row }) => (
+          <SQLCellButton
+            value={row.functionDef}
+            onClick={() =>
+              setSqlModal({ open: true, title: 'Function Definition', value: row.functionDef })
+            }
+          />
+        ),
       },
     ],
-    []
+    [setSqlModal]
   );
 
   if (error) {
@@ -206,6 +190,14 @@ export default function FunctionsPage() {
           />
         </div>
       )}
+
+      {/* SQL Detail Modal */}
+      <SQLModal
+        open={sqlModal.open}
+        onOpenChange={(open) => setSqlModal((prev) => ({ ...prev, open }))}
+        title={sqlModal.title}
+        value={sqlModal.value}
+      />
     </div>
   );
 }

package/frontend/src/features/database/{page → pages}/IndexesPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
 import {
   Button,
@@ -13,16 +13,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components';
-import { useFullMetadata } from '../hooks/useFullMetadata';
-import type { ExportDatabaseResponse, ExportDatabaseJsonData } from '@insforge/shared-schemas';
+import { useIndexes } from '../hooks/useDatabase';
+import { SQLModal, SQLCellButton } from '../components/SQLModal';
+import type { DatabaseIndexesResponse } from '@insforge/shared-schemas';
 import { isSystemTable } from '../constants';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 
 interface IndexRow extends DataGridRowType {
   id: string;
@@ -34,28 +28,25 @@ interface IndexRow extends DataGridRowType {
   [key: string]: ConvertedValue | { [key: string]: string }[];
 }
 
-function parseIndexesFromMetadata(metadata: ExportDatabaseResponse | undefined): IndexRow[] {
-  if (!metadata || metadata.format !== 'json' || typeof metadata.data === 'string') {
+function parseIndexesFromResponse(response: DatabaseIndexesResponse | undefined): IndexRow[] {
+  if (!response?.indexes) {
     return [];
   }
 
-  const data = metadata.data as ExportDatabaseJsonData;
   const indexes: IndexRow[] = [];
 
-  Object.entries(data.tables).forEach(([tableName, tableData]) => {
-    if (isSystemTable(tableName)) {
+  response.indexes.forEach((index) => {
+    if (isSystemTable(index.tableName)) {
       return;
     }
 
-    tableData.indexes.forEach((index) => {
-      indexes.push({
-        id: `${tableName}_${index.indexname}`,
-        tableName,
-        indexName: index.indexname,
-        indexDef: index.indexdef,
-        isUnique: index.isUnique,
-        isPrimary: index.isPrimary,
-      });
+    indexes.push({
+      id: `${index.tableName}_${index.indexName}`,
+      tableName: index.tableName,
+      indexName: index.indexName,
+      indexDef: index.indexDef,
+      isUnique: index.isUnique,
+      isPrimary: index.isPrimary,
     });
   });
 
@@ -65,29 +56,10 @@ function parseIndexesFromMetadata(metadata: ExportDatabaseResponse | undefined):
 export default function IndexesPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const { data: metadata, isLoading, error, refetch } = useFullMetadata(true);
-
-  const { socket, isConnected } = useSocket();
-
-  const allIndexes = useMemo(() => parseIndexesFromMetadata(metadata), [metadata]);
-
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
+  const { data, isLoading, error, refetch } = useIndexes(true);
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
 
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.DATABASE) {
-        void refetch();
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, refetch]);
+  const allIndexes = useMemo(() => parseIndexesFromResponse(data), [data]);
 
   const filteredIndexes = useMemo(() => {
     if (!searchQuery.trim()) {
@@ -161,9 +133,17 @@ export default function IndexesPage() {
         name: 'Definition',
         width: 'minmax(300px, 5fr)',
         resizable: true,
+        renderCell: ({ row }) => (
+          <SQLCellButton
+            value={row.indexDef}
+            onClick={() =>
+              setSqlModal({ open: true, title: 'Index Definition', value: row.indexDef })
+            }
+          />
+        ),
       },
     ],
-    []
+    [setSqlModal]
   );
 
   if (error) {
@@ -235,6 +215,14 @@ export default function IndexesPage() {
           />
         </div>
       )}
+
+      {/* SQL Detail Modal */}
+      <SQLModal
+        open={sqlModal.open}
+        onOpenChange={(open) => setSqlModal((prev) => ({ ...prev, open }))}
+        title={sqlModal.title}
+        value={sqlModal.value}
+      />
     </div>
   );
 }

package/frontend/src/features/database/{page → pages}/PoliciesPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
 import {
   Button,
@@ -13,16 +13,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components';
-import { useFullMetadata } from '../hooks/useFullMetadata';
-import type { ExportDatabaseResponse, ExportDatabaseJsonData } from '@insforge/shared-schemas';
+import { usePolicies } from '../hooks/useDatabase';
+import { SQLModal, SQLCellButton } from '../components/SQLModal';
+import type { DatabasePoliciesResponse } from '@insforge/shared-schemas';
 import { isSystemTable } from '../constants';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 
 interface PolicyRow extends DataGridRowType {
   id: string;
@@ -35,29 +29,26 @@ interface PolicyRow extends DataGridRowType {
   [key: string]: ConvertedValue | { [key: string]: string }[];
 }
 
-function parsePoliciesFromMetadata(metadata: ExportDatabaseResponse | undefined): PolicyRow[] {
-  if (!metadata || metadata.format !== 'json' || typeof metadata.data === 'string') {
+function parsePoliciesFromResponse(response: DatabasePoliciesResponse | undefined): PolicyRow[] {
+  if (!response?.policies) {
     return [];
   }
 
-  const data = metadata.data as ExportDatabaseJsonData;
   const policies: PolicyRow[] = [];
 
-  Object.entries(data.tables).forEach(([tableName, tableData]) => {
-    if (isSystemTable(tableName)) {
+  response.policies.forEach((policy) => {
+    if (isSystemTable(policy.tableName)) {
       return;
     }
 
-    tableData.policies.forEach((policy) => {
-      policies.push({
-        id: `${tableName}_${policy.policyname}`,
-        tableName,
-        policyName: policy.policyname,
-        cmd: policy.cmd,
-        roles: Array.isArray(policy.roles) ? policy.roles.join(', ') : String(policy.roles),
-        qual: policy.qual,
-        withCheck: policy.withCheck,
-      });
+    policies.push({
+      id: `${policy.tableName}_${policy.policyName}`,
+      tableName: policy.tableName,
+      policyName: policy.policyName,
+      cmd: policy.cmd,
+      roles: Array.isArray(policy.roles) ? policy.roles.join(', ') : String(policy.roles),
+      qual: policy.qual,
+      withCheck: policy.withCheck,
     });
   });
 
@@ -67,29 +58,10 @@ function parsePoliciesFromMetadata(metadata: ExportDatabaseResponse | undefined)
 export default function PoliciesPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const { data: metadata, isLoading, error, refetch } = useFullMetadata(true);
-
-  const { socket, isConnected } = useSocket();
-
-  const allPolicies = useMemo(() => parsePoliciesFromMetadata(metadata), [metadata]);
+  const { data, isLoading, error, refetch } = usePolicies(true);
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
 
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.DATABASE) {
-        void refetch();
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, refetch]);
+  const allPolicies = useMemo(() => parsePoliciesFromResponse(data), [data]);
 
   const filteredPolicies = useMemo(() => {
     if (!searchQuery.trim()) {
@@ -157,21 +129,30 @@ export default function PoliciesPage() {
         name: 'Using',
         width: 'minmax(200px, 2fr)',
         resizable: true,
-        renderCell: ({ row }) => {
-          return <span className="text-xs font-mono">{row.qual || '-'}</span>;
-        },
+        renderCell: ({ row }) => (
+          <SQLCellButton
+            value={row.qual}
+            onClick={() => row.qual && setSqlModal({ open: true, title: 'Using', value: row.qual })}
+          />
+        ),
       },
       {
         key: 'withCheck',
         name: 'With Check',
         width: 'minmax(200px, 2fr)',
         resizable: true,
-        renderCell: ({ row }) => {
-          return <span className="text-xs font-mono">{row.withCheck || '-'}</span>;
-        },
+        renderCell: ({ row }) => (
+          <SQLCellButton
+            value={row.withCheck}
+            onClick={() =>
+              row.withCheck &&
+              setSqlModal({ open: true, title: 'With Check', value: row.withCheck })
+            }
+          />
+        ),
       },
     ],
-    []
+    [setSqlModal]
   );
 
   if (error) {
@@ -243,6 +224,14 @@ export default function PoliciesPage() {
           />
         </div>
       )}
+
+      {/* SQL Detail Modal */}
+      <SQLModal
+        open={sqlModal.open}
+        onOpenChange={(open) => setSqlModal((prev) => ({ ...prev, open }))}
+        title={sqlModal.title}
+        value={sqlModal.value}
+      />
     </div>
   );
 }

package/frontend/src/features/database/{page → pages}/TablesPage.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
 import { Plus, Upload } from 'lucide-react';
 import PencilIcon from '@/assets/icons/pencil.svg?react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
@@ -31,13 +30,6 @@ import { useToast } from '@/lib/hooks/useToast';
 import { DatabaseDataGrid } from '@/features/database/components/DatabaseDataGrid';
 import { SortColumn } from 'react-data-grid';
 import { convertValueForColumn } from '@/lib/utils/utils';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 import { useCSVImport } from '@/features/database/hooks/useCSVImport';
 
 const PAGE_SIZE = 50;
@@ -62,15 +54,12 @@ export default function TablesPage() {
 
   const { confirm, confirmDialogProps } = useConfirm();
   const { showToast } = useToast();
-  const queryClient = useQueryClient();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { tables, isLoadingTables, tablesError, deleteTable, useTableSchema, refetchTables } =
     useTables();
 
   const recordsHook = useRecords(selectedTable || '');
 
-  const { socket, isConnected } = useSocket();
-
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file && selectedTable) {
@@ -184,37 +173,6 @@ export default function TablesPage() {
   const tableError = recordsError;
   const refetchTableData = refetchRecords;
 
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.DATABASE) {
-        // Invalidate all tables queries
-        void queryClient.invalidateQueries({ queryKey: ['tables'] });
-        void queryClient.invalidateQueries({ queryKey: ['records', selectedTable] });
-      }
-
-      if (message.payload?.resource === DataUpdateResourceType.RECORDS) {
-        // Invalidate records queries for the updated table
-        const data = message.payload.data as { tableName?: string };
-        const updatedTableName = data?.tableName;
-
-        // Only invalidate if this is the currently selected table
-        if (updatedTableName && updatedTableName === selectedTable) {
-          void queryClient.invalidateQueries({ queryKey: ['records', selectedTable] });
-        }
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, queryClient, selectedTable]);
-
   // Reset sorting flag when loading completes
   useEffect(() => {
     if (!isLoadingTable && isSorting) {