@quillsql/admin 1.6.0 → 1.6.2

package/dist/cjs/modals/NewDashboardModal.d.ts

@@ -1,16 +1,14 @@
-export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
+import { ButtonComponentProps } from '@quillsql/react';
+import { SelectComponentProps } from '../components/UiComponents';
+export declare function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, }: {
     isOpen: boolean;
-    client: any;
     setIsOpen: any;
-    onSave: (name: string) => void;
-    filters: any;
-    dateFilter: any;
-    openEditOrderModal: any;
+    onSave: (name: string, owner: string) => void;
     ModalComponent: any;
     TextInputComponent: any;
-    ButtonComponent: any;
+    ButtonComponent: (props: ButtonComponentProps) => JSX.Element;
     HeaderComponent: any;
-    SelectComponent: any;
+    SelectComponent: (props: SelectComponentProps) => JSX.Element;
     dashNames: any;
     SecondaryButtonComponent: any;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/modals/NewDashboardModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/NewDashboardModal.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CA+hBA"}
+{"version":3,"file":"NewDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/NewDashboardModal.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAiB,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAYlE,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,GACzB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CAqoBA"}

package/dist/cjs/modals/NewDashboardModal.js

@@ -3,74 +3,78 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewDashboardModal = void 0;
+exports.NewDashboardModal = NewDashboardModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-nocheck
 const react_1 = require("react");
 const InputLabel_1 = __importDefault(require("../components/InputLabel"));
 const CardSection_1 = __importDefault(require("../components/CardSection"));
 const AdminProvider_1 = require("../AdminProvider");
 const constants_1 = require("../utils/constants");
-const Admin_1 = require("../Admin");
-const TogglePrimitive_1 = __importDefault(require("../primitives/TogglePrimitive"));
+// import TogglePrimitive from '../primitives/TogglePrimitive';
 const delay_1 = require("../utils/delay");
 const SegmentedControl_1 = require("../components/SegmentedControl");
-function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }) {
-    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
+const columnProcessing_1 = require("../utils/columnProcessing");
+const react_2 = require("@quillsql/react");
+const dateRangePickerUtils_1 = require("../components/DateRangePicker/dateRangePickerUtils");
+const normalizeFieldName = (fieldName) => {
+    return (fieldName
+        ?.split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ') ?? '');
+};
+function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, }) {
+    const { state } = (0, AdminProvider_1.useAdmin)();
+    const { createDashboard } = (0, react_2.useDashboards)();
     const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)('');
-    const [saveButtonMessage, setSaveButtonMessage] = (0, react_1.useState)('Save changes');
     const [newFilters, setNewFilters] = (0, react_1.useState)([]);
