@quillsql/admin 1.6.0 → 1.6.2

package/dist/esm/forms/client_onboard/__tests__/CreateVirtualTables.test.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act } from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CreateVirtualTables from '../CreateVirtualTables';
+import { useAdmin } from '../../../AdminProvider';
+import { defaultTheme } from '../../../Admin';
+// Mock the hooks
+jest.mock('../../../AdminProvider');
+jest.mock('@quillsql/react', () => ({
+    ...jest.requireActual('@quillsql/react'),
+    SchemaListComponent: ({ schema, onClick }) => (_jsx("div", { "data-testid": "schema-list", children: schema.map((table) => (_jsx("div", { onClick: () => onClick(table), children: table.tableName }, table.tableName))) })),
+    Table: ({ rows, columns }) => (_jsx("div", { "data-testid": "table", children: rows.map((row, i) => (_jsx("div", { children: columns.map((col) => (_jsx("span", { children: row[col.name] }, col.name))) }, i))) })),
+}));
+// Mock SqlTextEditor
+jest.mock('../../../components/SqlTextEditor', () => ({
+    __esModule: true,
+    default: ({ value, setValue }) => (_jsx("textarea", { "data-testid": "sql-editor", value: value, onChange: (e) => setValue(e.target.value) })),
+}));
+// Mock the API calls
+jest.mock('../../../api/ConnectionClient', () => ({
+    getQueryFromAiWithConnection: jest.fn(),
+    getVirtualTableData: jest.fn(),
+    createVirtualTable: jest.fn(),
+}));
+// avoid error thrown by jspdf
+jest.mock('jspdf', () => ({
+    __esModule: true,
+    default: jest.fn(() => ({
+        text: jest.fn(),
+        save: jest.fn(),
+    })),
+}));
+// Mock window.alert
+window.alert = jest.fn();
+// Add these mocks before the describe block
+class MockResizeObserver {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+global.ResizeObserver = MockResizeObserver;
+// Mock window.HTMLElement.prototype.scrollIntoView
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+describe('CreateVirtualTables', () => {
+    const mockCompleteOnboarding = jest.fn();
+    const mockGetToken = jest.fn();
+    const mockQuillFetchWithToken = jest.fn();
+    const mockState = {
+        queryEndpoint: 'http://test-endpoint',
+        loading: true,
+        publicKey: 'test-key',
+        queryHeaders: {},
+        withCredentials: false,
+        client: {
+            ownerTenantFields: ['tenant_id', 'tenant_name'],
+            clientId: 'test-client-id',
+        },
+        clients: [],
+        organization: null,
+        organizations: [],
+        organizationId: null,
+        activeQuery: '',
+        activeSavedQueryReportId: '',
+        activeEditItem: undefined,
+        tables: [],
+        schema: [],
+        databaseSchema: undefined,
+        activeComponent: 'Dashboards',
+        dashboards: [],
+        selectedDashboard: null,
+        reportId: null,
+        report: null,
+        theme: defaultTheme,
+        organizationIdSet: false,
+        dateFilter: {},
+        domainName: '',
+        databaseTypeMismatch: { show: false, backendDatabaseType: '' },
+        selectedTenantField: undefined,
+        selectedTenantValues: undefined,
+        selectedDashboardTenantIds: undefined,
+        mappableDashboardTenantIds: undefined,
+        mappableDashboardTenantIdsLoading: false,
+        currentTenantIdentity: undefined,
+    };
+    let sqlTables = [];
+    const setSqlTables = (e) => {
+        sqlTables = e;
+    };
+    const defaultProps = {
+        containerStyle: {},
+        header1Style: {},
+        header2Style: {},
+        isLoading: false,
+        databaseSchema: [
+            {
+                tableName: 'users',
+                displayName: 'Users',
+                columns: [
+                    {
+                        columnName: 'id',
+                        displayName: 'ID',
+                        fieldType: 'integer',
+                        dataTypeId: 1,
+                        field: 'id',
+                    },
+                    {
+                        columnName: 'name',
+                        displayName: 'Name',
+                        fieldType: 'text',
+                        dataTypeId: 2,
+                        field: 'name',
+                    },
+                    {
+                        columnName: 'email',
+                        displayName: 'Email',
+                        fieldType: 'text',
+                        dataTypeId: 2,
+                        field: 'email',
+                    },
+                ],
+            },
+            {
+                tableName: 'orders',
+                displayName: 'Orders',
+                columns: [
+                    {
+                        columnName: 'id',
+                        displayName: 'ID',
+                        fieldType: 'integer',
+                        dataTypeId: 1,
+                        field: 'id',
+                    },
+                    {
+                        columnName: 'user_id',
+                        displayName: 'User ID',
+                        fieldType: 'integer',
+                        dataTypeId: 1,
+                        field: 'user_id',
+                    },
+                    {
+                        columnName: 'amount',
+                        displayName: 'Amount',
+                        fieldType: 'decimal',
+                        dataTypeId: 3,
+                        field: 'amount',
+                    },
+                ],
+            },
+        ],
+        environmentDetails: {
+            type: 'PostgreSQL',
+            user: 'testuser',
+            password: 'testpass',
+            host: 'localhost',
+            databaseName: 'testdb',
+            port: '5432',
+        },
+        completeOnboarding: mockCompleteOnboarding,
+        client: {
+            clientId: 'test-client-id',
+            schemaNames: ['public'],
+        },
+        state: mockState,
+        tenantInit: {
+            ownerTenant: {
+                id: 'test-tenant-id',
+                name: 'Test Tenant',
+                tenantField: 'tenant_id',
+                scope: 'row',
+            },
+        },
+        sqlTables,
+        setSqlTables,
+    };
+    beforeEach(() => {
+        // Reset all mocks before each test
+        jest.clearAllMocks();
+        // Setup default mock implementations
+        useAdmin.mockReturnValue({
+            state: mockState,
+            getToken: mockGetToken,
+            quillFetchWithToken: mockQuillFetchWithToken,
+        });
+    });
+    // Initial Render Tests
+    describe('Initial Render', () => {
+        it('renders the component with initial state', async () => {
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps }));
+            });
+            // Check for main elements
+            expect(screen.getByText('Create Virtual Tables')).toBeInTheDocument();
+            expect(screen.getByText('Create a cleaned schema that makes it easier to write queries.')).toBeInTheDocument();
+            expect(screen.getByText('Virtual Tables')).toBeInTheDocument();
+            expect(screen.getByText(/No virtual tables created yet/i)).toBeInTheDocument();
+            // Check for schema list
+            const schemaList = screen.getByTestId('schema-list');
+            expect(schemaList).toBeInTheDocument();
+            expect(screen.getByText('users')).toBeInTheDocument();
+            expect(screen.getByText('orders')).toBeInTheDocument();
+        });
+        it('renders schema list with correct tables', async () => {
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps }));
+            });
+            // Check for schema list
+            const schemaList = screen.getByTestId('schema-list');
+            expect(schemaList).toBeInTheDocument();
+            // Check for table names
+            expect(screen.getByText('users')).toBeInTheDocument();
+            expect(screen.getByText('orders')).toBeInTheDocument();
+        });
+    });
+    // Table Filtering Tests
+    describe('Table Filtering', () => {
+        it('filters tables by name', async () => {
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps }));
+            });
+            // Filter tables by name
+            fireEvent.change(screen.getByPlaceholderText('Filter tables...'), {
+                target: { value: 'users' },
+            });
+            // Verify that only the users table is shown
+            expect(screen.getByText('users')).toBeInTheDocument();
+            expect(screen.queryByText('orders')).not.toBeInTheDocument();
+        });
+        it('filters tables by column name', async () => {
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps }));
+            });
+            // Filter tables by column name
+            fireEvent.change(screen.getByPlaceholderText('Filter tables...'), {
+                target: { value: 'email' },
+            });
+            // Verify that only the users table is shown
+            expect(screen.getByText('users')).toBeInTheDocument();
+            expect(screen.queryByText('orders')).not.toBeInTheDocument();
+        });
+    });
+    // Query Execution Tests
+    describe('Query Execution', () => {
+        it('handles successful query execution', async () => {
+            const mockQueryResult = {
+                success: true,
+                rows: [
+                    { id: 1, name: 'John Doe', email: 'john@example.com' },
+                    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
+                ],
+                fields: [
+                    { name: 'id', type: 'integer', field: 'id' },
+                    { name: 'name', type: 'text', field: 'name' },
+                    { name: 'email', type: 'text', field: 'email' },
+                ],
+            };
+            const mockGetVirtualTableData = 
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            require('../../../api/ConnectionClient').getVirtualTableData;
+            mockGetVirtualTableData.mockResolvedValueOnce(mockQueryResult);
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps }));
+            });
+            // Enter and execute a query
+            const query = 'SELECT * FROM users;';
+            const sqlEditor = screen.getByTestId('sql-editor');
+            fireEvent.change(sqlEditor, {
+                target: { value: query },
+            });
+            // Click Run query button
+            fireEvent.click(screen.getByText('Run query'));
+            // Wait for the results to be displayed
+            await waitFor(() => {
+                expect(screen.getByText('John Doe')).toBeInTheDocument();
+                expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+            });
+        });
+        it('handles query execution error', async () => {
+            const mockGetVirtualTableData = 
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            require('../../../api/ConnectionClient').getVirtualTableData;
+            mockGetVirtualTableData.mockResolvedValueOnce({
+                success: false,
+                error: 'Invalid SQL query',
+            });
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps }));
+            });
+            // Enter and execute an invalid query
+            const query = 'SELECT * FROM nonexistent_table;';
+            const sqlEditor = screen.getByTestId('sql-editor');
+            fireEvent.change(sqlEditor, {
+                target: { value: query },
+            });
+            // Click Run query button
+            fireEvent.click(screen.getByText('Run query'));
+            // Wait for the error message to appear
+            await waitFor(() => {
+                expect(screen.getByText('Invalid SQL query')).toBeInTheDocument();
+            });
+        });
+    });
+    // Virtual Table Creation Tests
+    describe('Virtual Table Creation', () => {
+        it('handles successful virtual table creation', async () => {
+            // Mock successful query execution
+            const mockGetVirtualTableData = 
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            require('../../../api/ConnectionClient').getVirtualTableData;
+            mockGetVirtualTableData.mockResolvedValueOnce({
+                success: true,
+                rows: [{ id: 1, name: 'John Doe', email: 'john@example.com' }],
+                fields: [
+                    { name: 'id', type: 'integer', field: 'id' },
+                    { name: 'name', type: 'text', field: 'name' },
+                    { name: 'email', type: 'text', field: 'email' },
+                ],
+            });
+            // Mock successful AST generation
+            mockQuillFetchWithToken.mockResolvedValueOnce({
+                data: {
+                    success: true,
+                    ast: [
+                        {
+                            from: [{ table: 'users' }],
+                        },
+                    ],
+                },
+            });
+            // Mock successful virtual table creation
+            const mockCreateVirtualTable = 
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            require('../../../api/ConnectionClient').createVirtualTable;
+            mockCreateVirtualTable.mockResolvedValueOnce({
+                success: true,
+                tables: [
+                    {
+                        name: 'active_users',
+                        viewQuery: "SELECT * FROM users WHERE email LIKE '%@example.com';",
+                    },
+                ],
+            });
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps }));
+            });
+            // Enter and execute a query
+            const query = "SELECT * FROM users WHERE email LIKE '%@example.com';";
+            const sqlEditor = screen.getByTestId('sql-editor');
+            fireEvent.change(sqlEditor, {
+                target: { value: query },
+            });
+            // Click Run query button
+            fireEvent.click(screen.getByText('Run query'));
+            // Wait for results and click Add Virtual Table
+            await waitFor(() => {
+                expect(screen.getByText('Add Virtual Table')).toBeInTheDocument();
+            });
+            fireEvent.click(screen.getByTestId('add-virtual-table-button').querySelector('button'));
+            // Wait for the modal and confirm
+            await waitFor(() => {
+                expect(screen.getByText('Confirm')).toBeInTheDocument();
+            });
+            await act(async () => {
+                fireEvent.click(screen.getByText('Confirm'));
+            });
+            // rerender with updated sqlTables
+            await act(async () => {
+                render(_jsx(CreateVirtualTables, { ...defaultProps, sqlTables: sqlTables }));
+            });
+            // Verify virtual table was created
+            await waitFor(() => {
+                expect(screen.getByText('active_users')).toBeInTheDocument();
+            });
+            // Click Looks good button
+            fireEvent.click(screen.getByText('Looks good'));
+            // Verify onboarding completion
+            expect(mockCompleteOnboarding).toHaveBeenCalled();
+        });
+    });
+});

