From e4726e5766c5391435e32bd154a15dfd56042357 Mon Sep 17 00:00:00 2001 From: Johnson Cherian Date: Tue, 28 May 2024 20:10:52 +0530 Subject: [PATCH 1/6] fix: disable drag on calender popup and unblock other input interactions (#9898) --- frontend/src/Editor/DragContainer.jsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx index 37a7dbec17..b3321f2e09 100644 --- a/frontend/src/Editor/DragContainer.jsx +++ b/frontend/src/Editor/DragContainer.jsx @@ -467,6 +467,12 @@ export default function DragContainer({ const box = boxes.find((box) => box.id === e.target.id); let isDragOnTable = false; + /* If the drag or click is on a calender popup draggable interactions are not executed so that popups and other components inside calender popup works. + Also user dont need to drag an calender from using popup */ + if (hasParentWithClass(e.inputEvent.target, 'react-datepicker-popper')) { + return false; + } + /* Checking if the dragged elemenent is a table. If its a table drag is disabled since it will affect column resizing and reordering */ if (box?.component?.component === 'Table') { const tableElem = e.target.querySelector('.jet-data-table'); @@ -842,3 +848,16 @@ function getOffset(childElement, grandparentElement) { return { x: offsetX, y: offsetY }; } + +function hasParentWithClass(child, className) { + let currentElement = child; + + while (currentElement !== null && currentElement !== document.documentElement) { + if (currentElement.classList.contains(className)) { + return true; + } + currentElement = currentElement.parentElement; + } + + return false; +} From 76143d6abd3ca596c85ba80b8f3ca82375a3ae1b Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam Date: Wed, 29 May 2024 11:04:23 +0530 Subject: [PATCH 2/6] fix: runjs is not returning the proper value. This is due to the setTimeout inside the codehinter --- frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx | 2 ++ frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx | 1 + 2 files changed, 3 insertions(+) diff --git a/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx index 507a15a550..85a06ab7ee 100644 --- a/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx +++ b/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx @@ -41,6 +41,7 @@ const MultiLineCodeEditor = (props) => { portalProps, showPreview, paramLabel = '', + delayOnChange = true, // Added this prop to immediately update the onBlurUpdate callback } = props; const [currentValue, setCurrentValue] = React.useState(() => initialValue); @@ -63,6 +64,7 @@ const MultiLineCodeEditor = (props) => { }, []); const handleOnBlur = () => { + if (!delayOnChange) return onChange(currentValue); setTimeout(() => { onChange(currentValue); }, 100); diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx index 5eb8f7a6d5..da23214ce1 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx @@ -36,6 +36,7 @@ const Runjs = (props) => { }} componentName="Runjs" cyLabel={`runjs`} + delayOnChange={false} /> ); From 53a0d879cf4b165cc056f841726d776aa9317072 Mon Sep 17 00:00:00 2001 From: Kiran Ashok Date: Wed, 29 May 2024 12:07:47 +0530 Subject: [PATCH 3/6] fix : columns comeback on reload even after deleting , table crash fix on table copy (#9902) --- .../Inspector/Components/Table/Table.jsx | 36 ++++++++++++------- frontend/src/_stores/utils.js | 4 +-- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx index 4e22434773..88917301ca 100644 --- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx @@ -425,21 +425,31 @@ class TableComponent extends React.Component { ...draggableStyle, }); - removeColumn = (index, ref) => { - const columns = this.props.component.component.definition.properties.columns; - const newValue = columns.value; - const removedColumns = newValue.splice(index, 1); - this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true); + removeColumn = async (index, ref) => { + try { + const columns = this.props.component.component.definition.properties.columns; + const newValue = columns.value; + const removedColumns = newValue.splice(index, 1); + await this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true); - const existingcolumnDeletionHistory = - this.props.component.component.definition.properties.columnDeletionHistory?.value ?? []; - const newcolumnDeletionHistory = [ - ...existingcolumnDeletionHistory, - ...removedColumns.map((column) => column.key || column.name), - ]; - this.props.paramUpdated({ name: 'columnDeletionHistory' }, 'value', newcolumnDeletionHistory, 'properties', true); + const existingColumnDeletionHistory = + this.props.component.component.definition.properties.columnDeletionHistory?.value ?? []; + const newColumnDeletionHistory = [ + ...existingColumnDeletionHistory, + ...removedColumns.map((column) => column.key || column.name), + ]; + await this.props.paramUpdated( + { name: 'columnDeletionHistory' }, + 'value', + newColumnDeletionHistory, + 'properties', + true + ); - this.deleteEvents(ref, 'table_column'); + await this.deleteEvents(ref, 'table_column'); + } catch (error) { + console.error('Error updating column:', error); + } }; reorderColumns = (startIndex, endIndex) => { diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js index 53aa4c0052..6239d752d8 100644 --- a/frontend/src/_stores/utils.js +++ b/frontend/src/_stores/utils.js @@ -264,7 +264,7 @@ const computeComponentDiff = (appDiff, currentPageId, opts, currentLayout) => { if (doesActionsExist || doesColumnsExist) { const actions = _.toArray(metaDiff.definition[attribute]?.actions?.value) || []; - const columns = _.toArray(metaDiff.definition[attribute]?.columns?.value) || []; + // const columns = _.toArray(metaDiff.definition[attribute]?.columns?.value) || []; metaDiff.definition = { ...metaDiff.definition, @@ -274,7 +274,7 @@ const computeComponentDiff = (appDiff, currentPageId, opts, currentLayout) => { value: actions, }, columns: { - value: columns, + value: component.component?.definition?.properties?.columns?.value, }, }, }; From d6964effba748521339a5da38da2b6f97ef4c418 Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam Date: Wed, 29 May 2024 14:02:04 +0530 Subject: [PATCH 4/6] fix: runpy is not returning the proper value. This is due to the setTimeout inside the codehinter --- frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx index 563c1fe812..b3f8304b16 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx @@ -26,6 +26,7 @@ export class Runpy extends React.Component { onChange={(value) => changeOption(this, 'code', value)} componentName="Runpy" cyLabel={`runpy`} + delayOnChange={false} /> ); From a9113b8ad55d646a266c7f777cce58c001e248eb Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam Date: Wed, 29 May 2024 15:05:47 +0530 Subject: [PATCH 5/6] fix: passed delayOnChange from Transformation component to get the immediate onChange value from codeHinter --- frontend/src/Editor/QueryManager/Components/Transformation.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Editor/QueryManager/Components/Transformation.jsx b/frontend/src/Editor/QueryManager/Components/Transformation.jsx index b2872ec204..70113ef7fd 100644 --- a/frontend/src/Editor/QueryManager/Components/Transformation.jsx +++ b/frontend/src/Editor/QueryManager/Components/Transformation.jsx @@ -218,6 +218,7 @@ return data.filter(row => row.amount > 1000); cyLabel={'transformation-input'} callgpt={noop} isCopilotEnabled={false} + delayOnChange={false} /> )} From 41dd1a1475283c9aaf649dc9f73df9a098e7635e Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam Date: Wed, 29 May 2024 15:17:00 +0530 Subject: [PATCH 6/6] fix: passed delayOnChange from DynamicForm component to get the immediate onChange value from codeHinter --- frontend/src/_components/DynamicForm.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/_components/DynamicForm.jsx b/frontend/src/_components/DynamicForm.jsx index 13971b9735..b8f6ef91f3 100644 --- a/frontend/src/_components/DynamicForm.jsx +++ b/frontend/src/_components/DynamicForm.jsx @@ -339,6 +339,7 @@ const DynamicForm = ({ width, componentName: queryName ? `${queryName}::${key ?? ''}` : null, cyLabel: key ? `${String(key).toLocaleLowerCase().replace(/\s+/g, '-')}` : '', + delayOnChange: false, }; case 'react-component-openapi-validator': return {