Merge branch 'feat/grid-appbuilder-improvement' of https://github.com/ToolJet/ToolJet into feat/grid-appbuilder-improvement

frontend/src/Editor/BoxUI.jsx

@@ -65,8 +65,7 @@ const BoxUI = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(customResolvables), readOnly]);
 
-  let exposedVariables = !_.isEmpty(currentState?.component) ? currentState?.components[component.name] ?? {} : {};
-
+  let exposedVariables = !_.isEmpty(currentState?.components) ? currentState?.components[component.name] ?? {} : {};
   const fireEvent = (eventName, options) => {
     if (mode === 'edit' && eventName === 'onClick') {
       onComponentClick(id, component);

frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx

@@ -63,7 +63,9 @@ const MultiLineCodeEditor = (props) => {
   }, []);
 
   const handleOnBlur = () => {
-    onChange(currentValue);
+    setTimeout(() => {
+      onChange(currentValue);
+    }, 100);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   };
 
@@ -215,7 +217,7 @@ const MultiLineCodeEditor = (props) => {
           callgpt={null}
         >
           <ErrorBoundary>
-            <div className="codehinter-container w-100 " data-cy={`${cyLabel}-input-field`}>
+            <div className="codehinter-container w-100 " data-cy={`${cyLabel}-input-field`} style={{ height: '100%' }}>
               <CodeMirror
                 value={currentValue}
                 placeholder={placeholder}

frontend/src/Editor/CodeEditor/SingleLineCodeEditor.jsx

@@ -304,7 +304,7 @@ const DynamicEditorBridge = (props) => {
     initialValue,
     type,
     fxActive,
-    paramType,
+    paramType = 'code',
     paramLabel,
     paramName,
     fieldMeta,
@@ -341,7 +341,11 @@ const DynamicEditorBridge = (props) => {
         <div className={`${(paramType ?? 'code') === 'code' ? 'd-none' : ''} flex-grow-1`}>
           <div
             style={{ marginBottom: codeShow ? '0.5rem' : '0px' }}
-            className="d-flex align-items-center justify-content-end "
+            className={`d-flex align-items-center ${
+              paramLabel !== ' ' && !HIDDEN_CODE_HINTER_LABELS.includes(paramLabel)
+                ? 'justify-content-end'
+                : 'justify-content-start'
+            }`}
           >
             {paramLabel !== 'Type' && isFxNotRequired === undefined && (
               <div className="col-auto pt-0 fx-common fx-button-container">

frontend/src/Editor/CodeEditor/styles.scss

@@ -201,7 +201,7 @@
     }
 }
 
-.ͼ1 .cm-placeholder{
+.ͼ1 .cm-placeholder {
     vertical-align: middle;
 }
 
@@ -248,8 +248,19 @@
 }
 
 
+.modal-body {
+    .codehinter-multi-line-input {
+        .cm-editor {
+            height: 100%;
+        }
+    }
+}
+
 .codehinter-multi-line-input {
+    height: 100%;
+
     .cm-editor {
+        min-height: 300px;
         height: 300px;
         max-height: fit-content !important;
 
@@ -478,6 +489,7 @@
 
 .cm-content {
     max-width: 98%;
+    flex-shrink: 1 !important;
 }
 
 .cm-line {
@@ -519,4 +531,4 @@
             max-width: 100% !important;
         }
     }
-}
+}

frontend/src/Editor/Inspector/EventManager.jsx

@@ -898,17 +898,18 @@ export const EventManager = ({
                       ) : (
                         <div
                           className={`${
-                            param?.type ? 'col-7' : 'col-9 fx-container-eventmanager-code'
-                          } fx-container-eventmanager ${param.type == 'select' && 'component-action-select'}`}
+                            param?.type ? '' : 'fx-container-eventmanager-code'
+                          } col-9 fx-container-eventmanager ${param.type == 'select' && 'component-action-select'}`}
                           data-cy="action-options-text-input-field"
                         >
                           <CodeHinter
-                            type="basic"
+                            type="fxEditor"
                             initialValue={valueForComponentSpecificActionHandle(event, param)}
                             onChange={(value) => {
                               onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
                             }}
                             paramType={param?.type}
+                            paramLabel={' '}
                             fieldMeta={{ options: param?.options }}
                             cyLabel={`event-${param.displayName}`}
                             component={component}

frontend/src/_components/DynamicForm.jsx

@@ -489,6 +489,7 @@ const DynamicForm = ({
                   'flex-grow-1': isHorizontalLayout && !isSpecificComponent,
                   'w-100': isHorizontalLayout && type !== 'codehinter',
                 })}
+                style={{ width: '100%' }}
               >
                 <Element
                   {...getElementProps(obj[key])}

frontend/src/_stores/currentStateStore.js

@@ -56,7 +56,14 @@ export const useCurrentStateStore = create(
         },
         setEditorReady: (isEditorReady) => set({ isEditorReady }),
         initializeCurrentStateOnVersionSwitch: () => {
-          set({ ...initialState }, false, { type: 'INITIALIZE_CURRENT_STATE_ON_VERSION_SWITCH', initialState });
+          const newInitialState = {
+            ...initialState,
+            constants: get().constants,
+          };
+          set({ ...newInitialState }, false, {
+            type: 'INITIALIZE_CURRENT_STATE_ON_VERSION_SWITCH',
+            newInitialState,
+          });
         },
       },
     }),