package/dist/esm/forms/virtual_tables/CreateEditVirtualTable.d.ts

@@ -0,0 +1,20 @@
+import { ButtonComponentProps } from '@quillsql/react';
+import { TextInputComponentProps } from '../../components/UiComponents';
+import { ColumnsByTable, Table as TableType } from '../../utils/table';
+import { QuillProviderClient } from '../../Admin';
+interface CreateEditVirtualTableProps {
+    containerStyle: React.CSSProperties;
+    initialVirtualTable?: TableType;
+    ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+    SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+    TextInput?: (props: TextInputComponentProps) => JSX.Element;
+    LoadingComponent?: () => JSX.Element;
+    closeEditVirtualTable: () => void;
+    addEditVirtualTable: (request: 'add' | 'edit', query: string, ownerTenantFields: string[], name?: string, id?: string, columns?: any[], override?: boolean) => void;
+    allTableData: ColumnsByTable[];
+    schemaIsLoading: boolean;
+    client: QuillProviderClient;
+}
+export default function CreateEditVirtualTable({ containerStyle, initialVirtualTable, closeEditVirtualTable: closeEditVirtualTable, addEditVirtualTable: addEditVirtualTable, LoadingComponent, ButtonComponent, SecondaryButtonComponent, TextInput, allTableData, schemaIsLoading, client, }: CreateEditVirtualTableProps): JSX.Element;
+export {};
+//# sourceMappingURL=CreateEditVirtualTable.d.ts.map

package/dist/esm/forms/virtual_tables/CreateEditVirtualTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateEditVirtualTable.d.ts","sourceRoot":"","sources":["../../../../src/forms/virtual_tables/CreateEditVirtualTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAOL,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAU,cAAc,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAO/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD,UAAU,2BAA2B;IACnC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,EAAE,CACnB,OAAO,EAAE,KAAK,GAAG,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,iBAAiB,EAAE,MAAM,EAAE,EAC3B,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,GAAG,EAAE,EACf,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;IACV,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,mBAAmB,EACxC,gBAA2C,EAC3C,eAAgC,EAChC,wBAAkD,EAClD,SAA6B,EAC7B,YAAY,EACZ,eAAe,EACf,MAAM,GACP,EAAE,2BAA2B,GAAG,GAAG,CAAC,OAAO,CAqgB3C"}