fix: click on a link preview shows the dialog to open or copy url

ts/components/conversation/message/message-content/MessageBody.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { shell } from 'electron';
 import LinkifyIt from 'linkify-it';
 
 import { RenderTextCallbackType } from '../../../../types/Util';
@@ -8,9 +7,8 @@ import { getEmojiSizeClass, SizeClassType } from '../../../../util/emoji';
 import { AddMentions } from '../../AddMentions';
 import { AddNewLines } from '../../AddNewLines';
 import { Emojify } from '../../Emojify';
-import { MessageInteraction } from '../../../../interactions';
-import { updateConfirmModal } from '../../../../state/ducks/modalDialog';
 import { LinkPreviews } from '../../../../util/linkPreviews';
+import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
 
 const linkify = LinkifyIt();
 
@@ -152,27 +150,7 @@ const Linkify = (props: LinkifyProps): JSX.Element => {
 
     const url = e.target.href;
 
-    const openLink = () => {
-      void shell.openExternal(url);
-    };
-
-    dispatch(
-      updateConfirmModal({
-        title: window.i18n('linkVisitWarningTitle'),
-        message: window.i18n('linkVisitWarningMessage', url),
-        okText: window.i18n('open'),
-        cancelText: window.i18n('editMenuCopy'),
-        showExitIcon: true,
-        onClickOk: openLink,
-        onClickClose: () => {
-          dispatch(updateConfirmModal(null));
-        },
-
-        onClickCancel: () => {
-          MessageInteraction.copyBodyToClipboard(url);
-        },
-      })
-    );
+    showLinkVisitWarningDialog(url, dispatch);
   }, []);
 
   if (matchData.length === 0) {

ts/components/conversation/message/message-content/MessagePreview.tsx

@@ -4,10 +4,11 @@ import { isImageAttachment } from '../../../../types/Attachment';
 import { ImageGrid } from '../../ImageGrid';
 import { Image } from '../../Image';
 import { MessageRenderingProps } from '../../../../models/messageType';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { getMessagePreviewProps } from '../../../../state/selectors/conversations';
 import { SessionIcon } from '../../../icon';
 import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
+import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
 
 export type MessagePreviewSelectorProps = Pick<MessageRenderingProps, 'attachments' | 'previews'>;
 
@@ -18,6 +19,8 @@ type Props = {
 
 export const MessagePreview = (props: Props) => {
   const selected = useSelector(state => getMessagePreviewProps(state as any, props.messageId));
+  const dispatch = useDispatch();
+
   if (!selected) {
     return null;
   }
@@ -41,8 +44,18 @@ export const MessagePreview = (props: Props) => {
   const width = first.image && first.image.width;
   const isFullSizeImage = width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH;
 
+  function openLinkFromPreview() {
+    if (previews?.length && previews[0].url) {
+      showLinkVisitWarningDialog(previews[0].url, dispatch);
+    }
+  }
+
   return (
-    <div role="button" className={classNames('module-message__link-preview')}>
+    <div
+      role="button"
+      className={classNames('module-message__link-preview')}
+      onClick={openLinkFromPreview}
+    >
       {first.image && previewHasImage && isFullSizeImage ? (
         <ImageGrid attachments={[first.image]} onError={props.handleImageError} />
       ) : null}

ts/components/dialog/SessionConfirm.tsx

@@ -6,6 +6,9 @@ import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import { Dispatch } from 'redux';
+import { shell } from 'electron';
+import { MessageInteraction } from '../../interactions';
 
 export interface SessionConfirmDialogProps {
   message?: string;
@@ -145,3 +148,26 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
     </SessionWrapperModal>
   );
 };
+
+export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch<any>) => {
+  function onClickOk() {
+    void shell.openExternal(urlToOpen);
+  }
+
+  dispatch(
+    updateConfirmModal({
+      title: window.i18n('linkVisitWarningTitle'),
+      message: window.i18n('linkVisitWarningMessage', [urlToOpen]),
+      okText: window.i18n('open'),
+      cancelText: window.i18n('editMenuCopy'),
+      showExitIcon: true,
+      onClickOk,
+      onClickClose: () => {
+        dispatch(updateConfirmModal(null));
+      },
+      onClickCancel: () => {
+        MessageInteraction.copyBodyToClipboard(urlToOpen);
+      },
+    })
+  );
+};