feat: Action redesign: Updating the config for Google sheets plugin to use sections and zones format

app/client/src/components/formControls/SortingControl.tsx

@@ -52,12 +52,15 @@ const orderFieldConfig: any = {
   ],
 };
 
-const SortingContainer = styled.div<{ isBreakpointSmall: boolean }>`
-  display: grid;
-  grid-template-columns: ${({ isBreakpointSmall }) =>
-    isBreakpointSmall ? "1fr 50px" : "1fr 50px"};
+const SortingContainer = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+`;
+
+const SortingDropdownContainer = styled.div`
+  display: flex;
   gap: 5px;
-  align-items: center;
 `;
 
 const SortingFields = styled.div<{ isBreakpointSmall: boolean }>`
@@ -133,11 +136,7 @@ function SortingComponent(props: SortingComponentProps) {
   }, [fields.length]);
 
   return (
-    <SortingContainer
-      className={`t--${props?.configProperty}`}
-      isBreakpointSmall={isBreakpointSmall}
-      ref={targetRef}
-    >
+    <SortingContainer className={`t--${props?.configProperty}`} ref={targetRef}>
       {fields &&
         fields.length > 0 &&
         fields.map((field, index: number) => {
@@ -152,7 +151,10 @@ function SortingComponent(props: SortingComponentProps) {
           );
 
           return (
-            <React.Fragment key={index}>
+            <SortingDropdownContainer
+              className="sorting-dropdown-container"
+              key={index}
+            >
               <SortingFields isBreakpointSmall={isBreakpointSmall}>
                 <FormControl
                   config={{
@@ -188,7 +190,7 @@ function SortingComponent(props: SortingComponentProps) {
                 startIcon="close-line"
                 value={index}
               />
-            </React.Fragment>
+            </SortingDropdownContainer>
           );
         })}
       <ButtonWrapper>

app/client/src/pages/Editor/ActionForm/Zone/styles.module.css

@@ -47,6 +47,35 @@
       }
     }
   }
+  /* PaginationControl hardcoded width is removed */
+  & :global(.t--form-control-PAGINATION) {
+    & > div {
+      grid-gap: 1rem !important;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
+
+      & > div {
+        width: unset !important;
+        margin-right: 0 !important;
+      }
+    }
+  }
+  /* SortingControl hardcoded width is removed */
+  & :global(.t--form-control-SORTING) {
+    & :global(.sorting-dropdown-container) {
+      width: unset;
+
+      & > div {
+        width: 100%;
+        flex: 1;
+      }
+    }
+  }
+  /* WhereClauseControl hardcoded width is removed */
+  & :global(.t--form-control-WHERE_CLAUSE) {
+    & > div {
+      padding-right: 0 !important;
+    }
+  }
   /* DynamicInputTextControl min height and width removed */
   & :global(.uqi-dynamic-input-text) {
     width: unset !important;

app/server/appsmith-plugins/googleSheetsPlugin/src/main/resources/editor/delete.json

@@ -1,18 +1,24 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "DELETE",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'DELETE_ONE' && actionConfiguration.formData.entityType.data == 'ROWS'}}"
   },
   "children": [
     {
-      "label": "Row Index",
-      "tooltipText": "The rowIndex property of the row object returned by the fetch query",
-      "propertyName": "rows_delete_rowIndex",
-      "configProperty": "actionConfiguration.formData.rowIndex.data",
-      "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-      "isRequired": true,
-      "placeholderText": "{{Table1.selectedRow.rowIndex}}"
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "DELETE-Z1",
+      "children": [
+        {
+          "label": "Row Index",
+          "tooltipText": "The rowIndex property of the row object returned by the fetch query",
+          "propertyName": "rows_delete_rowIndex",
+          "configProperty": "actionConfiguration.formData.rowIndex.data",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "isRequired": true,
+          "placeholderText": "{{Table1.selectedRow.rowIndex}}"
+        }
+      ]
     }
   ]
 }

app/server/appsmith-plugins/googleSheetsPlugin/src/main/resources/editor/entity_data.json

@@ -0,0 +1,108 @@
+{
+  "controlType": "SECTION_V2",
+  "identifier": "ENTITY_SELECTOR",
+  "children": [
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "ENTITY-SELECTOR-Z1",
+      "children": [
+        {
+          "label": "Entity",
+          "tooltipText": "The entity to query on the datasource",
+          "description": "Select the entity that you would like to work with",
+          "propertyName": "entityType",
+          "configProperty": "actionConfiguration.formData.entityType.data",
+          "controlType": "DROP_DOWN",
+          "initialValue": "ROWS",
+          "isRequired": true,
+          "setFirstOptionAsDefault": true,
+          "options": [
+            {
+              "disabled": "{{ ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'UPDATE_MANY', 'INSERT_MANY'].includes(actionConfiguration.formData.command.data) === false }}",
+              "label": "Sheet Row(s)",
+              "value": "ROWS"
+            },
+            {
+              "disabled": "{{ ['FETCH_MANY', 'FETCH_DETAILS', 'INSERT_ONE', 'DELETE_ONE'].includes(actionConfiguration.formData.command.data) === false || (['INSERT_ONE', 'DELETE_ONE'].includes(actionConfiguration.formData.command.data) === true &&  ['https://www.googleapis.com/auth/drive.file'].includes(datasourceConfiguration.authentication.scopeString) === true)}}",
+              "label": "Spreadsheet",
+              "value": "SPREADSHEET"
+            },
+            {
+              "disabled": "{{ ['DELETE_ONE'].includes(actionConfiguration.formData.command.data) === false }}",
+              "label": "Sheet",
+              "value": "SHEET"
+            }
+          ],
+          "conditionals": {
+            "evaluateFormConfig": {
+              "condition": "{{true}}",
+              "paths": ["options"]
+            }
+          }
+        },
+        {
+          "label": "Spreadsheet",
+          "tooltipText": "The URL of the spreadsheet in your Google Drive",
+          "propertyName": "rows_get_spreadsheetUrl",
+          "configProperty": "actionConfiguration.formData.sheetUrl.data",
+          "controlType": "DROP_DOWN",
+          "isSearchable": true,
+          "isRequired": true,
+          "-placeholderText": "https://docs.google.com/spreadsheets/d/xyz/edit#gid=0",
+          "fetchOptionsConditionally": true,
+          "alternateViewTypes": ["json"],
+          "conditionals": {
+            "show": "{{ !!actionConfiguration.formData.entityType.data && (new Object({ 'SPREADSHEET': ['FETCH_DETAILS', 'DELETE_ONE'], 'SHEET': ['DELETE_ONE'], 'ROWS': ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'INSERT_MANY', 'UPDATE_MANY'] })[actionConfiguration.formData.entityType.data].includes(actionConfiguration.formData.command.data))  }}",
+            "fetchDynamicValues": {
+              "condition": "{{true}}",
+              "config": {
+                "params": {
+                  "requestType": "SPREADSHEET_SELECTOR",
+                  "displayType": "DROP_DOWN"
+                }
+              }
+            }
+          }
+        },
+        {
+          "label": "Sheet name",
+          "propertyName": "rows_get_sheetName",
+          "tooltipText": "The name of the sheet inside the spreadsheet",
+          "configProperty": "actionConfiguration.formData.sheetName.data",
+          "controlType": "DROP_DOWN",
+          "isSearchable": true,
+          "isRequired": true,
+          "fetchOptionsConditionally": true,
+          "alternateViewTypes": ["json"],
+          "conditionals": {
+            "show": "{{ new Object({ 'SPREADSHEET': [], 'SHEET': ['DELETE_ONE'], 'ROWS': ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'INSERT_MANY', 'UPDATE_MANY'] })[actionConfiguration.formData.entityType.data].includes(actionConfiguration.formData.command.data) && !!actionConfiguration.formData.sheetUrl.data }}",
+            "fetchDynamicValues": {
+              "condition": "{{ !!actionConfiguration.formData.sheetUrl.data }}",
+              "config": {
+                "params": {
+                  "requestType": "SHEET_SELECTOR",
+                  "displayType": "DROP_DOWN",
+                  "parameters": {
+                    "sheetUrl": "{{actionConfiguration.formData.sheetUrl.data}}"
+                  }
+                }
+              }
+            }
+          }
+        },
+        {
+          "label": "Table heading row index",
+          "tooltipText": "The index of the column names in the sheet (starts from 1)",
+          "propertyName": "rows_get_tableHeadingRowIndex",
+          "configProperty": "actionConfiguration.formData.tableHeaderIndex.data",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "initialValue": "1",
+          "isRequired": true,
+          "conditionals": {
+            "show": "{{ new Object({ 'SPREADSHEET': [], 'SHEET': [], 'ROWS': ['INSERT_ONE', 'UPDATE_ONE', 'DELETE_ONE', 'FETCH_MANY', 'INSERT_MANY', 'UPDATE_MANY'] })[actionConfiguration.formData.entityType.data].includes(actionConfiguration.formData.command.data) && !!actionConfiguration.formData.sheetName.data }}"
+          }
+        }
+      ]
+    }
+  ]
+}