@quillsql/admin 1.3.7 → 1.3.8

package/dist/esm/public_components/SQLViewManager.js

@@ -1,16 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, TextInputPrimitive, } from '../primitives';
+import { ButtonPrimitive, ModalPrimitive, TextInputPrimitive, } from '../primitives';
 import { useAdmin } from '../AdminProvider';
 import { EnvSelectPopover } from '../components';
-import { TableCell, defineEditorTheme, setEditorTheme } from '../Admin';
-import { PromoteViewModal } from '../modals';
-import MonacoEditor from '@monaco-editor/react';
-import { QUILL_SERVER } from '../utils/constants';
+import { TableCell } from '../Admin';
+import CreateEditSqlView from '../forms/sql_views/CreateEditSqlView';
+import { addSqlView, editSQLView, deleteSQLView } from '../utils/dataEditor';
+import { getTableColumnsBySchema } from '../api/ConnectionClient';
+import { MemoizedButton, MemoizedDeleteButton, MemoizedSecondaryButton, } from '../components/UiComponents';
+import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
 export default function SQLViewManager({ containerStyle, }) {
-    const [tables, setTables] = useState([]);
+    const [tables, setTables] = useState(undefined);
     const [modalIsOpen, setIsOpen] = useState(false);
     const [editModalIsOpen, setEditModalIsOpen] = useState(false);
+    const [editQueryView, setEditQueryView] = useState(false);
     const [name, setName] = useState('');
     const [viewQuery, setViewQuery] = useState('');
     const [editViewId, setEditViewId] = useState('');
@@ -20,375 +23,291 @@ export default function SQLViewManager({ containerStyle, }) {
     const [deleteName, setDeleteName] = useState('');
     const [deleteModalIsOpen, setDeleteModalIsOpen] = useState(false);
     const [isPromoteViewModalOpen, setIsPromoteViewModalOpen] = useState(false);
+    const [allTableData, setAllTableData] = useState([]);
+    const [schemaIsLoading, setSchemaIsLoading] = useState(false);
+    const [initialSqlView, setInitialSqlView] = useState(undefined);
     const parentRef = useRef(null);
     const { state, dispatch } = useAdmin();
-    // const [organizations] = useContext(OrganizationsContext);
-    // const [organizationId, setOrganizationId] = useContext(OrganizationIdContext);
-    const closeDeleteModal = () => {
-        setDeleteModalIsOpen(false);
-    };
-    const openModal = () => {
-        setIsOpen(true);
-        setEditViewQuery('');
-    };
-    const closeModal = () => {
-        setIsOpen(false);
-        setName('');
-        setViewQuery('');
-    };
     const closeEditModal = () => {
         setEditModalIsOpen(false);
         setEditName('');
         setEditViewQuery('');
     };
     const clickTableCell = (table) => {
-        setEditModalIsOpen(true);
         setEditName(table.name);
         setEditViewQuery(table.viewQuery);
         setEditViewId(table._id);
+        setInitialSqlView({
+            id: table._id,
+            name: table.name,
+            query: table.viewQuery,
+        });
+        setEditModalIsOpen(true);
     };
-    const handleDeleteTable = async () => {
-        if (deleteName !== tableToBeDeleted) {
-            alert('Table names must match');
-            return;
-        }
-        if (!editViewId) {
-            console.log('No view id found');
-            return;
-        }
-        let response;
-        if (state.queryEndpoint) {
-            response = await fetch(state.queryEndpoint, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...state.queryHeaders,
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        task: 'view',
-                        id: editViewId,
-                        deleted: true,
-                        clientId: state.client._id,
-                    },
-                }),
-                credentials: state.withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-        }
-        else {
-            response = await fetch(`${QUILL_SERVER}/table/${state.client._id}/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: `Bearer `,
+    const getTables = async () => {
+        const response = await fetch(`${state.queryEndpoint}`, {
+            method: 'POST',
+            headers: {
+                ...state.queryHeaders,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                metadata: {
+                    clientId: state.client._id,
+                    publicKey: state.client._id,
+                    task: 'schema',
+                    databaseType: state.client.databaseType,
                 },
-                body: JSON.stringify({
-                    id: editViewId,
-                    deleted: true,
-                }),
-            });
+            }),
+        });
+        if (!response.ok) {
+            throw new Error('Failed to fetch tables data');
         }
         const data = await response.json();
-        if (data) {
-            setDeleteName('');
-            setDeleteModalIsOpen(false);
-            setEditModalIsOpen(false);
-            setEditName('');
-            setEditViewQuery('');
-            getTables();
-        }
+        setTables(data.data.tables);
     };
-    const getTables = async () => {
-        const response = await fetch(`${QUILL_SERVER}/schema2/${state.client._id}/`, {
-            method: 'GET',
-            headers: { Authorization: `Bearer ` },
-        });
-        const data = await response.json();
-        setTables(data.tables);
+    const getSchemaTableDetails = async () => {
+        setSchemaIsLoading(true);
+        const response = await getTableColumnsBySchema(state.client._id, state.client.schemaNames, state.client.databaseType, state.queryEndpoint);
+        setAllTableData(response);
+        setSchemaIsLoading(false);
     };
     useEffect(() => {
         let isSubscribed = true;
         if (isSubscribed && state.client) {
             getTables();
+            getSchemaTableDetails();
         }
         return () => {
             isSubscribed = false;
         };
-    }, []);
+    }, [state.client]);
     const handleClickFirstDelete = () => {
         setTableToBeDeleted(editName);
         setDeleteModalIsOpen(true);
     };
-    const handleEditTable = async () => {
-        if (!editName.length) {
-            alert('Please enter a table name.');
-            return;
-        }
-        if (!editViewQuery.length) {
-            alert('Please enter a table query.');
-            return;
-        }
-        if (!editViewId) {
-            alert('Could not save.');
-            return;
-        }
-        let response;
-        if (state.queryEndpoint) {
-            response = await fetch(state.queryEndpoint, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...state.queryHeaders,
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        preQueries: editViewQuery[editViewQuery.length - 1] === ';'
-                            ? [editViewQuery.slice(0, -1)]
-                            : [editViewQuery],
-                        name: editName,
-                        task: 'view',
-                        id: editViewId,
-                        clientId: state.client._id,
-                    },
-                }),
-                credentials: state.withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-        }
-        else {
-            response = await fetch(`${QUILL_SERVER}/table/${state.client._id}/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: `Bearer `,
-                },
-                body: JSON.stringify({
-                    viewQuery: editViewQuery[editViewQuery.length - 1] === ';'
-                        ? editViewQuery.slice(0, -1)
-                        : editViewQuery,
-                    name: editName,
-                    id: editViewId,
-                }),
-            });
-        }
-        const data = await response.json();
-        if (data) {
+    const handleModalSubmit = async (submitRequest, query, name, id) => {
+        try {
+            switch (submitRequest) {
+                case 'add':
+                    if (!name) {
+                        alert('No Name found');
+                        return;
+                    }
+                    await addSqlView(name, query, state);
+                    break;
+                case 'edit':
+                    if (!name) {
+                        alert('No id found');
+                        return;
+                    }
+                    if (!id) {
+                        alert('No id found');
+                        return;
+                    }
+                    await editSQLView(name, query, id, state);
+                    break;
+                case 'delete':
+                    if (!id) {
+                        alert('No id found');
+                        return;
+                    }
+                    await deleteSQLView(id, state);
+                    break;
+                default:
+                    setEditName('');
+                    setEditViewQuery(query);
+                    setEditViewId('');
+                    setEditModalIsOpen(true);
+                    return;
+            }
+            await getTables();
             closeEditModal();
-            getTables();
-        }
-    };
-    const handleAddTable = async () => {
-        if (!name.length) {
-            alert('Please enter a table name.');
-            return;
-        }
-        if (!editViewQuery.length) {
-            alert('Please enter a table query.');
-            return;
+            setEditQueryView(false);
         }
-        let response;
-        if (state.queryEndpoint) {
-            response = await fetch(state.queryEndpoint, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...state.queryHeaders,
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        preQueries: editViewQuery[editViewQuery.length - 1] === ';'
-                            ? [editViewQuery.slice(0, -1)]
-                            : [editViewQuery],
-                        name: name,
-                        task: 'view',
-                        clientId: state.client._id,
-                    },
-                }),
-                credentials: state.withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-        }
-        else {
-            response = await fetch(`${QUILL_SERVER}/table/${state.client._id}/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: `Bearer `,
-                },
-                body: JSON.stringify({
-                    viewQuery: editViewQuery[editViewQuery.length - 1] === ';'
-                        ? editViewQuery.slice(0, -1)
-                        : editViewQuery,
-                    name: name,
-                }),
-            });
+        catch (e) {
+            console.error(e);
         }
-        const data = await response.json();
-        if (data) {
-            closeModal();
-            getTables();
+    };
+    const handleEditAddView = async (request, query, name, id) => {
+        switch (request) {
+            case 'edit':
+                if (!name) {
+                    alert('No name found');
+                    return;
+                }
+                if (!id) {
+                    alert('No id found');
+                    return;
+                }
+                await handleModalSubmit('edit', query, name, id);
+                break;
+            default:
+                await handleModalSubmit('final-edit', query);
+                break;
         }
     };
     useEffect(() => {
         getTables();
     }, [state.client]);
-    return (_jsx("div", { style: { ...containerStyle }, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                paddingTop: '0px',
-                position: 'relative',
-            }, ref: parentRef, children: [_jsx("div", { style: {
-                        //   width: 'calc(100vw - 30px)',
+    return (_jsxs("div", { style: { ...containerStyle }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingTop: '0px',
+                    position: 'relative',
+                }, ref: parentRef, children: [_jsx("div", { style: {
+                            //   width: 'calc(100vw - 30px)',
+                            display: 'flex',
+                            position: 'sticky',
+                            // position: "fixed",
+                            backgroundColor: 'white',
+                            zIndex: 1,
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            flexDirection: 'row',
+                            paddingTop: 12,
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            paddingLeft: '30px',
+                            paddingRight: '30px',
+                            borderBottomWidth: 1,
+                            borderTopWidth: 0,
+                            borderLeftWidth: 0,
+                            borderRightWidth: 0,
+                            borderStyle: 'solid',
+                            borderColor: state.theme.borderColor,
+                            paddingBottom: 20,
+                            //   boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
+                            //   paddingRight: '50px',
+                            //   position: 'absolute'
+                            //   // zIndex: 10
+                        }, children: _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'flex-end',
+                                justifyContent: 'space-between',
+                                width: '100%',
+                                // marginLeft: '25px'
+                            }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
+                                                fontSize: '14px',
+                                                paddingTop: '0px',
+                                                marginTop: '0px',
+                                                marginBottom: '4px',
+                                                fontWeight: '600',
+                                                color: state.theme.secondaryTextColor,
+                                                fontFamily: state.theme.fontFamily,
+                                                userSelect: 'none',
+                                            }, children: "Environment" }), _jsx(EnvSelectPopover, { setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: true, handlePromote: () => setIsPromoteViewModalOpen(true) })] }), !editQueryView && !state.databaseTypeMismatch.show && (_jsx(ButtonPrimitive, { onClick: () => {
+                                        setEditName('');
+                                        setEditViewQuery('');
+                                        setEditViewId('');
+                                        setInitialSqlView(undefined);
+                                        setEditQueryView(true);
+                                    }, label: "Add view +" }))] }) }), state.databaseTypeMismatch.show ? (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsx(_Fragment, { children: !editQueryView ? (_jsx("div", { style: {
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                paddingLeft: 25,
+                                paddingRight: 25,
+                                paddingTop: 25,
+                            }, children: tables && tables?.length
+                                ? tables.map((table) => (_jsx(TableCell, { table: table, clickTableCell: clickTableCell }, table._id)))
+                                : null }, 'edit-view-query')) : (_jsx(CreateEditSqlView, { containerStyle: {}, initialSqlView: initialSqlView, closeEditView: () => setEditQueryView(false), addEditView: (request, name, query, id) => {
+                                handleEditAddView(request, name, query, id);
+                            }, allTableData: allTableData, schemaIsLoading: schemaIsLoading })) }))] }), _jsx(EditAddViewModal, { viewName: editName, viewQuery: editViewQuery, viewId: editViewId, editModalIsOpen: editModalIsOpen, closeEditModal: closeEditModal, submit: handleModalSubmit, state: state, onEditViewClick: () => setEditQueryView(true) })] }));
+}
+function EditAddViewModal({ viewName, viewQuery, viewId, editModalIsOpen, closeEditModal, submit, state, onEditViewClick = () => { }, }) {
+    const [name, setName] = useState(viewName);
+    const [query, setQuery] = useState(viewQuery);
+    const [id, setId] = useState(viewId);
+    useEffect(() => {
+        setName(viewName);
+    }, [viewName]);
+    useEffect(() => {
+        setQuery(viewQuery);
+    }, [viewQuery]);
+    useEffect(() => {
+        setId(viewId);
+    }, [viewId]);
+    return (_jsx(ModalPrimitive, { isOpen: editModalIsOpen, close: closeEditModal, children: _jsxs("div", { className: "flex flex-col p-[6px]", children: [_jsxs("div", { style: {
                         display: 'flex',
-                        position: 'sticky',
-                        // position: "fixed",
-                        backgroundColor: 'white',
-                        zIndex: 1,
-                        left: 0,
-                        right: 0,
-                        top: 0,
                         flexDirection: 'row',
-                        paddingTop: 12,
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                        paddingLeft: '30px',
-                        paddingRight: '30px',
-                        borderBottomWidth: 1,
-                        borderTopWidth: 0,
-                        borderLeftWidth: 0,
-                        borderRightWidth: 0,
+                        paddingBottom: '20px',
+                        // width: '100%'
+                    }, children: [_jsx("h1", { style: {
+                                fontSize: '24px',
+                                paddingTop: '0px',
+                                marginTop: '0px',
+                                marginBottom: '0px',
+                                fontWeight: 'bold',
+                                color: '#384151',
+                            }, children: viewName ? 'Edit SQL View' : 'Add SQL View' }), _jsx(MemoizedDeleteButton, { onClick: closeEditModal, style: undefined })] }), _jsx("h3", { style: {
+                        fontWeight: '600',
+                        fontSize: '14px',
+                        marginBottom: '6px',
+                        color: '#212121',
+                    }, children: "Name" }), _jsx(TextInputPrimitive, { placeholder: "Enter view display name...", onChange: (e) => setName(e.target.value), value: name ? name : '' }), _jsx("br", {}), _jsx("h3", { style: {
+                        fontWeight: '600',
+                        fontSize: '14px',
+                        marginBottom: '6px',
+                        color: '#212121',
+                    }, children: "Query" }), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingLeft: '12px',
+                        paddingRight: '12px',
+                        fontWeight: 'medium',
+                        height: '120px',
+                        boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                        width: '500px',
+                        background: 'linear-gradient(white 50%, transparent)',
+                        color: state.theme?.primaryTextColor,
+                        borderWidth: '1px',
+                        borderColor: state.theme?.borderColor || '#E7E7E7',
                         borderStyle: 'solid',
-                        borderColor: state.theme.borderColor,
-                        paddingBottom: 20,
-                        //   boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
-                        //   paddingRight: '50px',
-                        //   position: 'absolute'
-                        //   // zIndex: 10
-                    }, children: _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'flex-end',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                            // marginLeft: '25px'
-                        }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
-                                            fontSize: '14px',
-                                            paddingTop: '0px',
-                                            marginTop: '0px',
-                                            marginBottom: '4px',
-                                            fontWeight: '600',
-                                            color: state.theme.secondaryTextColor,
-                                            fontFamily: state.theme.fontFamily,
-                                            userSelect: 'none',
-                                        }, children: "Environment" }), _jsx(EnvSelectPopover, { setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: true, handlePromote: () => setIsPromoteViewModalOpen(true) })] }), _jsx(ButtonPrimitive, { onClick: openModal, label: "Add view +" })] }) }), _jsx("div", { style: {
+                        borderRadius: '6px',
+                        fontSize: 14,
+                        position: 'relative',
+                        overflow: 'hidden',
+                    }, children: [_jsx("textarea", { style: {
+                                width: '100%',
+                                height: '100%',
+                                resize: 'none',
+                                opacity: '1',
+                                background: 'transparent',
+                                color: '#000',
+                                fontFamily: 'inherit',
+                                fontSize: 'inherit',
+                                border: 'none',
+                                overflow: 'hidden',
+                                paddingTop: '12px',
+                                paddingLeft: '8px',
+                            }, value: viewQuery, disabled: true }), _jsx("div", { style: {
+                                position: 'absolute',
+                                bottom: 0,
+                                left: 0,
+                                right: 0,
+                                height: '90%',
+                                background: 'linear-gradient(transparent, white)',
+                                pointerEvents: 'none',
+                            } }), viewName && (_jsx("div", { style: { position: 'absolute', bottom: '10px', right: '10px' }, children: _jsx(MemoizedSecondaryButton, { label: 'Edit Query   ↗', onClick: () => {
+                                    closeEditModal();
+                                    onEditViewClick();
+                                } }) }))] }), _jsxs("div", { style: {
                         display: 'flex',
-                        flexWrap: 'wrap',
-                        paddingLeft: 25,
-                        paddingRight: 25,
-                        paddingTop: 25,
-                    }, children: tables.length
-                        ? tables.map((table) => (_jsx(TableCell, { table: table, clickTableCell: clickTableCell })))
-                        : null }), _jsx(PromoteViewModal, { clientId: state.client._id, client: state.client, clients: state.clients, isOpen: isPromoteViewModalOpen, setIsOpen: setIsPromoteViewModalOpen, ModalComponent: ModalPrimitive, views: tables }), _jsx(ModalPrimitive, { isOpen: modalIsOpen, close: closeModal, children: _jsxs("div", { className: "flex flex-col p-[6px]", children: [_jsx(HeaderPrimitive, { label: "Add view" }), _jsx("h3", { style: {
-                                    fontWeight: 600,
-                                    fontSize: 14,
-                                    marginBottom: 6,
-                                    marginTop: 8,
-                                    color: '#212121',
-                                }, children: "name" }), _jsx(TextInputPrimitive, { placeholder: "Enter table display name...", onChange: (e) => setName(e.target.value), value: name }), _jsx("h3", { style: {
-                                    fontWeight: 600,
-                                    fontSize: 14,
-                                    marginBottom: 6,
-                                    color: '#212121',
-                                    marginTop: 8,
-                                }, children: "query" }), _jsx("div", { style: {
-                                    background: state.theme.backgroundColor,
-                                    // maxHeight: 700,
-                                    width: '800px',
-                                    height: '500px',
-                                    // minWidth: 450,
-                                    // overflowY: "scroll",
-                                    // padding: "20px 30px 20px 20px",
-                                    // marginLeft: 20,
-                                    borderTopLeftRadius: 6,
-                                    borderBottomLeftRadius: 6,
-                                    borderTopRightRadius: 0,
-                                    borderBottomRightRadius: 0,
-                                    overflow: 'hidden',
-                                }, children: _jsx(MonacoEditor, { height: "500px", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: editViewQuery, loading: _jsx("div", {}), options: {
-                                        wordWrap: 'on',
-                                        minimap: {
-                                            enabled: false,
-                                        },
-                                        padding: { top: 16 },
-                                    }, onChange: (query) => setEditViewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, state.theme), onMount: setEditorTheme }) }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonPrimitive, { label: "Add view +", onClick: handleAddTable })] }) }), _jsx(ModalPrimitive, { isOpen: editModalIsOpen, close: closeEditModal, children: _jsxs("div", { className: "flex flex-col p-[6px]", children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    // width: '100%'
-                                }, children: [_jsx("h1", { style: {
-                                            fontSize: '24px',
-                                            paddingTop: '0px',
-                                            marginTop: '0px',
-                                            marginBottom: '0px',
-                                            fontWeight: 'bold',
-                                            color: '#384151',
-                                        }, children: "Edit view" }), _jsx("button", { style: {
-                                            background: 'transparent',
-                                            border: 'none',
-                                            outline: 'none',
-                                            height: 24,
-                                            width: 24,
-                                            cursor: 'pointer',
-                                        }, onClick: closeEditModal, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", height: "24px", width: "24px", children: [_jsx("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), _jsx("line", { x1: "6", x2: "18", y1: "6", y2: "18" })] }) })] }), _jsx("h3", { style: {
-                                    fontWeight: '600',
-                                    fontSize: '14px',
-                                    marginBottom: '6px',
-                                    color: '#212121',
-                                }, children: "name" }), _jsx(TextInputPrimitive, { placeholder: "Enter table display name...", onChange: (e) => setEditName(e.target.value), value: editName }), _jsx("h3", { style: {
-                                    fontWeight: '600',
-                                    fontSize: '14px',
-                                    marginBottom: '6px',
-                                    color: '#212121',
-                                }, children: "query" }), _jsx("div", { style: {
-                                    background: state.theme.backgroundColor,
-                                    // maxHeight: 700,
-                                    width: '520px',
-                                    height: '300px',
-                                    // minWidth: 450,
-                                    // overflowY: "scroll",
-                                    // padding: "20px 30px 20px 20px",
-                                    // marginLeft: 20,
-                                    borderTopLeftRadius: 6,
-                                    borderBottomLeftRadius: 6,
-                                    borderTopRightRadius: 0,
-                                    borderBottomRightRadius: 0,
-                                    overflow: 'hidden',
-                                }, children: _jsx(MonacoEditor, { height: "300px", width: "520px", defaultLanguage: "pgsql", defaultValue: "", value: editViewQuery, loading: _jsx("div", {}), options: {
-                                        wordWrap: 'on',
-                                        minimap: {
-                                            enabled: false,
-                                        },
-                                        padding: { top: 16 },
-                                    }, onChange: (query) => setEditViewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, state.theme), onMount: setEditorTheme }) }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    marginTop: 20,
-                                    gap: 8,
-                                }, children: [_jsx(ButtonPrimitive, { onClick: handleEditTable, label: "Save changes" }), _jsx(SecondaryButtonPrimitive, { onClick: handleClickFirstDelete, label: "Delete" })] })] }) }), _jsx(ModalPrimitive, { isOpen: deleteModalIsOpen, close: closeDeleteModal, children: _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            padding: '6px',
-                        }, children: [_jsxs("h1", { style: {
-                                    fontSize: '1.25rem',
-                                    paddingTop: '0px',
-                                    marginTop: '0px',
-                                    marginBottom: '12px',
-                                    fontWeight: 'bold',
-                                    color: '#212121',
-                                }, children: ["Confirm delete \"", tableToBeDeleted, "\" view"] }), _jsx("h3", { style: {
-                                    fontWeight: '600',
-                                    fontSize: '0.875rem',
-                                    marginBottom: '6px',
-                                    color: '#212121',
-                                }, children: "View name" }), _jsx(TextInputPrimitive, { placeholder: "Type view name to confirm delete...", onChange: (e) => setDeleteName(e.target.value), value: deleteName }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonPrimitive, { onClick: handleDeleteTable, label: `Confirm delete ${tableToBeDeleted}` })] }) })] }) }));
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'flex-end',
+                        marginTop: 20,
+                        gap: 8,
+                    }, children: [viewName && (_jsx(MemoizedButton, { onClick: () => submit('delete', query, name, id), label: "Delete", style: { color: 'red', backgroundColor: 'white' } })), _jsx(MemoizedButton, { onClick: () => {
+                                if (!name) {
+                                    alert('Please enter a name');
+                                    return;
+                                }
+                                submit(viewName ? 'edit' : 'add', query, name, id);
+                            }, label: viewName ? 'Save changes' : 'Create view' })] })] }) }));
 }