Repository navigation
feat(workflows): edit a transactional template's sender from the editor #121079
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { IconExternal } from '@posthog/icons' | ||
| import { LemonButton, LemonSelect } from '@posthog/lemon-ui' | ||
|
|
||
| import { LemonField } from 'lib/lemon-ui/LemonField' | ||
| import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' | ||
| import { urls } from 'scenes/urls' | ||
|
|
||
| import { | ||
| EmailSender, | ||
| addressFromLocalPart, | ||
| addressLocalPart, | ||
| senderAddressError, | ||
| senderDomain, | ||
| } from './emailSenderFields' | ||
| import { EmailTemplateFrom } from './types' | ||
|
|
||
| const ADD_SENDER = -1 | ||
|
|
||
| function senderLabel(sender: EmailSender): string { | ||
| const { name, email } = sender.config ?? {} | ||
| return name && email ? `${name} <${email}>` : (email ?? sender.display_name ?? `Sender ${sender.id}`) | ||
| } | ||
|
|
||
| export function EmailSenderForm({ | ||
| from, | ||
| replyTo, | ||
| senders, | ||
| onChangeFrom, | ||
| onChangeReplyTo, | ||
| onDone, | ||
| }: { | ||
| from: EmailTemplateFrom | ||
| replyTo: string | undefined | ||
| senders: EmailSender[] | ||
| onChangeFrom: (from: EmailTemplateFrom) => void | ||
| onChangeReplyTo: (replyTo: string) => void | ||
| onDone: () => void | ||
| }): JSX.Element { | ||
| const sender = senders.find((candidate) => candidate.id === from.integrationId) | ||
| const domain = senderDomain(sender) | ||
| const senderEmail = sender?.config?.email | ||
| const localPart = addressLocalPart(from.email, domain) | ||
|
|
||
| const onChangeSender = (integrationId: number): void => { | ||
| if (integrationId === ADD_SENDER) { | ||
| window.open(urls.workflows('channels'), '_blank') | ||
| return | ||
| } | ||
| // A custom address keeps its part before the @ and moves to the new sender's domain. | ||
| const nextDomain = senderDomain(senders.find((candidate) => candidate.id === integrationId)) | ||
| const email = from.email ? addressFromLocalPart(addressLocalPart(from.email, domain), nextDomain) : undefined | ||
| onChangeFrom({ ...from, integrationId, email }) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-3 p-2 w-100 max-w-full"> | ||
| <LemonField.Pure label="Sender"> | ||
| <LemonSelect | ||
| fullWidth | ||
| placeholder="Choose a sender" | ||
| value={from.integrationId} | ||
| onChange={onChangeSender} | ||
| options={[ | ||
| { | ||
| options: senders.map((candidate) => ({ | ||
| value: candidate.id, | ||
| label: senderLabel(candidate), | ||
| })), | ||
| }, | ||
| { options: [{ value: ADD_SENDER, label: 'Add new email sender', icon: <IconExternal /> }] }, | ||
| ]} | ||
| data-attr="transactional-email-sender-select" | ||
| /> | ||
| </LemonField.Pure> | ||
| <LemonField.Pure label="Display name" help="Shown in the inbox. Supports Liquid templating."> | ||
| <LemonInput | ||
| value={from.name ?? ''} | ||
| placeholder={sender?.config?.name || "The sender's name"} | ||
| onChange={(name) => onChangeFrom({ ...from, name: name || undefined })} | ||
| data-attr="transactional-email-sender-name" | ||
| /> | ||
| </LemonField.Pure> | ||
| <LemonField.Pure | ||
| label="Address" | ||
| help={senderEmail ? `Leave empty to send from ${senderEmail}.` : undefined} | ||
| error={senderAddressError(from.email, sender)} | ||
| > | ||
| <LemonInput | ||
| value={localPart} | ||
| placeholder={senderEmail?.split('@')[0]} | ||
| // A pasted full address already has its own domain, so the suffix would only confuse it. | ||
| suffix={ | ||
| domain && !localPart.includes('@') ? ( | ||
| <span className="text-secondary">{`@${domain}`}</span> | ||
| ) : undefined | ||
| } | ||
| onChange={(localPart) => onChangeFrom({ ...from, email: addressFromLocalPart(localPart, domain) })} | ||
| data-attr="transactional-email-sender-address" | ||
| /> | ||
| </LemonField.Pure> | ||
| <LemonField.Pure label="Reply-to" help="Separate several addresses with commas."> | ||
| <LemonInput | ||
| value={replyTo ?? ''} | ||
| placeholder={sender?.config?.reply_to || 'Replies go to the sender address'} | ||
| onChange={onChangeReplyTo} | ||
| data-attr="transactional-email-reply-to" | ||
| /> | ||
| </LemonField.Pure> | ||
| <div className="flex justify-end"> | ||
| <LemonButton type="primary" size="small" onClick={onDone}> | ||
| Done | ||
| </LemonButton> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { useActions, useValues } from 'kea' | ||
| import { useState } from 'react' | ||
|
|
||
| import { IconPencil } from '@posthog/icons' | ||
| import { LemonButton, LemonDropdown, LemonLabel } from '@posthog/lemon-ui' | ||
|
|
||
| import { integrationsLogic } from 'lib/integrations/integrationsLogic' | ||
|
|
||
| import { senderAddressError, senderFrom, senderIntegrationFor } from './emailSenderFields' | ||
| import { EmailSenderForm } from './EmailSenderForm' | ||
| import { emailTemplaterLogic } from './emailTemplaterLogic' | ||
|
|
||
| export function EmailSenderSummary(): JSX.Element { | ||
|
Check warning on line 13 in frontend/src/scenes/hog-functions/email-templater/EmailSenderSummary.tsx
|
||
| const { emailTemplate } = useValues(emailTemplaterLogic) | ||
| const { setEmailTemplateValue } = useActions(emailTemplaterLogic) | ||
| const { integrations } = useValues(integrationsLogic) | ||
| const [isEditing, setIsEditing] = useState(false) | ||
|
|
||
| const senders = (integrations ?? []).filter((integration) => integration.kind === 'email') | ||
| const from = senderFrom(emailTemplate) | ||
| const sender = senderIntegrationFor(emailTemplate, senders) | ||
| const name = from.name || sender?.config?.name | ||
| const address = from.email || sender?.config?.email | ||
| const replyTo = emailTemplate.replyTo || sender?.config?.reply_to | ||
| const addressError = senderAddressError(from.email, sender) | ||
|
|
||
| return ( | ||
| <div className="flex gap-2 items-center pl-2 pr-1 py-1 border-b shrink-0 min-w-0"> | ||
| <LemonLabel className="shrink-0">From</LemonLabel> | ||
| <div className="flex-1 min-w-0 px-2"> | ||
| {sender ? ( | ||
| <div className="truncate"> | ||
| {name ? <span className="font-semibold">{name}</span> : null} | ||
| <span className="text-secondary">{name ? ` <${address}>` : address}</span> | ||
| </div> | ||
| ) : ( | ||
| <div className="text-secondary">Choose who this email comes from</div> | ||
| )} | ||
| {replyTo ? <div className="text-xs text-secondary truncate">{`Replies go to ${replyTo}`}</div> : null} | ||
| {addressError ? <div className="text-xs text-danger">{addressError}</div> : null} | ||
| </div> | ||
| <LemonDropdown | ||
| visible={isEditing} | ||
| onVisibilityChange={setIsEditing} | ||
| closeOnClickInside={false} | ||
| placement="bottom-end" | ||
| overlay={ | ||
| <EmailSenderForm | ||
| from={from} | ||
| replyTo={emailTemplate.replyTo} | ||
| senders={senders} | ||
| onChangeFrom={(next) => setEmailTemplateValue('from', next)} | ||
| onChangeReplyTo={(next) => setEmailTemplateValue('replyTo', next)} | ||
| onDone={() => setIsEditing(false)} | ||
| /> | ||
| } | ||
| > | ||
| <LemonButton | ||
| size="small" | ||
| type="secondary" | ||
| icon={<IconPencil />} | ||
| status={addressError ? 'danger' : 'default'} | ||
| data-attr="transactional-email-sender-edit" | ||
| > | ||
| {sender ? 'Edit sender' : 'Choose sender'} | ||
| </LemonButton> | ||
| </LemonDropdown> | ||
| </div> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { addressFromLocalPart, addressLocalPart, senderAddressError } from './emailSenderFields' | ||
|
|
||
| describe('emailSenderFields', () => { | ||
| const withDomain = { id: 1, config: { email: 'hello@example.com', domain: 'example.com' } } | ||
| // Senders without a stored domain are checked against their own address's domain. | ||
| const withoutDomain = { id: 2, config: { email: 'hello@example.com' } } | ||
|
|
||
| test.each([ | ||
| ['an empty address', '', withDomain], | ||
| ['an address on the verified domain', 'security@example.com', withDomain], | ||
| ['an address whose domain differs only in case', 'security@Example.COM', withDomain], | ||
| ['a templated address', '{{ variables.alias }}@example.org', withDomain], | ||
| ])('accepts %s', (_name, address, sender) => { | ||
| expect(senderAddressError(address, sender)).toBeNull() | ||
| }) | ||
|
|
||
| test.each([ | ||
| ['an address on another domain', 'security@example.org', withDomain, 'Use an address on example.com'], | ||
| ['an address off the domain of the sender address', 'security@example.org', withoutDomain, 'example.com'], | ||
| ['a name instead of an address', 'Security team', withDomain, 'Enter one email address'], | ||
| ['two addresses', 'a@example.com, b@example.com', withDomain, 'Enter one email address'], | ||
| ['an address too long to deliver', `${'a'.repeat(250)}@example.com`, withDomain, 'at most 254 characters'], | ||
| ])('rejects %s', (_name, address, sender, expected) => { | ||
| expect(senderAddressError(address, sender)).toContain(expected) | ||
| }) | ||
|
|
||
| test.each([ | ||
| ['adds the domain to a local part', 'security', 'security@example.com'], | ||
| ['keeps a templated local part on the domain', '{{ variables.team }}', '{{ variables.team }}@example.com'], | ||
| ['keeps an address that already has a domain', 'security@example.org', 'security@example.org'], | ||
| ['clears the address when the input is empty', ' ', undefined], | ||
| ])('%s', (_name, localPart, expected) => { | ||
| expect(addressFromLocalPart(localPart, 'example.com')).toEqual(expected) | ||
| }) | ||
|
|
||
| test.each([ | ||
| ['strips the verified domain', 'security@Example.com', 'security'], | ||
| ['shows an off-domain address whole so its error is visible', 'security@example.org', 'security@example.org'], | ||
| ])('%s', (_name, address, expected) => { | ||
| expect(addressLocalPart(address, 'example.com')).toEqual(expected) | ||
| }) | ||
| }) |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P2 · Carry custom sender overrides into test emails
After setting a custom name or address here, clicking “Send test” sends neither override.
messageTemplateTestSendLogic.sendTestEmailspreads the template content, then replacesfromwith only the test integration ID, so the received message uses the integration's default identity. Preserve the template's name and address when constructing the test sender.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed in dde6371. A test send defaults to the template's own sender and keeps its custom name and address. The send test now sets a non-default sender with overrides and asserts all three reach the email step.