@quillsql/admin 1.4.0 → 1.6.0

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.
Files changed (149) hide show
  1. package/dist/cjs/Admin.d.ts +23 -73
  2. package/dist/cjs/Admin.d.ts.map +1 -1
  3. package/dist/cjs/Admin.js +221 -970
  4. package/dist/cjs/AdminProvider.d.ts +1 -12
  5. package/dist/cjs/AdminProvider.d.ts.map +1 -1
  6. package/dist/cjs/AdminProvider.js +24 -18
  7. package/dist/cjs/api/ConnectionClient.d.ts +11 -0
  8. package/dist/cjs/api/ConnectionClient.d.ts.map +1 -1
  9. package/dist/cjs/api/ConnectionClient.js +84 -10
  10. package/dist/cjs/components/DropDownMenu.js +1 -1
  11. package/dist/cjs/components/DropDownMenuWithLabel.d.ts.map +1 -1
  12. package/dist/cjs/components/DropDownMenuWithLabel.js +16 -54
  13. package/dist/cjs/components/OrgSelect.d.ts.map +1 -1
  14. package/dist/cjs/components/OrgSelect.js +10 -20
  15. package/dist/cjs/components/QuillSelect.d.ts +3 -0
  16. package/dist/cjs/components/QuillSelect.d.ts.map +1 -0
  17. package/dist/cjs/components/QuillSelect.js +137 -0
  18. package/dist/cjs/components/SegmentedControl.d.ts +7 -0
  19. package/dist/cjs/components/SegmentedControl.d.ts.map +1 -0
  20. package/dist/cjs/components/SegmentedControl.js +54 -0
  21. package/dist/cjs/components/UiComponents.d.ts +18 -29
  22. package/dist/cjs/components/UiComponents.d.ts.map +1 -1
  23. package/dist/cjs/components/UiComponents.js +40 -83
  24. package/dist/cjs/forms/client_onboard/ConnectSchema.d.ts +2 -1
  25. package/dist/cjs/forms/client_onboard/ConnectSchema.d.ts.map +1 -1
  26. package/dist/cjs/forms/client_onboard/ConnectSchema.js +143 -68
  27. package/dist/cjs/forms/client_onboard/CreateSqlViews.d.ts.map +1 -1
  28. package/dist/cjs/forms/client_onboard/CreateSqlViews.js +40 -11
  29. package/dist/cjs/forms/sql_views/CreateEditSqlView.d.ts +7 -4
  30. package/dist/cjs/forms/sql_views/CreateEditSqlView.d.ts.map +1 -1
  31. package/dist/cjs/forms/sql_views/CreateEditSqlView.js +36 -20
  32. package/dist/cjs/hooks/useOnClickOutside.d.ts +3 -0
  33. package/dist/cjs/hooks/useOnClickOutside.d.ts.map +1 -0
  34. package/dist/cjs/hooks/useOnClickOutside.js +20 -0
  35. package/dist/cjs/modals/EditFiltersModal.d.ts +17 -0
  36. package/dist/cjs/modals/EditFiltersModal.d.ts.map +1 -0
  37. package/dist/cjs/modals/EditFiltersModal.js +345 -0
  38. package/dist/cjs/modals/NewDashboardModal.d.ts +1 -3
  39. package/dist/cjs/modals/NewDashboardModal.d.ts.map +1 -1
  40. package/dist/cjs/modals/NewDashboardModal.js +63 -46
  41. package/dist/cjs/modals/PromoteDashModal.d.ts.map +1 -1
  42. package/dist/cjs/modals/PromoteDashModal.js +10 -3
  43. package/dist/cjs/modals/ReorderDashboardModal.d.ts.map +1 -1
  44. package/dist/cjs/modals/ReorderDashboardModal.js +202 -90
  45. package/dist/cjs/modals/index.d.ts +0 -1
  46. package/dist/cjs/modals/index.d.ts.map +1 -1
  47. package/dist/cjs/modals/index.js +1 -3
  48. package/dist/cjs/primitives/ButtonPrimitive.d.ts +3 -1
  49. package/dist/cjs/primitives/ButtonPrimitive.d.ts.map +1 -1
  50. package/dist/cjs/primitives/ButtonPrimitive.js +5 -3
  51. package/dist/cjs/primitives/ModalPrimitive.d.ts.map +1 -1
  52. package/dist/cjs/primitives/ModalPrimitive.js +1 -2
  53. package/dist/cjs/primitives/TogglePrimitive.js +5 -5
  54. package/dist/cjs/public_components/CreateEnvironment.d.ts.map +1 -1
  55. package/dist/cjs/public_components/CreateEnvironment.js +1 -1
  56. package/dist/cjs/public_components/DashboardBuilder.d.ts.map +1 -1
  57. package/dist/cjs/public_components/DashboardBuilder.js +127 -30
  58. package/dist/cjs/public_components/DashboardManager.d.ts.map +1 -1
  59. package/dist/cjs/public_components/DashboardManager.js +161 -193
  60. package/dist/cjs/public_components/SQLViewManager.d.ts.map +1 -1
  61. package/dist/cjs/public_components/SQLViewManager.js +92 -24
  62. package/dist/cjs/utils/constants.d.ts +4 -4
  63. package/dist/cjs/utils/constants.js +2 -2
  64. package/dist/cjs/utils/schema.d.ts +6 -0
  65. package/dist/cjs/utils/schema.d.ts.map +1 -1
  66. package/dist/cjs/utils/table.d.ts +1 -0
  67. package/dist/cjs/utils/table.d.ts.map +1 -1
  68. package/dist/cjs/utils/table.js +13 -0
  69. package/dist/cjs/utils/textProcessing.d.ts +2 -0
  70. package/dist/cjs/utils/textProcessing.d.ts.map +1 -0
  71. package/dist/cjs/utils/textProcessing.js +9 -0
  72. package/dist/esm/Admin.d.ts +23 -73
  73. package/dist/esm/Admin.d.ts.map +1 -1
  74. package/dist/esm/Admin.js +225 -964
  75. package/dist/esm/AdminProvider.d.ts +1 -12
  76. package/dist/esm/AdminProvider.d.ts.map +1 -1
  77. package/dist/esm/AdminProvider.js +25 -19
  78. package/dist/esm/api/ConnectionClient.d.ts +11 -0
  79. package/dist/esm/api/ConnectionClient.d.ts.map +1 -1
  80. package/dist/esm/api/ConnectionClient.js +82 -9
  81. package/dist/esm/components/DropDownMenu.js +1 -1
  82. package/dist/esm/components/DropDownMenuWithLabel.d.ts.map +1 -1
  83. package/dist/esm/components/DropDownMenuWithLabel.js +16 -54
  84. package/dist/esm/components/OrgSelect.d.ts.map +1 -1
  85. package/dist/esm/components/OrgSelect.js +6 -19
  86. package/dist/esm/components/QuillSelect.d.ts +3 -0
  87. package/dist/esm/components/QuillSelect.d.ts.map +1 -0
  88. package/dist/esm/components/QuillSelect.js +130 -0
  89. package/dist/esm/components/SegmentedControl.d.ts +7 -0
  90. package/dist/esm/components/SegmentedControl.d.ts.map +1 -0
  91. package/dist/esm/components/SegmentedControl.js +50 -0
  92. package/dist/esm/components/UiComponents.d.ts +18 -29
  93. package/dist/esm/components/UiComponents.d.ts.map +1 -1
  94. package/dist/esm/components/UiComponents.js +37 -82
  95. package/dist/esm/forms/client_onboard/ConnectSchema.d.ts +2 -1
  96. package/dist/esm/forms/client_onboard/ConnectSchema.d.ts.map +1 -1
  97. package/dist/esm/forms/client_onboard/ConnectSchema.js +145 -70
  98. package/dist/esm/forms/client_onboard/CreateSqlViews.d.ts.map +1 -1
  99. package/dist/esm/forms/client_onboard/CreateSqlViews.js +41 -12
  100. package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts +7 -4
  101. package/dist/esm/forms/sql_views/CreateEditSqlView.d.ts.map +1 -1
  102. package/dist/esm/forms/sql_views/CreateEditSqlView.js +38 -22
  103. package/dist/esm/hooks/useOnClickOutside.d.ts +3 -0
  104. package/dist/esm/hooks/useOnClickOutside.d.ts.map +1 -0
  105. package/dist/esm/hooks/useOnClickOutside.js +18 -0
  106. package/dist/esm/modals/EditFiltersModal.d.ts +17 -0
  107. package/dist/esm/modals/EditFiltersModal.d.ts.map +1 -0
  108. package/dist/esm/modals/EditFiltersModal.js +338 -0
  109. package/dist/esm/modals/NewDashboardModal.d.ts +1 -3
  110. package/dist/esm/modals/NewDashboardModal.d.ts.map +1 -1
  111. package/dist/esm/modals/NewDashboardModal.js +63 -46
  112. package/dist/esm/modals/PromoteDashModal.d.ts.map +1 -1
  113. package/dist/esm/modals/PromoteDashModal.js +10 -3
  114. package/dist/esm/modals/ReorderDashboardModal.d.ts.map +1 -1
  115. package/dist/esm/modals/ReorderDashboardModal.js +201 -89
  116. package/dist/esm/modals/index.d.ts +0 -1
  117. package/dist/esm/modals/index.d.ts.map +1 -1
  118. package/dist/esm/modals/index.js +0 -1
  119. package/dist/esm/primitives/ButtonPrimitive.d.ts +3 -1
  120. package/dist/esm/primitives/ButtonPrimitive.d.ts.map +1 -1
  121. package/dist/esm/primitives/ButtonPrimitive.js +5 -3
  122. package/dist/esm/primitives/ModalPrimitive.d.ts.map +1 -1
  123. package/dist/esm/primitives/ModalPrimitive.js +1 -2
  124. package/dist/esm/primitives/TogglePrimitive.js +5 -5
  125. package/dist/esm/public_components/CreateEnvironment.d.ts.map +1 -1
  126. package/dist/esm/public_components/CreateEnvironment.js +1 -1
  127. package/dist/esm/public_components/DashboardBuilder.d.ts.map +1 -1
  128. package/dist/esm/public_components/DashboardBuilder.js +128 -31
  129. package/dist/esm/public_components/DashboardManager.d.ts.map +1 -1
  130. package/dist/esm/public_components/DashboardManager.js +163 -195
  131. package/dist/esm/public_components/SQLViewManager.d.ts.map +1 -1
  132. package/dist/esm/public_components/SQLViewManager.js +92 -24
  133. package/dist/esm/utils/constants.d.ts +4 -4
  134. package/dist/esm/utils/constants.js +2 -2
  135. package/dist/esm/utils/schema.d.ts +6 -0
  136. package/dist/esm/utils/schema.d.ts.map +1 -1
  137. package/dist/esm/utils/table.d.ts +1 -0
  138. package/dist/esm/utils/table.d.ts.map +1 -1
  139. package/dist/esm/utils/table.js +11 -1
  140. package/dist/esm/utils/textProcessing.d.ts +2 -0
  141. package/dist/esm/utils/textProcessing.d.ts.map +1 -0
  142. package/dist/esm/utils/textProcessing.js +5 -0
  143. package/package.json +1 -1
  144. package/dist/cjs/modals/EditDashboardsModal.d.ts +0 -20
  145. package/dist/cjs/modals/EditDashboardsModal.d.ts.map +0 -1
  146. package/dist/cjs/modals/EditDashboardsModal.js +0 -94
  147. package/dist/esm/modals/EditDashboardsModal.d.ts +0 -20
  148. package/dist/esm/modals/EditDashboardsModal.d.ts.map +0 -1
  149. package/dist/esm/modals/EditDashboardsModal.js +0 -91
