feat: open EML attachments in a new tab

src/app.jsx

@@ -27,6 +27,7 @@ import { MAILS_ROUTE, MAIL_APP_ID } from './constants';
 import { getSettingsSubSections } from './views/settings/subsections';
 import { StoreProvider } from './store/redux';
 import { ParticipantRole } from './carbonio-ui-commons/constants/participants';
+import { ExtraWindowsManager } from './views/app/extra-windows/extra-window-manager';
 
 const LazyAppView = lazy(() =>
 	import(/* webpackChunkName: "mails-folder-panel-view" */ './views/app-view')
@@ -49,7 +50,9 @@ const LazySidebarView = lazy(() =>
 const AppView = () => (
 	<Suspense fallback={<Spinner />}>
 		<StoreProvider>
-			<LazyAppView />
+			<ExtraWindowsManager>
+				<LazyAppView />
+			</ExtraWindowsManager>
 		</StoreProvider>
 	</Suspense>
 );

src/commons/utils.tsx

@@ -6,7 +6,7 @@
 import moment from 'moment';
 import { find, isArray } from 'lodash';
 import { Account, t } from '@zextras/carbonio-shell-ui';
-import { Participant } from '../types/participant';
+import { Participant } from '../types';
 
 export const getTimeLabel = (date: number): string => {
 	const momentDate = moment(date);

src/types/details-pannel/index.d.ts

@@ -4,6 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { MailMessage } from '../messages';
+
+type OpenEmlPreviewType = (
+	parentMessageId: string,
+	attachmentName: string,
+	emlMessage: MailMessage
+) => void;
+
 export type MailEditHeaderType = {
 	folderId: string | number;
 	header: string | undefined;
@@ -20,9 +28,11 @@ export type AttachmentType = {
 	link: string;
 	downloadlink: string;
 	message: MailMessage;
+	isExternalMessage?: boolean;
 	part: string;
 	iconColors: IconColors;
 	att: EditorAttachmentFiles;
+	openEmlPreview?: OpenEmlPreviewType;
 };
 
 export type PreviewPanelActionsType = {

src/types/extra-windows/index.d.ts

@@ -0,0 +1,111 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+/**
+ * Descriptor of the new window/tab characteristics.
+ * @see Window.open
+ */
+export type ExtraWindowFeatures = {
+	popup?: boolean;
+	width?: number;
+	height?: number;
+	left?: number;
+	top?: number;
+	noopener?: boolean;
+	noreferrer?: boolean;
+};
+
+export type EventHandler = () => void;
+
+export type OpenEventHandler = (window: Window) => void;
+
+export type ExtraWindowCreationParams = {
+	/**
+	 * Children to render in the new window.
+	 */
+	children?: React.ReactNode;
+
+	/**
+	 * If set to true, the extra window component will be returned
+	 * instead of being rendered in a generic container
+	 */
+	returnComponent: boolean;
+
+	/**
+	 * The URL to open, if specified any children will be overridden.
+	 */
+	url?: string;
+
+	/**
+	 * The name of the window.
+	 */
+	name?: string;
+
+	/**
+	 * The title of the new window document.
+	 */
+	title?: string;
+
+	/**
+	 * The set of window features.
+	 */
+	features?: ExtraWindowFeatures;
+
+	/**
+	 * A function to be triggered before the new window unload.
+	 */
+	onBlock?: EventHandler | null;
+
+	/**
+	 * A function to be triggered when the new window could not be opened.
+	 */
+	onUnload?: EventHandler | null;
+
+	/**
+	 * A function to be triggered when the new window opened.
+	 */
+	onOpen?: OpenEventHandler | null;
+
+	/**
+	 * Indicate how to center the new window.
+	 */
+	center?: 'parent' | 'screen';
+
+	/**
+	 * If specified, copy styles from parent window's document.
+	 */
+	copyStyles?: boolean;
+
+	/**
+	 * If specified, close the window when the component is unmounted
+	 */
+	closeOnUnmount: boolean;
+};
+
+export type ExtraWindowProps = ExtraWindowCreationParams & { id: string };
+
+export type ExtraWindowContextType = {
+	windowId: string | undefined;
+};
+
+export type ExtraWindowsContextType = {
+	createWindow?: (props: ExtraWindowCreationParams) => ExtraWindowsCreationResult;
+	closeWindow?: (windowId: string) => void;
+	listWindows?: () => Array<ExtraWindowsCreationResult>;
+	getWindow?: (criteria: {
+		windowId?: string;
+		windowName?: string;
+	}) => ExtraWindowsCreationResult | undefined;
+	getFocusedWindow?: () => ExtraWindowsCreationResult | undefined;
+};
+
+export type ExtraWindowsCreationResult = {
+	id: string;
+	windowProps?: ExtraWindowProps;
+	window?: Window;
+	component?: React.ReactElement;
+};

src/types/index.d.ts

@@ -1,12 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 export * from './actions';
 export * from './conversations';
 export * from './editor';
+export * from './extra-windows';
 export * from './filters';
 export * from './folder';
 export * from './messages';

src/types/soap/get-msg.ts

@@ -9,6 +9,7 @@ import { ZimbraRequest } from './zimbra-request';
 export type GetMsgRequest = ZimbraRequest & {
 	m: {
 		id: string;
+		part?: string;
 		html: 0 | 1;
 		needExp: 0 | 1;
 	};

src/ui-actions/message-actions.tsx

@@ -208,8 +208,7 @@ export function printMsg({
 					}
 				})
 				.catch(() => {
-					const errorContent = errorPage;
-					if (printWindow) printWindow.document.write(errorContent);
+					if (printWindow) printWindow.document.write(errorPage);
 				});
 		}
 	};

src/views/app/detail-panel/edit/edit-view.tsx

@@ -372,6 +372,8 @@ const EditView: FC<EditViewPropType> = ({ setHeader }) => {
 		[action, editor?.attach?.mp?.length, editor?.original]
 	);
 
+	// const showAttachments = true;
+
 	const context: EditViewContextType = useMemo(
 		() => ({
 			editor,