feat: Action redesign: Updating the config for SMTP plugin to use sections and zones format (#36091)

## 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"

### 🔍 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 -->
This commit is contained in:
Ankita Kinger 2024-09-05 10:41:26 +05:30 committed by GitHub
parent 7d7a601cdc
commit 5aa93926ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 155 additions and 80 deletions

View File

@ -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}

View File

@ -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) {

View File

@ -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}}"
}
]
}
]
}

View File

@ -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"]
}

View File

@ -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}}"
}
]
}