diff --git a/components/email/__tests__/composer-windows-layout.test.tsx b/components/email/__tests__/composer-windows-layout.test.tsx new file mode 100644 index 000000000..fd1ccd18c --- /dev/null +++ b/components/email/__tests__/composer-windows-layout.test.tsx @@ -0,0 +1,240 @@ +import { render, screen, within } from '@testing-library/react'; +import { describe, it, expect, vi } from 'vitest'; +import React from 'react'; +import { EmailComposer } from '../email-composer'; + +// One layout in every composer: Send at the bottom end, Discard as a bin left +// of it, the formatting toolbar showing. A pop-out or quick compose window is +// narrower than a tablet, and used to get the phone's layout: Send in the +// header, Discard where Send was, the toolbar behind a button. + +vi.mock('@/components/email/rich-text-editor', () => ({ + RichTextEditor: ({ collapseToolbarOnMobile }: { collapseToolbarOnMobile?: boolean }) => + React.createElement('div', { 'data-testid': 'rich-text-editor', 'data-collapsed': String(!!collapseToolbarOnMobile) }), +})); + +vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null })); +vi.mock('@/components/ui/avatar', () => ({ Avatar: () => null })); +vi.mock('@/components/identity/sub-address-helper', () => ({ SubAddressHelper: () => null })); +vi.mock('@/components/templates/template-picker', () => ({ TemplatePicker: () => null })); +vi.mock('@/components/templates/template-form', () => ({ TemplateForm: () => null })); +vi.mock('@/components/files/file-preview-modal', () => ({ FilePreviewModal: () => null })); +vi.mock('@/hooks/use-focus-trap', () => ({ + useFocusTrap: () => ({ current: null }), +})); +vi.mock('@/hooks/use-pro-multi-account-identities', () => ({ + useProMultiAccountIdentities: () => ({ enabled: false, groups: [], allIdentities: [] }), + stripCrossAccountIdentityPrefix: (id: string) => ({ localAccountId: null, rawId: id }), +})); + +vi.mock('@/stores/auth-store', () => { + const state = { + client: null, + identities: [], + primaryIdentity: null, + isAuthenticated: false, + isDemoMode: false, + activeAccountId: null, + connectionLost: false, + getClientForAccount: () => undefined, + getAllConnectedClients: () => new Map(), + syncIdentities: () => {}, + refreshIdentities: async () => {}, + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useAuthStore: hook }; +}); + +vi.mock('@/stores/identity-store', () => { + const state = { + identities: [{ id: 'id-me', email: 'me@example.com', name: 'Me' }], + defaultIdentityId: 'id-me', + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useIdentityStore: hook }; +}); + +vi.mock('@/stores/account-store', () => { + const state = { accounts: [], getAccountById: () => undefined }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useAccountStore: hook }; +}); + +vi.mock('@/stores/email-store', () => { + const state = { + draftSaveEnabled: false, + sendRawEmail: async () => ({ sent: true }), + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useEmailStore: hook }; +}); + +vi.mock('@/stores/settings-store', () => { + const state = { + timeFormat: '24h', + plainTextMode: false, + subAddressDelimiter: '+', + autoSelectReplyIdentity: true, + attachmentReminderEnabled: false, + attachmentReminderKeywords: [], + emptySubjectWarningEnabled: true, + sendDelaySeconds: 0, + signaturePosition: 'above_quote', + signatureSeparatorEnabled: false, + requestReadReceiptDefault: false, + addTrustedSender: () => {}, + trustedSendersAddressBook: null, + updateSetting: () => {}, + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useSettingsStore: hook }; +}); + +vi.mock('@/stores/contact-store', () => { + const state = { + contacts: [], + getAutocomplete: async () => [], + addToTrustedSendersBook: async () => {}, + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useContactStore: hook }; +}); + +vi.mock('@/stores/template-store', () => { + const state = { templates: [], addTemplate: async () => {} }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial) => Object.assign(state, p); + return { useTemplateStore: hook }; +}); + +vi.mock('@/stores/toast-store', () => ({ + toast: { info: () => {}, error: () => {}, success: () => {}, warning: () => {} }, +})); + +vi.mock('@/lib/plugin-hooks', () => ({ + identityHooks: { + onSignatureRender: { size: 0, transform: async (value: unknown) => value }, + onIdentitySelect: { size: 0, emit: async () => {} }, + }, + templateHooks: { + onTemplateRender: { size: 0, transform: async (value: unknown) => value }, + onTemplateApply: { size: 0, emit: async () => {} }, + }, + emailHooks: { + onComposerOpen: { call: async () => [] }, + onRecipientChange: { call: async () => [] }, + getRecipientSuggestions: { call: async () => [] }, + onRecipientChipsChange: { transform: async (chips: unknown) => chips }, + onDraftChange: { emit: () => {} }, + onBeforeDraftAutoSave: { transform: async (draft: unknown) => draft }, + onBeforeEmailSend: { intercept: async () => true, interceptOutcome: async () => 'allowed' }, + onComposeSend: { takeOver: async () => 'default' }, + onTransformOutgoingEmail: { transform: async (email: unknown) => email }, + }, + contactHooks: { + search: { call: async () => [] }, + onProvideRecipientSuggestions: { transform: async (initial: unknown) => initial }, + }, +})); + +vi.mock('@/lib/email-sanitization', () => ({ + sanitizeSignatureHtml: (v: string) => v, + sanitizeEmailHtml: (v: string) => v, + parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'), +})); + +vi.mock('@/lib/email-threading', () => ({ + computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }), +})); +vi.mock('@/lib/signature-utils', () => ({ + appendPlainTextSignature: (body: string) => body, + getPlainTextSignature: () => '', +})); +vi.mock('@/lib/sub-addressing', () => ({ generateSubAddress: () => '' })); +vi.mock('@/lib/debug', () => ({ debug: { log: () => {}, warn: () => {}, error: () => {} } })); +vi.mock('@/components/email/quoted-html', () => ({ + buildQuotedHtmlBlock: () => '', + serializeEditorContent: () => '', +})); +vi.mock('@/lib/template-utils', () => ({ substitutePlaceholders: (s: string) => s })); + +const DATA = { + to: 'bob@example.com', + cc: '', + bcc: '', + subject: 'Lunch', + body: '

