insforge 0.3.3 → 1.3.0

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

@@ -0,0 +1,135 @@
+import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
+import { tableService } from '../services/table.service';
+import { useToast } from '@/lib/hooks/useToast';
+import {
+  ColumnSchema,
+  GetTableSchemaResponse,
+  UpdateTableSchemaRequest,
+} from '@insforge/shared-schemas';
+
+export function useTables() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  // Query to fetch all table names
+  const {
+    data: tables,
+    isLoading: isLoadingTables,
+    error: tablesError,
+    refetch: refetchTables,
+  } = useQuery({
+    queryKey: ['tables'],
+    queryFn: () => tableService.listTables(),
+    staleTime: 2 * 60 * 1000, // Cache for 2 minutes
+  });
+
+  // Query to fetch a specific table schema (cached per table)
+  const useTableSchema = (tableName: string, enabled = true) => {
+    return useQuery({
+      queryKey: ['tables', tableName, 'schema'],
+      queryFn: () => tableService.getTableSchema(tableName),
+      enabled: enabled && !!tableName,
+      staleTime: 2 * 60 * 1000,
+    });
+  };
+
+  // Mutation to create a table
+  const createTableMutation = useMutation({
+    mutationFn: ({ tableName, columns }: { tableName: string; columns: ColumnSchema[] }) =>
+      tableService.createTable(tableName, columns),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['tables'] });
+      showToast('Table created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to create table';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to delete a table
+  const deleteTableMutation = useMutation({
+    mutationFn: (tableName: string) => tableService.deleteTable(tableName),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['tables'] });
+      showToast('Table deleted successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete table';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to update table schema
+  const updateTableSchemaMutation = useMutation({
+    mutationFn: ({
+      tableName,
+      operations,
+    }: {
+      tableName: string;
+      operations: UpdateTableSchemaRequest;
+    }) => tableService.updateTableSchema(tableName, operations),
+    onSuccess: (_, { tableName }) => {
+      void queryClient.invalidateQueries({ queryKey: ['tables', tableName, 'schema'] });
+      showToast('Table schema updated successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to update table schema';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  return {
+    // Data
+    tables: tables || [],
+    tablesCount: tables?.length || 0,
+
+    // Loading states
+    isLoadingTables,
+    isCreating: createTableMutation.isPending,
+    isDeleting: deleteTableMutation.isPending,
+    isUpdating: updateTableSchemaMutation.isPending,
+
+    // Errors
+    tablesError,
+
+    // Actions
+    createTable: createTableMutation.mutate,
+    deleteTable: deleteTableMutation.mutate,
+    updateTableSchema: updateTableSchemaMutation.mutate,
+    refetchTables,
+
+    // Helpers
+    useTableSchema,
+  };
+}
+
+/**
+ * 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,9 +4,15 @@ 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 { databaseService } from './services/database.service';
+export { tableService } from './services/table.service';
+export { recordService } from './services/record.service';
+
+// Hooks
+export { useTables } from './hooks/useTables';
+export { useRecords } from './hooks/useRecords';
 
 // Helpers
 export { buildDynamicSchema, getInitialValues } from './helpers';

package/frontend/src/features/database/pages/FunctionsPage.tsx

@@ -0,0 +1,203 @@
+import { useMemo, useState } from 'react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  EmptyState,
+  SearchInput,
+  DataGrid,
+  type DataGridColumn,
+  type DataGridRowType,
+  type ConvertedValue,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { useFunctions } from '../hooks/useDatabase';
+import { SQLModal, SQLCellButton } from '../components/SQLModal';
+import type { DatabaseFunctionsResponse } from '@insforge/shared-schemas';
+import { isSystemFunction } from '../constants';
+
+interface FunctionRow extends DataGridRowType {
+  id: string;
+  functionName: string;
+  kind: string;
+  functionDef: string;
+  [key: string]: ConvertedValue | { [key: string]: string }[];
+}
+
+function parseFunctionsFromResponse(
+  response: DatabaseFunctionsResponse | undefined
+): FunctionRow[] {
+  if (!response?.functions) {
+    return [];
+  }
+
+  const functions: FunctionRow[] = [];
+
+  response.functions.forEach((func) => {
+    if (isSystemFunction(func.functionName)) {
+      return;
+    }
+
+    functions.push({
+      id: func.functionName,
+      functionName: func.functionName,
+      kind: func.kind,
+      functionDef: func.functionDef,
+    });
+  });
+
+  return functions;
+}
+
+export default function FunctionsPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const { data, isLoading, error, refetch } = useFunctions(true);
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
+
+  const allFunctions = useMemo(() => parseFunctionsFromResponse(data), [data]);
+
+  const filteredFunctions = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return allFunctions;
+    }
+
+    const query = searchQuery.toLowerCase();
+    return allFunctions.filter((func) => func.functionName.toLowerCase().includes(query));
+  }, [allFunctions, searchQuery]);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      setSearchQuery('');
+      await refetch();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const columns: DataGridColumn<FunctionRow>[] = useMemo(
+    () => [
+      {
+        key: 'functionName',
+        name: 'Name',
+        width: 'minmax(200px, 2fr)',
+        resizable: true,
+        sortable: true,
+      },
+      {
+        key: 'kind',
+        name: 'Type',
+        width: 'minmax(120px, 1fr)',
+        resizable: true,
+        sortable: true,
+        renderCell: ({ row }) => {
+          const kindLabel =
+            row.kind === 'f' ? 'Function' : row.kind === 'p' ? 'Procedure' : row.kind;
+          return (
+            <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+              {kindLabel}
+            </span>
+          );
+        },
+      },
+      {
+        key: 'functionDef',
+        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) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <EmptyState
+          title="Failed to load functions"
+          description={error instanceof Error ? error.message : 'An error occurred'}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 h-full p-4 bg-bg-gray dark:bg-neutral-800">
+      <div className="flex items-center gap-3">
+        <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Database Functions</h1>
+
+        {/* Separator */}
+        <div className="h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+        {/* Refresh button */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="p-1 h-9 w-9"
+                onClick={() => void handleRefresh()}
+                disabled={isRefreshing}
+              >
+                <RefreshIcon className="h-5 w-5 text-zinc-400 dark:text-neutral-400" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" align="center">
+              <p>{isRefreshing ? 'Refreshing...' : 'Refresh'}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <SearchInput
+        value={searchQuery}
+        onChange={setSearchQuery}
+        placeholder="Search for a function"
+        className="w-64"
+      />
+
+      {isLoading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <EmptyState title="Loading functions..." description="Please wait" />
+        </div>
+      ) : (
+        <div className="flex-1 overflow-hidden">
+          <DataGrid
+            data={filteredFunctions}
+            columns={columns}
+            showSelection={false}
+            showPagination={false}
+            noPadding={true}
+            className="h-full"
+            isRefreshing={isRefreshing}
+            emptyState={
+              <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                {searchQuery ? 'No functions match your search criteria' : 'No functions found'}
+              </div>
+            }
+          />
+        </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/pages/IndexesPage.tsx

@@ -0,0 +1,228 @@
+import { useMemo, useState } from 'react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  ConvertedValue,
+  DataGrid,
+  type DataGridColumn,
+  type DataGridRowType,
+  EmptyState,
+  SearchInput,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { useIndexes } from '../hooks/useDatabase';
+import { SQLModal, SQLCellButton } from '../components/SQLModal';
+import type { DatabaseIndexesResponse } from '@insforge/shared-schemas';
+import { isSystemTable } from '../constants';
+
+interface IndexRow extends DataGridRowType {
+  id: string;
+  tableName: string;
+  indexName: string;
+  indexDef: string;
+  isUnique: boolean | null;
+  isPrimary: boolean | null;
+  [key: string]: ConvertedValue | { [key: string]: string }[];
+}
+
+function parseIndexesFromResponse(response: DatabaseIndexesResponse | undefined): IndexRow[] {
+  if (!response?.indexes) {
+    return [];
+  }
+
+  const indexes: IndexRow[] = [];
+
+  response.indexes.forEach((index) => {
+    if (isSystemTable(index.tableName)) {
+      return;
+    }
+
+    indexes.push({
+      id: `${index.tableName}_${index.indexName}`,
+      tableName: index.tableName,
+      indexName: index.indexName,
+      indexDef: index.indexDef,
+      isUnique: index.isUnique,
+      isPrimary: index.isPrimary,
+    });
+  });
+
+  return indexes;
+}
+
+export default function IndexesPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const { data, isLoading, error, refetch } = useIndexes(true);
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
+
+  const allIndexes = useMemo(() => parseIndexesFromResponse(data), [data]);
+
+  const filteredIndexes = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return allIndexes;
+    }
+
+    const query = searchQuery.toLowerCase();
+    return allIndexes.filter(
+      (index) =>
+        index.indexName.toLowerCase().includes(query) ||
+        index.tableName.toLowerCase().includes(query)
+    );
+  }, [allIndexes, searchQuery]);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      setSearchQuery('');
+      await refetch();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const columns: DataGridColumn<IndexRow>[] = useMemo(
+    () => [
+      {
+        key: 'tableName',
+        name: 'Table',
+        width: 'minmax(180px, 1.5fr)',
+        resizable: true,
+        sortable: true,
+      },
+      {
+        key: 'indexName',
+        name: 'Name',
+        width: 'minmax(200px, 2fr)',
+        resizable: true,
+        sortable: true,
+      },
+      {
+        key: 'isPrimary',
+        name: 'Type',
+        width: 'minmax(120px, 1fr)',
+        resizable: true,
+        sortable: true,
+        renderCell: ({ row }) => {
+          if (row.isPrimary) {
+            return (
+              <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                Primary
+              </span>
+            );
+          }
+          if (row.isUnique) {
+            return (
+              <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                Unique
+              </span>
+            );
+          }
+          return (
+            <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+              Index
+            </span>
+          );
+        },
+      },
+      {
+        key: 'indexDef',
+        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) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <EmptyState
+          title="Failed to load indexes"
+          description={error instanceof Error ? error.message : 'An error occurred'}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 h-full p-4 bg-bg-gray dark:bg-neutral-800">
+      <div className="flex items-center gap-3">
+        <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Database Indexes</h1>
+
+        {/* Separator */}
+        <div className="h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+        {/* Refresh button */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="p-1 h-9 w-9"
+                onClick={() => void handleRefresh()}
+                disabled={isRefreshing}
+              >
+                <RefreshIcon className="h-5 w-5 text-zinc-400 dark:text-neutral-400" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" align="center">
+              <p>{isRefreshing ? 'Refreshing...' : 'Refresh'}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <SearchInput
+        value={searchQuery}
+        onChange={setSearchQuery}
+        placeholder="Search for an index"
+        className="w-64"
+      />
+
+      {isLoading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <EmptyState title="Loading indexes..." description="Please wait" />
+        </div>
+      ) : (
+        <div className="flex-1 overflow-hidden">
+          <DataGrid
+            data={filteredIndexes}
+            columns={columns}
+            showSelection={false}
+            showPagination={false}
+            noPadding={true}
+            className="h-full"
+            isRefreshing={isRefreshing}
+            emptyState={
+              <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                {searchQuery ? 'No indexes match your search criteria' : 'No indexes found'}
+              </div>
+            }
+          />
+        </div>
+      )}
+
+      {/* SQL Detail Modal */}
+      <SQLModal
+        open={sqlModal.open}
+        onOpenChange={(open) => setSqlModal((prev) => ({ ...prev, open }))}
+        title={sqlModal.title}
+        value={sqlModal.value}
+      />
+    </div>
+  );
+}