@quillsql/admin 1.5.2 → 1.6.1

package/dist/cjs/forms/client_onboard/CreateSqlViews.js

@@ -11,6 +11,9 @@ const ConnectionClient_1 = require("../../api/ConnectionClient");
 const SqlViewTile_1 = __importDefault(require("../../components/SqlViewTile"));
 const SqlTextEditor_1 = __importDefault(require("../../components/SqlTextEditor"));
 const react_2 = require("@quillsql/react");
+const UiComponents_1 = require("../../components/UiComponents");
+const SQLViewManager_1 = require("../../public_components/SQLViewManager");
+const columnProcessing_1 = require("../../utils/columnProcessing");
 function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, clientId, state, }) {
     const [selectedTable, setSelectedTable] = (0, react_1.useState)(undefined);
     const [queryInfo, setQueryInfo] = (0, react_1.useState)({
@@ -23,9 +26,11 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
     const [tableData, setTableData] = (0, react_1.useState)(undefined);
     const [client, setClient] = (0, react_1.useState)(undefined);
     const [sqlTables, setSqlTables] = (0, react_1.useState)([]);
-    const [askAIButton, setAskAIButton] = (0, react_1.useState)('Ask AI');
-    const [runQueryButtonLabel, setRunQueryButtonLabel] = (0, react_1.useState)('Run query');
+    const [askAIButtonLoading, setAskAIButtonLoading] = (0, react_1.useState)(false);
+    const [runQueryButtonLoading, setRunQueryButtonLoading] = (0, react_1.useState)(false);
     const [showFKModal, setShowFKModal] = (0, react_1.useState)(false);
+    const [tableSearchQuery, setTableSearchQuery] = (0, react_1.useState)('');
+    const [displayedTableData, setDisplayedTableData] = (0, react_1.useState)(columnsByTable);
     const addSqlView = async (override) => {
         const results = await (0, ConnectionClient_1.createSQLView)(environmentDetails, allSchemaInfo, columnsByTable, queryInfo, client, domainName, tableData, sqlTables.map((e) => {
             return e.name;
@@ -43,6 +48,17 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
             setSqlQueryInfo({ msg: results.message, status: true });
         }
     };
+    const handleClickSchemaItem = async (event) => {
+        const name = event.target.textContent;
+        if (!name) {
+            return;
+        }
+        const newQuery = `SELECT * FROM ${(0, columnProcessing_1.processColumnReference)(name, environmentDetails?.type)};`;
+        if (!queryInfo.query || queryInfo.query.length === 0) {
+            setQueryInfo({ name: queryInfo.name, query: newQuery });
+        }
+        await navigator.clipboard.writeText(newQuery);
+    };
     (0, react_1.useEffect)(() => {
         window.scrollTo({
             behavior: 'smooth',
@@ -53,6 +69,7 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
             ...containerStyle,
             display: 'flex',
             flexDirection: 'column',
+            minWidth: 900,
         }, id: "create-sql-view", children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     padding: 20,
                     paddingBottom: 12,
@@ -64,10 +81,28 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
                     flexDirection: 'row',
                     borderTop: 'solid 1px #e7e7e7',
                     height: 'calc(100vh - 143px)',
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { id: "form-editor-table", style: {
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    paddingLeft: '20px',
+                                    paddingRight: '30px',
+                                    height: 70,
+                                    minHeight: 70,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }, children: (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { placeholder: "Search...", 
+                                    // @ts-ignore
+                                    onChange: (e) => {
+                                        setTableSearchQuery(e.target.value);
+                                        setDisplayedTableData(columnsByTable.filter((table) => table.tableName
+                                            .toLowerCase()
+                                            .includes(e.target.value.toLowerCase().trim())));
+                                    }, value: tableSearchQuery, width: "180px" }) }), (0, jsx_runtime_1.jsx)(react_2.SchemaListComponent, { schema: displayedTableData, theme: state.theme, width: '300px', loading: false, LoadingComponent: UiComponents_1.LoadingSpinner, onClick: handleClickSchemaItem })] }), (0, jsx_runtime_1.jsxs)("div", { id: "form-editor-table", style: {
                             display: 'flex',
                             flexDirection: 'column',
-                            width: 'calc(100% - 300px)',
+                            width: 'calc(100% - 600px)',
+                            minWidth: 300,
                         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
@@ -79,16 +114,16 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
                                     height: 70,
                                 }, children: [(0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
                                             setAIPrompt(e.target.value);
-                                        }, placeholder: 'Describe a query...', value: aiPrompt }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: askAIButton, onClick: async () => {
-                                            setAskAIButton('Loading...');
+                                        }, placeholder: 'Describe a query...', value: aiPrompt }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: async () => {
+                                            setAskAIButtonLoading(true);
                                             const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(aiPrompt, clientId, allSchemaInfo?.selectedFields.schema
                                                 ? [allSchemaInfo?.selectedFields.schema]
                                                 : undefined);
                                             setQueryInfo({ name: queryInfo.name, query: results });
-                                            setAskAIButton('Ask AI');
+                                            setAskAIButtonLoading(false);
                                         }, style: { width: '90px' } })] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: queryInfo.query, setValue: (e) => {
                                     setQueryInfo({ name: queryInfo.name, query: e });
-                                }, containerStyle: { paddingLeft: 16, paddingRight: 16 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, setEditorMounted: () => { }, containerStyle: { paddingLeft: 16, paddingRight: 16 }, schema: displayedTableData, databaseType: environmentDetails?.type, previousProvider: null }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     justifyContent: 'space-between',
@@ -96,8 +131,8 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
                                     paddingLeft: 16,
                                     paddingRight: 16,
                                     height: 70,
-                                }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
-                                            setRunQueryButtonLabel('Querying...');
+                                }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Run query', onClick: async () => {
+                                            setRunQueryButtonLoading(true);
                                             const getSqlResults = await (0, ConnectionClient_1.getSqlViewData)(clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint);
                                             if (!getSqlResults.success) {
                                                 setErrorInfo({ status: true, msg: getSqlResults.error });
@@ -106,7 +141,7 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
                                                 setErrorInfo({ status: false, msg: '' });
                                                 setTableData(getSqlResults);
                                             }
