From ee02c0f17e9574c474d35e679da555809b6bf2bd Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Thu, 31 Oct 2024 15:20:48 +0530
Subject: [PATCH] chore: Query Editor full width option (#37138)

---
 .../components/UQIEditor/FormRender.tsx       |  2 +-
 .../formControls/DynamicTextFieldControl.tsx  | 45 ++++++++++---------
 .../src/main/resources/editor.json            |  1 +
 .../src/main/resources/editor.json            |  1 +
 .../src/main/resources/editor.json            |  1 +
 .../src/main/resources/editor.json            |  1 +
 .../src/main/resources/editor.json            |  1 +
 .../src/main/resources/editor.json            |  1 +
 .../src/main/resources/editor.json            |  1 +
 .../src/main/resources/editor.json            |  1 +
 10 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx
index ce0e49eebc..1274424a89 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx
@@ -211,7 +211,7 @@ const FormRender = (props: Props) => {
 
     switch (section.controlType) {
       case "SECTION_V2":
-        return <Section>{children}</Section>;
+        return <Section isFullWidth={section.isFullWidth}>{children}</Section>;
 
       case "SINGLE_COLUMN_ZONE":
       case "DOUBLE_COLUMN_ZONE": {
diff --git a/app/client/src/components/formControls/DynamicTextFieldControl.tsx b/app/client/src/components/formControls/DynamicTextFieldControl.tsx
index 4bb9c59481..0725efb17e 100644
--- a/app/client/src/components/formControls/DynamicTextFieldControl.tsx
+++ b/app/client/src/components/formControls/DynamicTextFieldControl.tsx
@@ -21,10 +21,14 @@ import { actionPathFromName } from "components/formControls/utils";
 import type { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
 import { getSqlEditorModeFromPluginName } from "components/editorComponents/CodeEditor/sql/config";
 import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors";
+import { Flex } from "@appsmith/ads";
 
-const Wrapper = styled.div<{ fullWidth: boolean }>`
+const Wrapper = styled.div`
   min-width: 380px;
-  max-width: ${({ fullWidth }) => (fullWidth ? "100%" : "872px;")};
+  width: 100%;
+  min-height: 200px;
+  height: 100%;
+  display: flex;
 `;
 
 interface DynamicTextControlState {
@@ -64,25 +68,24 @@ class DynamicTextControl extends BaseControl<
         : EditorModes.JSON_WITH_BINDING;
 
     return (
-      <Wrapper
-        className={`t--${configProperty} dynamic-text-field-control`}
-        fullWidth={isActionRedesignEnabled}
-      >
-        <DynamicTextField
-          dataTreePath={dataTreePath}
-          disabled={this.props.disabled}
-          evaluatedPopUpLabel={this?.props?.label}
-          evaluationSubstitutionType={evaluationSubstitutionType}
-          height="200px"
-          mode={mode}
-          name={this.props.configProperty}
-          placeholder={placeholderText}
-          showLineNumbers={
-            isActionRedesignEnabled || this.props.showLineNumbers
-          }
-          size={EditorSize.EXTENDED}
-          tabBehaviour={TabBehaviour.INDENT}
-        />
+      <Wrapper className={`t--${configProperty} dynamic-text-field-control`}>
+        <Flex flex="1">
+          <DynamicTextField
+            dataTreePath={dataTreePath}
+            disabled={this.props.disabled}
+            evaluatedPopUpLabel={this?.props?.label}
+            evaluationSubstitutionType={evaluationSubstitutionType}
+            height="100%"
+            mode={mode}
+            name={this.props.configProperty}
+            placeholder={placeholderText}
+            showLineNumbers={
+              isActionRedesignEnabled || this.props.showLineNumbers
+            }
+            size={EditorSize.EXTENDED}
+            tabBehaviour={TabBehaviour.INDENT}
+          />
+        </Flex>
       </Wrapper>
     );
   }
diff --git a/app/server/appsmith-plugins/arangoDBPlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/arangoDBPlugin/src/main/resources/editor.json
index 7db65795ba..88e836ba0b 100644
--- a/app/server/appsmith-plugins/arangoDBPlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/arangoDBPlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",
diff --git a/app/server/appsmith-plugins/mssqlPlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/mssqlPlugin/src/main/resources/editor.json
index 827377ac87..4d285134c8 100644
--- a/app/server/appsmith-plugins/mssqlPlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/mssqlPlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",
diff --git a/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/editor.json
index 44d07abf46..9ad56b27b2 100644
--- a/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",
diff --git a/app/server/appsmith-plugins/oraclePlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/oraclePlugin/src/main/resources/editor.json
index 9ab0b230f2..9a83e1c356 100755
--- a/app/server/appsmith-plugins/oraclePlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/oraclePlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",
diff --git a/app/server/appsmith-plugins/postgresPlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/postgresPlugin/src/main/resources/editor.json
index 2b6f69d6e8..6014a8cbe5 100644
--- a/app/server/appsmith-plugins/postgresPlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/postgresPlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",
diff --git a/app/server/appsmith-plugins/redisPlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/redisPlugin/src/main/resources/editor.json
index 514ce52693..d960202031 100644
--- a/app/server/appsmith-plugins/redisPlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/redisPlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",
diff --git a/app/server/appsmith-plugins/redshiftPlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/redshiftPlugin/src/main/resources/editor.json
index 514ce52693..d960202031 100644
--- a/app/server/appsmith-plugins/redshiftPlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/redshiftPlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",
diff --git a/app/server/appsmith-plugins/snowflakePlugin/src/main/resources/editor.json b/app/server/appsmith-plugins/snowflakePlugin/src/main/resources/editor.json
index 514ce52693..d960202031 100644
--- a/app/server/appsmith-plugins/snowflakePlugin/src/main/resources/editor.json
+++ b/app/server/appsmith-plugins/snowflakePlugin/src/main/resources/editor.json
@@ -3,6 +3,7 @@
     {
       "controlType": "SECTION_V2",
       "identifier": "SECTION-ONE",
+      "isFullWidth": true,
       "children": [
         {
           "controlType": "SINGLE_COLUMN_ZONE",