-    const [isDateComparison, setIsDateComparison] = (0, react_1.useState)(false);
-    const [initialRange, setInitialRange] = (0, react_1.useState)(constants_1.defaultDateRange);
-    const [showDateFilter, setShowDateFilter] = (0, react_1.useState)(true);
-    const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
-    const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
-    const [field, setField] = (0, react_1.useState)('');
-    (0, react_1.useEffect)(() => {
-        if (state.tables?.length) {
-            setSelectedTable(state.tables[0]);
-            setField(state.tables[0].columns.map((elem) => elem.name)[0]);
-        }
-    }, [state.tables]);
+    // const [isDateComparison, setIsDateComparison] = useState<boolean>(false);
+    const [initialRange, setInitialRange] = (0, react_1.useState)({ label: 'Last 30 days', value: 'LAST_30_DAYS' });
+    const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(undefined);
+    const [tenantKey, setTenantKey] = (0, react_1.useState)(state.client?.ownerTenantFields?.[0]);
+    const ownerTenants = (0, react_1.useMemo)(() => state.client?.allTenantTypes?.filter((tenant) => state.client?.ownerTenantFields?.includes(tenant.tenantField)), [state.client?.allTenantTypes, state.client?.ownerTenantFields]);
+    const filteredTables = (0, react_1.useMemo)(() => {
+        return state.tables.filter((table) => {
+            return (tenantKey === constants_1.SINGLE_TENANT ||
+                table.ownerTenantFields?.length === 0 ||
+                table.ownerTenantFields?.includes(tenantKey ?? ''));
+        });
+    }, [state.tables, tenantKey]);
+    const saveButtonDisabled = (0, react_1.useMemo)(() => {
+        return (newFilters.some((filter) => !filter.label || !filter.table || !filter.field) ||
+            newDateFilter?.label === '' ||
+            !tenantKey ||
+            !selectedDashboardName);
+    }, [newFilters, newDateFilter, selectedDashboardName]);
     const handleAddFilter = async () => {
-        setNewFilters([...newFilters, { label: '', field }]);
+        setNewFilters([...newFilters, {}]);
     };
     const handleSubmitDashboardChanges = async () => {
-        // Stop the next code from running for a second
-        // This is to show the saving message
-        setSaveButtonMessage('Saving...');
-        await (0, delay_1.delay)(200);
         if (!selectedDashboardName ||
-            !newDateFilter ||
             newFilters.some((filter) => !filter.label) ||
-            (newDateFilter &&
-                Object.keys(newDateFilter).length &&
-                !newDateFilter.label)) {
+            (Object.keys(newDateFilter ?? {}).length && !newDateFilter?.label)) {
             alert('Empty fields');
-            setSaveButtonMessage('Save changes');
             return;
         }
         if (newFilters.filter((elem) => !elem.field).length) {
-            alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0].label}`);
-            setSaveButtonMessage('Save changes');
+            alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0]?.label}`);
             return;
         }
         const updatedFilters = newFilters.map((filter) => {
-            const filterType = (0, Admin_1.getPostgresBasicType)(selectedTable.columns.find((col) => col.name === filter.field));
             return {
-                table: selectedTable.name,
+                table: filter.table,
                 field: filter.field,
                 labelField: filter.field,
                 label: filter.label,
-                filterType,
+                filterType: 'string',
                 stringFilterType: filter.stringFilterType,
+                dashboardName: selectedDashboardName,
+                options: [],
             };
         });
         if (dashNames &&
             dashNames.length > 0 &&
-            dashNames.some((dashName) => dashName.name === selectedDashboardName)) {
+            dashNames.some((dash) => dash.name === selectedDashboardName)) {
             alert('Dashboard name already taken!');
-            setSaveButtonMessage('Save changes');
             return;
         }
         const fieldsSet = new Set();