-                                            setRunQueryButtonLabel('Run query');
+                                            setRunQueryButtonLoading(false);
                                         } }), errorInfo.status ? ((0, jsx_runtime_1.jsx)("h2", { style: {
                                             ...header2Style,
                                             color: 'red',
@@ -119,7 +154,7 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
                                 }, children: [(0, jsx_runtime_1.jsx)(react_2.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
                                             height: 'calc(100vh - 589px)',
                                             width: '100%',
-                                        }, showDownloadCSVButton: true }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, hideCSVDownloadButton: true, isLoading: runQueryButtonLoading }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                             width: '100%',
                                             display: 'flex',
                                             justifyContent: 'space-between',
@@ -130,7 +165,14 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
                                                     color: 'red',
                                                     paddingTop: '12px',
                                                     // textTransform: 'capitalize',
-                                                }, children: sqlQueryError.msg })) : ((0, jsx_runtime_1.jsx)("div", {})), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Add SQL View", onClick: () => addSqlView(false) })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, children: sqlQueryError.msg })) : ((0, jsx_runtime_1.jsx)("div", {})), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Add SQL View", onClick: () => {
+                                                    const duplicateColumns2 = (0, SQLViewManager_1.getDuplicateColumns)(tableData?.fields);
+                                                    if (duplicateColumns2.length > 0) {
+                                                        alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns2.join('\n')}`);
+                                                        return;
+                                                    }
+                                                    addSqlView(false);
+                                                } })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             // width: '30%',
                             background: '#fafafa',
                             borderLeft: 'solid 1px #e7e7e7',
@@ -182,7 +224,7 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
                                     paddingRight: 12,
                                     background: 'white',
                                     borderTop: 'solid 1px #e7e7e7',
-                                }, children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Go to dashboard", onClick: () => {
+                                }, children: (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: "Looks good", onClick: () => {
                                         completeOnboarding(client);
                                     }, style: { width: 276 } }) })) : null] })] }), (0, jsx_runtime_1.jsx)(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addSqlView, foreignKey: allSchemaInfo?.selectedFields.foreignKey, tableName: allSchemaInfo?.selectedFields.table })] }));
 }
@@ -195,7 +237,7 @@ function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }
                         fontWeight: 600,
                         color: '#212121',
                         paddingBottom: 14,
-                    }, children: `Organization Foreign Key "${foreignKey}" Not Found` }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [`Your organization table `, (0, jsx_runtime_1.jsx)("strong", { children: `"${tableName}"` }), ` foreign key  `, (0, jsx_runtime_1.jsx)("strong", { children: `"${foreignKey}"` }), " is not present in the current query. If this query will never have organization specific data on it (this is rare), override this message.`"] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, children: `Organization Foreign Key "${foreignKey?.replaceAll('"', '')}" Not Found` }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [`Your organization table `, (0, jsx_runtime_1.jsx)("strong", { children: `"${tableName?.replaceAll('"', '')}"` }), ` foreign key  `, (0, jsx_runtime_1.jsx)("strong", { children: `"${foreignKey?.replaceAll('"', '')}"` }), " is not present in the current query. If this query will never have organization specific data on it (this is rare), override this message.`"] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: '12px',

package/dist/cjs/forms/sql_views/CreateEditSqlView.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" />
-import { ButtonComponentProps, TextInputComponentProps, HeaderProps } from '@quillsql/react';
+import { ButtonComponentProps } from '@quillsql/react';
+import { ReactNode } from 'react';
+import { IDisposable } from 'monaco-editor';
+import { TextInputComponentProps } from '../../components/UiComponents';
 import { ColumnsByTable } from '../../utils/table';
 interface CreateEditSqlViewProps {
     containerStyle: React.CSSProperties;
@@ -12,12 +14,16 @@ interface CreateEditSqlViewProps {
     SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
     TextInput?: (props: TextInputComponentProps) => JSX.Element;
     LoadingComponent?: () => JSX.Element;
-    Header?: (props: HeaderProps) => JSX.Element;
+    Header?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
     closeEditView: () => void;
-    addEditView: (request: string, query: string, name?: string, id?: string) => void;
+    addEditView: (request: string, query: string, name?: string, id?: string, columns?: any[]) => void;
+    setProvider: (provider: IDisposable | null) => void;
+    provider: IDisposable | null;
     allTableData: ColumnsByTable[];
     schemaIsLoading: boolean;
 }
-export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, LoadingComponent, Button, TextInput, Header, allTableData, schemaIsLoading, }: CreateEditSqlViewProps): JSX.Element;
+export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, setProvider, provider, SecondaryButtonComponent, LoadingComponent, Button, TextInput, Header, allTableData, schemaIsLoading, }: CreateEditSqlViewProps): JSX.Element;
 export {};
 //# sourceMappingURL=CreateEditSqlView.d.ts.map

package/dist/cjs/forms/sql_views/CreateEditSqlView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateEditSqlView.d.ts","sourceRoot":"","sources":["../../../../src/forms/sql_views/CreateEditSqlView.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,oBAAoB,EAEpB,uBAAuB,EACvB,WAAW,EAGZ,MAAM,iBAAiB,CAAC;AAwBzB,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAI3D,UAAU,sBAAsB;IAC9B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,CACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,KACR,IAAI,CAAC;IACV,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACX,wBAAwB,EACxB,gBAA2C,EAC3C,MAAuB,EACvB,SAA6B,EAC7B,MAAuB,EACvB,YAAY,EACZ,eAAe,GAChB,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAiTtC"}
+{"version":3,"file":"CreateEditSqlView.d.ts","sourceRoot":"","sources":["../../../../src/forms/sql_views/CreateEditSqlView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAKrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAQ5C,OAAO,EAML,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQ3D,UAAU,sBAAsB;IAC9B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,CACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,GAAG,EAAE,KACZ,IAAI,CAAC;IACV,WAAW,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,wBAAwB,EACxB,gBAA2C,EAC3C,MAAuB,EACvB,SAA6B,EAC7B,MAAuB,EACvB,YAAY,EACZ,eAAe,GAChB,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAmYtC"}

package/dist/cjs/forms/sql_views/CreateEditSqlView.js

@@ -12,18 +12,23 @@ const SqlTextEditor_1 = __importDefault(require("../../components/SqlTextEditor"
 const UiComponents_1 = require("../../components/UiComponents");
 const CreateSqlViews_1 = require("../client_onboard/CreateSqlViews");
 const DynamicBanner_1 = __importDefault(require("../../components/DynamicBanner"));
-function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, LoadingComponent = () => (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}), Button = UiComponents_1.MemoizedButton, TextInput = UiComponents_1.MemoizedTextInput, Header = UiComponents_1.MemoizedHeader, allTableData, schemaIsLoading, }) {
+const SQLViewManager_1 = require("../../public_components/SQLViewManager");
+const columnProcessing_1 = require("../../utils/columnProcessing");
+const astProcessing_1 = require("../../utils/astProcessing");
+const constants_1 = require("../../utils/constants");
+function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, setProvider, provider, SecondaryButtonComponent, LoadingComponent = () => (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}), Button = UiComponents_1.MemoizedButton, TextInput = UiComponents_1.MemoizedTextInput, Header = UiComponents_1.MemoizedHeader, allTableData, schemaIsLoading, }) {
     const [name, setName] = (0, react_2.useState)(initialSqlView?.name || '');
     const [editViewQuery, setEditViewQuery] = (0, react_2.useState)(initialSqlView?.query || '');
     const [ranViewQuery, setRanViewQuery] = (0, react_2.useState)(initialSqlView?.query || '');
-    const [askAIButton, setAskAIButton] = (0, react_2.useState)('Ask AI');
+    const [askAIButtonLoading, setAskAIButtonLoading] = (0, react_2.useState)(false);
+    const [runQueryButtonLoading, setRunQueryButtonLoading] = (0, react_2.useState)(false);
     const [aiPrompt, setAIPrompt] = (0, react_2.useState)('');
-    const [runQueryButtonLabel, setRunQueryButtonLabel] = (0, react_2.useState)('Run query');
     const [viewAddable, setViewAddable] = (0, react_2.useState)(false);
     const [showFKModal, setShowFKModal] = (0, react_2.useState)(false);
     const [overrideFKCheck, setOverrideFKCheck] = (0, react_2.useState)(false);
     const [isLoading, setIsLoading] = (0, react_2.useState)(false);
     const [tableSearchQuery, setTableSearchQuery] = (0, react_2.useState)('');
+    const [editorMounted, setEditorMounted] = (0, react_2.useState)(false);
     const [displayedTableData, setDisplayedTableData] = (0, react_2.useState)(allTableData);
     const [errorInfo, setErrorInfo] = (0, react_2.useState)({ show: false, message: '' });
     const [tableData, setTableData] = (0, react_2.useState)(undefined);
@@ -35,7 +40,7 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
             setShowFKModal(true);
             return;
         }
-        addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined);
+        addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined, tableData?.fields || []);
     };
     (0, react_2.useEffect)(() => {
         setDisplayedTableData(allTableData);
@@ -43,19 +48,30 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
     const handleRunSqlPrompt = async () => {
         setErrorInfo({ show: false, message: '' });
         setViewAddable(false);
-        setAskAIButton('Loading...');
+        setAskAIButtonLoading(true);
         const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(aiPrompt, state.client._id, state.client.schemaNames);
         setOverrideFKCheck(false);
         setEditViewQuery(results);
-        setAskAIButton('Ask AI');
+        setAskAIButtonLoading(false);
     };
-    const handleRunQuery = async () => {
-        const query = editViewQuery;
+    const handleClickSchemaItem = async (event) => {
+        const name = event.target.textContent;
+        if (!name) {
+            return;
+        }
+        const newQuery = `SELECT * FROM ${(0, columnProcessing_1.processColumnReference)(name, state.client.databaseType)};`;
+        if (!editViewQuery || editViewQuery.length === 0) {
+            setEditViewQuery(newQuery);
+        }
+        await navigator.clipboard.writeText(newQuery);
+    };
+    const handleRunQuery = async (overrideQuery) => {
+        const query = overrideQuery ? overrideQuery : editViewQuery;
         // If this query has a limit at the end alert the user
-        if (query.toLowerCase().includes(' limit ')) {
+        if (/limit\s+\d+\s*;?\s*$/i.test(query)) {
             setErrorInfo({
                 show: true,
-                message: 'Error: Please remove the limit on you query.',
+                message: 'Error: Please remove the limit at the end of your query.',
             });
             return;
         }
@@ -63,11 +79,11 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
         setErrorInfo({ show: false, message: '' });
         setTableData(undefined);
         setIsLoading(true);
-        setRunQueryButtonLabel('Querying...');
+        setRunQueryButtonLoading(true);
         setOverrideFKCheck(false);
-        if (editViewQuery.length === 0) {
+        if (query.length === 0) {
             setErrorInfo({ show: true, message: 'Error: Please enter a query.' });
-            setRunQueryButtonLabel('Run query');
+            setRunQueryButtonLoading(false);
             return;
         }
         const resp = await (0, ConnectionClient_1.getSqlViewData)(state.client._id, query, state.client.databaseType, state.queryEndpoint);
@@ -75,22 +91,48 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
             setErrorInfo({ show: true, message: resp.error });
             setTableData(undefined);
             setViewAddable(false);
-            setRunQueryButtonLabel('Run query');
+            setRunQueryButtonLoading(false);
             setIsLoading(false);
             return;
         }
-        setRunQueryButtonLabel('Run query');
+        setRunQueryButtonLoading(false);
         setErrorInfo({ show: false, message: '' });
         // stringify all rows that are either jsonb or json
         resp.rows = resp.rows.map((row) => {
             for (const key in row) {
-                if (typeof row[key] === 'object') {
+                if (row[key] !== null && typeof row[key] === 'object') {
                     row[key] = JSON.stringify(row[key]);
                 }
             }
             return row;
         });
-        setTableData(resp);
+        const duplicateColumns = (0, SQLViewManager_1.getDuplicateColumns)(resp.fields);
+        if (duplicateColumns.length > 0) {
+            let parsedAST = resp.ast;
+            if (Array.isArray(resp.ast)) {
+                parsedAST = [0];
+            }
+            const tableNames = parsedAST.from.map((table) => {
+                const db = table.db ? `${table.db}.` : '';
+                return `${db}${table.table}`;
+            });
+            const newAst = (0, astProcessing_1.processJoinASTWithDuplicateColumns)(duplicateColumns, tableNames, allTableData, parsedAST);
+            const response = await fetch(`${constants_1.QUILL_SERVER}/sqlify`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    ast: { ...newAst },
+                    publicKey: state.client._id,
+                }),
+            });
+            const jsonResponse = await response.json();
+            setEditViewQuery(jsonResponse.query);
+            await handleRunQuery(jsonResponse.query);
+            return;
+        }
+        setTableData({ fields: resp.fields, rows: resp.rows });
         setViewAddable(true);
         setRanViewQuery(query);
         setIsLoading(false);
@@ -98,7 +140,7 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             ...containerStyle,
             gap: 6,
-            height: 'calc(100vh - 188px)',
+            height: 'calc(100vh - 130px)',
         }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', height: '100%', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(DynamicBanner_1.default, { header: initialSqlView
                         ? `Edit "${initialSqlView.name}" view`
                         : 'Create SQL View', message: initialSqlView
@@ -124,51 +166,63 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
                             }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                         paddingLeft: '20px',
                                         paddingRight: '30px',
-                                    }, children: (0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Search...", 
-                                        // @ts-ignore
-                                        onChange: (e) => {
-                                            setTableSearchQuery(e);
+                                    }, children: (0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Search...", onChange: (e) => {
+                                            setTableSearchQuery(e.target.value);
                                             setDisplayedTableData(allTableData.filter((table) => table.tableName
                                                 .toLowerCase()
-                                                .includes(e.toLowerCase().trim())));
-                                        }, value: tableSearchQuery, id: 'edit-name', width: "100%" }) }), (0, jsx_runtime_1.jsx)(react_1.SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px' })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                .includes(e.target.value.toLowerCase().trim())));
+                                        }, value: tableSearchQuery, id: 'edit-name', width: '100%' }) }), (0, jsx_runtime_1.jsx)(react_1.SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px', onClick: handleClickSchemaItem })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 gap: 20,
                                 flexDirection: 'column',
                                 width: 'calc(100% - 250px)',
-                                height: '100%',
+                                maxHeight: '100%',
                                 overflowX: 'hidden',
                                 paddingRight: '24px',
                             }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'flex-start',
-                                        justifyContent: 'space-between',
+                                        overflow: 'auto',
                                         gap: 20,
-                                        width: '100%',
-                                    }, children: [(0, jsx_runtime_1.jsx)(TextInput
-                                        // @ts-ignore
-                                        , { 
-                                            // @ts-ignore
-                                            onChange: (e) => {
-                                                setAIPrompt(e);
-                                            }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '95%' }), (0, jsx_runtime_1.jsx)(Button, { label: askAIButton, onClick: handleRunSqlPrompt, width: "100px" })] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: editViewQuery, setValue: (e) => {
-                                        setEditViewQuery(e);
-                                    } }), (0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: runQueryButtonLabel, onClick: handleRunQuery }) }), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontSize: 15,
-                                        fontWeight: '400',
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            padding: 30,
-                                            background: 'rgba(0,0,0,0.02)',
-                                            display: 'inline-block',
-                                            flex: 0,
-                                            borderRadius: 6,
-                                        }, children: errorInfo.message }) })) : null, isLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        height: 'calc(100vh - 589px)',
-                                        width: '100%',
                                         display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                    }, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), tableData && ((0, jsx_runtime_1.jsx)(react_1.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px' } })), viewAddable && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateSqlViews_1.ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
+                                        flexDirection: 'column',
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'flex-start',
+                                                justifyContent: 'space-between',
+                                                gap: 20,
+                                                width: '100%',
+                                            }, children: [(0, jsx_runtime_1.jsx)(TextInput, { onChange: (e) => {
+                                                        setAIPrompt(e.target.value);
+                                                    }, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '100%' }), (0, jsx_runtime_1.jsx)(Button, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: handleRunSqlPrompt })] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: editViewQuery, setValue: (e) => {
+                                                setEditViewQuery(e);
+                                            }, setEditorMounted: (didMount) => {
+                                                setEditorMounted(didMount);
+                                            }, setPreviousProvier: (provider) => {
+                                                setProvider(provider);
+                                            }, previousProvider: provider, schema: displayedTableData, databaseType: state.client.databaseType }), editorMounted && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: 'Run query', onClick: () => {
+                                                    handleRunQuery();
+                                                } }) })), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                fontSize: 15,
+                                                fontWeight: '400',
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    padding: 30,
+                                                    background: 'rgba(0,0,0,0.02)',
+                                                    display: 'inline-block',
+                                                    flex: 0,
+                                                    borderRadius: 6,
+                                                }, children: errorInfo.message }) })) : null, isLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                height: 'calc(100vh - 589px)',
+                                                width: '100%',
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                            }, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), tableData && ((0, jsx_runtime_1.jsx)(react_1.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px', minHeight: 250 } }))] }), viewAddable && ((0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => {
+                                            const duplicateColumns2 = (0, SQLViewManager_1.getDuplicateColumns)(tableData?.fields);
+                                            if (duplicateColumns2.length > 0) {
+                                                alert(`Ambiguous column names found. Either use aliases or remove the column to make every column name unique: \n\n${duplicateColumns2.join('\n')}`);
+                                                return;
+                                            }
+                                            addEditSqlView(false);
+                                        } }) }))] })] }), (0, jsx_runtime_1.jsx)(CreateSqlViews_1.ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
 }
 exports.default = CreateEditSqlView;

package/dist/cjs/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+declare const useOnClickOutside: (ref: React.RefObject<HTMLDivElement>, handler: (event: any) => void) => void;
+export default useOnClickOutside;
+//# sourceMappingURL=useOnClickOutside.d.ts.map

package/dist/cjs/hooks/useOnClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOnClickOutside.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,QAChB,MAAM,SAAS,CAAC,cAAc,CAAC,mBACjB,GAAG,KAAG,IAAI,SAgB9B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/hooks/useOnClickOutside.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useOnClickOutside = (ref, handler) => {
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, handler]);
+};
+exports.default = useOnClickOutside;

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

@@ -0,0 +1,17 @@
+export declare function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
+    isOpen: boolean;
+    dashboardData: any;
+    selectedDashboard: any;
+    client: any;
+    setIsOpen: any;
+    onSave: any;
+    openEditOrderModal: any;
+    ModalComponent: any;
+    TextInputComponent: any;
+    ButtonComponent: any;
+    HeaderComponent: any;
+    SelectComponent: any;
+    dashNames: any;
+    SecondaryButtonComponent: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditFiltersModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditFiltersModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditFiltersModal.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,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,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,GAAG,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,GAAG,CAAC;IACZ,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,2CA2nBA"}