From b3734026dd5a4e7850085cb8decc00011025113c Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Tue, 3 Sep 2024 17:09:43 +0300
Subject: [PATCH 1/4] chore: move to section_v2 & zones

---
 .../src/main/resources/editor/create.json     |  27 ++--
 .../main/resources/editor/create_many.json    |  27 ++--
 .../src/main/resources/editor/delete.json     |   6 +-
 .../main/resources/editor/delete_many.json    |  12 +-
 .../src/main/resources/editor/list.json       | 118 ++++++++++--------
 .../src/main/resources/editor/read.json       |   6 +-
 .../src/main/resources/editor/root.json       |   2 +-
 7 files changed, 115 insertions(+), 83 deletions(-)

diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json
index bd075899bcc1..e3eff30700f4 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json
@@ -1,12 +1,12 @@
 {
   "identifier": "UPLOAD_FILE_FROM_BODY",
-  "controlType": "SECTION",
+  "controlType": "SECTION_V2",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'UPLOAD_FILE_FROM_BODY'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Select bucket to query",
       "children": [
         {
@@ -16,11 +16,17 @@
           "evaluationSubstitutionType": "TEMPLATE",
           "isRequired": true,
           "initialValue": ""
+        },
+        {
+          "label": "Expiry duration of signed URL (minutes)",
+          "configProperty": "actionConfiguration.formData.create.expiry.data",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "initialValue": "5"
         }
       ]
     },
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Query",
       "description": "Optional",
       "children": [
@@ -45,13 +51,14 @@
               "value": "NO"
             }
           ]
