fix: open in new window function without content (#579)

Refs: IRIS-5012
zextras · Jun 12, 2024 · 4f19ac1 · 4f19ac1
1 parent ce35af0
commit 4f19ac1
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 44 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -12,6 +12,7 @@ import { registerShellIntegrations } from './app-utils/register-shell-integratio
 import { FOLDER_VIEW } from './carbonio-ui-commons/constants';
 import { useFoldersController } from './carbonio-ui-commons/hooks/use-folders-controller';
 import { StoreProvider } from './store/redux';
+import { GlobalExtraWindowManager } from './views/app/extra-windows/global-extra-window-manager';
 import { GlobalModalManager } from './views/global-modal-manager';
 import { SyncDataHandler } from './views/sidebar/sync-data-handler';
 
@@ -27,7 +28,9 @@ const App = (): React.JSX.Element => {
 	return (
 		<StoreProvider>
 			<GlobalModalManager>
-				<SyncDataHandler />
+				<GlobalExtraWindowManager>
+					<SyncDataHandler />
+				</GlobalExtraWindowManager>
 			</GlobalModalManager>
 		</StoreProvider>
 	);

diff --git a/src/hooks/use-message-actions.tsx b/src/hooks/use-message-actions.tsx
@@ -43,7 +43,7 @@ import {
 	useSetMsgAsSpam
 } from '../ui-actions/message-actions';
 import { applyTag } from '../ui-actions/tag-actions';
-import { useExtraWindowsManager } from '../views/app/extra-windows/extra-window-manager';
+import { useGlobalExtraWindowManager } from '../views/app/extra-windows/global-extra-window-manager';
 import { useExtraWindow } from '../views/app/extra-windows/use-extra-window';
 
 type ActionGeneratorProps = {
@@ -291,7 +291,7 @@ export const useMessageActions = (
 	const { setCount } = useAppContext<AppContext>();
 	const { deselectAll } = useSelection({ currentFolderId: folderId, setCount, count: 0 });
 	const { isInsideExtraWindow } = useExtraWindow();
-	const { createWindow } = useExtraWindowsManager();
+	const { createWindow } = useGlobalExtraWindowManager();
 	const [openAppointmentComposer, isAvailable] = useIntegratedFunction('create_appointment');
 	const getDraftsActions = useDraftActions();
 	const getDefaultActions = useDefaultActions();

diff --git a/src/ui-actions/conversation-actions.tsx b/src/ui-actions/conversation-actions.tsx
@@ -98,8 +98,8 @@ export const previewConversationOnSeparatedWindowAction = (
 	const actDescriptor = ConversationActionsDescriptors.PREVIEW_ON_SEPARATED_WINDOW;
 	return {
 		id: actDescriptor.id,
-		icon: 'BrowserOutline',
-		label: t('action.preview_on_separated_window', 'Open on a new window'),
+		icon: 'ExternalLink',
+		label: t('action.preview_on_separated_tab', 'Open in a new tab'),
 		onClick: (): void => {
 			previewConversationOnSeparatedWindow(conversationId, folderId, subject, createWindow);
 		}

diff --git a/src/ui-actions/message-actions.tsx b/src/ui-actions/message-actions.tsx
@@ -240,8 +240,8 @@ export function previewMessageOnSeparatedWindow(
 	const actDescriptor = MessageActionsDescriptors.PREVIEW_ON_SEPARATED_WINDOW;
 	return {
 		id: actDescriptor.id,
-		icon: 'BrowserOutline',
-		label: t('action.preview_on_separated_window', 'Open on a new window'),
+		icon: 'ExternalLink',
+		label: t('action.preview_on_separated_tab', 'Open in a new tab'),
 		onClick: (): void => {
 			previewOnSeparatedWindow(messageId, folderId, subject, createWindow, messageActions);
 		}

diff --git a/src/views/app/detail-panel/preview/attachments-block.tsx b/src/views/app/detail-panel/preview/attachments-block.tsx
@@ -399,7 +399,7 @@ const Attachment: FC<AttachmentType> = ({
 			</Tooltip>
 			<Row orientation="horizontal" crossAlignment="center">
 				<AttachmentHoverBarContainer orientation="horizontal">
-					{isUploadIntegrationAvailable && (
+					{isUploadIntegrationAvailable && !isInsideExtraWindow && (
 						<Tooltip
 							key={`${message.id}-DriveOutline`}
 							label={
@@ -417,7 +417,6 @@ const Attachment: FC<AttachmentType> = ({
 								onClick={(): void => {
 									uploadIntegration && uploadIntegration(actionTarget);
 								}}
-								disabled={isInsideExtraWindow}
 							/>
 						</Tooltip>
 					)}
@@ -562,48 +561,22 @@ const AttachmentsBlock: FC<{
 	const { isInsideExtraWindow } = useExtraWindow();
 
 	const getSaveToFilesLink = useCallback((): ReactElement | null => {
-		if (!isUploadIntegrationAvailable) {
+		if (!isUploadIntegrationAvailable || isInsideExtraWindow) {
 			return null;
 		}
 
-		const link = (
+		return (
 			<Link
 				size="medium"
 				onClick={(): void => {
 					uploadIntegration && uploadIntegration(actionTarget);
 				}}
 				style={{ paddingLeft: '0.5rem' }}
-				disabled={isInsideExtraWindow}
 			>
 				{t('label.save_to_files', 'Save to Files')}
 			</Link>
 		);
-
-		if (!isInsideExtraWindow) {
-			return link;
-		}
-		return (
-			<Tooltip
-				key={`${message.id}-files-saving-disabled`}
-				label={
-					isInsideExtraWindow
-						? t(
-								'label.extra_window.save_to_files_disabled',
-								'Files’ attachments saving is available only from the main tab'
-							)
-						: ''
-				}
-			>
-				{link}
-			</Tooltip>
-		);
-	}, [
-		actionTarget,
-		isInsideExtraWindow,
-		isUploadIntegrationAvailable,
-		message.id,
-		uploadIntegration
-	]);
+	}, [actionTarget, isInsideExtraWindow, isUploadIntegrationAvailable, uploadIntegration]);
 
 	return attachmentsCount > 0 ? (
 		<Container crossAlignment="flex-start">

diff --git a/src/views/app/detail-panel/preview/mail-preview.tsx b/src/views/app/detail-panel/preview/mail-preview.tsx
@@ -40,7 +40,7 @@ import { getMsg, msgAction } from '../../../../store/actions';
 import type { MailMessage, OpenEmlPreviewType } from '../../../../types';
 import { ExtraWindowCreationParams, MessageAction } from '../../../../types';
 import { findMessageActionById } from '../../../../ui-actions/utils';
-import { useExtraWindowsManager } from '../../extra-windows/extra-window-manager';
+import { useGlobalExtraWindowManager } from '../../extra-windows/global-extra-window-manager';
 
 const [InviteResponse, integrationAvailable] = getIntegratedComponent('invites-reply');
 
@@ -337,7 +337,7 @@ const MailPreview: FC<MailPreviewProps> = ({
 }) => {
 	const mailContainerRef = useRef<HTMLDivElement>(null);
 	const [open, setOpen] = useState(expanded || isAlone);
-	const { createWindow } = useExtraWindowsManager();
+	const { createWindow } = useGlobalExtraWindowManager();
 
 	const onClick = useCallback(() => {
 		setOpen((o) => !o);

diff --git a/src/views/app/extra-windows/global-extra-window-manager.tsx b/src/views/app/extra-windows/global-extra-window-manager.tsx
@@ -0,0 +1,52 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { useEffect } from 'react';
+
+import { ExtraWindowsManager, useExtraWindowsManager } from './extra-window-manager';
+import { ExtraWindowsContextType, ExtraWindowsCreationResult } from '../../../types';
+
+const globalContext: ExtraWindowsContextType = {
+	createWindow: (): ExtraWindowsCreationResult => {
+		throw new Error('global extra window manager not initialized');
+	},
+	closeWindow: () => {
+		throw new Error('global extra window manager not initialized');
+	},
+	getWindow: () => {
+		throw new Error('global extra window manager not initialized');
+	},
+	getFocusedWindow: () => {
+		throw new Error('global extra window manager not initialized');
+	}
+};
+
+const GlobalExtraWindowManagerProvider = (): null => {
+	const context = useExtraWindowsManager();
+	useEffect(() => {
+		globalContext.createWindow = context.createWindow;
+		globalContext.closeWindow = context.closeWindow;
+		globalContext.listWindows = context.listWindows;
+		globalContext.getWindow = context.getWindow;
+		globalContext.getFocusedWindow = context.getFocusedWindow;
+	}, [context]);
+	return null;
+};
+
+export const GlobalExtraWindowManager = ({
+	children
+}: React.PropsWithChildren<Record<string, unknown>>): React.JSX.Element => (
+	<ExtraWindowsManager>
+		<GlobalExtraWindowManagerProvider />
+		{children}
+	</ExtraWindowsManager>
+);
+
+export const useGlobalExtraWindowManager = (): ExtraWindowsContextType => {
+	if (!globalContext) {
+		throw new Error('global extra window manager not initialized');
+	}
+	return globalContext;
+};
diff --git a/src/views/app/folder-panel/conversations/conversation-list-item.tsx b/src/views/app/folder-panel/conversations/conversation-list-item.tsx
@@ -50,7 +50,7 @@ import {
 	previewConversationOnSeparatedWindowAction,
 	setConversationsRead
 } from '../../../../ui-actions/conversation-actions';
-import { useExtraWindowsManager } from '../../extra-windows/extra-window-manager';
+import { useGlobalExtraWindowManager } from '../../extra-windows/global-extra-window-manager';
 import { ItemAvatar } from '../parts/item-avatar';
 import { ListItemActionWrapper } from '../parts/list-item-actions-wrapper';
 import { RowInfo } from '../parts/row-info';
@@ -79,7 +79,7 @@ export const ConversationListItem: FC<ConversationListItemProps> = memo(
 		const accounts = useUserAccounts();
 		const messages = useAppSelector(selectMessages);
 		const isConversation = 'messages' in (item || {});
-		const { createWindow } = useExtraWindowsManager();
+		const { createWindow } = useGlobalExtraWindowManager();
 
 		const folderParent = getFolderParentId({ folderId: folderId ?? '', isConversation, item });
 

diff --git a/src/views/app/folder-panel/messages/message-list-item.tsx b/src/views/app/folder-panel/messages/message-list-item.tsx
@@ -39,7 +39,7 @@ import {
 } from '../../../../ui-actions/message-actions';
 import { useTagExist } from '../../../../ui-actions/tag-actions';
 import { getFolderTranslatedName } from '../../../sidebar/utils';
-import { useExtraWindowsManager } from '../../extra-windows/extra-window-manager';
+import { useGlobalExtraWindowManager } from '../../extra-windows/global-extra-window-manager';
 import { ItemAvatar } from '../parts/item-avatar';
 import { ListItemActionWrapper } from '../parts/list-item-actions-wrapper';
 import { SenderName } from '../parts/sender-name';
@@ -59,7 +59,7 @@ export const MessageListItem: FC<MessageListItemProps> = memo(function MessageLi
 
 	const dispatch = useAppDispatch();
 	const zimbraPrefMarkMsgRead = useUserSettings()?.prefs?.zimbraPrefMarkMsgRead !== '-1';
-	const { createWindow } = useExtraWindowsManager();
+	const { createWindow } = useGlobalExtraWindowManager();
 	const messageActions = useMessageActions(item, true);
 
 	const onClick = useCallback(

diff --git a/translations/en.json b/translations/en.json
@@ -21,6 +21,7 @@
         "ok": "Ok",
         "preview": "Preview",
         "preview_new_tab": "Click to preview in another tab",
+        "preview_on_separated_tab": "Open in a new tab",
         "preview_on_separated_window": "Open on a new window",
         "print": "Print",
         "redirect": "Redirect",