@@ -84,76 +88,56 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
             }
         });
         if (hasDuplicateField ||
-            (Object.keys(newDateFilter).length > 0 &&
+            (Object.keys(newDateFilter ?? {}).length > 0 &&
                 updatedFilters.some((filter) => filter.filterType === 'date'))) {
             alert('Maximum of one filter per field');
-            setSaveButtonMessage('Save changes');
             return;
         }
         let allValid = true;
         updatedFilters.forEach((filter) => {
-            if (filter.filterType !== 'string' && filter.filterType !== 'date') {
+            if (!filter.table || !filter.field || !filter.label) {
                 allValid = false;
-                console.error(`Invalid filterType found: ${filter.filterType}`);
             }
         });
         if (!allValid) {
-            alert('We only support string and filters.');
-            setSaveButtonMessage('Save changes');
+            alert('Please fill out all filter fields.');
             return;
         }
-        const url = `${constants_1.QUILL_SERVER}/dashfilter/${client._id}/`;
-        const body = {
-            newDashboardName: selectedDashboardName,
-            filters: updatedFilters,
-            dateFilter: showDateFilter && {
-                ...newDateFilter,
-                comparison: isDateComparison,
-                primaryRange: initialRange,
-            },
-            name: selectedDashboardName,
-        };
-        const headers = {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer `,
-        };
-        try {
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: headers,
-                body: JSON.stringify(body),
-            });
-            setSaveButtonMessage('Saved ✅');
-            await (0, delay_1.delay)(200);
-            setIsOpen(false);
-            setSelectedDashboardName('');
-            setNewFilters([]);
-            setIsDateComparison(false);
-            onSave(body);
-            setSaveButtonMessage('Save changes');
-        }
-        catch (e) {
-            console.log('error');
+        if (!tenantKey) {
+            alert('Your dashboard must have an owner');
+            return;
         }
+        await createDashboard({
+            name: selectedDashboardName.trim(),
+            filters: updatedFilters,
+            dateFilter: newDateFilter
+                ? {
+                    ...newDateFilter,
+                    // comparison: isDateComparison,
+                    comparison: false,
+                    primaryRange: initialRange,
+                }
+                : undefined,
+            dashboardOwners: [tenantKey],
+        });
+        onSave(selectedDashboardName, tenantKey);
+        await (0, delay_1.delay)(200);
+        setIsOpen(false);
+        setSelectedDashboardName('');
+        setNewFilters([]);
+        // setIsDateComparison(false);
     };
-    const handleDeleteFilter = (filter) => {
-        setNewFilters(newFilters.filter((f) => f !== filter));
-    };
-    const handleDeleteDateFilter = async () => {
-        setShowDateFilter(false);
-        setNewDateFilter({});
-    };
-    const handleAddDateFilter = async () => {
-        setShowDateFilter(true);
-    };
-    const handleDeleteDashboard = () => {
-        confirm("Are you sure you'd like to delete this dashboard?");
+    const handleDeleteFilter = (index) => {
+        setNewFilters(newFilters.filter((_, i) => i !== index));
     };
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => {
+    // const handleDeleteDateFilter = async () => {
+    //   setNewDateFilter(undefined);
+    // };
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => {
             setIsOpen(false);
             setSelectedDashboardName('');
             setNewFilters([]);
-            setIsDateComparison(false);
+            // setIsDateComparison(false);
         }, style: {
             minWidth: '814px',
             overflow: 'visible',
@@ -162,19 +146,32 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                 gap: 16,
                 flexDirection: 'column',
                 width: '100%',
-            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "New dashboard" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "New dashboard" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) })] }), (ownerTenants?.length ?? 0) > 1 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { tooltip: "Which tenant will filter the data coming into this dashboard? You will only be able to use virtual tables owned by this tenant (or owned by no tenants). You will not be able to change this without creating a new dashboard", children: "Dashboard Owner" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: tenantKey ?? '', options: ownerTenants?.map((tenant) => ({
+                                    label: tenant.name,
+                                    value: tenant.tenantField,
+                                })) ?? [], onChange: (e) => {
+                                    setTenantKey(e);
+                                    // delete any filters that are not in the new tenant's tables
+                                    const newFilteredTables = state.tables.filter((table) => {
+                                        return (e === constants_1.SINGLE_TENANT ||
+                                            table.ownerTenantFields?.length === 0 ||
+                                            table.ownerTenantFields?.includes(e ?? ''));
+                                    });
+                                    const updatedFilters = newFilters.filter((filter) => newFilteredTables.find((table) => table.name === filter.table));
+                                    setNewFilters(updatedFilters);
+                                }, hideEmptyOption: true }) })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 gap: '10px',
-                            }, children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Date Filter" }), showDateFilter && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Date Filter" }), newDateFilter && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
-                                            gap: '10px',
+                                            gap: '20px',
                                         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Label" }), (0, jsx_runtime_1.jsx)("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             alignItems: 'center',
-                                                        }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: newDateFilter?.label, onChange: (e) => {
+                                                        }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { width: 230, value: newDateFilter?.label ?? '', onChange: (e) => {
                                                                 setNewDateFilter({
                                                                     ...newDateFilter,
                                                                     label: e.target.value,
@@ -182,60 +179,53 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                                                             } }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'row',
-                                                    gap: '10px',
+                                                    gap: '20px',
                                                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Initial Range" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: initialRange.label, onChange: (e) => {
-                                                                setInitialRange(constants_1.InitialDateRangeOptions.find((table) => table.label === e) ?? initialRange);
-                                                            }, options: constants_1.InitialDateRangeOptions.map((table) => {
+                                                                setInitialRange(dateRangePickerUtils_1.defaultOptionsV2.find((table) => table.label === e) ?? initialRange);
+                                                            }, options: dateRangePickerUtils_1.defaultOptionsV2.map((table) => {
                                                                 return { label: table.label, value: table.label };
-                                                            }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                            }) })] }) }), (0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                                    setNewDateFilter(undefined);
+                                                }, style: {
+                                                    height: 38,
+                                                    alignItems: 'center',
+                                                    justifyContent: 'flex-end',
                                                     display: 'flex',
-                                                    flexDirection: 'row',
+                                                    cursor: 'pointer',
                                                     width: '100%',
-                                                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        width: '100%',
-                                                    }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Date Comparison" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        justifyContent: 'flex-start',
-                                                                        alignItems: 'center',
-                                                                        width: '100%',
-                                                                        height: '100%',
-                                                                        minWidth: 200,
-                                                                        maxWidth: 200,
-                                                                        width: 200,
-                                                                    }, children: (0, jsx_runtime_1.jsx)(TogglePrimitive_1.default, { value: isDateComparison, onClick: () => {
-                                                                            setIsDateComparison((isDateComparison) => !isDateComparison);
-                                                                        } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'column',
-                                                                        justifyContent: 'center',
-                                                                        width: '100%',
-                                                                    }, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
-                                                                            height: 38,
-                                                                            width: 42,
-                                                                            alignItems: 'center',
-                                                                            justifyContent: 'flex-end',
-                                                                            display: 'flex',
-                                                                            cursor: 'pointer',
-                                                                            width: '100%',
-                                                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) })] })] }) })] }) })), !showDateFilter && ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    marginTop: 'auto',
+                                                }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })), !newDateFilter && ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => setNewDateFilter({
+                                            label: 'Date',
+                                            defaultPresetRanges: [
+                                                { label: 'This week' },
+                                                { label: 'This month' },
+                                                { label: 'This year' },
+                                                { label: 'Last 7 days' },
+                                                { label: 'Last 30 days' },
+                                                { label: 'Last 90 days' },
+                                                { label: 'Last 6 months' },
+                                            ],
+                                        }), label: "Add date filter +" }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 justifyContent: 'space-between',
                                 marginTop: 20,
-                            }, children: (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Filters" }) }), newFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '6px' }, children: newFilters.map((filter, index) => {
+                            }, children: (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Filters" }) }), newFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '8px',
+                                marginTop: 6,
+                            }, children: newFilters.map((filter, index) => {
                                 return ((0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
-                                        gap: '10px',
+                                        gap: '20px',
                                     }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, width: 230, onChange: (e) => {
                                                         const updatedFilters = newFilters.map((otherFilter, i) => index === i
                                                             ? { ...otherFilter, label: e.target.value }
                                                             : otherFilter);
@@ -244,27 +234,39 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable.name : '', onChange: (e) => setSelectedTable(state.tables.find((table) => table.name === e)), options: state.tables.map((table) => {
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: filter.table ?? '', onChange: (e) => setNewFilters(newFilters.map((otherFilter, i) => index === i
+                                                        ? { ...otherFilter, table: e }
+                                                        : otherFilter)), options: filteredTables.map((table) => {
                                                         return { label: table.name, value: table.name };
                                                     }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: selectedTable?.columns
-                                                        .filter((column) => {
-                                                        return column.fieldType === 'varchar';
-                                                    })
-                                                        .map((column) => {
-                                                        return {
-                                                            label: column.name,
-                                                            value: column.name,
-                                                        };
-                                                    }), onChange: (e) => {
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: filter?.field ?? '', options: filter?.table
+                                                        ? filteredTables
+                                                            .find((t) => t.name === filter.table)
+                                                            .columns.filter((column) => (0, columnProcessing_1.convertFieldTypeToJSType)(column.fieldType) === 'string')
+                                                            .map((column) => {
+                                                            return {
+                                                                label: column.name,
+                                                                value: column.name,
+                                                            };
+                                                        })
+                                                        : [], onChange: (e) => {
+                                                        // Capitalize the label
                                                         const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                            ? { ...otherFilter, field: e }
+                                                            ? {
+                                                                ...otherFilter,
+                                                                field: e,
+                                                                label: !filter.label ||
+                                                                    filter.label ===
+                                                                        normalizeFieldName(filter.field)
+                                                                    ? normalizeFieldName(e)
+                                                                    : filter.label,
+                                                            }
                                                             : otherFilter);
                                                         setNewFilters(updatedFilters);
-                                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    }, disabled: !filter?.table })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 width: '100%',
@@ -287,7 +289,7 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                                                                         ? { ...otherFilter, stringFilterType: e }
                                                                         : otherFilter);
                                                                     setNewFilters(updatedFilters);
-                                                                } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
+                                                                } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(index), style: {
                                                                     height: 38,
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
@@ -295,6 +297,5 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                                                                     cursor: 'pointer',
                                                                     width: '100%',
                                                                 }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }));
-                            }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 18 } }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: saveButtonMessage }) })] }) }));
+                            }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 18 } }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: 'Create', disabled: saveButtonDisabled }) })] }) }));
 }
-exports.NewDashboardModal = NewDashboardModal;

package/dist/cjs/modals/PromoteDashboardModal.d.ts

@@ -0,0 +1,16 @@
+import { ModalComponentProps, SelectComponentProps } from '../components/UiComponents';
+import { ButtonComponentProps } from '@quillsql/react';
+export declare function PromoteDashboardModal({ isOpen, setIsOpen, autoPromoteVirtualTables, setAutoPromoteVirtualTables, handlePromote, ModalComponent, ButtonComponent, SelectComponent, CheckboxComponent, HeaderComponent, ErrorComponent, }: {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    autoPromoteVirtualTables: boolean;
+    setAutoPromoteVirtualTables: (autoPromoteVirtualTables: boolean) => void;
+    handlePromote: (selectedToClient: any) => void;
+    ModalComponent: React.FC<ModalComponentProps>;
+    ButtonComponent: (props: ButtonComponentProps) => JSX.Element;
+    SelectComponent: (props: SelectComponentProps) => JSX.Element;
+    CheckboxComponent: any;
+    HeaderComponent: any;
+    ErrorComponent: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PromoteDashboardModal.d.ts.map

package/dist/cjs/modals/PromoteDashboardModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoteDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteDashboardModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,SAAS,EACT,wBAAwB,EACxB,2BAA2B,EAC3B,aAAa,EACb,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wBAAwB,EAAE,OAAO,CAAC;IAClC,2BAA2B,EAAE,CAAC,wBAAwB,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,aAAa,EAAE,CAAC,gBAAgB,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,iBAAiB,EAAE,GAAG,CAAC;IACvB,eAAe,EAAE,GAAG,CAAC;IACrB,cAAc,EAAE,GAAG,CAAC;CACrB,2CAwGA"}

package/dist/cjs/modals/PromoteDashboardModal.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromoteDashboardModal = PromoteDashboardModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AdminProvider_1 = require("../AdminProvider");
+function PromoteDashboardModal({ isOpen, setIsOpen, autoPromoteVirtualTables, setAutoPromoteVirtualTables, handlePromote, ModalComponent, ButtonComponent, SelectComponent, CheckboxComponent, HeaderComponent, ErrorComponent, }) {
+    const { state } = (0, AdminProvider_1.useAdmin)();
+    const [validationError, setValidationError] = (0, react_1.useState)('');
+    const [selectedToClient, setSelectedToClient] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
+    }, [state.clients]);
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => {
+            setValidationError('');
+            setIsOpen(false);
+            setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
+        }, style: {
+            minWidth: '400px',
+            overflow: 'visible',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                gap: 16,
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+                maxHeight: '100%',
+            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Promote Dashboard" }), (0, jsx_runtime_1.jsx)("div", { id: "promote-dashboard-description", children: "Copy this dashboard to another environment." }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 4,
+                    }, children: (0, jsx_runtime_1.jsx)(CheckboxComponent, { label: "Auto-promote virtual tables for reports", isChecked: autoPromoteVirtualTables, onChange: () => {
+                            setAutoPromoteVirtualTables(!autoPromoteVirtualTables);
+                        }, containerStyle: {
+                            gap: 2,
+                        }, labelStyle: {
+                            color: '#666666',
+                            fontSize: '13px',
+                            fontWeight: 400,
+                        } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 12,
+                    }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { options: state.clients
+                                .filter((c) => c.name !== state.client.name)
+                                .map((client) => {
+                                return { label: client.name, value: client };
+                            }), onChange: setSelectedToClient, value: selectedToClient, theme: state.theme }), (0, jsx_runtime_1.jsx)(ButtonComponent, { disabled: !selectedToClient, onClick: () => handlePromote(selectedToClient), label: "Promote" })] }), validationError.length !== 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        width: '100%',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)(ErrorComponent, { errorMessage: validationError }) }))] }) }));
+}

package/dist/cjs/modals/PromoteReportModal.d.ts

@@ -0,0 +1,15 @@
+interface PromoteReportProps {
+    ModalComponent: React.ComponentType<any>;
+    HeaderComponent: React.ComponentType<any>;
+    ButtonComponent: React.ComponentType<any>;
+    SelectComponent: React.ComponentType<any>;
+    CheckboxComponent: React.ComponentType<any>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    reportId: string;
+    currentClientId: string;
+    currentDashboardName: string;
+}
+export default function PromoteReportModal({ ModalComponent, HeaderComponent, ButtonComponent, SelectComponent, CheckboxComponent, isOpen, setIsOpen, reportId, currentClientId, currentDashboardName, }: PromoteReportProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PromoteReportModal.d.ts.map

package/dist/cjs/modals/PromoteReportModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoteReportModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteReportModal.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,oBAAoB,GACrB,EAAE,kBAAkB,2CA4LpB"}