From 5aa93926ef3e024b0e2274829bdc0088b79dbe8a Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Thu, 5 Sep 2024 10:41:26 +0530
Subject: [PATCH] feat: Action redesign: Updating the config for SMTP plugin to
 use sections and zones format (#36091)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Action redesign: Updating the config for SMTP plugin to use sections and
zones format

Fixes [#35505 ](https://github.com/appsmithorg/appsmith/issues/35505)

## Automation

/ok-to-test tags="@tag.All"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10704929692>
> Commit: f58dfce0a2729442a0e1222762f97cc483e5459b
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10704929692&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 04 Sep 2024 19:46:08 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a comprehensive email sending interface in the SMTP plugin,
allowing users to input recipient addresses, subject, body type, and
attachments.
- Enhanced layout with a new `DOUBLE_COLUMN_ZONE` structure for improved
organization of input fields.

- **Improvements**
- Expanded styling capabilities for the dynamic input text control,
allowing for more flexible sizing and better responsiveness in the UI.
- Updated existing configurations to streamline the email composition
process and improve user experience.

- **Bug Fixes**
- Adjusted CSS rules to remove minimum height and width constraints for
better adaptability of UI components.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../formControls/DynamicInputTextControl.tsx  |   5 +-
 .../Editor/ActionForm/Zone/styles.module.css  |   5 +
 .../src/main/resources/editor/body.json       | 108 ++++++++++++++++++
 .../src/main/resources/editor/root.json       |  26 +++--
 .../src/main/resources/editor/send.json       |  91 ++++-----------
 5 files changed, 155 insertions(+), 80 deletions(-)
 create mode 100644 app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/body.json

diff --git a/app/client/src/components/formControls/DynamicInputTextControl.tsx b/app/client/src/components/formControls/DynamicInputTextControl.tsx
index 874a8c9e9e..752dbede42 100644
--- a/app/client/src/components/formControls/DynamicInputTextControl.tsx
+++ b/app/client/src/components/formControls/DynamicInputTextControl.tsx
@@ -84,7 +84,10 @@ export function InputText(props: {
     }
   }
   return (
-    <div className={`t--${props?.name}`} style={customStyle}>
+    <div
+      className={`t--${props?.name} uqi-dynamic-input-text`}
+      style={customStyle}
+    >
       {/* <div style={customStyle}> */}
       <StyledDynamicTextField
         dataTreePath={dataTreePath}
diff --git a/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css b/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css
index 93953ba2b3..721ced4084 100644
--- a/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css
+++ b/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css
@@ -47,6 +47,11 @@
       }
     }
   }