-        },
-        {
-          "label": "Expiry duration of signed URL (minutes)",
-          "configProperty": "actionConfiguration.formData.create.expiry.data",
-          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-          "initialValue": "5"
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "label": "Query",
+      "description": "Optional",
+      "children": [
         {
           "label": "Content",
           "configProperty": "actionConfiguration.formData.body.data",
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json
index 712278db4716..ea5fb3b40a87 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json
@@ -1,12 +1,12 @@
 {
   "identifier": "UPLOAD_MULTIPLE_FILES_FROM_BODY",
-  "controlType": "SECTION",
+  "controlType": "SECTION_V2",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'UPLOAD_MULTIPLE_FILES_FROM_BODY'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Select bucket to query",
       "children": [
         {
@@ -16,11 +16,17 @@
           "evaluationSubstitutionType": "TEMPLATE",
           "isRequired": true,
           "initialValue": ""
+        },
+        {
+          "label": "Expiry duration of signed URL (minutes)",
+          "configProperty": "actionConfiguration.formData.create.expiry.data",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "initialValue": "5"
         }
       ]
     },
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Query",
       "description": "Optional",
       "children": [
@@ -45,13 +51,14 @@
               "value": "NO"
             }
           ]
-        },
-        {
-          "label": "Expiry duration of signed URL (minutes)",
-          "configProperty": "actionConfiguration.formData.create.expiry.data",
-          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-          "initialValue": "5"
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "label": "Query",
+      "description": "Optional",
+      "children": [
         {
           "label": "Content",
           "configProperty": "actionConfiguration.formData.body.data",
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json
index 29ebcb00dd54..ad6b1c9edb2a 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json
@@ -1,12 +1,12 @@
 {
   "identifier": "DELETE_FILE",
-  "controlType": "SECTION",
+  "controlType": "SECTION_V2",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'DELETE_FILE'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Select bucket to query",
       "children": [
         {
@@ -20,7 +20,7 @@
       ]
     },
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Query",
       "description": "Optional",
       "children": [
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json
index e8b8fdb88871..285e40a26030 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json
@@ -1,12 +1,12 @@
 {
   "identifier": "DELETE_MULTIPLE_FILES",
-  "controlType": "SECTION",
+  "controlType": "SECTION_V2",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'DELETE_MULTIPLE_FILES'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Select bucket to query",
       "children": [
         {
@@ -16,7 +16,13 @@
           "evaluationSubstitutionType": "TEMPLATE",
           "isRequired": true,
           "initialValue": ""
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "label": "Select bucket to query",
+      "children": [
         {
           "label": "List of Files",
           "configProperty": "actionConfiguration.formData.path.data",
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
index 0a85b2df4e73..0a8064c9c16d 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
@@ -1,12 +1,12 @@
 {
   "identifier": "LIST",
-  "controlType": "SECTION",
+  "controlType": "SECTION_V2",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'LIST'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Select bucket to query",
       "children": [
         {
@@ -16,62 +16,18 @@
           "evaluationSubstitutionType": "TEMPLATE",
           "isRequired": true,
           "initialValue": ""
-        }
-      ]
-    },
-    {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
-      "children": [
+        },
         {
           "label": "Prefix",
           "configProperty": "actionConfiguration.formData.list.prefix.data",
           "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
           "initialValue": ""
-        },
-        {
-          "label": "Where",
-          "configProperty": "actionConfiguration.formData.list.where.data",
-          "nestedLevels": 3,
-          "controlType": "WHERE_CLAUSE",
-          "-subtitle": "Array of Objects",
-          "-tooltipText": "Array of Objects",
-          "-alternateViewTypes": ["json"],
-          "logicalTypes": [
-            {
-              "label": "AND",
-              "value": "AND"
-            },
-            {
-              "label": "OR",
-              "value": "OR"
-            }
-          ],
-          "comparisonTypes": [
-            {
-              "label": "==",
-              "value": "EQ"
-            },
-            {
-              "label": "!=",
-              "value": "NOT_EQ"
-            },
-            {
-              "label": "in",
-              "value": "IN"
-            },
-            {
-              "label": "not in",
-              "value": "NOT_IN"
-            }
-          ]
         }
       ]
     },
     {
-      "controlType": "SECTION",
-      "label": "Options",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "label": "Select bucket to query",
       "children": [
         {
           "label": "Generate signed URL",
@@ -122,17 +78,73 @@
               "value": "NO"
             }
           ]
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "label": "Query",
+      "description": "Optional",
+      "children": [
         {
-          "label": "Sort By",
+          "label": "Filter data",
+          "configProperty": "actionConfiguration.formData.list.where.data",
+          "nestedLevels": 3,
+          "controlType": "WHERE_CLAUSE",
+          "-subtitle": "Array of Objects",
+          "-tooltipText": "Array of Objects",
+          "-alternateViewTypes": ["json"],
+          "logicalTypes": [
+            {
+              "label": "AND",
+              "value": "AND"
+            },
+            {
+              "label": "OR",
+              "value": "OR"
+            }
+          ],
+          "comparisonTypes": [
+            {
+              "label": "==",
+              "value": "EQ"
+            },
+            {
+              "label": "!=",
+              "value": "NOT_EQ"
+            },
+            {
+              "label": "in",
+              "value": "IN"
+            },
+            {
+              "label": "not in",
+              "value": "NOT_IN"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "label": "Options",
+      "children": [
+        {
+          "label": "Sort data",
           "configProperty": "actionConfiguration.formData.list.sortBy.data",
           "controlType": "SORTING",
           "-subtitle": "Array of Objects",
           "-tooltipText": "Array of Objects",
           "-alternateViewTypes": ["json"]
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "label": "Options",
+      "children": [
         {
-          "label": "Paginate By",
+          "label": "Paginate data",
           "configProperty": "actionConfiguration.formData.list.pagination.data",
           "controlType": "PAGINATION",
           "-subtitle": "Object",
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json
index ca069a97380f..4344f83dab9e 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json
@@ -1,12 +1,12 @@
 {
   "identifier": "READ_FILE",
-  "controlType": "SECTION",
+  "controlType": "SECTION_V2",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'READ_FILE'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Select bucket to query",
       "children": [
         {
@@ -20,7 +20,7 @@
       ]
     },
     {
-      "controlType": "SECTION",
+      "controlType": "DOUBLE_COLUMN_ZONE",
       "label": "Query",
       "description": "Optional",
       "children": [
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json
index 82d8d5d91d12..7009e448852e 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json
@@ -1,7 +1,7 @@
 {
   "editor": [
     {
-      "controlType": "SECTION",
+      "controlType": "SECTION_V2",
       "identifier": "SELECTOR",
       "children": [
         {

From 81cf549d6abf6af22fb2caa715d0c7ee1b0cff78 Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Tue, 3 Sep 2024 17:13:44 +0300
Subject: [PATCH 2/4] perf: add responsiveness

---
 .../formControls/SortingControl.tsx           | 219 ++++++++----------
 1 file changed, 98 insertions(+), 121 deletions(-)

diff --git a/app/client/src/components/formControls/SortingControl.tsx b/app/client/src/components/formControls/SortingControl.tsx
index 5f92252b9056..2e1a239f02c7 100644
--- a/app/client/src/components/formControls/SortingControl.tsx
+++ b/app/client/src/components/formControls/SortingControl.tsx
@@ -1,9 +1,12 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useSelector } from "react-redux";
 import FormControl from "pages/Editor/FormControl";
-import { Classes } from "@appsmith/ads-old";
 import styled from "styled-components";
-import { FieldArray, getFormValues } from "redux-form";
+import {
+  FieldArray,
+  getFormValues,
+  type WrappedFieldArrayProps,
+} from "redux-form";
 import type { ControlProps } from "./BaseControl";
 import { getBindingOrConfigPathsForSortingControl } from "entities/Action/actionProperties";
 import { SortingSubComponent } from "./utils";
@@ -26,9 +29,6 @@ const columnFieldConfig: any = {
   initialValue: "",
   inputType: "TEXT",
   placeholderText: "Column name",
-  customStyles: {
-    // width: "280px",
-  },
 };
 
 // Form config for the order field
@@ -52,60 +52,42 @@ const orderFieldConfig: any = {
   ],
 };
 
-// main container for the fsorting component
-const SortingContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+const SortingContainer = styled.div<{ isBreakpointSmall: boolean }>`
+  display: grid;
+  grid-template-columns: ${({ isBreakpointSmall }) =>
+    isBreakpointSmall ? "1fr 50px" : "1fr 50px"};
+  gap: 5px;
+  align-items: center;
 `;
 
-// container for the two sorting dropdown
-const SortingDropdownContainer = styled.div<{ size: string }>`
-  display: flex;
-  flex-direction: row;
-  width: min-content;
-  justify-content: space-between;
-  margin-bottom: 5px;
+const SortingFields = styled.div<{ isBreakpointSmall: boolean }>`
+  display: grid;
+  grid-template-columns: ${({ isBreakpointSmall }) =>
+    isBreakpointSmall ? "1fr" : "1fr 180px"};
+  grid-template-rows: ${({ isBreakpointSmall }) =>
+    isBreakpointSmall ? "1fr 1fr" : "1fr"};
   gap: 5px;
-  align-items: center;
-  > div {
-    width: 250px;
-  }
-  ${(props) =>
-    props.size === "small" &&
-    `
-  // Hide the dropdown labels to decrease the width
-  // The design system component has inline style hence the !important
-  .t--form-control-DROP_DOWN .${Classes.TEXT} {
-    display: none !important;
-  }
-  // Show the icons hidden initially
-  .t--form-control-DROP_DOWN .remixicon-icon {
-    display: initial;
-  }
-  `}
 `;
+
 const ButtonWrapper = styled.div`
   display: flex;
   flex-direction: row;
 `;
-// container for the column dropdown section
-const ColumnDropdownContainer = styled.div``;
 
-// Component for the icons
-const CenteredButton = styled(Button)``;
+export type SortingControlProps = ControlProps;
 
-// TODO: Fix this the next time the file is edited
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function SortingComponent(props: any) {
-  // TODO: Fix this the next time the file is edited
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const formValues: any = useSelector((state) =>
+export type SortingComponentProps = WrappedFieldArrayProps &
+  Pick<SortingControlProps, "configProperty" | "formName">;
+
+function SortingComponent(props: SortingComponentProps) {
+  const { configProperty, fields, formName } = props;
+
+  const formValues = useSelector((state) =>
     getFormValues(props.formName)(state),
   );
 
   const onDeletePressed = (index: number) => {
-    props.fields.remove(index);
+    fields.remove(index);
   };
 
   const targetRef = useRef<HTMLDivElement>(null);
@@ -113,105 +95,100 @@ function SortingComponent(props: any) {
   const isBreakpointSmall = size === "small";
 
   useEffect(() => {
-    // this path represents the path to the sortBy object, wherever the location is in the actionConfiguration object
-    let sortingObjectPath;
     // if the path ends with .data which we expect it to.
-    if (props.configProperty.endsWith(".data")) {
+    if (configProperty.endsWith(".data")) {
       // we remove the .data and get the path of the sort object
       // NOTE: 5 is used because (.data) = 5
-      sortingObjectPath = props.configProperty.substring(
+      const sortingObjectPath = configProperty.substring(
         0,
-        props.configProperty.length - 5,
+        configProperty.length - 5,
       );
-    }
-    // sortDataValue is the path to the value (.data included) itself in the sort object
-    const sortDataValue = get(formValues, props.configProperty);
-    // sort object value is the path to the sort object itself.
-    const sortObjectValue = get(formValues, sortingObjectPath);
-
-    // The reason we are making this check is to prevent new fields from being pushed when the form control is visited
-    // for some reason the fields object is initially undefined in first render, before being initialized with the correct values after.
-    // so we check to see if the sortObjectValue exist first (if the value has been initalized).
-    if (!sortObjectValue) {
-      return;
-    }
 
-    // then we check if the redux fields have any items in it,
-    // and we also check if the value exists in the redux state as an array and if that value has no items in it.
-    // if they are both empty we want to push a new field.
-    // We also want to check if the value is undefined, this means that the sort data value is non existent, if it is, we want to push a new field.
-    if (
-      (props.fields.length < 1 &&
-        isArray(sortDataValue) &&
-        sortDataValue.length < 1) ||
-      (props.fields.length < 1 && !sortDataValue)
-    ) {
-      props.fields.push({
-        column: "",
-        order: OrderDropDownValues.ASCENDING,
-      });
-    } else {
-      onDeletePressed(props.index);
+      // sortDataValue is the path to the value (.data included) itself in the sort object
+      const sortDataValue = get(formValues, configProperty);
+      // sort object value is the path to the sort object itself.
+      const sortObjectValue = get(formValues, sortingObjectPath);
+
+      // The reason we are making this check is to prevent new fields from being pushed when the form control is visited
+      // for some reason the fields object is initially undefined in first render, before being initialized with the correct values after.
+      // so we check to see if the sortObjectValue exist first (if the value has been initalized).
+      if (sortObjectValue) {
+        // then we check if the redux fields have any items in it,
+        // and we also check if the value exists in the redux state as an array and if that value has no items in it.
+        // if they are both empty we want to push a new field.
+        // We also want to check if the value is undefined, this means that the sort data value is non existent, if it is, we want to push a new field.
+        if (
+          (fields.length < 1 &&
+            isArray(sortDataValue) &&
+            sortDataValue.length < 1) ||
+          (fields.length < 1 && !sortDataValue)
+        ) {
+          fields.push({
+            column: "",
+            order: OrderDropDownValues.ASCENDING,
+          });
+        }
+      }
     }
-  }, [props.fields.length]);
+  }, [fields.length]);
 
   return (
-    <SortingContainer className={`t--${props?.configProperty}`} ref={targetRef}>
-      {props.fields &&
-        props.fields.length > 0 &&
-        // TODO: Fix this the next time the file is edited
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        props.fields.map((field: any, index: number) => {
+    <SortingContainer
+      className={`t--${props?.configProperty}`}
+      isBreakpointSmall={isBreakpointSmall}
+      ref={targetRef}
+    >
+      {fields &&
+        fields.length > 0 &&
+        fields.map((field, index: number) => {
           const columnPath = getBindingOrConfigPathsForSortingControl(
             SortingSubComponent.Column,
             field,
-            undefined,
           );
-          const OrderPath = getBindingOrConfigPathsForSortingControl(
+
+          const orderPath = getBindingOrConfigPathsForSortingControl(
             SortingSubComponent.Order,
             field,
-            undefined,
           );
+
           return (
-            <SortingDropdownContainer key={index} size={size}>
-              <ColumnDropdownContainer>
+            <React.Fragment key={index}>
+              <SortingFields isBreakpointSmall={isBreakpointSmall}>
                 <FormControl
                   config={{
                     ...columnFieldConfig,
                     customStyles: {
-                      width: "250px",
+                      width: "100%",
                     },
-                    configProperty: `${columnPath}`,
+                    configProperty: columnPath,
                     nestedFormControl: true,
                   }}
-                  formName={props.formName}
+                  formName={formName}
                 />
-              </ColumnDropdownContainer>
-              <FormControl
-                config={{
-                  ...orderFieldConfig,
-                  configProperty: `${OrderPath}`,
-                  nestedFormControl: true,
-                  customStyles: {
-                    width: isBreakpointSmall ? "65px" : "250px",
-                  },
-                  optionWidth: isBreakpointSmall ? "250px" : undefined,
-                }}
-                formName={props.formName}
-              />
-              {/* Component to render the delete icon */}
-              <CenteredButton
+                <FormControl
+                  config={{
+                    ...orderFieldConfig,
+                    customStyles: {
+                      maxWidth: "180px",
+                    },
+                    configProperty: orderPath,
+                    nestedFormControl: true,
+                  }}
+                  formName={formName}
+                />
+              </SortingFields>
+              <Button
                 data-testid={`t--sorting-delete-[${index}]`}
                 isIconButton
                 kind="tertiary"
-                onClick={(e: React.MouseEvent) => {
-                  e.stopPropagation();
+                onClick={() => {
                   onDeletePressed(index);
                 }}
                 size="md"
                 startIcon="close-line"
+                value={index}
               />
-            </SortingDropdownContainer>
+            </React.Fragment>
           );
         })}
       <ButtonWrapper>
@@ -219,7 +196,7 @@ function SortingComponent(props: any) {
           data-testid={`t--sorting-add-field`}
           kind="tertiary"
           onClick={() =>
-            props.fields.push({
+            fields.push({
               column: "",
               order: OrderDropDownValues.ASCENDING,
             })
@@ -240,18 +217,18 @@ export default function SortingControl(props: SortingControlProps) {
     formName, // Name of the form, used by redux-form lib to store the data in redux store
   } = props;
 
+  const fieldArrayProps = useMemo(
+    () => ({ configProperty, formName }),
+    [configProperty, formName],
+  );
+
   return (
     <FieldArray
       component={SortingComponent}
-      key={`${configProperty}`}
-      name={`${configProperty}`}
-      props={{
-        configProperty,
-        formName,
-      }}
+      key={configProperty}
+      name={configProperty}
+      props={fieldArrayProps}
       rerenderOnEveryChange={false}
     />
   );
 }
-
-export type SortingControlProps = ControlProps;

From 35aa3c8aa9bb0d4578ec47a6fa52cfd7ba9a1c6b Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Tue, 3 Sep 2024 18:00:30 +0300
Subject: [PATCH 3/4] chore: fix labels & wrap command in zone

---
 .../src/main/resources/editor/create.json     |  3 -
 .../main/resources/editor/create_many.json    |  3 -
 .../src/main/resources/editor/delete.json     |  2 -
 .../main/resources/editor/delete_many.json    |  2 -
 .../src/main/resources/editor/list.json       |  5 --
 .../src/main/resources/editor/read.json       |  2 -
 .../src/main/resources/editor/root.json       | 61 ++++++++++---------
 7 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json
index e3eff30700f4..e99b738928ce 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create.json
@@ -7,7 +7,6 @@
   "children": [
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "Bucket name",
@@ -27,7 +26,6 @@
     },
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Query",
       "description": "Optional",
       "children": [
         {
@@ -56,7 +54,6 @@
     },
     {
       "controlType": "SINGLE_COLUMN_ZONE",
-      "label": "Query",
       "description": "Optional",
       "children": [
         {
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json
index ea5fb3b40a87..1ed2d5fb59c2 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/create_many.json
@@ -7,7 +7,6 @@
   "children": [
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "Bucket name",
@@ -27,7 +26,6 @@
     },
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Query",
       "description": "Optional",
       "children": [
         {
@@ -56,7 +54,6 @@
     },
     {
       "controlType": "SINGLE_COLUMN_ZONE",
-      "label": "Query",
       "description": "Optional",
       "children": [
         {
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json
index ad6b1c9edb2a..053132225d5f 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete.json
@@ -7,7 +7,6 @@
   "children": [
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "Bucket name",
@@ -21,7 +20,6 @@
     },
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Query",
       "description": "Optional",
       "children": [
         {
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json
index 285e40a26030..1c4352297e3b 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/delete_many.json
@@ -7,7 +7,6 @@
   "children": [
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "Bucket name",
@@ -21,7 +20,6 @@
     },
     {
       "controlType": "SINGLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "List of Files",
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
index 0a8064c9c16d..6b33873c3876 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
@@ -7,7 +7,6 @@
   "children": [
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "Bucket name",
@@ -27,7 +26,6 @@
     },
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "Generate signed URL",
@@ -83,7 +81,6 @@
     },
     {
       "controlType": "SINGLE_COLUMN_ZONE",
-      "label": "Query",
       "description": "Optional",
       "children": [
         {
@@ -127,7 +124,6 @@
     },
     {
       "controlType": "SINGLE_COLUMN_ZONE",
-      "label": "Options",
       "children": [
         {
           "label": "Sort data",
@@ -141,7 +137,6 @@
     },
     {
       "controlType": "SINGLE_COLUMN_ZONE",
-      "label": "Options",
       "children": [
         {
           "label": "Paginate data",
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json
index 4344f83dab9e..749f86709c27 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/read.json
@@ -7,7 +7,6 @@
   "children": [
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Select bucket to query",
       "children": [
         {
           "label": "Bucket name",
@@ -21,7 +20,6 @@
     },
     {
       "controlType": "DOUBLE_COLUMN_ZONE",
-      "label": "Query",
       "description": "Optional",
       "children": [
         {
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json
index 7009e448852e..0a1976bf8f15 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/root.json
@@ -5,35 +5,40 @@
       "identifier": "SELECTOR",
       "children": [
         {
-          "label": "Command",
-          "description": "Choose the method you would like to use",
-          "configProperty": "actionConfiguration.formData.command.data",
-          "controlType": "DROP_DOWN",
-          "initialValue": "LIST",
-          "options": [
+          "controlType": "DOUBLE_COLUMN_ZONE",
+          "children": [
             {
-              "label": "List files in bucket",
-              "value": "LIST"
-            },
-            {
-              "label": "Create a new file",
-              "value": "UPLOAD_FILE_FROM_BODY"
-            },
-            {
-              "label": "Create multiple new files",
-              "value": "UPLOAD_MULTIPLE_FILES_FROM_BODY"
-            },
-            {
-              "label": "Read file",
-              "value": "READ_FILE"
-            },
-            {
-              "label": "Delete file",
-              "value": "DELETE_FILE"
-            },
-            {
-              "label": "Delete multiple files",
-              "value": "DELETE_MULTIPLE_FILES"
+              "label": "Command",
+              "description": "Choose the method you would like to use",
+              "configProperty": "actionConfiguration.formData.command.data",
+              "controlType": "DROP_DOWN",
+              "initialValue": "LIST",
+              "options": [
+                {
+                  "label": "List files in bucket",
+                  "value": "LIST"
+                },
+                {
+                  "label": "Create a new file",
+                  "value": "UPLOAD_FILE_FROM_BODY"
+                },
+                {
+                  "label": "Create multiple new files",
+                  "value": "UPLOAD_MULTIPLE_FILES_FROM_BODY"
+                },
+                {
+                  "label": "Read file",
+                  "value": "READ_FILE"
+                },
+                {
+                  "label": "Delete file",
+                  "value": "DELETE_FILE"
+                },
+                {
+                  "label": "Delete multiple files",
+                  "value": "DELETE_MULTIPLE_FILES"
+                }
+              ]
             }
           ]
         }

From c66dce69902ae247b6444ff901fe2cf1595e8e34 Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Thu, 5 Sep 2024 15:24:48 +0300
Subject: [PATCH 4/4] chore: combined fields into single column zone

---
 .../src/main/resources/editor/list.json            | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
index 6b33873c3876..c9fbfc4cf731 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor/list.json
@@ -119,12 +119,7 @@
               "value": "NOT_IN"
             }
           ]
-        }
-      ]
-    },
-    {
-      "controlType": "SINGLE_COLUMN_ZONE",
-      "children": [
+        },
         {
           "label": "Sort data",
           "configProperty": "actionConfiguration.formData.list.sortBy.data",
@@ -132,12 +127,7 @@
           "-subtitle": "Array of Objects",
           "-tooltipText": "Array of Objects",
           "-alternateViewTypes": ["json"]
-        }
-      ]
-    },
-    {
-      "controlType": "SINGLE_COLUMN_ZONE",
-      "children": [
+        },
         {
           "label": "Paginate data",
           "configProperty": "actionConfiguration.formData.list.pagination.data",