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:
Kavin Venkatachalam 2023-03-29 15:38:33 +05:30 committed by GitHub
parent bd7b53a540
commit d6a8551cfa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 126 additions and 123 deletions

View file

@ -122,7 +122,7 @@ class AppComponent extends React.Component {
<Routes>
<Route
exact
path="*"
path="/"
element={
<PrivateRoute>
<HomePage switchDarkMode={this.switchDarkMode} darkMode={darkMode} />

View file

@ -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(

View file

@ -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

View file

@ -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);

View file

@ -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 });
}
);
});
});
});
});