@@ -8,10 +8,36 @@ const react_1 = require("react");
8
8
  const primitives_1 = require("../../primitives");
9
9
  const DropDownMenuWithLabel_1 = __importDefault(require("../../components/DropDownMenuWithLabel"));
10
10
  const ConnectionClient_1 = require("../../api/ConnectionClient");
11
- function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }) {
11
+ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, state, }) {
12
12
  const [schemaDetails, setSchemaDetails] = (0, react_1.useState)(allSchemaInfo);
13
13
  const [schemaError, setSchemaError] = (0, react_1.useState)(initialError);
14
14
  const [formError, setFormError] = (0, react_1.useState)({ show: false, message: '' });
15
+ const [runQueryButtonLabel, setRunQueryButtonLabel] = (0, react_1.useState)('Run query');
16
+ const [errorInfo, setErrorInfo] = (0, react_1.useState)({ status: false, msg: '' });
17
+ const [customerViewQuery, setCustomerViewQuery] = (0, react_1.useState)('');
18
+ const handleQuerySuccess = async (getSqlResults) => {
19
+ const processedResults = await (0, ConnectionClient_1.processCustomerOrgViewQuery)(customerViewQuery, allSchemaInfo?.selectedFields.schema || '', clientId);
20
+ if (processedResults.success === false) {
21
+ setErrorInfo({
22
+ status: true,
23
+ msg: processedResults.message || 'Failed to process the query.',
24
+ });
25
+ return;
26
+ }
27
+ setSchemaDetails({
28
+ ...schemaDetails,
29
+ // @ts-ignore
30
+ selectedFields: {
31
+ ...schemaDetails?.selectedFields,
32
+ table: processedResults.table,
33
+ organizationIdField: 'id',
34
+ customerNameField: 'name',
35
+ customerView: customerViewQuery,
36
+ },
37
+ customQueryFKs: processedResults.fkInfo,
38
+ customQueryOrganizations: getSqlResults.rows,
39
+ });
40
+ };
15
41
  return ((0, jsx_runtime_1.jsxs)("div", { style: { ...containerStyle }, id: "connect-database-form", children: [(0, jsx_runtime_1.jsx)("h1", { style: header1Style, children: "Select Organization Table" }), (0, jsx_runtime_1.jsx)("h2", { style: header2Style, children: "Select which table you use for organizations (your customers). Quill uses this table to partition data by organization." }), (0, jsx_runtime_1.jsxs)("div", { style: {
16
42
  marginTop: 16,
17
43
  width: '100%',
@@ -65,92 +91,141 @@ function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaIn
65
91
  else {
66
92
  setSchemaError(suspectedSchema);
67
93
  }
68
- } }))] }), schemaDetails?.tables && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { gap: 16 }, id: "database-details-form", children: (0, jsx_runtime_1.jsxs)("div", {
69
- // style={{
70
- // display: 'flex',
71
- // flexWrap: 'wrap',
72
- // width: '100%',
73
- // gap: '16px',
74
- // }}
75
- style: {
76
- display: 'grid',
77
- gridTemplateColumns: 'repeat(3, 1fr)',
78
- gap: '20px',
79
- justifyContent: 'space-between',
80
- marginTop: '8px',
81
- }, children: [(0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
82
- const columns = await (0, ConnectionClient_1.getTableInfo)(clientId, schemaDetails?.selectedFields?.schema, e);
83
- setSchemaDetails({
84
- ...schemaDetails,
85
- columns: columns.columns,
86
- foreignKeys: [],
87
- organizations: [],
88
- selectedFields: {
89
- schema: schemaDetails?.selectedFields?.schema,
90
- table: e,
91
- },
92
- });
93
- }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
94
- const fkStrings = await (0, ConnectionClient_1.getFKInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
95
- if (schemaDetails?.selectedFields.customerNameField) {
96
- const organizations = await (0, ConnectionClient_1.getOrgInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
94
+ } }))] }), schemaDetails?.tables && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { gap: 16 }, id: "database-details-form", children: [(0, jsx_runtime_1.jsxs)("div", {
95
+ // style={{
96
+ // display: 'flex',
97
+ // flexWrap: 'wrap',
98
+ // width: '100%',
99
+ // gap: '16px',
100
+ // }}
101
+ style: {
102
+ display: 'grid',
103
+ gridTemplateColumns: 'repeat(3, 1fr)',
104
+ gap: '20px',
105
+ justifyContent: 'space-between',
106
+ marginTop: '8px',
107
+ }, children: [(0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.tables || [], setSelected: async (e) => {
108
+ const columns = await (0, ConnectionClient_1.getTableInfo)(clientId, schemaDetails?.selectedFields?.schema, e);
97
109
  setSchemaDetails({
98
110
  ...schemaDetails,
99
- organizations: organizations,
111
+ columns: columns.columns,
112
+ foreignKeys: [],
113
+ organizations: [],
114
+ selectedFields: {
115
+ schema: schemaDetails?.selectedFields?.schema,
116
+ table: e,
117
+ },
118
+ });
119
+ }, selected: schemaDetails?.selectedFields?.table, label: 'Organization table' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
120
+ const fkStrings = await (0, ConnectionClient_1.getFKInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e);
121
+ if (schemaDetails?.selectedFields.customerNameField) {
122
+ const organizations = await (0, ConnectionClient_1.getOrgInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, e, schemaDetails?.selectedFields.customerNameField);
123
+ setSchemaDetails({
124
+ ...schemaDetails,
125
+ organizations: organizations,
126
+ selectedFields: {
127
+ ...schemaDetails?.selectedFields,
128
+ organizationIdField: e,
129
+ },
130
+ });
131
+ }
132
+ setSchemaDetails({
133
+ ...schemaDetails,
134
+ foreignKeys: fkStrings,
100
135
  selectedFields: {
101
136
  ...schemaDetails?.selectedFields,
102
137
  organizationIdField: e,
103
138
  },
104
139
  });
105
- }
106
- setSchemaDetails({
107
- ...schemaDetails,
108
- foreignKeys: fkStrings,
109
- selectedFields: {
110
- ...schemaDetails?.selectedFields,
111
- organizationIdField: e,
112
- },
113
- });
114
- }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
115
- if (schemaDetails?.selectedFields.organizationIdField) {
116
- const organizations = await (0, ConnectionClient_1.getOrgInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
140
+ }, selected: schemaDetails?.selectedFields?.organizationIdField, label: 'Organization ID field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.columns || [], setSelected: async (e) => {
141
+ if (schemaDetails?.selectedFields.organizationIdField) {
142
+ const organizations = await (0, ConnectionClient_1.getOrgInfo)(clientId, schemaDetails?.selectedFields?.schema, schemaDetails?.selectedFields?.table, schemaDetails?.selectedFields.organizationIdField, e);
143
+ setSchemaDetails({
144
+ ...schemaDetails,
145
+ organizations: organizations,
146
+ selectedFields: {
147
+ ...schemaDetails?.selectedFields,
148
+ customerNameField: e,
149
+ },
150
+ });
151
+ }
152
+ else {
153
+ setSchemaDetails({
154
+ ...schemaDetails,
155
+ selectedFields: {
156
+ ...schemaDetails?.selectedFields,
157
+ customerNameField: e,
158
+ },
159
+ });
160
+ }
161
+ }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
162
+ [], setSelected: async (e) => {
163
+ const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
117
164
  setSchemaDetails({
118
165
  ...schemaDetails,
119
- organizations: organizations,
120
166
  selectedFields: {
121
167
  ...schemaDetails?.selectedFields,
122
- customerNameField: e,
168
+ defaultOrg: orgObj,
123
169
  },
124
170
  });
125
- }
126
- else {
171
+ }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
127
172
  setSchemaDetails({
128
173
  ...schemaDetails,
129
174
  selectedFields: {
130
175
  ...schemaDetails?.selectedFields,
131
- customerNameField: e,
176
+ foreignKey: e,
132
177
  },
133
178
  });
134
- }
135
- }, selected: schemaDetails?.selectedFields?.customerNameField, label: 'Organization name field' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.organizations?.map((orgObj) => orgObj.name) ||
136
- [], setSelected: async (e) => {
137
- const orgObj = schemaDetails?.organizations?.find((orgObj) => orgObj.name === e);
138
- setSchemaDetails({
139
- ...schemaDetails,
140
- selectedFields: {
141
- ...schemaDetails?.selectedFields,
142
- defaultOrg: orgObj,
143
- },
144
- });
145
- }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.foreignKeys || [], setSelected: async (e) => {
146
- setSchemaDetails({
147
- ...schemaDetails,
148
- selectedFields: {
149
- ...schemaDetails?.selectedFields,
150
- foreignKey: e,
151
- },
152
- });
153
- }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
179
+ }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
180
+ ...header1Style,
181
+ textAlign: 'center',
182
+ fontSize: 14,
183
+ color: '#565656',
184
+ display: 'flex',
185
+ flexDirection: 'row',
186
+ alignItems: 'center',
187
+ paddingTop: 24,
188
+ paddingBottom: 0,
189
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 12 }, children: "or" }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 1, background: '#e7e7e7' } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { style: { ...header2Style, fontWeight: 600, color: "#6e6e6e" }, children: "Customer Organization View" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
190
+ setCustomerViewQuery(e.target.value);
191
+ }, value: customerViewQuery }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
192
+ setRunQueryButtonLabel('Querying...');
193
+ const getSqlResults = await (0, ConnectionClient_1.getSqlViewData)(clientId, customerViewQuery, environmentDetails.type, state.queryEndpoint);
194
+ if (!getSqlResults.success) {
195
+ setErrorInfo({
196
+ status: true,
197
+ msg: getSqlResults.error,
198
+ });
199
+ }
200
+ else {
201
+ setErrorInfo({ status: false, msg: '' });
202
+ handleQuerySuccess(getSqlResults);
203
+ }
204
+ setRunQueryButtonLabel('Run query');
205
+ },
206
+ // dont let the font wrap
207
+ style: { whiteSpace: 'nowrap' } })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.customQueryOrganizations?.map((orgObj) => orgObj.name) || [], setSelected: async (e) => {
208
+ const orgObj = schemaDetails?.customQueryOrganizations?.find((orgObj) => orgObj.name === e);
209
+ setSchemaDetails({
210
+ ...schemaDetails,
211
+ selectedFields: {
212
+ ...schemaDetails?.selectedFields,
213
+ defaultOrg: orgObj,
214
+ },
215
+ });
216
+ }, selected: schemaDetails?.selectedFields?.defaultOrg?.name, label: 'Default organization' }), (0, jsx_runtime_1.jsx)(DropDownMenuWithLabel_1.default, { parentRef: parentRef, items: schemaDetails?.customQueryFKs || [], setSelected: async (e) => {
217
+ setSchemaDetails({
218
+ ...schemaDetails,
219
+ selectedFields: {
220
+ ...schemaDetails?.selectedFields,
221
+ foreignKey: e,
222
+ },
223
+ });
224
+ }, selected: schemaDetails?.selectedFields?.foreignKey, label: 'Foreign key' })] }), errorInfo.status ? ((0, jsx_runtime_1.jsx)("h2", { style: {
225
+ ...header2Style,
226
+ color: 'red',
227
+ paddingTop: '12px',
228
+ }, children: errorInfo.msg })) : ((0, jsx_runtime_1.jsx)("div", {}))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
154
229
  width: '100%',
155
230
  display: 'flex',
156
231
  justifyContent: 'space-between',
@@ -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;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
+ {"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;AAY3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAwB,MAAM,uBAAuB,CAAC;AAS7E,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,2CA0ZA;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"}
@@ -11,6 +11,7 @@ const ConnectionClient_1 = require("../../api/ConnectionClient");
11
11
  const SqlViewTile_1 = __importDefault(require("../../components/SqlViewTile"));
12
12
  const SqlTextEditor_1 = __importDefault(require("../../components/SqlTextEditor"));
13
13
  const react_2 = require("@quillsql/react");
14
+ const UiComponents_1 = require("../../components/UiComponents");
14
15
  function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByTable, environmentDetails, allSchemaInfo, domainName, completeOnboarding, clientId, state, }) {
15
16
  const [selectedTable, setSelectedTable] = (0, react_1.useState)(undefined);
16
17
  const [queryInfo, setQueryInfo] = (0, react_1.useState)({
@@ -23,9 +24,11 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
23
24
  const [tableData, setTableData] = (0, react_1.useState)(undefined);
24
25
  const [client, setClient] = (0, react_1.useState)(undefined);
25
26
  const [sqlTables, setSqlTables] = (0, react_1.useState)([]);
26
- const [askAIButton, setAskAIButton] = (0, react_1.useState)('Ask AI');
27
- const [runQueryButtonLabel, setRunQueryButtonLabel] = (0, react_1.useState)('Run query');
27
+ const [askAIButtonLoading, setAskAIButtonLoading] = (0, react_1.useState)(false);
28
+ const [runQueryButtonLoading, setRunQueryButtonLoading] = (0, react_1.useState)(false);
28
29
  const [showFKModal, setShowFKModal] = (0, react_1.useState)(false);
30
+ const [tableSearchQuery, setTableSearchQuery] = (0, react_1.useState)('');
31
+ const [displayedTableData, setDisplayedTableData] = (0, react_1.useState)(columnsByTable);
29
32
  const addSqlView = async (override) => {
30
33
  const results = await (0, ConnectionClient_1.createSQLView)(environmentDetails, allSchemaInfo, columnsByTable, queryInfo, client, domainName, tableData, sqlTables.map((e) => {
31
34
  return e.name;
@@ -43,6 +46,15 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
43
46
  setSqlQueryInfo({ msg: results.message, status: true });
44
47
  }
45
48
  };
49
+ const handleClickSchemaItem = async (event) => {
50
+ const name = event.target.textContent;
51
+ if (queryInfo.query && queryInfo.query.length > 0) {
52
+ await navigator.clipboard.writeText(name || '');
53
+ }
54
+ else {
55
+ setQueryInfo({ name: queryInfo.name, query: `SELECT * FROM ${name}` });
56
+ }
57
+ };
46
58
  (0, react_1.useEffect)(() => {
47
59
  window.scrollTo({
48
60
  behavior: 'smooth',
@@ -64,7 +76,24 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
64
76
  flexDirection: 'row',
65
77
  borderTop: 'solid 1px #e7e7e7',
66
78
  height: 'calc(100vh - 143px)',
67
- }, children: [(0, jsx_runtime_1.jsxs)("div", { id: "form-editor-table", style: {
79
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
80
+ display: 'flex',
81
+ flexDirection: 'column',
82
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
83
+ paddingLeft: '20px',
84
+ paddingRight: '30px',
85
+ height: 70,
86
+ minHeight: 70,
87
+ display: 'flex',
88
+ alignItems: 'center',
89
+ }, children: (0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { placeholder: "Search...",
90
+ // @ts-ignore
91
+ onChange: (e) => {
92
+ setTableSearchQuery(e.target.value);
93
+ setDisplayedTableData(columnsByTable.filter((table) => table.tableName
94
+ .toLowerCase()
95
+ .includes(e.target.value.toLowerCase().trim())));
96
+ }, value: tableSearchQuery, width: "100%" }) }), (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: {
68
97
  display: 'flex',
69
98
  flexDirection: 'column',
70
99
  width: 'calc(100% - 300px)',
@@ -79,13 +108,13 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
79
108
  height: 70,
80
109
  }, children: [(0, jsx_runtime_1.jsx)(primitives_1.TextInputPrimitive, { onChange: (e) => {
81
110
  setAIPrompt(e.target.value);
82
- }, placeholder: 'Describe a query...', value: aiPrompt }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: askAIButton, onClick: async () => {
83
- setAskAIButton('Loading...');
111
+ }, placeholder: 'Describe a query...', value: aiPrompt }), (0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Ask AI', isLoading: askAIButtonLoading, onClick: async () => {
112
+ setAskAIButtonLoading(true);
84
113
  const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(aiPrompt, clientId, allSchemaInfo?.selectedFields.schema
85
114
  ? [allSchemaInfo?.selectedFields.schema]
86
115
  : undefined);
87
116
  setQueryInfo({ name: queryInfo.name, query: results });
88
- setAskAIButton('Ask AI');
117
+ setAskAIButtonLoading(false);
89
118
  }, style: { width: '90px' } })] }), (0, jsx_runtime_1.jsx)(SqlTextEditor_1.default, { value: queryInfo.query, setValue: (e) => {
90
119
  setQueryInfo({ name: queryInfo.name, query: e });
91
120
  }, containerStyle: { paddingLeft: 16, paddingRight: 16 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
@@ -96,8 +125,8 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
96
125
  paddingLeft: 16,
97
126
  paddingRight: 16,
98
127
  height: 70,
99
- }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: runQueryButtonLabel, onClick: async () => {
100
- setRunQueryButtonLabel('Querying...');
128
+ }, children: [(0, jsx_runtime_1.jsx)(primitives_1.ButtonPrimitive, { label: 'Run query', onClick: async () => {
129
+ setRunQueryButtonLoading(true);
101
130
  const getSqlResults = await (0, ConnectionClient_1.getSqlViewData)(clientId, queryInfo.query, environmentDetails.type, state.queryEndpoint);
102
131
  if (!getSqlResults.success) {
103
132
  setErrorInfo({ status: true, msg: getSqlResults.error });
@@ -106,7 +135,7 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
106
135
  setErrorInfo({ status: false, msg: '' });
107
136
  setTableData(getSqlResults);
108
137
  }
109
- setRunQueryButtonLabel('Run query');
138
+ setRunQueryButtonLoading(false);
110
139
  } }), errorInfo.status ? ((0, jsx_runtime_1.jsx)("h2", { style: {
111
140
  ...header2Style,
112
141
  color: 'red',
@@ -116,10 +145,10 @@ function CreateSQLViews({ containerStyle, header1Style, header2Style, columnsByT
116
145
  paddingLeft: 16,
117
146
  paddingRight: 16,
118
147
  height: 'calc(100vh - 515px)',
119
- }, children: [(0, jsx_runtime_1.jsx)(react_2.QuillTable, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
148
+ }, children: [(0, jsx_runtime_1.jsx)(react_2.Table, { rows: tableData.rows, columns: tableData.fields, containerStyle: {
120
149
  height: 'calc(100vh - 589px)',
121
150
  width: '100%',
122
- }, showDownloadCSVButton: true }), (0, jsx_runtime_1.jsxs)("div", { style: {
151
+ }, hideCSVDownloadButton: true }), (0, jsx_runtime_1.jsxs)("div", { style: {
123
152
  width: '100%',
124
153
  display: 'flex',
125
154
  justifyContent: 'space-between',
@@ -1,5 +1,6 @@
1
- /// <reference types="react" />
2
- import { ButtonComponentProps, TextInputComponentProps, HeaderProps } from '@quillsql/react';
1
+ import { ButtonComponentProps } from '@quillsql/react';
2
+ import { ReactNode } from 'react';
3
+ import { TextInputComponentProps } from '../../components/UiComponents';
3
4
  import { ColumnsByTable } from '../../utils/table';
4
5
  interface CreateEditSqlViewProps {
5
6
  containerStyle: React.CSSProperties;
@@ -12,9 +13,11 @@ interface CreateEditSqlViewProps {
12
13
  SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
13
14
  TextInput?: (props: TextInputComponentProps) => JSX.Element;
14
15
  LoadingComponent?: () => JSX.Element;
15
- Header?: (props: HeaderProps) => JSX.Element;
16
+ Header?: (props: {
17
+ children: ReactNode;
18
+ }) => JSX.Element;
16
19
  closeEditView: () => void;
17
- addEditView: (request: string, query: string, name?: string, id?: string) => void;
20
+ addEditView: (request: string, query: string, name?: string, id?: string, columns?: any[]) => void;
18
21
  allTableData: ColumnsByTable[];
19
22
  schemaIsLoading: boolean;
20
23
  }
@@ -1 +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"}
1
+ {"version":3,"file":"CreateEditSqlView.d.ts","sourceRoot":"","sources":["../../../../src/forms/sql_views/CreateEditSqlView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAKrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AASf,OAAO,EAML,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AAEvC,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;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,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,CAgUtC"}
@@ -10,16 +10,15 @@ const AdminProvider_1 = require("../../AdminProvider");
10
10
  const ConnectionClient_1 = require("../../api/ConnectionClient");
11
11
  const SqlTextEditor_1 = __importDefault(require("../../components/SqlTextEditor"));
12
12
  const UiComponents_1 = require("../../components/UiComponents");
13
- const react_3 = require("@quillsql/react");
14
13
  const CreateSqlViews_1 = require("../client_onboard/CreateSqlViews");
15
14
  const DynamicBanner_1 = __importDefault(require("../../components/DynamicBanner"));
16
15
  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, }) {
17
16
  const [name, setName] = (0, react_2.useState)(initialSqlView?.name || '');
18
17
  const [editViewQuery, setEditViewQuery] = (0, react_2.useState)(initialSqlView?.query || '');
19
18
  const [ranViewQuery, setRanViewQuery] = (0, react_2.useState)(initialSqlView?.query || '');
20
- const [askAIButton, setAskAIButton] = (0, react_2.useState)('Ask AI');
19
+ const [askAIButtonLoading, setAskAIButtonLoading] = (0, react_2.useState)(false);
20
+ const [runQueryButtonLoading, setRunQueryButtonLoading] = (0, react_2.useState)(false);
21
21
  const [aiPrompt, setAIPrompt] = (0, react_2.useState)('');
22
- const [runQueryButtonLabel, setRunQueryButtonLabel] = (0, react_2.useState)('Run query');
23
22
  const [viewAddable, setViewAddable] = (0, react_2.useState)(false);
24
23
  const [showFKModal, setShowFKModal] = (0, react_2.useState)(false);
25
24
  const [overrideFKCheck, setOverrideFKCheck] = (0, react_2.useState)(false);
@@ -36,7 +35,7 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
36
35
  setShowFKModal(true);
37
36
  return;
38
37
  }
39
- addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined);
38
+ addEditView(initialSqlView ? 'edit' : 'add', ranViewQuery, name, initialSqlView ? initialSqlView.id : undefined, tableData?.fields || []);
40
39
  };
41
40
  (0, react_2.useEffect)(() => {
42
41
  setDisplayedTableData(allTableData);
@@ -44,19 +43,28 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
44
43
  const handleRunSqlPrompt = async () => {
45
44
  setErrorInfo({ show: false, message: '' });
46
45
  setViewAddable(false);
47
- setAskAIButton('Loading...');
46
+ setAskAIButtonLoading(true);
48
47
  const results = await (0, ConnectionClient_1.getQueryFromAiWithConnection)(aiPrompt, state.client._id, state.client.schemaNames);
49
48
  setOverrideFKCheck(false);
50
49
  setEditViewQuery(results);
51
- setAskAIButton('Ask AI');
50
+ setAskAIButtonLoading(false);
51
+ };
52
+ const handleClickSchemaItem = async (event) => {
53
+ const name = event.target.textContent;
54
+ if (editViewQuery && editViewQuery.length > 0) {
55
+ await navigator.clipboard.writeText(name || '');
56
+ }
57
+ else {
58
+ setEditViewQuery(`SELECT * FROM ${name}`);
59
+ }
52
60
  };
53
61
  const handleRunQuery = async () => {
54
62
  const query = editViewQuery;
55
63
  // If this query has a limit at the end alert the user
56
- if (query.toLowerCase().includes(' limit ')) {
64
+ if (/limit\s+\d+\s*;?\s*$/i.test(query)) {
57
65
  setErrorInfo({
58
66
  show: true,
59
- message: 'Error: Please remove the limit on you query.',
67
+ message: 'Error: Please remove the limit at the end of your query.',
60
68
  });
61
69
  return;
62
70
  }
@@ -64,11 +72,11 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
64
72
  setErrorInfo({ show: false, message: '' });
65
73
  setTableData(undefined);
66
74
  setIsLoading(true);
67
- setRunQueryButtonLabel('Querying...');
75
+ setRunQueryButtonLoading(true);
68
76
  setOverrideFKCheck(false);
69
77
  if (editViewQuery.length === 0) {
70
78
  setErrorInfo({ show: true, message: 'Error: Please enter a query.' });
71
- setRunQueryButtonLabel('Run query');
79
+ setRunQueryButtonLoading(false);
72
80
  return;
73
81
  }
74
82
  const resp = await (0, ConnectionClient_1.getSqlViewData)(state.client._id, query, state.client.databaseType, state.queryEndpoint);
@@ -76,12 +84,21 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
76
84
  setErrorInfo({ show: true, message: resp.error });
77
85
  setTableData(undefined);
78
86
  setViewAddable(false);
79
- setRunQueryButtonLabel('Run query');
87
+ setRunQueryButtonLoading(false);
80
88
  setIsLoading(false);
81
89
  return;
82
90
  }
83
- setRunQueryButtonLabel('Run query');
91
+ setRunQueryButtonLoading(false);
84
92
  setErrorInfo({ show: false, message: '' });
93
+ // stringify all rows that are either jsonb or json
94
+ resp.rows = resp.rows.map((row) => {
95
+ for (const key in row) {
96
+ if (typeof row[key] === 'object') {
97
+ row[key] = JSON.stringify(row[key]);
98
+ }
99
+ }
100
+ return row;
101
+ });
85
102
  setTableData(resp);
86
103
  setViewAddable(true);
87
104
  setRanViewQuery(query);
@@ -117,11 +134,11 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
117
134
  paddingLeft: '20px',
118
135
  paddingRight: '30px',
119
136
  }, children: (0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Search...", onChange: (e) => {
120
- setTableSearchQuery(e);
137
+ setTableSearchQuery(e.target.value);
121
138
  setDisplayedTableData(allTableData.filter((table) => table.tableName
122
139
  .toLowerCase()
123
- .includes(e.toLowerCase().trim())));
124
- }, value: tableSearchQuery, id: 'edit-name', width: "100%" }) }), (0, jsx_runtime_1.jsx)(react_3.SchemaListComponent, { schema: displayedTableData, theme: state.theme, LoadingComponent: LoadingComponent, loading: schemaIsLoading, width: '400px' })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
140
+ .includes(e.target.value.toLowerCase().trim())));
141
+ }, 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: {
125
142
  display: 'flex',
126
143
  gap: 20,
127
144
  flexDirection: 'column',
@@ -137,11 +154,10 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
137
154
  gap: 20,
138
155
  width: '100%',
139
156
  }, children: [(0, jsx_runtime_1.jsx)(TextInput, { onChange: (e) => {
140
- setAIPrompt(e);
141
- }, 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) => {
142
- setErrorInfo({ show: false, message: '' });
157
+ setAIPrompt(e.target.value);
158
+ }, 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) => {
143
159
  setEditViewQuery(e);
144
- } }), (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: {
160
+ } }), (0, jsx_runtime_1.jsx)("div", { style: { width: '200px' }, children: (0, jsx_runtime_1.jsx)(Button, { label: 'Run query', isLoading: runQueryButtonLoading, onClick: handleRunQuery }) }), errorInfo.show ? ((0, jsx_runtime_1.jsx)("div", { style: {
145
161
  fontSize: 15,
146
162
  fontWeight: '400',
147
163
  }, children: (0, jsx_runtime_1.jsx)("div", { style: {
@@ -156,6 +172,6 @@ function CreateEditSqlView({ containerStyle, initialSqlView, closeEditView, addE
156
172
  display: 'flex',
157
173
  justifyContent: 'center',
158
174
  alignItems: 'center',
159
- }, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), tableData && ((0, jsx_runtime_1.jsx)(react_1.QuillTable, { 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 })] }) }));
175
+ }, 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 })] }) }));
160
176
  }