Hello there

', + showCc: false, + showBcc: false, + selectedIdentityId: 'id-me', + subAddressTag: '', + mode: 'compose' as const, + draftId: null, +}; + +const footer = () => document.querySelector('[data-composer-footer]')!; +const header = () => document.querySelector('[data-composer-header]')!; + +describe('a composer in a window of its own', () => { + it('has one Send, at the bottom end, with Discard as a bin right before it', () => { + render(); + const sends = screen.getAllByTestId('composer-send'); + expect(sends).toHaveLength(1); + expect(footer()).toContainElement(sends[0]); + expect(sends[0].className).not.toMatch(/(^|\s)hidden(\s|$)/); + expect(within(header()).queryByTestId('composer-send')).toBeNull(); + + const discard = screen.getByTestId('composer-discard'); + expect(discard.querySelector('svg')).not.toBeNull(); + // Right before Send, in the same group. + expect(discard.nextElementSibling).toBe(sends[0]); + }); + + it('shows the formatting toolbar, with no button to fold it away', () => { + render(); + expect(screen.getByTestId('rich-text-editor')).toHaveAttribute('data-collapsed', 'false'); + expect(screen.queryByRole('button', { name: 'formatting' })).toBeNull(); + }); + + it('keeps the close button where the main window has it', () => { + render(); + expect(screen.getByTestId('composer-close').className).not.toContain('order-first'); + }); +}); + +describe('a composer in the main window', () => { + it('keeps the phone layout for a phone: Send in the header there, toolbar folded', () => { + render(); + expect(within(header()).getByTestId('composer-send')).toBeInTheDocument(); + expect(screen.getByTestId('rich-text-editor')).toHaveAttribute('data-collapsed', 'true'); + expect(screen.getByRole('button', { name: 'formatting' })).toBeInTheDocument(); + }); + + it('shows Discard as a bin too, with its name for screen readers', () => { + render(); + const discard = screen.getByTestId('composer-discard'); + expect(discard).toHaveAccessibleName('discard'); + expect(discard.querySelector('svg')).not.toBeNull(); + expect(within(discard).getByText('discard').className).toContain('sr-only'); + }); +}); diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx index 3409f77db..42a8fb93b 100644 --- a/components/email/email-composer.tsx +++ b/components/email/email-composer.tsx @@ -1196,6 +1196,9 @@ export function EmailComposer({ // bar folded away behind "Aa" until asked for. const mvWindow = useMvComposeWindow(); const [mvShowFormatting, setMvShowFormatting] = useState(false); + // A pop-out or quick compose window is narrower than a tablet, but it is a + // window on a computer: it keeps the main window's layout, not the phone's. + const phoneLayout = !ownWindow; // "close" (X, Escape): save or discard. "discard" (the Discard button): the // user already chose, so only confirm it. const [closeDialogKind, setCloseDialogKind] = useState<'close' | 'discard'>('close'); @@ -4825,25 +4828,25 @@ export function EmailComposer({ {saveStatus === 'saving' && (
- {t('saving')} + {t('saving')}
)} {saveStatus === 'saved' && (
- {savedOnDevice ? tOfflineDrafts('saved_on_device') : t('draft_saved')} + {savedOnDevice ? tOfflineDrafts('saved_on_device') : t('draft_saved')}
)} {saveStatus === 'error' && (
- {t('save_failed')} + {t('save_failed')}
)} {/* Mobile: keep scheduled send reachable without consuming footer space. */} - {composerClient?.hasDelayedSend() || hasSendMenuActions ? ( + {phoneLayout && (composerClient?.hasDelayedSend() || hasSendMenuActions ? (
- )} + ))} {rightPanelToggle} - {popOutButton("hidden md:grid h-8 w-8 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground", "w-4 h-4")} + {popOutButton(cn(phoneLayout ? "hidden md:grid" : "grid", "h-8 w-8 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"), "w-4 h-4")} {/* Close at the top end (R4). On a phone it moves to the start, as the phone's mail apps have it, with Send at the end. */} handleClose()} - className="-me-2 max-md:order-first max-md:me-0 max-md:-ms-2 max-md:h-11 max-md:w-11" + className={phoneLayout ? "-me-2 max-md:order-first max-md:me-0 max-md:-ms-2 max-md:h-11 max-md:w-11" : "-me-2"} label={tCommon('close')} data-testid="composer-close" data-own-window-close={ownWindow ? "" : undefined} @@ -5300,7 +5303,7 @@ export function EmailComposer({ ariaInvalid={validationErrors.body} ariaDescribedBy={`${fieldIdBase}-body-error`} defaultTextStyle={composeStyle} - collapseToolbarOnMobile={!showFormattingOnMobile} + collapseToolbarOnMobile={phoneLayout && !showFormattingOnMobile} toolbarPlacement={mvWindow ? (mvShowFormatting ? 'bottom' : 'hidden') : 'top'} onEditorReady={handleEditorReady} mentionCandidates={recipientMentionsEnabled ? mentionCandidates : undefined} @@ -5565,7 +5568,7 @@ export function EmailComposer({ {t('attach')} )} - {!plainTextMode && ( + {!plainTextMode && (mvWindow || phoneLayout) && ( )} {composerClient?.hasDelayedSend() || hasSendMenuActions ? ( -
+