insforge 0.3.3 → 1.3.0

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

@@ -0,0 +1,237 @@
+import { useMemo, useState } from 'react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  DataGrid,
+  type ConvertedValue,
+  type DataGridColumn,
+  type DataGridRowType,
+  EmptyState,
+  SearchInput,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { usePolicies } from '../hooks/useDatabase';
+import { SQLModal, SQLCellButton } from '../components/SQLModal';
+import type { DatabasePoliciesResponse } from '@insforge/shared-schemas';
+import { isSystemTable } from '../constants';
+
+interface PolicyRow extends DataGridRowType {
+  id: string;
+  tableName: string;
+  policyName: string;
+  cmd: string;
+  roles: string;
+  qual: string | null;
+  withCheck: string | null;
+  [key: string]: ConvertedValue | { [key: string]: string }[];
+}
+
+function parsePoliciesFromResponse(response: DatabasePoliciesResponse | undefined): PolicyRow[] {
+  if (!response?.policies) {
+    return [];
+  }
+
+  const policies: PolicyRow[] = [];
+
+  response.policies.forEach((policy) => {
+    if (isSystemTable(policy.tableName)) {
+      return;
+    }
+
+    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,
+    });
+  });
+
+  return policies;
+}
+
+export default function PoliciesPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const { data, isLoading, error, refetch } = usePolicies(true);
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
+
+  const allPolicies = useMemo(() => parsePoliciesFromResponse(data), [data]);
+
+  const filteredPolicies = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return allPolicies;
+    }
+
+    const query = searchQuery.toLowerCase();
+    return allPolicies.filter(
+      (policy) =>
+        policy.policyName.toLowerCase().includes(query) ||
+        policy.tableName.toLowerCase().includes(query)
+    );
+  }, [allPolicies, searchQuery]);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      setSearchQuery('');
+      await refetch();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const columns: DataGridColumn<PolicyRow>[] = useMemo(
+    () => [
+      {
+        key: 'tableName',
+        name: 'Table',
+        width: 'minmax(180px, 1.5fr)',
+        resizable: true,
+        sortable: true,
+      },
+      {
+        key: 'policyName',
+        name: 'Name',
+        width: 'minmax(200px, 2fr)',
+        resizable: true,
+        sortable: true,
+      },
+      {
+        key: 'cmd',
+        name: 'Command',
+        width: 'minmax(100px, 1fr)',
+        resizable: true,
+        sortable: true,
+        renderCell: ({ row }) => {
+          const cmd = row.cmd;
+          const cmdLabel = cmd === '*' ? 'ALL' : cmd;
+          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">
+              {cmdLabel}
+            </span>
+          );
+        },
+      },
+      {
+        key: 'roles',
+        name: 'Roles',
+        width: 'minmax(150px, 1.5fr)',
+        resizable: true,
+      },
+      {
+        key: 'qual',
+        name: 'Using',
+        width: 'minmax(200px, 2fr)',
+        resizable: true,
+        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 }) => (
+          <SQLCellButton
+            value={row.withCheck}
+            onClick={() =>
+              row.withCheck &&
+              setSqlModal({ open: true, title: 'With Check', value: row.withCheck })
+            }
+          />
+        ),
+      },
+    ],
+    [setSqlModal]
+  );
+
+  if (error) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <EmptyState
+          title="Failed to load policies"
+          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">RLS Policies</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 policy"
+        className="w-64"
+      />
+
+      {isLoading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <EmptyState title="Loading policies..." description="Please wait" />
+        </div>
+      ) : (
+        <div className="flex-1 overflow-hidden">
+          <DataGrid
+            data={filteredPolicies}
+            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 policies match your search criteria' : 'No policies 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/SQLEditorPage.tsx

@@ -0,0 +1,382 @@
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { useRawSQL } from '@/features/database/hooks/useRawSQL';
+import { useSQLEditorContext } from '@/features/database/contexts/SQLEditorContext';
+import {
+  Badge,
+  Button,
+  CodeEditor,
+  DataGrid,
+  type DataGridColumn,
+  type DataGridRow,
+} from '@/components';
+import { X, Plus } from 'lucide-react';
+import { cn } from '@/lib/utils/utils';
+
+interface ResultsViewerProps {
+  data: unknown;
+}
+
+// Helper to detect if data is an array of row objects
+function isRowData(data: unknown): data is Record<string, unknown>[] {
+  return (
+    Array.isArray(data) &&
+    data.length > 0 &&
+    typeof data[0] === 'object' &&
+    data[0] !== null &&
+    !Array.isArray(data[0])
+  );
+}
+
+// Convert SQL result rows to DataGrid format
+function convertRowsToDataGridFormat(rows: Record<string, unknown>[]) {
+  // Add synthetic id field if rows don't have one - ensure id is always a string
+  const dataWithIds: DataGridRow[] = rows.map((row, index) => ({
+    ...row,
+    id: String(row.id || `row-${index}`),
+  }));
+
+  // Get all column keys from first row
+  const columnKeys = Object.keys(rows[0]);
+
+  // Create simple columns that render values as plain strings
+  const columns: DataGridColumn<DataGridRow>[] = columnKeys.map((key) => ({
+    key,
+    name: key,
+    width: 'minmax(200px, 1fr)',
+    resizable: true,
+    sortable: true,
+    editable: false,
+  }));
+
+  return { columns, data: dataWithIds };
+}
+
+function ResultsViewer({ data }: ResultsViewerProps) {
+  // Check if data is row data (array of objects)
+  const isTable = isRowData(data);
+
+  const gridData = useMemo(() => {
+    if (isTable && data.length > 0) {
+      return convertRowsToDataGridFormat(data);
+    }
+    return null;
+  }, [isTable, data]);
+
+  if (isTable && gridData) {
+    // Render as table
+    return (
+      <div className="w-full">
+        <DataGrid
+          data={gridData.data}
+          columns={gridData.columns}
+          showSelection={false}
+          showPagination={false}
+          noPadding={true}
+          className="h-full"
+        />
+      </div>
+    );
+  }
+
+  // Render as JSON for non-table data
+  const jsonString = JSON.stringify(data, null, 2);
+  const lines = jsonString.split('\n');
+
+  return (
+    <div className="bg-neutral-100 dark:bg-neutral-900/50 rounded-lg p-3 overflow-auto">
+      <pre className="font-mono text-sm text-black dark:text-white leading-5 m-0">
+        {lines.map((line, index) => (
+          <div key={index} className="min-h-[1.25rem]">
+            {line || <span>&nbsp;</span>}
+          </div>
+        ))}
+      </pre>
+    </div>
+  );
+}
+
+interface ErrorViewerProps {
+  error: Error;
+}
+
+function ErrorViewer({ error }: ErrorViewerProps) {
+  return (
+    <div className="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-3 overflow-auto">
+      <pre className="font-mono text-sm text-red-600 dark:text-red-400 leading-5 m-0 whitespace-pre-wrap">
+        {error.message}
+      </pre>
+    </div>
+  );
+}
+
+export default function SQLEditorPage() {
+  const {
+    tabs,
+    activeTab,
+    activeTabId,
+    addTab,
+    removeTab,
+    setActiveTab,
+    updateTabQuery,
+    updateTabName,
+  } = useSQLEditorContext();
+
+  const [editingTabId, setEditingTabId] = useState<string | null>(null);
+  const [editingTabName, setEditingTabName] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { executeSQL, isPending, data, isSuccess, error, isError } = useRawSQL({
+    showSuccessToast: true,
+    showErrorToast: false, // Don't show toast, we'll display in results
+  });
+
+  useEffect(() => {
+    if (editingTabId && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingTabId]);
+
+  const handleExecuteQuery = () => {
+    if (!activeTab?.query.trim() || isPending) {
+      return;
+    }
+
+    executeSQL({ query: activeTab.query, params: [] });
+  };
+
+  const handleQueryChange = (newQuery: string) => {
+    if (activeTabId) {
+      updateTabQuery(activeTabId, newQuery);
+    }
+  };
+
+  const handleTabNameDoubleClick = (tabId: string, currentName: string) => {
+    setEditingTabId(tabId);
+    setEditingTabName(currentName);
+  };
+
+  const handleTabNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditingTabName(e.target.value);
+  };
+
+  const handleTabNameBlur = () => {
+    if (editingTabId && editingTabName.trim()) {
+      updateTabName(editingTabId, editingTabName.trim());
+    }
+    setEditingTabId(null);
+    setEditingTabName('');
+  };
+
+  const handleTabNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleTabNameBlur();
+    } else if (e.key === 'Escape') {
+      setEditingTabId(null);
+      setEditingTabName('');
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-bg-gray dark:bg-neutral-800 overflow-auto">
+      {/* Header */}
+      <div className="flex items-center gap-3 h-[72px] px-4 bg-bg-gray dark:bg-neutral-800 flex-shrink-0">
+        <h1 className="text-xl font-semibold text-black dark:text-white">SQL Editor</h1>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex flex-1 flex-col px-4 gap-3 bg-bg-gray dark:bg-neutral-800 items-center pb-6">
+        {/* Tabs and Editor Combined Section */}
+        <div className="w-full flex flex-col">
+          {/* Tabs Section */}
+          <div className="w-full flex items-end overflow-hidden">
+            <div className="flex items-end overflow-x-auto overflow-y-hidden scrollbar-hide">
+              {tabs.map((tab) => {
+                const isActive = tab.id === activeTabId;
+                return (
+                  <div
+                    key={tab.id}
+                    className={cn(
+                      'h-8 group relative flex items-center gap-1 px-2 cursor-pointer',
+                      'min-w-[110px] max-w-[200px] rounded-t-lg',
+                      'border-t border-l border-r border-gray-300 dark:border-neutral-700',
+                      isActive
+                        ? 'bg-white dark:bg-[#1E1E1E] text-black dark:text-white z-10'
+                        : 'bg-gray-200 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-gray-300 dark:hover:bg-neutral-600'
+                    )}
+                    onClick={() => setActiveTab(tab.id)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      // Don't handle keyboard events if we're editing
+                      if (editingTabId === tab.id) {
+                        return;
+                      }
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setActiveTab(tab.id);
+                      }
+                    }}
+                  >
+                    {editingTabId === tab.id ? (
+                      <input
+                        ref={inputRef}
+                        type="text"
+                        value={editingTabName}
+                        onChange={handleTabNameChange}
+                        onBlur={handleTabNameBlur}
+                        onKeyDown={(e) => {
+                          // Stop propagation to prevent parent handlers from interfering
+                          e.stopPropagation();
+                          handleTabNameKeyDown(e);
+                        }}
+                        className={cn(
+                          'pl-2 pr-1 text-sm font-medium bg-transparent',
+                          'border-none outline-none focus:outline-none w-full min-w-0',
+                          'text-black dark:text-white'
+                        )}
+                        onClick={(e) => e.stopPropagation()}
+                      />
+                    ) : (
+                      <>
+                        <span
+                          className={cn(
+                            'pl-2 text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis',
+                            'flex-1 min-w-0'
+                          )}
+                          onDoubleClick={(e) => {
+                            e.stopPropagation();
+                            handleTabNameDoubleClick(tab.id, tab.name);
+                          }}
+                        >
+                          {tab.name}
+                        </span>
+                        {tabs.length > 1 && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              removeTab(tab.id);
+                            }}
+                            className={cn(
+                              'flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity',
+                              'text-neutral-400 hover:text-black dark:hover:text-white',
+                              'rounded p-0.5 hover:bg-gray-200 dark:hover:bg-neutral-700',
+                              'focus:outline-none focus-visible:outline-none'
+                            )}
+                            aria-label="Close tab"
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </button>
+                        )}
+                      </>
+                    )}
+                  </div>
+                );
+              })}
+              <button
+                onClick={() => addTab()}
+                className={cn(
+                  'h-8 group relative flex items-center justify-center px-3 py-1.5',
+                  'cursor-pointer transition-colors min-w-[40px]',
+                  'focus:outline-none focus-visible:outline-none',
+                  'text-neutral-500 dark:text-neutral-400',
+                  'hover:bg-gray-200/70 dark:hover:bg-neutral-700',
+                  'hover:text-black dark:hover:text-white rounded-t-lg'
+                )}
+                aria-label="Add new tab"
+              >
+                <Plus className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* Code Editor Section */}
+          <div
+            className={cn(
+              'h-[480px] w-full',
+              'bg-white dark:bg-neutral-900/50',
+              'border border-gray-200 dark:border-neutral-700',
+              'rounded-lg rounded-tl-none overflow-hidden -mt-px'
+            )}
+          >
+            <CodeEditor
+              editable
+              language="sql"
+              value={activeTab?.query || ''}
+              onChange={handleQueryChange}
+              placeholder="SELECT * FROM users WHERE email = 'user@example.com';"
+            />
+          </div>
+        </div>
+
+        {/* Run Button */}
+        <div className="w-full flex justify-end">
+          <Button
+            onClick={handleExecuteQuery}
+            disabled={isPending || !activeTab?.query.trim()}
+            className={cn(
+              'h-8 px-6 gap-1 text-sm',
+              'bg-zinc-950 hover:bg-zinc-800 text-white',
+              'dark:bg-emerald-300 dark:hover:bg-emerald-400 dark:text-black',
+              'disabled:opacity-50'
+            )}
+          >
+            Run
+          </Button>
+        </div>
+
+        {/* Divider */}
+        <div className="w-full h-px bg-gray-200 dark:bg-neutral-700" />
+
+        {/* Results Section */}
+        <div className="flex-1 flex flex-col gap-4 w-full">
+          {/* Results Heading */}
+          <div className="flex items-center gap-2">
+            <h2 className="text-base font-semibold text-black dark:text-white">Results</h2>
+            {isSuccess && (
+              <Badge
+                className={cn(
+                  'px-2 py-0.5 border-transparent',
+                  'bg-emerald-500/10 text-emerald-600',
+                  'dark:bg-emerald-500/20 dark:text-emerald-400'
+                )}
+              >
+                Success
+              </Badge>
+            )}
+            {isError && (
+              <Badge
+                className={cn(
+                  'px-2 py-0.5 border-transparent',
+                  'bg-red-500/10 text-red-600',
+                  'dark:bg-red-500/20 dark:text-red-400'
+                )}
+              >
+                Error
+              </Badge>
+            )}
+          </div>
+
+          {/* Results Content */}
+          <div className="flex-1">
+            {isError && error ? (
+              <ErrorViewer error={error} />
+            ) : isSuccess && data ? (
+              <ResultsViewer data={data.rows || data.data || data} />
+            ) : (
+              <div
+                className={cn(
+                  'h-full rounded-lg flex items-center justify-center text-sm',
+                  'bg-neutral-100 dark:bg-neutral-900/50',
+                  'text-neutral-500 dark:text-neutral-400'
+                )}
+              >
+                {isPending ? 'Executing query...' : 'Run a query to see results'}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}