+  /* DynamicInputTextControl min height and width removed */
+  & :global(.uqi-dynamic-input-text) {
+    width: unset !important;
+    min-height: unset !important;
+  }
 
   /* Remove when code editor min width is resolved in DynamicTextFeildControl */
   & :global(.dynamic-text-field-control) {
diff --git a/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/body.json b/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/body.json
new file mode 100644
index 0000000000..90620553a1
--- /dev/null
+++ b/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/body.json
@@ -0,0 +1,108 @@
+{
+  "controlType": "SECTION_V2",
+  "identifier": "BODY",
+  "conditionals": {
+    "show": "{{actionConfiguration.formData.command === 'SEND'}}"
+  },
+  "children": [
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "BODY-Z1",
+      "children": [
+        {
+          "label": "Recepients",
+          "subtitle": "Separate with comma",
+          "configProperty": "actionConfiguration.formData.send.to",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "evaluationSubstitutionType": "TEMPLATE",
+          "placeholderText": "email@example.com, email2@example.com",
+          "isRequired": true
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "BODY-Z2",
+      "children": [
+        {
+          "label": "CC",
+          "subtitle": "Separate with comma",
+          "configProperty": "actionConfiguration.formData.send.cc",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "evaluationSubstitutionType": "TEMPLATE",
+          "placeholderText": "email@example.com, email2@example.com"
+        },
+        {
+          "label": "BCC",
+          "subtitle": "Separate with comma",
+          "configProperty": "actionConfiguration.formData.send.bcc",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "evaluationSubstitutionType": "TEMPLATE",
+          "placeholderText": "email@example.com, email2@example.com"
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "BODY-Z3",
+      "children": [
+        {
+          "label": "Subject",
+          "configProperty": "actionConfiguration.formData.send.subject",
+          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
+          "evaluationSubstitutionType": "TEMPLATE",
+          "placeholderText": "Awesome email subject"
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "BODY-Z4",
+      "children": [
+        {
+          "label": "Body type",
+          "configProperty": "actionConfiguration.formData.send.bodyType",
+          "controlType": "DROP_DOWN",
+          "initialValue": "text/plain",
+          "options": [
+            {
+              "label": "Plain text",
+              "value": "text/plain"
+            },
+            {
+              "label": "HTML",
+              "value": "text/html"
+            }
+          ],
+          "evaluationSubstitutionType": "TEMPLATE"
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "BODY-Z5",
+      "children": [
+        {
+          "label": "Body",
+          "configProperty": "actionConfiguration.body",
+          "controlType": "QUERY_DYNAMIC_TEXT",
+          "evaluationSubstitutionType": "TEMPLATE",
+          "placeholderText": "Incredible body text"
+        }
+      ]
+    },
+    {
+      "controlType": "SINGLE_COLUMN_ZONE",
+      "identifier": "BODY-Z6",
+      "children": [
+        {
+          "label": "Attachment(s)",
+          "configProperty": "actionConfiguration.formData.send.attachments",
+          "controlType": "QUERY_DYNAMIC_TEXT",
+          "evaluationSubstitutionType": "TEMPLATE",
+          "placeholderText": "{{Filepicker.files}}"
+        }
+      ]
+    }
+  ]
+}
diff --git a/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/root.json b/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/root.json
index 191cbf2a73..8a59a0c4c8 100644
--- a/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/root.json
+++ b/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/root.json
@@ -1,24 +1,30 @@
 {
   "editor": [
     {
-      "controlType": "SECTION",
+      "controlType": "SECTION_V2",
       "identifier": "SELECTOR",
       "children": [
         {
-          "label": "Command",
-          "description": "Choose method you would like to use to send an email",
-          "configProperty": "actionConfiguration.formData.command",
-          "controlType": "DROP_DOWN",
-          "initialValue": "SEND",
-          "options": [
+          "controlType": "DOUBLE_COLUMN_ZONE",
+          "identifier": "SELECTOR-Z1",
+          "children": [
             {
-              "label": "Send email",
-              "value": "SEND"
+              "label": "Command",
+              "description": "Choose method you would like to use to send an email",
+              "configProperty": "actionConfiguration.formData.command",
+              "controlType": "DROP_DOWN",
+              "initialValue": "SEND",
+              "options": [
+                {
+                  "label": "Send email",
+                  "value": "SEND"
+                }
+              ]
             }
           ]
         }
       ]
     }
   ],
-  "files": ["send.json"]
+  "files": ["send.json", "body.json"]
 }
diff --git a/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/send.json b/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/send.json
index babfc19e1d..68d6e80193 100644
--- a/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/send.json
+++ b/app/server/appsmith-plugins/smtpPlugin/src/main/resources/editor/send.json
@@ -1,96 +1,49 @@
 {
+  "controlType": "SECTION_V2",
   "identifier": "SEND",
-  "controlType": "SECTION",
   "conditionals": {
     "show": "{{actionConfiguration.formData.command === 'SEND'}}"
   },
   "children": [
     {
-      "controlType": "SECTION",
-      "label": "Email Configuration",
-      "description": "Optional",
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "SEND-Z1",
       "children": [
         {
-          "label": "From email *",
+          "label": "From email",
           "configProperty": "actionConfiguration.formData.send.from",
           "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
           "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "fromAddress@example.com"
-        },
+          "placeholderText": "email@example.com",
+          "isRequired": true
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "SEND-Z2",
+      "children": [
         {
-          "label": "Set Reply To Email",
+          "label": "Set reply to email",
           "configProperty": "actionConfiguration.formData.send.isReplyTo",
           "controlType": "SWITCH",
           "evaluationSubstitutionType": "TEMPLATE"
-        },
+        }
+      ]
+    },
+    {
+      "controlType": "DOUBLE_COLUMN_ZONE",
+      "identifier": "SEND-Z3",
+      "children": [
         {
           "label": "Reply to email",
           "configProperty": "actionConfiguration.formData.send.replyTo",
           "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
           "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "replyTo@example.com",
+          "placeholderText": "email@example.com",
           "conditionals": {
             "show": "{{actionConfiguration.formData.send.isReplyTo === true}}"
           }
-        },
-        {
-          "label": "To email(s) *",
-          "configProperty": "actionConfiguration.formData.send.to",
-          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-          "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "to@example.com,to2@example.com"
-        },
-        {
-          "label": "CC email(s)",
-          "configProperty": "actionConfiguration.formData.send.cc",
-          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-          "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "cc@example.com,cc2@example.com"
-        },
-        {
-          "label": "BCC email(s)",
-          "configProperty": "actionConfiguration.formData.send.bcc",
-          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-          "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "bcc@example.com,bcc2@example.com"
-        },
-        {
-          "label": "Subject",
-          "configProperty": "actionConfiguration.formData.send.subject",
-          "controlType": "QUERY_DYNAMIC_INPUT_TEXT",
-          "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "Awesome email subject"
-        },
-        {
-          "label": "Body type",
-          "configProperty": "actionConfiguration.formData.send.bodyType",
-          "controlType": "DROP_DOWN",
-          "initialValue": "text/plain",
-          "options": [
-            {
-              "label": "Plain text",
-              "value": "text/plain"
-            },
-            {
-              "label": "HTML",
-              "value": "text/html"
-            }
-          ],
-          "evaluationSubstitutionType": "TEMPLATE"
-        },
-        {
-          "label": "Body",
-          "configProperty": "actionConfiguration.body",
-          "controlType": "QUERY_DYNAMIC_TEXT",
-          "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "Incredible body text"
-        },
-        {
-          "label": "Attachment(s)",
-          "configProperty": "actionConfiguration.formData.send.attachments",
-          "controlType": "QUERY_DYNAMIC_TEXT",
-          "evaluationSubstitutionType": "TEMPLATE",
-          "placeholderText": "{{Filepicker.files}}"
         }
       ]
     }