161
177
  exports.default = CreateEditSqlView;
@@ -0,0 +1,3 @@
1
+ declare const useOnClickOutside: (ref: React.RefObject<HTMLDivElement>, handler: (event: any) => void) => void;
2
+ export default useOnClickOutside;
3
+ //# sourceMappingURL=useOnClickOutside.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const react_1 = require("react");
4
+ const useOnClickOutside = (ref, handler) => {
5
+ (0, react_1.useEffect)(() => {
6
+ const listener = (event) => {
7
+ if (!ref.current || ref.current.contains(event.target)) {
8
+ return;
9
+ }
10
+ handler(event);
11
+ };
12
+ document.addEventListener("mousedown", listener);
13
+ document.addEventListener("touchstart", listener);
14
+ return () => {
15
+ document.removeEventListener("mousedown", listener);
16
+ document.removeEventListener("touchstart", listener);
17
+ };
18
+ }, [ref, handler]);
19
+ };
20
+ exports.default = useOnClickOutside;
@@ -0,0 +1,17 @@
1
+ export declare function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
2
+ isOpen: boolean;
3
+ dashboardData: any;
4
+ selectedDashboard: any;
5
+ client: any;
6
+ setIsOpen: any;
7
+ onSave: any;
8
+ openEditOrderModal: any;
9
+ ModalComponent: any;
10
+ TextInputComponent: any;
11
+ ButtonComponent: any;
12
+ HeaderComponent: any;
13
+ SelectComponent: any;
14
+ dashNames: any;
15
+ SecondaryButtonComponent: any;
16
+ }): import("react/jsx-runtime").JSX.Element;
17
+ //# sourceMappingURL=EditFiltersModal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EditFiltersModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditFiltersModal.tsx"],"names":[],"mappings":"AAeA,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,2CA8mBA"}