feat: Action redesign: Updating the config for MongoDB plugin to use …

…sections and zones format (#36098) ## Description Action redesign: Updating the config for MongoDB plugin to use sections and zones format Fixes [#35495](#35495) ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10791215638> > Commit: 245cde9 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10791215638&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Tue, 10 Sep 2024 17:47:21 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No  ## Summary by CodeRabbit - **New Features** - Enhanced styling capabilities for dynamic input text controls with new CSS class. - Improved layout and organization of UI components in MongoDB plugin with new control types, allowing for more flexible and responsive designs. - Added new controls for sorting and limiting criteria in query interfaces. - **Bug Fixes** - Adjusted CSS to remove minimum height and width constraints for better responsiveness. - **Refactor** - Updated control types across various JSON configurations to improve user experience and interface organization.
appsmithorg · Sep 11, 2024 · bc59bd1 · bc59bd1
1 parent 336bc08
commit bc59bd1
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 94 deletions.
diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/aggregate.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/aggregate.json
@@ -1,13 +1,13 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "AGGREGATE",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'AGGREGATE'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Select collection to query",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "AGGREGATE-Z1",
       "children": [
         {
           "label": "Collection",
@@ -32,9 +32,8 @@
       ]
     },
     {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "AGGREGATE-Z2",
       "children": [
         {
           "label": "Array of pipelines",
@@ -47,11 +46,17 @@
       ]
     },
     {
-      "label": "Limit",
-      "configProperty": "actionConfiguration.formData.aggregate.limit.data",
-      "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-      "evaluationSubstitutionType": "TEMPLATE",
-      "initialValue": "10"
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "AGGREGATE-Z3",
+      "children": [
+        {
+          "label": "Limit",
+          "configProperty": "actionConfiguration.formData.aggregate.limit.data",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "evaluationSubstitutionType": "TEMPLATE",
+          "initialValue": "10"
+        }
+      ]
     }
   ]
 }
diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/count.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/count.json
@@ -1,13 +1,13 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "COUNT",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'COUNT'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Select collection to query",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "COUNT-Z1",
       "children": [
         {
           "label": "Collection",
@@ -32,9 +32,8 @@
       ]
     },
     {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "COUNT-Z2",
       "children": [
         {
           "label": "Query",

diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/delete.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/delete.json
@@ -1,13 +1,13 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "DELETE",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'DELETE'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Select collection to query",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "DELETE-Z1",
       "children": [
         {
           "label": "Collection",
@@ -32,9 +32,8 @@
       ]
     },
     {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "DELETE-Z2",
       "children": [
         {
           "label": "Query",
@@ -43,7 +42,13 @@
           "inputType": "JSON",
           "evaluationSubstitutionType": "TEMPLATE",
           "placeholderText": "{rating : {$gte : 9}}"
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "DELETE-Z3",
+      "children": [
         {
           "label": "Limit",
           "configProperty": "actionConfiguration.formData.delete.limit.data",

diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/distinct.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/distinct.json
@@ -1,13 +1,13 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "DISTINCT",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'DISTINCT'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Select collection to query",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "DISTINCT-Z1",
       "children": [
         {
           "label": "Collection",
@@ -32,9 +32,8 @@
       ]
     },
     {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "DISTINCT-Z2",
       "children": [
         {
           "label": "Query",
@@ -43,7 +42,13 @@
           "inputType": "JSON",
           "evaluationSubstitutionType": "TEMPLATE",
           "placeholderText": "{rating : {$gte : 9}}"
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "DISTINCT-Z3",
+      "children": [
         {
           "label": "Key",
           "configProperty": "actionConfiguration.formData.distinct.key.data",

diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/find.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/find.json
@@ -1,13 +1,13 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "FIND",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'FIND'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Select collection to query",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "FIND-Z1",
       "children": [
         {
           "label": "Collection",
@@ -32,17 +32,22 @@
       ]
     },
     {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "FIND-Z2",
       "children": [
         {
           "label": "Query",
           "configProperty": "actionConfiguration.formData.find.query.data",
           "controlType": "QUERY_DYNAMIC_TEXT",
           "evaluationSubstitutionType": "TEMPLATE",
           "placeholderText": "{rating : {$gte : 9}}"
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "FIND-Z3",
+      "children": [
         {
           "label": "Sort",
           "configProperty": "actionConfiguration.formData.find.sort.data",
@@ -58,7 +63,13 @@
           "inputType": "JSON",
           "evaluationSubstitutionType": "TEMPLATE",
           "placeholderText": "{name : 1}"
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "FIND-Z4",
+      "children": [
         {
           "label": "Limit",
           "configProperty": "actionConfiguration.formData.find.limit.data",

diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/insert.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/insert.json
@@ -1,13 +1,13 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "INSERT",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'INSERT'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Select collection to query",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "INSERT-Z1",
       "children": [
         {
           "label": "Collection",
@@ -32,9 +32,8 @@
       ]
     },
     {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "INSERT-Z2",
       "children": [
         {
           "label": "Documents",

diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/raw.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/raw.json
@@ -1,14 +1,13 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "RAW",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command.data === 'RAW'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Query",
-      "description": "Optional",
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "RAW-Z1",
       "children": [
         {
           "label": "",

diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/root.json b/app/server/appsmith-plugins/mongoPlugin/src/main/resources/editor/root.json
@@ -1,47 +1,53 @@
 {
   "editor": [
     {
-      "controlType": "SECTION",
+      "controlType": "SECTION_V2",
       "identifier": "SELECTOR",
       "children": [
         {
-          "label": "Command",
-          "description": "Choose method you would like to use to query the database",
-          "configProperty": "actionConfiguration.formData.command.data",
-          "controlType": "DROP_DOWN",
-          "initialValue": "FIND",
-          "options": [
+          "controlType": "DOUBLE_COLUMN_ZONE",
+          "identifier": "SELECTOR-Z1",
+          "children": [
             {
-              "label": "Find document(s)",
-              "value": "FIND"
-            },
-            {
-              "label": "Insert document(s)",
-              "value": "INSERT"
-            },
-            {
-              "label": "Update document(s)",
-              "value": "UPDATE"
-            },
-            {
-              "label": "Delete document(s)",
-              "value": "DELETE"
-            },
-            {
-              "label": "Count",
-              "value": "COUNT"
-            },
-            {
-              "label": "Distinct",
-              "value": "DISTINCT"
-            },
-            {
-              "label": "Aggregate",
-              "value": "AGGREGATE"
-            },
-            {
-              "label": "Raw",
-              "value": "RAW"
+              "label": "Command",
+              "description": "Choose method you would like to use to query the database",
+              "configProperty": "actionConfiguration.formData.command.data",
+              "controlType": "DROP_DOWN",
+              "initialValue": "FIND",
+              "options": [
+                {
+                  "label": "Find document(s)",
+                  "value": "FIND"
+                },
+                {
+                  "label": "Insert document(s)",
+                  "value": "INSERT"
+                },
+                {
+                  "label": "Update document(s)",
+                  "value": "UPDATE"
+                },
+                {
+                  "label": "Delete document(s)",
+                  "value": "DELETE"
+                },
+                {
+                  "label": "Count",
+                  "value": "COUNT"
+                },
+                {
+                  "label": "Distinct",
+                  "value": "DISTINCT"
+                },
+                {
+                  "label": "Aggregate",
+                  "value": "AGGREGATE"
+                },
+                {
+                  "label": "Raw",
+                  "value": "RAW"
+                }
+              ]
             }
           ]
         }