Merge pull request #9894 from ToolJet/fixes/app-builder-perf

fix: Bugfixes on LTS from app builder

.version

@@ -1 +1 @@
-2.50.0
+2.50.1

frontend/.version

@@ -1 +1 @@
-2.50.0
+2.50.1

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

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;
+}

frontend/src/Editor/Editor.jsx

@@ -1507,6 +1507,12 @@ const EditorComponent = (props) => {
         isUpdatingEditorStateInProcess: false,
         appDefinition: newAppDefinition,
       });
+    } else {
+      // Setting the canvas background to the editor store
+      setCanvasBackground({
+        backgroundFxQuery: globalSettings?.backgroundFxQuery,
+        canvasBackgroundColor: globalSettings?.canvasBackgroundColor,
+      });
     }
 
     if (Array.isArray(entityReferencesInComponentDefinitions) && entityReferencesInComponentDefinitions?.length > 0) {

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) => {

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}
             />
           </div>
         )}

frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx

@@ -36,6 +36,7 @@ const Runjs = (props) => {
         }}
         componentName="Runjs"
         cyLabel={`runjs`}
+        delayOnChange={false}
       />
     </Card>
   );

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}
         />
       </div>
     );

frontend/src/Editor/SubContainer.jsx

@@ -80,7 +80,7 @@ export const SubContainer = ({
       setContainerCanvasWidth(canvasWidth);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parentRef, getContainerCanvasWidth(), listmode]);
+  }, [parentRef, getContainerCanvasWidth(), listmode, parentComponent?.definition?.properties?.size?.value]); // Listen for changes to the modal size and update the subcontainer state with the new grid width.
 
   zoomLevel = zoomLevel || 1;
 

frontend/src/Editor/Viewer.jsx

@@ -165,6 +165,12 @@ class ViewerComponent extends React.Component {
         isUpdatingEditorStateInProcess: false,
         appDefinition: newAppDefinition,
       });
+    } else {
+      // Setting the canvas background to the editor store
+      useEditorStore.getState().actions.setCanvasBackground({
+        backgroundFxQuery: globalSettings?.backgroundFxQuery,
+        canvasBackgroundColor: globalSettings?.canvasBackgroundColor,
+      });
     }
 
     if (Array.isArray(entityReferencesInComponentDefinitions) && entityReferencesInComponentDefinitions?.length > 0) {

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 {

frontend/src/_helpers/appUtils.js

@@ -122,7 +122,7 @@ export function onComponentOptionsChanged(component, options, id) {
 
         const existingRef = lookUpTable.resolvedRefs?.get(lookUpTable.hints?.get(path));
 
-        if (typeof existingRef === 'function') return;
+        if (typeof existingRef === 'function') continue;
 
         const shouldUpdateRef = existingRef !== componentData[option[0]];
 

frontend/src/_helpers/editorHelpers.js

@@ -52,6 +52,7 @@ import { BoundedBox } from '@/Editor/Components/BoundedBox/BoundedBox';
 import { isPDFSupported } from '@/_helpers/appUtils';
 import { resolveWidgetFieldValue } from '@/_helpers/utils';
 import { useEditorStore } from '@/_stores/editorStore';
+import './requestIdleCallbackPolyfill';
 
 export function memoizeFunction(func) {
   const cache = new Map();

frontend/src/_helpers/requestIdleCallbackPolyfill.js

@@ -0,0 +1,20 @@
+// Polyfill for window.requestIdleCallback to support Safari browser
+window.requestIdleCallback =
+  window.requestIdleCallback ||
+  function (cb) {
+    var start = Date.now();
+    return setTimeout(function () {
+      cb({
+        didTimeout: false,
+        timeRemaining: function () {
+          return Math.max(0, 50 - (Date.now() - start));
+        },
+      });
+    }, 1);
+  };
+
+window.cancelIdleCallback =
+  window.cancelIdleCallback ||
+  function (id) {
+    clearTimeout(id);
+  };

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,
                 },
               },
             };

server/.version

@@ -1 +1 @@
-2.50.0
+2.50.1