@quillsql/admin 1.6.3 → 1.7.0

package/dist/cjs/api/ConnectionClient.js

@@ -4,6 +4,8 @@ exports.testConnectionString = testConnectionString;
 exports.getTablesBySchema = getTablesBySchema;
 exports.setSchemaNames = setSchemaNames;
 exports.getTableInfo = getTableInfo;
+exports.getSchemaTables = getSchemaTables;
+exports.getTableColumns = getTableColumns;
 exports.getTableColumnsBySchema = getTableColumnsBySchema;
 exports.getVirtualTables = getVirtualTables;
 exports.getVirtualTableData = getVirtualTableData;
@@ -11,9 +13,10 @@ exports.getAST = getAST;
 exports.getQueryFromAI = getQueryFromAI;
 exports.getQueryFromAiWithConnection = getQueryFromAiWithConnection;
 exports.createVirtualTable = createVirtualTable;
+const columnProcessing_1 = require("../utils/columnProcessing");
 const constants_1 = require("../utils/constants");
 const dataFetcher_1 = require("../utils/dataFetcher");
-async function testConnectionString(queryEndpoint, connectionString, databaseType, getToken, clientId) {
+async function testConnectionString(queryEndpoint, connectionString, databaseType, getToken, clientId, queryHeaders) {
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
     try {
@@ -38,6 +41,7 @@ async function testConnectionString(queryEndpoint, connectionString, databaseTyp
             const { data } = await (0, dataFetcher_1.quillFetch)({
                 client: {
                     queryEndpoint,
+                    queryHeaders,
                     clientId: clientId,
                     withCredentials: false,
                 },
@@ -61,10 +65,13 @@ async function testConnectionString(queryEndpoint, connectionString, databaseTyp
         throw error;
     }
 }
-async function getTablesBySchema(queryEndpoint, clientId, schema, getToken) {
+// Unused
+// If to be used, make work with self-hosted
+async function getTablesBySchema(queryEndpoint, clientId, schema, getToken, queryHeaders) {
     const results = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -82,10 +89,11 @@ async function getTablesBySchema(queryEndpoint, clientId, schema, getToken) {
         throw new Error(results.error);
     }
 }
-async function setSchemaNames(queryEndpoint, clientId, schemaNames, getToken) {
+async function setSchemaNames(queryEndpoint, clientId, schemaNames, getToken, queryHeaders) {
     await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -97,11 +105,13 @@ async function setSchemaNames(queryEndpoint, clientId, schemaNames, getToken) {
         getToken,
     });
 }
-// Unused?
-async function getTableInfo(queryEndpoint, clientId, schema, table, getToken) {
+// Unused
+// If to be used, make work with self-hosted
+async function getTableInfo(queryEndpoint, clientId, schema, table, getToken, queryHeaders) {
     const results = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -120,45 +130,136 @@ async function getTableInfo(queryEndpoint, clientId, schema, table, getToken) {
         throw new Error(results.error);
     }
 }
-async function getTableColumnsBySchema(queryEndpoint, clientId, getToken, schemas) {
-    const results = await (0, dataFetcher_1.quillFetch)({
+async function getSchemaTables(schemas, databaseType, queryEndpoint, clientId, getToken, queryHeaders) {
+    const schemaMap = {};
+    const { queries } = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
-        task: 'table-info-by-schema',
+        task: 'get-tables-by-schemas',
         metadata: {
-            clientId,
+            databaseType,
             schemas,
         },
         getToken,
     });
-    if (results.status === 'error') {
-        throw new Error(results.error);
+    const queryResults = queries?.queryResults || [];
+    if (queryResults.length !== schemas.length) {
+        throw new Error('Error fetching tables by schemas');
     }
-    const formattedResults = results.data.columnsByTable.map((table) => {
-        return {
-            tableName: table.tableName,
-            displayName: table.displayName,
-            columns: table.columns.map((column) => {
-                return {
-                    columnName: column.columnName,
-                    displayName: column.displayName,
-                    fieldType: column.fieldType,
-                    dataTypeId: column.dataTypeId,
-                    field: column.columnName,
-                };
-            }),
-        };
+    const allTables = [];
+    for (let i = 0; i < queryResults.length; i++) {
+        const queryResult = queryResults[i];
+        const schema = schemas[i] || '';
+        const tables = queryResult.rows.map((row) => {
+            if (!schemaMap[schema]) {
+                schemaMap[schema] = [];
+            }
+            schemaMap[schema].push(row['table_name'] || row['TABLE_NAME']);
+            return {
+                tableName: row['table_name'] || row['TABLE_NAME'],
+                schemaName: row['table_schema'] || row['TABLE_SCHEMA'],
+                catalogName: row['table_catalog'] || row['TABLE_CATALOG'],
+            };
+        });
+        allTables.push(...tables);
+    }
+    return { tables: allTables.flat(), schema: schemaMap };
+}
+async function getTableColumns(tables, databaseType, queryEndpoint, clientId, getToken, queryHeaders) {
+    const { queries } = await (0, dataFetcher_1.quillFetch)({
+        client: {
+            queryEndpoint,
+            queryHeaders,
+            clientId,
+            withCredentials: false,
+        },
+        task: 'get-schema-table-columns',
+        metadata: {
+            databaseType,
+            tables,
+        },
+        getToken,
     });
-    return { columnsByTable: formattedResults, schema: results.data.schema };
+    const queryResults = queries?.queryResults || [];
+    if (queryResults.length !== tables.length) {
+        throw new Error('Error fetching table columns');
+    }
+    const columnsByTable = [];
+    for (let i = 0; i < queryResults.length; i++) {
+        const queryResult = queryResults[i];
+        const table = tables[i];
+        const columns = queryResult.rows.map((row) => {
+            const fieldType = row['fieldType'] || row['dataType'];
+            return {
+                columnName: row['columnName'],
+                displayName: row['columnName'],
+                fieldType: fieldType,
+                dataTypeId: (0, columnProcessing_1.fieldTypeToDataTypeID)(fieldType?.toLowerCase()),
+                field: row['columnName'],
+            };
+        });
+        columnsByTable.push({
+            tableName: `${table.catalogName ? `${table.catalogName}.` : ''}${table.schemaName}.${table.tableName}`,
+            displayName: `${table.catalogName ? `${table.catalogName}.` : ''}${table.schemaName}.${table.tableName}`,
+            columns,
+        });
+    }
+    return columnsByTable;
+}
+// Different logic for self-hosted because there might not be a database connection string
+// to rely on in the backend
+async function getTableColumnsBySchema(isSelfHosted, queryEndpoint, clientId, databaseType, getToken, schemas, queryHeaders) {
+    if (isSelfHosted) {
+        const { tables, schema } = await getSchemaTables(schemas, databaseType, queryEndpoint, clientId, getToken, queryHeaders);
+        const columnsByTable = await getTableColumns(tables, databaseType, queryEndpoint, clientId, getToken, queryHeaders);
+        return { columnsByTable, schema };
+    }
+    else {
+        const results = await (0, dataFetcher_1.quillFetch)({
+            client: {
+                queryEndpoint,
+                queryHeaders,
+                clientId,
+                withCredentials: false,
+            },
+            task: 'table-info-by-schema',
+            metadata: {
+                clientId,
+                schemas,
+            },
+            getToken,
+        });
+        if (results.status === 'error') {
+            throw new Error(results.error);
+        }
+        const formattedResults = results.data.columnsByTable.map((table) => {
+            return {
+                tableName: table.tableName,
+                displayName: table.displayName || table.tableName,
+                columns: table.columns.map((column) => {
+                    return {
+                        columnName: column.columnName,
+                        displayName: column.displayName,
+                        fieldType: column.fieldType,
+                        dataTypeId: column.dataTypeId,
+                        field: column.columnName,
+                    };
+                }),
+            };
+        });
+        return { columnsByTable: formattedResults, schema: results.data.schema };
+    }
 }
 // Unused?
-async function getVirtualTables(queryEndpoint, tableSchemas, customerNameField, clientId, getToken) {
+async function getVirtualTables(queryEndpoint, tableSchemas, customerNameField, clientId, getToken, queryHeaders) {
     const { data: results } = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -178,12 +279,14 @@ async function getVirtualTables(queryEndpoint, tableSchemas, customerNameField,
     }
     return results.notSureWhatThisIs.sqlQueries;
 }
-async function getVirtualTableData(clientId, query, databaseType, queryEndpoint, getToken) {
+// TODO: Check that works with self-hosted
+async function getVirtualTableData(clientId, query, databaseType, queryEndpoint, getToken, eventTracking, queryHeaders) {
     let queryAst = undefined;
     try {
         const { data } = await (0, dataFetcher_1.quillFetch)({
             client: {
                 queryEndpoint,
+                queryHeaders,
                 clientId,
                 withCredentials: false,
             },
@@ -204,6 +307,16 @@ async function getVirtualTableData(clientId, query, databaseType, queryEndpoint,
         }
     }
     catch (e) {
+        eventTracking?.logError?.({
+            type: 'network',
+            severity: 'medium',
+            message: 'Error getting AST',
+            errorMessage: e.message,
+            errorStack: e.stack,
+            errorData: {
+                function: 'getVirtualTableData',
+            },
+        });
         return {
             success: false,
             error: 'Invalid SQL Query',
@@ -213,6 +326,7 @@ async function getVirtualTableData(clientId, query, databaseType, queryEndpoint,
     const results = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -291,10 +405,11 @@ async function getVirtualTableData(clientId, query, databaseType, queryEndpoint,
         : { ...results, ...queryAst };
 }
 // Unused?
-async function getAST(query, clientId, queryEndpoint, getToken) {
+async function getAST(query, clientId, queryEndpoint, getToken, queryHeaders) {
     const { data } = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -309,10 +424,11 @@ async function getAST(query, clientId, queryEndpoint, getToken) {
     return data;
 }
 // Unused?
-async function getQueryFromAI(aiPrompt, columnsByTable, queryEndpoint, clientId, getToken) {
+async function getQueryFromAI(aiPrompt, columnsByTable, queryEndpoint, clientId, getToken, queryHeaders) {
     const { data: results } = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -326,13 +442,15 @@ async function getQueryFromAI(aiPrompt, columnsByTable, queryEndpoint, clientId,
     });
     return results?.message || '';
 }
-async function getQueryFromAiWithConnection(queryEndpoint, aiPrompt, clientId, getToken, schemaNames) {
+// TODO: Check that works with self-hosted
+async function getQueryFromAiWithConnection(isSelfHosted, databaseSchema, queryEndpoint, aiPrompt, clientId, getToken, schemaNames, queryHeaders) {
     if (aiPrompt.trim().length > 500) {
         return '';
     }
     const { data: results } = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -341,6 +459,7 @@ async function getQueryFromAiWithConnection(queryEndpoint, aiPrompt, clientId, g
             prompt: aiPrompt,
             clientId,
             schemaNames,
+            databaseSchema: isSelfHosted ? databaseSchema : undefined,
         },
         getToken,
     });
@@ -351,6 +470,7 @@ async function createVirtualTable(viewInfo, client, tableData, currentTableNames
     const { data: queryAstRaw } = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -362,6 +482,7 @@ async function createVirtualTable(viewInfo, client, tableData, currentTableNames
         },
         getToken,
     });
+    // Check for missing tenant field
     const missingField = ownerTenantFields.find((field) => tableData &&
         !tableData.fields.find((col) => col.name === field?.replaceAll('"', '')));
     const failingTenant = client.allTenantTypes.find((tenant) => tenant.tenantField === missingField);
@@ -369,8 +490,28 @@ async function createVirtualTable(viewInfo, client, tableData, currentTableNames
         return {
             success: false,
             failingTenant,
+            failingTenantErrorType: 'missing',
         };
     }
+    // Check for type mismatches
+    if (tableData) {
+        const typeMismatchedTenant = ownerTenantFields.find((owner) => {
+            const tenant = client.allTenantTypes?.find((t) => t.tenantField === owner);
+            const tableDataField = tableData.fields.find((col) => col.name === owner?.replaceAll('"', ''));
+            return ((tenant?.fieldType === 'string' &&
+                isNumberType(tableDataField?.fieldType ?? '')) ||
+                (tenant?.fieldType === 'number' &&
+                    isStringType(tableDataField?.fieldType ?? '')));
+        });
+        if (typeMismatchedTenant) {
+            const tenant = client.allTenantTypes?.find((t) => t.tenantField === typeMismatchedTenant);
+            return {
+                success: false,
+                failingTenant: tenant,
+                failingTenantErrorType: 'type_mismatch',
+            };
+        }
+    }
     if (!queryAstRaw || queryAstRaw.success === false) {
         return {
             success: false,
@@ -391,6 +532,7 @@ async function createVirtualTable(viewInfo, client, tableData, currentTableNames
     const results = await (0, dataFetcher_1.quillFetch)({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -406,3 +548,28 @@ async function createVirtualTable(viewInfo, client, tableData, currentTableNames
     });
     return { ...results.data, success: true };
 }
+// Helper functions for type checking
+function isNumberType(type) {
+    const numberTypes = [
+        'int',
+        'integer',
+        'bigint',
+        'smallint',
+        'decimal',
+        'numeric',
+        'float',
+        'double',
+        'real',
+    ];
+    return numberTypes.some((t) => type.toLowerCase().includes(t));
+}
+function isStringType(type) {
+    const stringTypes = [
+        'char',
+        'varchar',
+        'text',
+        'string',
+        'character varying',
+    ];
+    return stringTypes.some((t) => type.toLowerCase().includes(t));
+}

package/dist/cjs/assets/ArrowDownHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB,GAAI;;CAAY,4CActC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/assets/XIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,KAAK;;6CAcV,CAAC;AACF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"XIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,KAAK,GAAI;;CAAY,4CAc1B,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/cjs/components/CardSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/components/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAazE"}
+{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/components/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAgBzE"}

package/dist/cjs/components/CardSection.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CardSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const AdminProvider_1 = require("../AdminProvider");
 function CardSection(props) {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            fontFamily: 'Inter; Helvetica',
-            color: '#364153',
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor,
             fontSize: 16,
             fontWeight: '600',
         }, children: props.children }));

package/dist/cjs/components/ClipboardButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/ClipboardButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,QAAA,MAAM,eAAe,qCAIlB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAsHA,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ClipboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/ClipboardButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,QAAA,MAAM,eAAe,GAAI,kCAItB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAsHA,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cjs/components/DashboardSelectPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardSelectPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,KAAK,EACL,wBAAwB,EACxB,mBAAmB,EACnB,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CA8J7B"}
+{"version":3,"file":"DashboardSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardSelectPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,KAAK,EACL,wBAAwB,EACxB,mBAAmB,EACnB,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CAsM7B"}

package/dist/cjs/components/DashboardSelectPopover.js

@@ -9,13 +9,25 @@ const react_1 = require("react");
 const OrgSelect_1 = require("./OrgSelect");
 const MiniButtonPrimitive_1 = __importDefault(require("../primitives/MiniButtonPrimitive"));
 const UiComponents_1 = require("./UiComponents");
+const QuillMultiSelectWithCombo_1 = require("./QuillMultiSelectWithCombo");
+const AdminProvider_1 = require("../AdminProvider");
 function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, setSelectedEditDashboard, onClickNewDashboard, parentRef, isLoading, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const { eventTracking } = (0, AdminProvider_1.useAdmin)();
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
     const filteredDashboards = (0, react_1.useMemo)(() => {
         return dashboards.filter((dashboard) => dashboard?.toLowerCase().includes(searchQuery.toLowerCase()));
     }, [dashboards, searchQuery]);
     const handleItemClick = (selectedDashboard) => {
+        eventTracking?.addBreadcrumb?.({
+            message: 'Set dashboard in DashboardSelectPopover',
+            data: {
+                dashboard: selectedDashboard,
+            },
+            category: 'navigation',
+            level: 'info',
+            timestamp: Date.now(),
+        });
         setDashboard(selectedDashboard);
         setIsOpen(false);
     };
@@ -25,23 +37,47 @@ function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, se
                     marginTop: '0px',
                     marginBottom: '4px',
                     fontWeight: '600',
+                    fontFamily: theme.fontFamily,
                     color: theme.secondaryTextColor,
                 }, children: "Dashboard" }), (0, jsx_runtime_1.jsx)(OrgSelect_1.Popover, { parentRef: parentRef, label: dashboard ?? 'Select dashboard', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
                     boxSizing: 'border-box',
                     fontSize: 14,
                     maxHeight: '50vh',
-                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), (0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => ((0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxRow, { setSelected: dashboard && dashboard !== item
+                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, width: 180, onChange: setSearchQuery }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                height: 9,
+                                width: 230,
+                                borderTop: `1px solid ${theme?.borderColor ?? '#e7e7e7'}`,
+                            } }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => ((0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxRow, { setSelected: dashboard && dashboard !== item
                                         ? () => handleItemClick(item)
                                         : undefined, item: item, isSelected: dashboard === item, hoverActions: (item) => ((0, jsx_runtime_1.jsx)(MiniButtonPrimitive_1.default, { label: "Manage", onClick: () => {
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Opened manage dashboard in DashboardSelectPopover',
+                                                data: {
+                                                    dashboard: item,
+                                                },
+                                                category: 'interaction',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
                                             setSelectedEditDashboard(item);
                                             setIsOpen(false);
                                         }, style: {
                                             marginRight: -8,
                                             marginTop: 'auto',
                                             marginBottom: 'auto',
-                                        } })) }, item))), (0, jsx_runtime_1.jsx)("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: (0, jsx_runtime_1.jsxs)("div", { onClick: onClickNewDashboard, style: {
+                                            fontFamily: theme.fontFamily,
+                                            color: theme.secondaryTextColor,
+                                            backgroundColor: theme.backgroundColor,
+                                        } })) }, item))), (0, jsx_runtime_1.jsx)("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: (0, jsx_runtime_1.jsxs)("div", { onClick: () => {
+                                            onClickNewDashboard();
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Opened create new dashboard in DashboardSelectPopover',
+                                                category: 'navigation',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
+                                        }, style: {
                                             height: 42,
-                                            color: '#384151',
                                             width: 216,
                                             borderRadius: 6,
                                             textAlign: 'left',
@@ -55,15 +91,18 @@ function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, se
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
+                                            fontFamily: theme.fontFamily,
                                         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                     .quill-list-select > div {
-                      background-color: white;
+                      background-color: ${theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
                     }
                     .quill-list-selected > div {
-                      background-color: rgba(56, 65, 81, 0.04);
-                    }
+                      background-color: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     .quill-list-select:hover > div {
-                      background-color: rgba(56, 65, 81, 0.04);
+                      background-color: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }` }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',

package/dist/cjs/components/DatabaseSelector.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { QuillTheme } from '../Admin';
 interface DatabaseSelectorProps {
     label: string;
     imageUrl: string;
@@ -6,7 +7,8 @@ interface DatabaseSelectorProps {
     onDatabaseSelect: (database: string) => void;
     containerStyle?: CSSProperties;
     databaseType: string;
+    theme: QuillTheme;
 }
-export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType, theme, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DatabaseSelector.d.ts.map

package/dist/cjs/components/DatabaseSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,EACd,YAAiB,GAClB,EAAE,qBAAqB,2CA6CvB"}
+{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,EACd,YAAiB,EACjB,KAAK,GACN,EAAE,qBAAqB,2CA8CvB"}

package/dist/cjs/components/DatabaseSelector.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = DatabaseSelector;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', }) {
+function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', theme, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             ...containerStyle,
             height: 128,
@@ -27,7 +27,8 @@ function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerS
                 } }), (0, jsx_runtime_1.jsx)("h1", { style: {
                     fontSize: 14,
                     fontWeight: '500',
-                    color: '#212121',
+                    color: theme?.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
                     marginTop: 10,
                 }, children: label })] }));
 }

package/dist/cjs/components/DateRangePicker/SingleDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAiB,GAClB,EAAE,mBAAmB,2CA+VrB"}
+{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAiB,GAClB,EAAE,mBAAmB,2CAqXrB"}