mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 08:58:26 +00:00
Fixes for integration issues (#5857)
* Fixed issue while running multiple quesries on app load * Fixed event propogation issue from modal * Fixed fx value on dynamic column in table * Fixed routing issue * Fixed Kanban empty data issue
This commit is contained in:
parent
bd7b53a540
commit
d6a8551cfa
5 changed files with 126 additions and 123 deletions
|
|
@ -122,7 +122,7 @@ class AppComponent extends React.Component {
|
|||
<Routes>
|
||||
<Route
|
||||
exact
|
||||
path="*"
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<HomePage switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
|
|||
}, [shouldUpdateData.current, JSON.stringify(cardDataAsObj)]);
|
||||
|
||||
useEffect(() => {
|
||||
droppableItemsColumnId.current = containers.find((container) => items[container].length > 0);
|
||||
droppableItemsColumnId.current = containers.find((container) => items[container]?.length > 0);
|
||||
}, [items, containers]);
|
||||
|
||||
registerAction(
|
||||
|
|
|
|||
|
|
@ -287,7 +287,7 @@ export function Table({
|
|||
let tableData = [],
|
||||
dynamicColumn = [];
|
||||
|
||||
const useDynamicColumn = resolveReferences(component.definition.properties?.useDynamicColumn?.value);
|
||||
const useDynamicColumn = resolveReferences(component.definition.properties?.useDynamicColumn?.value, currentState);
|
||||
if (currentState) {
|
||||
tableData = resolveReferences(component.definition.properties.data.value, currentState, []);
|
||||
dynamicColumn = useDynamicColumn
|
||||
|
|
|
|||
|
|
@ -211,10 +211,6 @@ export const DraggableBox = function DraggableBox({
|
|||
}}
|
||||
onMouseLeave={() => onComponentHover?.(false)}
|
||||
style={getStyles(isDragging, isSelectedComponent)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedComponent && setSelectedComponent(id);
|
||||
}}
|
||||
>
|
||||
<Rnd
|
||||
style={{ ...style }}
|
||||
|
|
@ -248,8 +244,7 @@ export const DraggableBox = function DraggableBox({
|
|||
setDragging(false);
|
||||
onDragStop(e, id, direction, currentLayout, layoutData);
|
||||
}}
|
||||
cancel={`div.table-responsive.jet-data-table, div.calendar-widget, div.text-input, .textarea, .map-widget, .range-slider, .kanban-container`}
|
||||
onDragStart={(e) => e.stopPropagation()}
|
||||
cancel={`div.table-responsive.jet-data-table, div.calendar-widget, div.text-input, .textarea, .map-widget, .range-slider, .kanban-container, div.real-canvas`}
|
||||
onResizeStop={(e, direction, ref, d, position) => {
|
||||
setResizing(false);
|
||||
onResizeStop(id, e, direction, ref, d, position);
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import { v4 as uuidv4 } from 'uuid';
|
|||
import { allSvgs } from '@tooljet/plugins/client';
|
||||
import urlJoin from 'url-join';
|
||||
import { tooljetDbOperations } from '@/Editor/QueryManager/QueryEditors/TooljetDatabase/operations';
|
||||
import { flushSync } from 'react-dom'; // TODO: It can be removed once we've a proper state update flow
|
||||
|
||||
const ERROR_TYPES = Object.freeze({
|
||||
ReferenceError: 'ReferenceError',
|
||||
|
|
@ -952,48 +953,51 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode =
|
|||
|
||||
if (promiseStatus === 'failed' || promiseStatus === 'Bad Request') {
|
||||
const errorData = query.kind === 'runpy' ? data.data : data;
|
||||
return _self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: _.assign(
|
||||
{
|
||||
..._self.state.currentState.queries[queryName],
|
||||
isLoading: false,
|
||||
flushSync(() => {
|
||||
return _self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: _.assign(
|
||||
{
|
||||
..._self.state.currentState.queries[queryName],
|
||||
isLoading: false,
|
||||
},
|
||||
query.kind === 'restapi'
|
||||
? {
|
||||
request: data.data.requestObject,
|
||||
response: data.data.responseObject,
|
||||
responseHeaders: data.data.responseHeaders,
|
||||
}
|
||||
: {}
|
||||
),
|
||||
},
|
||||
errors: {
|
||||
..._self.state.currentState.errors,
|
||||
[queryName]: {
|
||||
type: 'query',
|
||||
kind: query.kind,
|
||||
data: errorData,
|
||||
options: options,
|
||||
},
|
||||
query.kind === 'restapi'
|
||||
? {
|
||||
request: data.data.requestObject,
|
||||
response: data.data.responseObject,
|
||||
responseHeaders: data.data.responseHeaders,
|
||||
}
|
||||
: {}
|
||||
),
|
||||
},
|
||||
errors: {
|
||||
..._self.state.currentState.errors,
|
||||
[queryName]: {
|
||||
type: 'query',
|
||||
kind: query.kind,
|
||||
data: errorData,
|
||||
options: options,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
() => {
|
||||
resolve(data);
|
||||
onEvent(_self, 'onDataQueryFailure', {
|
||||
definition: { events: dataQuery.options.events },
|
||||
});
|
||||
if (mode !== 'view') {
|
||||
const err = query.kind == 'tooljetdb' ? data?.error || data : _.isEmpty(data.data) ? data : data.data;
|
||||
toast.error(err?.message);
|
||||
() => {
|
||||
resolve(data);
|
||||
onEvent(_self, 'onDataQueryFailure', {
|
||||
definition: { events: dataQuery.options.events },
|
||||
});
|
||||
if (mode !== 'view') {
|
||||
const err =
|
||||
query.kind == 'tooljetdb' ? data?.error || data : _.isEmpty(data.data) ? data : data.data;
|
||||
toast.error(err?.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
let rawData = data.data;
|
||||
|
|
@ -1009,35 +1013,36 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode =
|
|||
'edit'
|
||||
);
|
||||
if (finalData.status === 'failed') {
|
||||
console.log('runPythonTransformation', finalData);
|
||||
return _self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: {
|
||||
..._self.state.currentState.queries[queryName],
|
||||
isLoading: false,
|
||||
flushSync(() => {
|
||||
return _self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: {
|
||||
..._self.state.currentState.queries[queryName],
|
||||
isLoading: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
..._self.state.currentState.errors,
|
||||
[queryName]: {
|
||||
type: 'transformations',
|
||||
data: finalData,
|
||||
options: options,
|
||||
errors: {
|
||||
..._self.state.currentState.errors,
|
||||
[queryName]: {
|
||||
type: 'transformations',
|
||||
data: finalData,
|
||||
options: options,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
() => {
|
||||
resolve(finalData);
|
||||
onEvent(_self, 'onDataQueryFailure', {
|
||||
definition: { events: dataQuery.options.events },
|
||||
});
|
||||
}
|
||||
);
|
||||
() => {
|
||||
resolve(finalData);
|
||||
onEvent(_self, 'onDataQueryFailure', {
|
||||
definition: { events: dataQuery.options.events },
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1047,61 +1052,64 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode =
|
|||
duration: notificationDuration,
|
||||
});
|
||||
}
|
||||
|
||||
_self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: _.assign(
|
||||
{
|
||||
..._self.state.currentState.queries[queryName],
|
||||
isLoading: false,
|
||||
data: finalData,
|
||||
rawData,
|
||||
},
|
||||
query.kind === 'restapi'
|
||||
? {
|
||||
request: data.request,
|
||||
response: data.response,
|
||||
responseHeaders: data.responseHeaders,
|
||||
}
|
||||
: {}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
() => {
|
||||
resolve({ status: 'ok', data: finalData });
|
||||
onEvent(_self, 'onDataQuerySuccess', { definition: { events: dataQuery.options.events } }, mode);
|
||||
|
||||
if (mode !== 'view') {
|
||||
toast(`Query (${queryName}) completed.`, {
|
||||
icon: '🚀',
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(({ error }) => {
|
||||
if (mode !== 'view') toast.error(error ?? 'Unknown error');
|
||||
_self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: {
|
||||
isLoading: false,
|
||||
flushSync(() => {
|
||||
_self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: _.assign(
|
||||
{
|
||||
..._self.state.currentState.queries[queryName],
|
||||
isLoading: false,
|
||||
data: finalData,
|
||||
rawData,
|
||||
},
|
||||
query.kind === 'restapi'
|
||||
? {
|
||||
request: data.request,
|
||||
response: data.response,
|
||||
responseHeaders: data.responseHeaders,
|
||||
}
|
||||
: {}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
() => {
|
||||
resolve({ status: 'failed', message: error });
|
||||
}
|
||||
);
|
||||
() => {
|
||||
resolve({ status: 'ok', data: finalData });
|
||||
onEvent(_self, 'onDataQuerySuccess', { definition: { events: dataQuery.options.events } }, mode);
|
||||
|
||||
if (mode !== 'view') {
|
||||
toast(`Query (${queryName}) completed.`, {
|
||||
icon: '🚀',
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
})
|
||||
.catch(({ error }) => {
|
||||
if (mode !== 'view') toast.error(error ?? 'Unknown error');
|
||||
flushSync(() => {
|
||||
_self.setState(
|
||||
{
|
||||
currentState: {
|
||||
..._self.state.currentState,
|
||||
queries: {
|
||||
..._self.state.currentState.queries,
|
||||
[queryName]: {
|
||||
isLoading: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
() => {
|
||||
resolve({ status: 'failed', message: error });
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue