@quillsql/admin 1.3.7 → 1.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Admin.d.ts +0 -5
- package/dist/cjs/Admin.d.ts.map +1 -1
- package/dist/cjs/Admin.js +56 -108
- package/dist/cjs/AdminProvider.d.ts +9 -5
- package/dist/cjs/AdminProvider.d.ts.map +1 -1
- package/dist/cjs/AdminProvider.js +73 -84
- package/dist/cjs/api/ConnectionClient.d.ts +12 -10
- package/dist/cjs/api/ConnectionClient.d.ts.map +1 -1
- package/dist/cjs/api/ConnectionClient.js +102 -30
- package/dist/cjs/assets/ArrowDownHeadIcon.d.ts +5 -0
- package/dist/cjs/assets/ArrowDownHeadIcon.d.ts.map +1 -0
- package/dist/cjs/assets/ArrowDownHeadIcon.js +5 -0
- package/dist/cjs/assets/XIcon.d.ts +5 -0
- package/dist/cjs/assets/XIcon.d.ts.map +1 -0
- package/dist/cjs/assets/XIcon.js +5 -0
- package/dist/cjs/assets/index.d.ts +3 -0
- package/dist/cjs/assets/index.d.ts.map +1 -0
- package/dist/cjs/assets/index.js +10 -0
- package/dist/cjs/components/DatabaseMismatchCard.d.ts +6 -0
- package/dist/cjs/components/DatabaseMismatchCard.d.ts.map +1 -0
- package/dist/cjs/components/DatabaseMismatchCard.js +18 -0
- package/dist/cjs/components/DatabaseSelector.d.ts +2 -1
- package/dist/cjs/components/DatabaseSelector.d.ts.map +1 -1
- package/dist/cjs/components/DatabaseSelector.js +2 -2
- package/dist/cjs/components/DropDownMenuWithLabel.d.ts +2 -1
- package/dist/cjs/components/DropDownMenuWithLabel.d.ts.map +1 -1
- package/dist/cjs/components/DropDownMenuWithLabel.js +160 -39
- package/dist/cjs/components/DynamicBanner.d.ts +11 -0
- package/dist/cjs/components/DynamicBanner.d.ts.map +1 -0
- package/dist/cjs/components/DynamicBanner.js +22 -0
- package/dist/cjs/components/EnvSelectPopover.d.ts.map +1 -1
- package/dist/cjs/components/EnvSelectPopover.js +0 -1
- package/dist/cjs/components/OrgSelect.d.ts +23 -0
- package/dist/cjs/components/OrgSelect.d.ts.map +1 -1
- package/dist/cjs/components/OrgSelect.js +55 -15
- package/dist/cjs/components/SqlTextEditor.d.ts +7 -0
- package/dist/cjs/components/SqlTextEditor.d.ts.map +1 -0
- package/dist/cjs/components/SqlTextEditor.js +44 -0
- package/dist/cjs/components/UiComponents.d.ts +119 -0
- package/dist/cjs/components/UiComponents.d.ts.map +1 -0
- package/dist/cjs/components/UiComponents.js +268 -0
- package/dist/cjs/forms/client_onboard/ConnectDatabase.d.ts +3 -2
- package/dist/cjs/forms/client_onboard/ConnectDatabase.d.ts.map +1 -1
- package/dist/cjs/forms/client_onboard/ConnectDatabase.js +101 -43
- package/dist/cjs/forms/client_onboard/ConnectSchema.d.ts +3 -1
- package/dist/cjs/forms/client_onboard/ConnectSchema.d.ts.map +1 -1
- package/dist/cjs/forms/client_onboard/ConnectSchema.js +13 -14
- package/dist/cjs/forms/client_onboard/CreateSqlViews.d.ts +10 -1
- package/dist/cjs/forms/client_onboard/CreateSqlViews.d.ts.map +1 -1
- package/dist/cjs/forms/client_onboard/CreateSqlViews.js +13 -13
- package/dist/cjs/forms/sql_views/CreateEditSqlView.d.ts +23 -0
- package/dist/cjs/forms/sql_views/CreateEditSqlView.d.ts.map +1 -0
- package/dist/cjs/forms/sql_views/CreateEditSqlView.js +161 -0
- package/dist/cjs/modals/NewDashboardModal.js +1 -1
- package/dist/cjs/primitives/TextInputPrimitive.d.ts +1 -0
- package/dist/cjs/primitives/TextInputPrimitive.d.ts.map +1 -1
- package/dist/cjs/primitives/TextInputPrimitive.js +2 -2
- package/dist/cjs/public_components/CreateEnvironment.d.ts.map +1 -1
- package/dist/cjs/public_components/CreateEnvironment.js +34 -8
- package/dist/cjs/public_components/DashboardBuilder.d.ts.map +1 -1
- package/dist/cjs/public_components/DashboardBuilder.js +30 -16
- package/dist/cjs/public_components/DashboardManager.d.ts.map +1 -1
- package/dist/cjs/public_components/DashboardManager.js +114 -104
- package/dist/cjs/public_components/SQLViewManager.d.ts.map +1 -1
- package/dist/cjs/public_components/SQLViewManager.js +252 -333
- package/dist/cjs/utils/dataEditor.d.ts +4 -0
- package/dist/cjs/utils/dataEditor.d.ts.map +1 -0
- package/dist/cjs/utils/dataEditor.js +144 -0
- package/dist/cjs/utils/dataFetcher.d.ts +3 -0
- package/dist/cjs/utils/dataFetcher.d.ts.map +1 -0
- package/dist/cjs/utils/dataFetcher.js +68 -0
- package/dist/cjs/utils/databases.d.ts +13 -2
- package/dist/cjs/utils/databases.d.ts.map +1 -1
- package/dist/cjs/utils/databases.js +52 -9
- package/dist/cjs/utils/table.d.ts +2 -0
- package/dist/cjs/utils/table.d.ts.map +1 -1
- package/dist/esm/Admin.d.ts +0 -5
- package/dist/esm/Admin.d.ts.map +1 -1
- package/dist/esm/Admin.js +56 -107
- package/dist/esm/AdminProvider.d.ts +9 -5
- package/dist/esm/AdminProvider.d.ts.map +1 -1
- package/dist/esm/AdminProvider.js +71 -85
- package/dist/esm/api/ConnectionClient.d.ts +12 -10
- package/dist/esm/api/ConnectionClient.d.ts.map +1 -1
- package/dist/esm/api/ConnectionClient.js +99 -29
- package/dist/esm/assets/ArrowDownHeadIcon.d.ts +5 -0
- package/dist/esm/assets/ArrowDownHeadIcon.d.ts.map +1 -0
- package/dist/esm/assets/ArrowDownHeadIcon.js +3 -0
- package/dist/esm/assets/XIcon.d.ts +5 -0
- package/dist/esm/assets/XIcon.d.ts.map +1 -0
- package/dist/esm/assets/XIcon.js +3 -0
- package/dist/esm/assets/index.d.ts +3 -0
- package/dist/esm/assets/index.d.ts.map +1 -0
- package/dist/esm/assets/index.js +2 -0
- package/dist/esm/components/DatabaseMismatchCard.d.ts +6 -0
- package/dist/esm/components/DatabaseMismatchCard.d.ts.map +1 -0
- package/dist/esm/components/DatabaseMismatchCard.js +15 -0
- package/dist/esm/components/DatabaseSelector.d.ts +2 -1
- package/dist/esm/components/DatabaseSelector.d.ts.map +1 -1
- package/dist/esm/components/DatabaseSelector.js +2 -2
- package/dist/esm/components/DropDownMenuWithLabel.d.ts +2 -1
- package/dist/esm/components/DropDownMenuWithLabel.d.ts.map +1 -1
- package/dist/esm/components/DropDownMenuWithLabel.js +137 -39
- package/dist/esm/components/DynamicBanner.d.ts +11 -0
- package/dist/esm/components/DynamicBanner.d.ts.map +1 -0
- package/dist/esm/components/DynamicBanner.js +16 -0
- package/dist/esm/components/EnvSelectPopover.d.ts.map +1 -1
- package/dist/esm/components/EnvSelectPopover.js +0 -1
- package/dist/esm/components/OrgSelect.d.ts +23 -0
- package/dist/esm/components/OrgSelect.d.ts.map +1 -1
- package/dist/esm/components/OrgSelect.js +52 -16
- package/dist/esm/components/SqlTextEditor.d.ts +7 -0
- package/dist/esm/components/SqlTextEditor.d.ts.map +1 -0
- package/dist/esm/components/SqlTextEditor.js +38 -0
- package/dist/esm/components/UiComponents.d.ts +119 -0
- package/dist/esm/components/UiComponents.d.ts.map +1 -0
- package/dist/esm/components/UiComponents.js +254 -0
- package/dist/esm/forms/client_onboard/ConnectDatabase.d.ts +3 -2
- package/dist/esm/forms/client_onboard/ConnectDatabase.d.ts.map +1 -1
- package/dist/esm/forms/client_onboard/ConnectDatabase.js +102 -44
- package/dist/esm/forms/client_onboard/ConnectSchema.d.ts +3 -1
- package/dist/esm/forms/client_onboard/ConnectSchema.d.ts.map +1 -1
- package/dist/esm/forms/client_onboard/ConnectSchema.js +13 -14
- package/dist/esm/forms/client_onboard/CreateSqlViews.d.ts +10 -1
- package/dist/esm/forms/client_onboard/CreateSqlViews.d.ts.map +1 -1
- package/dist/esm/forms/client_onboard/CreateSqlViews.js +12 -14
- package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts +23 -0
- package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts.map +1 -0
- package/dist/esm/forms/sql_views/CreateEditSqlView.js +155 -0
- package/dist/esm/modals/NewDashboardModal.js +1 -1
- package/dist/esm/primitives/TextInputPrimitive.d.ts +1 -0
- package/dist/esm/primitives/TextInputPrimitive.d.ts.map +1 -1
- package/dist/esm/primitives/TextInputPrimitive.js +2 -2
- package/dist/esm/public_components/CreateEnvironment.d.ts.map +1 -1
- package/dist/esm/public_components/CreateEnvironment.js +12 -9
- package/dist/esm/public_components/DashboardBuilder.d.ts.map +1 -1
- package/dist/esm/public_components/DashboardBuilder.js +30 -16
- package/dist/esm/public_components/DashboardManager.d.ts.map +1 -1
- package/dist/esm/public_components/DashboardManager.js +115 -105
- package/dist/esm/public_components/SQLViewManager.d.ts.map +1 -1
- package/dist/esm/public_components/SQLViewManager.js +254 -335
- package/dist/esm/utils/dataEditor.d.ts +4 -0
- package/dist/esm/utils/dataEditor.d.ts.map +1 -0
- package/dist/esm/utils/dataEditor.js +138 -0
- package/dist/esm/utils/dataFetcher.d.ts +3 -0
- package/dist/esm/utils/dataFetcher.d.ts.map +1 -0
- package/dist/esm/utils/dataFetcher.js +63 -0
- package/dist/esm/utils/databases.d.ts +13 -2
- package/dist/esm/utils/databases.d.ts.map +1 -1
- package/dist/esm/utils/databases.js +52 -9
- package/dist/esm/utils/table.d.ts +2 -0
- package/dist/esm/utils/table.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -3,8 +3,7 @@ import { useState } from 'react';
|
|
|
3
3
|
import { ButtonPrimitive } from '../../primitives';
|
|
4
4
|
import DropdownMenuWithLabel from '../../components/DropDownMenuWithLabel';
|
|
5
5
|
import { getFKInfo, getOrgInfo, getSchemaTableInfo, getTableInfo, getTablesBySchema, } from '../../api/ConnectionClient';
|
|
6
|
-
|
|
7
|
-
export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, }) {
|
|
6
|
+
export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }) {
|
|
8
7
|
const [schemaDetails, setSchemaDetails] = useState(allSchemaInfo);
|
|
9
8
|
const [schemaError, setSchemaError] = useState(initialError);
|
|
10
9
|
const [formError, setFormError] = useState({ show: false, message: '' });
|
|
@@ -16,8 +15,8 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
|
|
|
16
15
|
gap: '16px',
|
|
17
16
|
alignItems: 'flex-end',
|
|
18
17
|
paddingBottom: '16px',
|
|
19
|
-
}, children: [_jsx(DropdownMenuWithLabel, { items: schemaDetails?.schemas || schemaError?.schemas || [], setSelected: async (e) => {
|
|
20
|
-
const tables = await getTablesBySchema(
|
|
18
|
+
}, children: [_jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.schemas || schemaError?.schemas || [], setSelected: async (e) => {
|
|
19
|
+
const tables = await getTablesBySchema(clientId, e);
|
|
21
20
|
if (tables) {
|
|
22
21
|
setFormError({ show: false, message: '' });
|
|
23
22
|
setSchemaError(undefined);
|
|
@@ -53,7 +52,7 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
|
|
|
53
52
|
});
|
|
54
53
|
}
|
|
55
54
|
}, selected: schemaDetails?.selectedFields?.schema || schemaError?.schemaName, label: 'Schema' }), schemaError?.schemas.length === 0 && (_jsx(ButtonPrimitive, { label: "Re-fetch", onClick: async () => {
|
|
56
|
-
const suspectedSchema = await getSchemaTableInfo(
|
|
55
|
+
const suspectedSchema = await getSchemaTableInfo(clientId, 'public', environmentDetails.type);
|
|
57
56
|
if ('selectedFields' in suspectedSchema) {
|
|
58
57
|
setSchemaError(undefined);
|
|
59
58
|
setSchemaDetails(suspectedSchema);
|
|
@@ -74,8 +73,8 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
|
|
|
74
73
|
gap: '20px',
|
|
75
74
|
justifyContent: 'space-between',
|
|
76
75
|
marginTop: '8px',
|
|
77
|
-
}, children: [_jsx(DropdownMenuWithLabel, { items: schemaDetails?.tables || [], setSelected: async (e) => {
|
|
78
|
-
const columns = await getTableInfo(
|
|
76
|
+
}, children: [_jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
|
|
77
|
+
const columns = await getTableInfo(clientId, schemaDetails?.selectedFields?.schema, e);
|
|
79
78
|
setSchemaDetails({
|
|
80
79
|
...schemaDetails,
|
|
81
80
|
columns: columns.columns,
|
|
@@ -86,10 +85,10 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
|
|
|
86
85
|
table: e,
|
|
87
86
|
},
|
|
88
87
|
});
|
|
89
|
-
}, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.columns || [], setSelected: async (e) => {
|
|
90
|
-
const fkStrings = await getFKInfo(
|
|
88
|
+
}, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
|
|
89
|
+
const fkStrings = await getFKInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
|
|
91
90
|
if (schemaDetails?.selectedFields.customerNameField) {
|
|
92
|
-
const organizations = await getOrgInfo(
|
|
91
|
+
const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
|
|
93
92
|
setSchemaDetails({
|
|
94
93
|
...schemaDetails,
|
|
95
94
|
organizations: organizations,
|
|
@@ -107,9 +106,9 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
|
|
|
107
106
|
organizationIdField: e,
|
|
108
107
|
},
|
|
109
108
|
});
|
|
110
|
-
}, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.columns || [], setSelected: async (e) => {
|
|
109
|
+
}, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
|
|
111
110
|
if (schemaDetails?.selectedFields.organizationIdField) {
|
|
112
|
-
const organizations = await getOrgInfo(
|
|
111
|
+
const organizations = await getOrgInfo(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
|
|
113
112
|
setSchemaDetails({
|
|
114
113
|
...schemaDetails,
|
|
115
114
|
organizations: organizations,
|
|
@@ -128,7 +127,7 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
|
|
|
128
127
|
},
|
|
129
128
|
});
|
|
130
129
|
}
|
|
131
|
-
}, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
|
|
130
|
+
}, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
|
|
132
131
|
[], setSelected: async (e) => {
|
|
133
132
|
const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
|
|
134
133
|
setSchemaDetails({
|
|
@@ -138,7 +137,7 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
|
|
|
138
137
|
defaultOrg: orgObj,
|
|
139
138
|
},
|
|
140
139
|
});
|
|
141
|
-
}, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
|
|
140
|
+
}, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), _jsx(DropdownMenuWithLabel, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
|
|
142
141
|
setSchemaDetails({
|
|
143
142
|
...schemaDetails,
|
|
144
143
|
selectedFields: {
|
|
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
|
|
|
2
2
|
import { ColumnsByTable } from '../../utils/table';
|
|
3
3
|
import { SchemaDetails } from '../../utils/schema';
|
|
4
4
|
import { ConnectionType } from '../../utils/databases';
|
|
5
|
-
export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, }: {
|
|
5
|
+
export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, clientId, state, }: {
|
|
6
6
|
containerStyle?: CSSProperties;
|
|
7
7
|
header1Style?: CSSProperties;
|
|
8
8
|
header2Style?: CSSProperties;
|
|
@@ -11,5 +11,14 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
|
|
|
11
11
|
allSchemaInfo?: SchemaDetails;
|
|
12
12
|
domainName: string | undefined;
|
|
13
13
|
completeOnboarding: (client: any) => void;
|
|
14
|
+
clientId: string;
|
|
15
|
+
state: any;
|
|
16
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }: {
|
|
18
|
+
isOpen: boolean;
|
|
19
|
+
setIsOpen: (e: boolean) => void;
|
|
20
|
+
override: (e: boolean) => Promise<void>;
|
|
21
|
+
foreignKey: string | undefined;
|
|
22
|
+
tableName: string | undefined;
|
|
14
23
|
}): import("react/jsx-runtime").JSX.Element;
|
|
15
24
|
//# sourceMappingURL=CreateSqlViews.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreateSqlViews.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/CreateSqlViews.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAa3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"CreateSqlViews.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/CreateSqlViews.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAa3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAC;AAK7E,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ,2CAiWA;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,GACV,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,2CAiDA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { ButtonPrimitive, ModalPrimitive, TextInputPrimitive, } from '../../primitives';
|
|
4
|
-
import {
|
|
5
|
-
import { createSQLView, getQueryFromAI, getSqlViewData, } from '../../api/ConnectionClient';
|
|
6
|
-
import { formConnectionString } from '../../utils/databases';
|
|
4
|
+
import { createSQLView, getQueryFromAiWithConnection, getSqlViewData, } from '../../api/ConnectionClient';
|
|
7
5
|
import SqlViewTile from '../../components/SqlViewTile';
|
|
8
|
-
|
|
6
|
+
import SqlTextEditor from '../../components/SqlTextEditor';
|
|
7
|
+
import { QuillTable } from '@quillsql/react';
|
|
8
|
+
export default function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, clientId, state, }) {
|
|
9
9
|
const [selectedTable, setSelectedTable] = useState(undefined);
|
|
10
10
|
const [queryInfo, setQueryInfo] = useState({
|
|
11
11
|
name: '',
|
|
@@ -23,7 +23,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
|
|
|
23
23
|
const addSqlView = async (override) => {
|
|
24
24
|
const results = await createSQLView(environmentDetails, allSchemaInfo, columnsByTable, queryInfo, client, domainName, tableData, sqlTables.map((e) => {
|
|
25
25
|
return e.name;
|
|
26
|
-
}), override);
|
|
26
|
+
}), override, clientId);
|
|
27
27
|
if (results.throwModal) {
|
|
28
28
|
setShowFKModal(true);
|
|
29
29
|
return;
|
|
@@ -47,7 +47,6 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
|
|
|
47
47
|
...containerStyle,
|
|
48
48
|
display: 'flex',
|
|
49
49
|
flexDirection: 'column',
|
|
50
|
-
overflow: 'hidden',
|
|
51
50
|
}, id: "create-sql-view", children: [_jsxs("div", { style: {
|
|
52
51
|
padding: 20,
|
|
53
52
|
paddingBottom: 12,
|
|
@@ -76,7 +75,9 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
|
|
|
76
75
|
setAIPrompt(e.target.value);
|
|
77
76
|
}, placeholder: 'Describe a query...', value: aiPrompt }), _jsx(ButtonPrimitive, { label: askAIButton, onClick: async () => {
|
|
78
77
|
setAskAIButton('Loading...');
|
|
79
|
-
const results = await
|
|
78
|
+
const results = await getQueryFromAiWithConnection(aiPrompt, clientId, allSchemaInfo?.selectedFields.schema
|
|
79
|
+
? [allSchemaInfo?.selectedFields.schema]
|
|
80
|
+
: undefined);
|
|
80
81
|
setQueryInfo({ name: queryInfo.name, query: results });
|
|
81
82
|
setAskAIButton('Ask AI');
|
|
82
83
|
}, style: { width: '90px' } })] }), _jsx(SqlTextEditor, { value: queryInfo.query, setValue: (e) => {
|
|
@@ -91,8 +92,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
|
|
|
91
92
|
height: 70,
|
|
92
93
|
}, children: [_jsx(ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
|
|
93
94
|
setRunQueryButtonLabel('Querying...');
|
|
94
|
-
const
|
|
95
|
-
const getSqlResults = await getSqlViewData(connectionString, queryInfo.query);
|
|
95
|
+
const getSqlResults = await getSqlViewData(clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint);
|
|
96
96
|
if (!getSqlResults.success) {
|
|
97
97
|
setErrorInfo({ status: true, msg: getSqlResults.error });
|
|
98
98
|
}
|
|
@@ -110,12 +110,10 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
|
|
|
110
110
|
paddingLeft: 16,
|
|
111
111
|
paddingRight: 16,
|
|
112
112
|
height: 'calc(100vh - 515px)',
|
|
113
|
-
}, children: [_jsx(
|
|
114
|
-
// height="400px"
|
|
115
|
-
containerStyle: {
|
|
113
|
+
}, children: [_jsx(QuillTable, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
|
|
116
114
|
height: 'calc(100vh - 589px)',
|
|
117
115
|
width: '100%',
|
|
118
|
-
},
|
|
116
|
+
}, showDownloadCSVButton: true }), _jsxs("div", { style: {
|
|
119
117
|
width: '100%',
|
|
120
118
|
display: 'flex',
|
|
121
119
|
justifyContent: 'space-between',
|
|
@@ -182,7 +180,7 @@ export default function CreateSQLViews({ containerStyle, header1Style, header2St
|
|
|
182
180
|
completeOnboarding(client);
|
|
183
181
|
}, style: { width: 276 } }) })) : null] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addSqlView, foreignKey: allSchemaInfo?.selectedFields.foreignKey, tableName: allSchemaInfo?.selectedFields.table })] }));
|
|
184
182
|
}
|
|
185
|
-
function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }) {
|
|
183
|
+
export function ForeignKeyModal({ isOpen, setIsOpen, override, foreignKey, tableName, }) {
|
|
186
184
|
return (_jsx(ModalPrimitive, { isOpen: isOpen, close: () => {
|
|
187
185
|
setIsOpen(false);
|
|
188
186
|
}, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '600px' }, children: [_jsx("h1", { style: {
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ButtonComponentProps, TextInputComponentProps, HeaderProps } from '@quillsql/react';
|
|
3
|
+
import { ColumnsByTable } from '../../utils/table';
|
|
4
|
+
interface CreateEditSqlViewProps {
|
|
5
|
+
containerStyle: React.CSSProperties;
|
|
6
|
+
initialSqlView?: {
|
|
7
|
+
id: string;
|
|
8
|
+
name: string;
|
|
9
|
+
query: string;
|
|
10
|
+
};
|
|
11
|
+
Button?: (props: ButtonComponentProps) => JSX.Element;
|
|
12
|
+
SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
|
|
13
|
+
TextInput?: (props: TextInputComponentProps) => JSX.Element;
|
|
14
|
+
LoadingComponent?: () => JSX.Element;
|
|
15
|
+
Header?: (props: HeaderProps) => JSX.Element;
|
|
16
|
+
closeEditView: () => void;
|
|
17
|
+
addEditView: (request: string, query: string, name?: string, id?: string) => void;
|
|
18
|
+
allTableData: ColumnsByTable[];
|
|
19
|
+
schemaIsLoading: boolean;
|
|
20
|
+
}
|
|
21
|
+
export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, LoadingComponent, Button, TextInput, Header, allTableData, schemaIsLoading, }: CreateEditSqlViewProps): JSX.Element;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=CreateEditSqlView.d.ts.map
|
|
@@ -0,0 +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,EAEZ,MAAM,iBAAiB,CAAC;AAwBzB,OAAO,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAK3D,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,CAuStC"}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { QuillTable } from '@quillsql/react';
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { useAdmin } from '../../AdminProvider';
|
|
5
|
+
import { getQueryFromAiWithConnection, getSqlViewData, } from '../../api/ConnectionClient';
|
|
6
|
+
import SqlTextEditor from '../../components/SqlTextEditor';
|
|
7
|
+
import { LoadingSpinner, MemoizedButton, MemoizedHeader, MemoizedTextInput, } from '../../components/UiComponents';
|
|
8
|
+
import { SchemaListComponent } from '@quillsql/react';
|
|
9
|
+
import { ForeignKeyModal } from '../client_onboard/CreateSqlViews';
|
|
10
|
+
import DynamicBanner from '../../components/DynamicBanner';
|
|
11
|
+
export default function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addEditView, SecondaryButtonComponent, LoadingComponent = () => _jsx(LoadingSpinner, {}), Button = MemoizedButton, TextInput = MemoizedTextInput, Header = MemoizedHeader, allTableData, schemaIsLoading, }) {
|
|
12
|
+
const [name, setName] = useState(initialSqlView?.name || '');
|
|
13
|
+
const [editViewQuery, setEditViewQuery] = useState(initialSqlView?.query || '');
|
|
14
|
+
const [ranViewQuery, setRanViewQuery] = useState(initialSqlView?.query || '');
|
|
15
|
+
const [askAIButton, setAskAIButton] = useState('Ask AI');
|
|
16
|
+
const [aiPrompt, setAIPrompt] = useState('');
|
|
17
|
+
const [runQueryButtonLabel, setRunQueryButtonLabel] = useState('Run query');
|
|
18
|
+
const [viewAddable, setViewAddable] = useState(false);
|
|
19
|
+
const [showFKModal, setShowFKModal] = useState(false);
|
|
20
|
+
const [overrideFKCheck, setOverrideFKCheck] = useState(false);
|
|
21
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
22
|
+
const [tableSearchQuery, setTableSearchQuery] = useState('');
|
|
23
|
+
const [displayedTableData, setDisplayedTableData] = useState(allTableData);
|
|
24
|
+
const [errorInfo, setErrorInfo] = useState({ show: false, message: '' });
|
|
25
|
+
const [tableData, setTableData] = useState(undefined);
|
|
26
|
+
const { state, dispatch } = useAdmin();
|
|
27
|
+
const addEditSqlView = async (override = false) => {
|
|
28
|
+
if (!override &&
|
|
29
|
+
tableData &&
|
|
30
|
+
!tableData.fields.find((col) => col.name === state.client.customerFieldName.replaceAll('"', ''))) {
|
|
31
|
+
setShowFKModal(true);
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined);
|
|
35
|
+
};
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
setDisplayedTableData(allTableData);
|
|
38
|
+
}, [allTableData]);
|
|
39
|
+
const handleRunSqlPrompt = async () => {
|
|
40
|
+
setErrorInfo({ show: false, message: '' });
|
|
41
|
+
setViewAddable(false);
|
|
42
|
+
setAskAIButton('Loading...');
|
|
43
|
+
const results = await getQueryFromAiWithConnection(aiPrompt, state.client._id, state.client.schemaNames);
|
|
44
|
+
setOverrideFKCheck(false);
|
|
45
|
+
setEditViewQuery(results);
|
|
46
|
+
setAskAIButton('Ask AI');
|
|
47
|
+
};
|
|
48
|
+
const handleRunQuery = async () => {
|
|
49
|
+
const query = editViewQuery;
|
|
50
|
+
// If this query has a limit at the end alert the user
|
|
51
|
+
if (query.toLowerCase().includes(' limit ')) {
|
|
52
|
+
setErrorInfo({
|
|
53
|
+
show: true,
|
|
54
|
+
message: 'Error: Please remove the limit on you query.',
|
|
55
|
+
});
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
setViewAddable(false);
|
|
59
|
+
setErrorInfo({ show: false, message: '' });
|
|
60
|
+
setTableData(undefined);
|
|
61
|
+
setIsLoading(true);
|
|
62
|
+
setRunQueryButtonLabel('Querying...');
|
|
63
|
+
setOverrideFKCheck(false);
|
|
64
|
+
if (editViewQuery.length === 0) {
|
|
65
|
+
setErrorInfo({ show: true, message: 'Error: Please enter a query.' });
|
|
66
|
+
setRunQueryButtonLabel('Run query');
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
const resp = await getSqlViewData(state.client._id, query, state.client.databaseType, state.queryEndpoint);
|
|
70
|
+
if (!resp.success) {
|
|
71
|
+
setErrorInfo({ show: true, message: resp.error });
|
|
72
|
+
setTableData(undefined);
|
|
73
|
+
setViewAddable(false);
|
|
74
|
+
setRunQueryButtonLabel('Run query');
|
|
75
|
+
setIsLoading(false);
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
setRunQueryButtonLabel('Run query');
|
|
79
|
+
setErrorInfo({ show: false, message: '' });
|
|
80
|
+
setTableData(resp);
|
|
81
|
+
setViewAddable(true);
|
|
82
|
+
setRanViewQuery(query);
|
|
83
|
+
setIsLoading(false);
|
|
84
|
+
};
|
|
85
|
+
return (_jsx("div", { style: {
|
|
86
|
+
...containerStyle,
|
|
87
|
+
gap: 6,
|
|
88
|
+
height: 'calc(100vh - 188px)',
|
|
89
|
+
}, children: _jsxs("div", { style: { display: 'flex', height: '100%', flexDirection: 'column' }, children: [_jsx(DynamicBanner, { header: initialSqlView
|
|
90
|
+
? `Edit "${initialSqlView.name}" view`
|
|
91
|
+
: 'Create SQL View', message: initialSqlView
|
|
92
|
+
? `You are currently editing the '${initialSqlView.name}' sql view.`
|
|
93
|
+
: '', onExit: closeEditView, style: {
|
|
94
|
+
display: 'flex',
|
|
95
|
+
paddingTop: '0.625rem',
|
|
96
|
+
paddingBottom: '0.625rem',
|
|
97
|
+
paddingLeft: '24px',
|
|
98
|
+
paddingRight: '24px',
|
|
99
|
+
alignItems: 'center',
|
|
100
|
+
backgroundColor: initialSqlView ? '#111827' : '#ffffff',
|
|
101
|
+
} }), _jsxs("div", { style: {
|
|
102
|
+
width: '100%',
|
|
103
|
+
display: 'flex',
|
|
104
|
+
height: '100%',
|
|
105
|
+
flexDirection: 'row',
|
|
106
|
+
paddingTop: '20px',
|
|
107
|
+
}, children: [_jsxs("div", { style: {
|
|
108
|
+
display: 'flex',
|
|
109
|
+
flexDirection: 'column',
|
|
110
|
+
gap: 20,
|
|
111
|
+
}, children: [_jsx("div", { style: {
|
|
112
|
+
paddingLeft: '20px',
|
|
113
|
+
paddingRight: '30px',
|
|
114
|
+
}, children: _jsx(TextInput, { placeholder: "Search...", onChange: (e) => {
|
|
115
|
+
setTableSearchQuery(e);
|
|
116
|
+
setDisplayedTableData(allTableData.filter((table) => table.tableName
|
|
117
|
+
.toLowerCase()
|
|
118
|
+
.includes(e.toLowerCase().trim())));
|
|
119
|
+
}, value: tableSearchQuery, id: 'edit-name', width: "100%" }) }), _jsx(SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px' })] }), _jsxs("div", { style: {
|
|
120
|
+
display: 'flex',
|
|
121
|
+
gap: 20,
|
|
122
|
+
flexDirection: 'column',
|
|
123
|
+
width: 'calc(100% - 250px)',
|
|
124
|
+
height: '100%',
|
|
125
|
+
overflowX: 'hidden',
|
|
126
|
+
paddingRight: '24px',
|
|
127
|
+
}, children: [_jsxs("div", { style: {
|
|
128
|
+
display: 'flex',
|
|
129
|
+
flexDirection: 'row',
|
|
130
|
+
alignItems: 'flex-start',
|
|
131
|
+
justifyContent: 'space-between',
|
|
132
|
+
gap: 20,
|
|
133
|
+
width: '100%',
|
|
134
|
+
}, children: [_jsx(TextInput, { onChange: (e) => {
|
|
135
|
+
setAIPrompt(e);
|
|
136
|
+
}, placeholder: 'Describe a query...', value: aiPrompt, id: 'ai-prompt', width: '95%' }), _jsx(Button, { label: askAIButton, onClick: handleRunSqlPrompt, width: "100px" })] }), _jsx(SqlTextEditor, { value: editViewQuery, setValue: (e) => {
|
|
137
|
+
setErrorInfo({ show: false, message: '' });
|
|
138
|
+
setEditViewQuery(e);
|
|
139
|
+
} }), _jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: runQueryButtonLabel, onClick: handleRunQuery }) }), errorInfo.show ? (_jsx("div", { style: {
|
|
140
|
+
fontSize: 15,
|
|
141
|
+
fontWeight: '400',
|
|
142
|
+
}, children: _jsx("div", { style: {
|
|
143
|
+
padding: 30,
|
|
144
|
+
background: 'rgba(0,0,0,0.02)',
|
|
145
|
+
display: 'inline-block',
|
|
146
|
+
flex: 0,
|
|
147
|
+
borderRadius: 6,
|
|
148
|
+
}, children: errorInfo.message }) })) : null, isLoading && (_jsx("div", { style: {
|
|
149
|
+
height: 'calc(100vh - 589px)',
|
|
150
|
+
width: '100%',
|
|
151
|
+
display: 'flex',
|
|
152
|
+
justifyContent: 'center',
|
|
153
|
+
alignItems: 'center',
|
|
154
|
+
}, children: _jsx(LoadingComponent, {}) })), tableData && (_jsx(QuillTable, { rows: tableData.rows, columns: tableData.fields, containerStyle: { height: '360px' } })), viewAddable && (_jsx("div", { style: { width: '200px' }, children: _jsx(Button, { label: `${initialSqlView ? 'Save changes' : 'Create view'}`, onClick: () => addEditSqlView(false) }) }))] })] }), _jsx(ForeignKeyModal, { isOpen: showFKModal, setIsOpen: setShowFKModal, override: addEditSqlView, foreignKey: state.client.customerFieldName, tableName: state.client.customerTableName })] }) }));
|
|
155
|
+
}
|
|
@@ -20,7 +20,7 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
|
|
|
20
20
|
const [selectedTable, setSelectedTable] = useState(null);
|
|
21
21
|
const [field, setField] = useState('');
|
|
22
22
|
useEffect(() => {
|
|
23
|
-
if (state.tables
|
|
23
|
+
if (state.tables?.length) {
|
|
24
24
|
setSelectedTable(state.tables[0]);
|
|
25
25
|
setField(state.tables[0].columns.map((elem) => elem.name)[0]);
|
|
26
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextInputPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextInputPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextInputPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmCzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { theme as defaultTheme } from '../Admin';
|
|
3
|
-
const TextInputPrimitive = ({ onChange, value, placeholder, theme = defaultTheme, disabled = false, }) => {
|
|
3
|
+
const TextInputPrimitive = ({ onChange, value, placeholder, theme = defaultTheme, disabled = false, width = '250px', }) => {
|
|
4
4
|
return (_jsx("input", { style: {
|
|
5
5
|
display: 'flex',
|
|
6
6
|
flexDirection: 'row',
|
|
@@ -9,7 +9,7 @@ const TextInputPrimitive = ({ onChange, value, placeholder, theme = defaultTheme
|
|
|
9
9
|
paddingRight: '12px',
|
|
10
10
|
fontWeight: 'medium',
|
|
11
11
|
height: 38,
|
|
12
|
-
minWidth:
|
|
12
|
+
minWidth: width,
|
|
13
13
|
boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
|
|
14
14
|
width: '100%',
|
|
15
15
|
backgroundColor: theme?.backgroundColor || 'white',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,
|
|
1
|
+
{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAqMA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from 'react';
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
3
|
import ConnectDatabase from '../forms/client_onboard/ConnectDatabase';
|
|
4
4
|
import StepDisplay from '../components/StepDisplay';
|
|
5
5
|
import ConnectSchema from '../forms/client_onboard/ConnectSchema';
|
|
6
6
|
import { useAdmin } from '../AdminProvider';
|
|
7
|
-
import {
|
|
7
|
+
import { getDatabaseConnectionFormat, } from '../utils/databases';
|
|
8
8
|
import CreateSQLViews from '../forms/client_onboard/CreateSqlViews';
|
|
9
9
|
import { getTableSchema } from '../api/ConnectionClient';
|
|
10
10
|
const header1Style = {
|
|
@@ -20,6 +20,7 @@ const header2Style = {
|
|
|
20
20
|
marginBottom: '6px',
|
|
21
21
|
};
|
|
22
22
|
export default function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
|
|
23
|
+
const parentRef = React.useRef(null);
|
|
23
24
|
const { state, dispatch } = useAdmin();
|
|
24
25
|
const domainName = state.domainName;
|
|
25
26
|
const [createEnvSteps, setCreateEnvSteps] = useState({
|
|
@@ -39,6 +40,7 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
|
|
|
39
40
|
open: false,
|
|
40
41
|
},
|
|
41
42
|
});
|
|
43
|
+
const [clientId, setClientId] = useState('');
|
|
42
44
|
const [environmentDetails, setEnvironmentDetails] = useState(getDatabaseConnectionFormat('PostgreSQL'));
|
|
43
45
|
const [allSchemaInfo, setAllSchemaInfo] = useState(undefined);
|
|
44
46
|
const [initialError, setInitialError] = useState();
|
|
@@ -70,7 +72,7 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
|
|
|
70
72
|
console.warn('navigateToDashboardManager is undefined');
|
|
71
73
|
}
|
|
72
74
|
}, [navigateToDashboardManager]);
|
|
73
|
-
return (_jsxs("div", { style: {
|
|
75
|
+
return (_jsxs("div", { ref: parentRef, style: {
|
|
74
76
|
...containerStyle,
|
|
75
77
|
display: 'flex',
|
|
76
78
|
flexDirection: 'column',
|
|
@@ -84,22 +86,23 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
|
|
|
84
86
|
borderRadius: 6,
|
|
85
87
|
border: '1px solid #e7e7e7',
|
|
86
88
|
boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
|
|
87
|
-
}, header1Style: header1Style, header2Style: header2Style, environmentDetails: environmentDetails, setEnvironmentDetails: (connectionInfo, initialSchemaRequest, initialSchemaRequestError) => {
|
|
89
|
+
}, header1Style: header1Style, header2Style: header2Style, environmentDetails: environmentDetails, setEnvironmentDetails: (connectionInfo, initialSchemaRequest, initialSchemaRequestError, clientId) => {
|
|
88
90
|
setEnvironmentDetails(connectionInfo);
|
|
89
91
|
if (initialSchemaRequestError) {
|
|
90
92
|
setInitialError(initialSchemaRequestError);
|
|
91
93
|
}
|
|
92
94
|
if (initialSchemaRequest) {
|
|
95
|
+
setClientId(clientId);
|
|
93
96
|
setAllSchemaInfo(initialSchemaRequest);
|
|
94
97
|
}
|
|
95
98
|
const updatedSteps = { ...createEnvSteps };
|
|
96
99
|
updatedSteps.connectDB.completed = true;
|
|
97
100
|
setCreateEnvSteps(updatedSteps);
|
|
98
101
|
openStep('connectSchema');
|
|
99
|
-
} })) : (_jsx(StepDisplay, { label: "Connect Database", completed: createEnvSteps.connectDB.completed, header1Style: header1Style, onClick: () => {
|
|
102
|
+
}, envClientId: clientId })) : (_jsx(StepDisplay, { label: "Connect Database", completed: createEnvSteps.connectDB.completed, header1Style: header1Style, onClick: () => {
|
|
100
103
|
openStep('connectDB');
|
|
101
104
|
setInitialError(undefined);
|
|
102
|
-
} })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { containerStyle: {
|
|
105
|
+
} })), createEnvSteps.connectSchema.open ? (_jsx(ConnectSchema, { parentRef: parentRef, containerStyle: {
|
|
103
106
|
padding: '24px',
|
|
104
107
|
// width: '50%',
|
|
105
108
|
borderRadius: 6,
|
|
@@ -109,12 +112,12 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
|
|
|
109
112
|
}, header1Style: header1Style, header2Style: header2Style, propogateSchemaDetails: async (schemaDetails) => {
|
|
110
113
|
const updatedSteps = { ...createEnvSteps };
|
|
111
114
|
updatedSteps.connectSchema.completed = true;
|
|
112
|
-
const tableSchemas = await getTableSchema(
|
|
115
|
+
const tableSchemas = await getTableSchema(clientId, schemaDetails?.tables, schemaDetails?.selectedFields?.schema);
|
|
113
116
|
setColumnsByTable(tableSchemas);
|
|
114
117
|
setCreateEnvSteps(updatedSteps);
|
|
115
118
|
setAllSchemaInfo(schemaDetails);
|
|
116
119
|
openStep('createSQLViews');
|
|
117
|
-
}, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
|
|
120
|
+
}, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError, clientId: clientId })) : (_jsx(StepDisplay, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
|
|
118
121
|
openStep('connectSchema');
|
|
119
122
|
setInitialError(undefined);
|
|
120
123
|
} })), createEnvSteps.createSQLViews.open ? (_jsx(CreateSQLViews, { containerStyle: {
|
|
@@ -131,5 +134,5 @@ export default function CreateEnvironment({ navigateToDashboardManager, containe
|
|
|
131
134
|
if (navigateToDashboardManager) {
|
|
132
135
|
navigateToDashboardManager();
|
|
133
136
|
}
|
|
134
|
-
}, domainName: domainName })) : (_jsx(StepDisplay, { label: "Create SQL Views", completed: false, header1Style: header1Style }))] }));
|
|
137
|
+
}, domainName: domainName, clientId: clientId, state: state })) : (_jsx(StepDisplay, { label: "Create SQL Views", completed: false, header1Style: header1Style }))] }));
|
|
135
138
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAS5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,EACd,SAAgB,GACjB,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CA0TA"}
|
|
@@ -6,6 +6,7 @@ import { EnvSelectPopover, OrgSelect } from '../components';
|
|
|
6
6
|
import { SQLEditor } from '@quillsql/react';
|
|
7
7
|
import { QUILL_SERVER } from '../utils/constants';
|
|
8
8
|
import Banner from '../components/Banner';
|
|
9
|
+
import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
|
|
9
10
|
export default function DashboardBuilder({ navigateToDashboardManager, containerStyle, sqlEditor = true, }) {
|
|
10
11
|
const parentRef = useRef(null);
|
|
11
12
|
const { state, dispatch } = useAdmin();
|
|
@@ -50,22 +51,30 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
|
|
|
50
51
|
}, [state.activeQuery]);
|
|
51
52
|
useEffect(() => {
|
|
52
53
|
let isSubscribed = true;
|
|
53
|
-
async function
|
|
54
|
+
async function getDashNames() {
|
|
54
55
|
// If you need to retrieve the JSON data from the response:
|
|
55
|
-
const
|
|
56
|
-
method: '
|
|
56
|
+
const response = await fetch(`${state.queryEndpoint}`, {
|
|
57
|
+
method: 'POST',
|
|
57
58
|
headers: {
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
...state.queryHeaders,
|
|
60
|
+
'Content-Type': 'application/json',
|
|
60
61
|
},
|
|
62
|
+
body: JSON.stringify({
|
|
63
|
+
metadata: {
|
|
64
|
+
clientId: state.client._id,
|
|
65
|
+
publicKey: state.client._id,
|
|
66
|
+
task: 'dashboards',
|
|
67
|
+
databaseType: state.client.databaseType,
|
|
68
|
+
},
|
|
69
|
+
}),
|
|
61
70
|
});
|
|
62
|
-
const
|
|
63
|
-
const dashNames =
|
|
71
|
+
const data = await response.json();
|
|
72
|
+
const dashNames = data.data.dashboardNames.filter((elem) => elem !== null);
|
|
64
73
|
setDashboardNames(dashNames);
|
|
65
74
|
setSelectedDashboardName(dashNames[0]);
|
|
66
75
|
}
|
|
67
76
|
if (isSubscribed) {
|
|
68
|
-
|
|
77
|
+
getDashNames();
|
|
69
78
|
}
|
|
70
79
|
return () => {
|
|
71
80
|
isSubscribed = false;
|
|
@@ -166,27 +175,32 @@ export default function DashboardBuilder({ navigateToDashboardManager, container
|
|
|
166
175
|
userSelect: 'none',
|
|
167
176
|
}, children: "Environment" }), _jsx(EnvSelectPopover, { setEnvironment: (env) => {
|
|
168
177
|
dispatch({ type: 'SET_ENVIRONMENT', payload: env });
|
|
169
|
-
}, environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: false })] }), _jsx(OrgSelect, { environment: state.environment, setEnvironment: (env) => {
|
|
178
|
+
}, environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: false })] }), !state.databaseTypeMismatch.show && (_jsx(OrgSelect, { environment: state.environment, setEnvironment: (env) => {
|
|
170
179
|
dispatch({ type: 'SET_ENVIRONMENT', payload: env });
|
|
171
180
|
}, organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => {
|
|
172
181
|
dispatch({ type: 'SET_ORGANIZATION_ID', payload: orgId });
|
|
173
|
-
}, theme: state.theme, parentRef: parentRef })] }) }), isEditActive && (_jsx(Banner, { onExit: () => {
|
|
182
|
+
}, theme: state.theme, parentRef: parentRef }))] }) }), isEditActive && (_jsx(Banner, { onExit: () => {
|
|
174
183
|
const msg = 'Are you sure you want to exit edit mode? Your changes will not be saved.';
|
|
175
184
|
if (!confirm(msg))
|
|
176
185
|
return;
|
|
177
186
|
dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
|
|
178
187
|
dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
|
|
179
|
-
} })), sqlEditor && (_jsx(SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
|
|
188
|
+
} })), state.databaseTypeMismatch.show && (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })), sqlEditor && !state.databaseTypeMismatch.show && (_jsx(SQLEditor, { chartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: query, isEditMode: !!state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', dashboardItem: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: () => {
|
|
180
189
|
dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
|
|
181
190
|
dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
|
|
182
191
|
if (state.navigateToDashboardManager) {
|
|
183
|
-
dispatch({
|
|
192
|
+
dispatch({
|
|
193
|
+
type: 'SET_ACTIVE_COMPONENT',
|
|
194
|
+
payload: 'Dashboards',
|
|
195
|
+
});
|
|
184
196
|
state.navigateToDashboardManager();
|
|
185
197
|
}
|
|
186
198
|
}, containerStyle: {
|
|
187
|
-
height: 'calc(100% -
|
|
199
|
+
height: 'calc(100% - 96px)',
|
|
188
200
|
width: '100%',
|
|
189
|
-
paddingRight: 25,
|
|
190
|
-
paddingTop: 25,
|
|
191
|
-
}
|
|
201
|
+
// paddingRight: 25,
|
|
202
|
+
// paddingTop: 25,
|
|
203
|
+
}, organizationName: state.organizations.find((org) => {
|
|
204
|
+
return (org.id && String(org.id) === String(state.organizationId));
|
|
205
|
+
})?.name }))] }) }));
|
|
192
206
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DashboardManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAgCnE,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAkkBA"}
|