feat: move openUrl modal to its own as maxHeight is linked to url len

ts/components/basic/SessionToggle.tsx

@@ -60,7 +60,7 @@ export const SessionToggle = (props: Props) => {
       props.onClick();
     };
 
-    if (props.confirmationDialogParams && props.confirmationDialogParams.shouldShowConfirm) {
+    if (props.confirmationDialogParams) {
       // If item needs a confirmation dialog to turn ON, render it
       const closeConfirmModal = () => {
         dispatch(updateConfirmModal(null));

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

@@ -6,10 +6,10 @@ import styled from 'styled-components';
 import { RenderTextCallbackType } from '../../../../types/Util';
 import { getEmojiSizeClass, SizeClassType } from '../../../../util/emoji';
 import { LinkPreviews } from '../../../../util/linkPreviews';
-import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
 import { AddMentions } from '../../AddMentions';
 import { AddNewLines } from '../../AddNewLines';
 import { Emojify } from '../../Emojify';
+import { showLinkVisitWarningDialog } from '../../../dialog/OpenUrlModal';
 
 const linkify = LinkifyIt();
 

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

@@ -9,9 +9,9 @@ import {
 } from '../../../../state/selectors';
 import { useIsMessageSelectionMode } from '../../../../state/selectors/selectedConversation';
 import { isImageAttachment } from '../../../../types/Attachment';
-import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
 import { SessionIcon } from '../../../icon';
 import { Image } from '../../Image';
+import { showLinkVisitWarningDialog } from '../../../dialog/OpenUrlModal';
 
 export type MessageLinkPreviewSelectorProps = Pick<
   MessageRenderingProps,

ts/components/dialog/DeleteAccountModal.tsx

@@ -25,7 +25,6 @@ const DescriptionBeforeAskingConfirmation = (props: {
   return (
     <>
       <span className="session-confirm-main-message">{window.i18n('clearDataAllDescription')}</span>
-      <span className="session-confirm-main-message">{window.i18n('clearDataAllDescription')}</span>
 
       <SpacerLG />
       <SessionRadioGroup

ts/components/dialog/OpenUrlModal.tsx

@@ -1,23 +1,24 @@
 import { shell } from 'electron';
 import { isEmpty } from 'lodash';
+import { Dispatch } from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { MessageInteraction } from '../../interactions';
 import { OpenUrlModalState, updateOpenUrlModal } from '../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../SessionWrapperModal';
-import { Flex } from '../basic/Flex';
-import { I18n } from '../basic/I18n';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SpacerMD } from '../basic/Text';
+import { StyledSubText } from './StyledSubText';
 
 const StyledDescriptionContainer = styled.div`
-  max-height: 150px;
+  max-height: 110px;
+  max-width: 500px;
+  padding: var(--margins-md);
   overflow-y: auto;
 `;
 
 export function OpenUrlModal(props: OpenUrlModalState) {
   const dispatch = useDispatch();
-  // console.warn('props', props);
 
   if (!props || isEmpty(props) || !props.urlToOpen) {
     return null;
@@ -42,30 +43,43 @@ export function OpenUrlModal(props: OpenUrlModalState) {
     <SessionWrapperModal
       title={window.i18n('urlOpen')}
       onClose={onClose}
-      showExitIcon={false}
+      showExitIcon={true}
       showHeader={true}
-      additionalClassName="no-body-padding"
     >
-      <StyledDescriptionContainer>
-        <I18n token={'urlOpenDescription'} args={{ url }} />
-      </StyledDescriptionContainer>
+      <div className="session-modal__centered">
+        <StyledDescriptionContainer>
+          <StyledSubText
+            tag="span"
+            textLength={url.length}
+            html={window.i18n('urlOpenDescription', { url })}
+          />
+        </StyledDescriptionContainer>
+      </div>
       <SpacerMD />
-      <Flex container={true} justifyContent="center" alignItems="center" width="100%">
+      <div className="session-modal__button-group">
         <SessionButton
           text={window.i18n('urlOpen')}
           buttonColor={SessionButtonColor.Danger}
-          buttonType={SessionButtonType.Ghost}
+          buttonType={SessionButtonType.Simple}
           onClick={onClickOpen}
           dataTestId="session-confirm-ok-button"
         />
         <SessionButton
           text={window.i18n('urlCopy')}
-          buttonColor={SessionButtonColor.Primary}
-          buttonType={SessionButtonType.Ghost}
+          buttonColor={SessionButtonColor.White}
+          buttonType={SessionButtonType.Simple}
           onClick={onClickCopy}
           dataTestId="session-confirm-cancel-button"
         />
-      </Flex>
+      </div>
     </SessionWrapperModal>
   );
 }
+
+export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch<any>) => {
+  dispatch(
+    updateOpenUrlModal({
+      urlToOpen,
+    })
+  );
+};

ts/components/dialog/SessionConfirm.tsx

@@ -1,35 +1,16 @@
-import { Dispatch, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
-import styled from 'styled-components';
 import { useLastMessage } from '../../hooks/useParamSelector';
 import { updateConversationInteractionState } from '../../interactions/conversationInteractions';
 import { ConversationInteractionStatus } from '../../interactions/types';
-import { updateConfirmModal, updateOpenUrlModal } from '../../state/ducks/modalDialog';
+import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
-import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 import { SessionRadioGroup, SessionRadioItems } from '../basic/SessionRadioGroup';
 import { SpacerLG } from '../basic/Text';
-import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { SessionSpinner } from '../loading';
-
-const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>`
-  font-size: var(--font-size-md);
-  line-height: 1.5;
-  margin-bottom: var(--margins-lg);
-
-  max-width: ${props =>
-    props.textLength > 90
-      ? '60ch'
-      : '33ch'}; // this is ugly, but we want the dialog description to have multiple lines when a short text is displayed
-`;
-
-const StyledSubMessageText = styled(SessionHtmlRenderer)`
-  // Overrides SASS in this one case
-  margin-top: 0;
-  margin-bottom: var(--margins - md);
-`;
+import { StyledSubMessageText, StyledSubText } from './StyledSubText';
 
 export interface SessionConfirmDialogProps {
   message?: string;
@@ -58,9 +39,6 @@ export interface SessionConfirmDialogProps {
   hideCancel?: boolean;
   okTheme?: SessionButtonColor;
   closeTheme?: SessionButtonColor;
-  sessionIcon?: SessionIconType;
-  iconSize?: SessionIconSize;
-  shouldShowConfirm?: boolean | undefined;
   showExitIcon?: boolean | undefined;
   headerReverse?: boolean;
   conversationId?: string;
@@ -78,9 +56,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
     onClickOk,
     onClickClose,
     hideCancel = false,
-    sessionIcon,
-    iconSize,
-    shouldShowConfirm,
     onClickCancel,
     showExitIcon,
     headerReverse,
@@ -136,10 +111,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
     }
   }, [isLoading, conversationId, lastMessage?.interactionType]);
 
-  if (shouldShowConfirm && !shouldShowConfirm) {
-    return null;
-  }
-
   /**
    * Performs specified on close action then removes the modal.
    */
@@ -160,13 +131,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
       {!showHeader && <SpacerLG />}
 
       <div className="session-modal__centered">
-        {sessionIcon && iconSize && (
-          <>
-            <SessionIcon iconType={sessionIcon} iconSize={iconSize} />
-            <SpacerLG />
-          </>
-        )}
-
         <StyledSubText tag="span" textLength={message.length} html={message} />
         {messageSub && (
           <StyledSubMessageText
@@ -214,11 +178,3 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
     </SessionWrapperModal>
   );
 };
-
-export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch<any>) => {
-  dispatch(
-    updateOpenUrlModal({
-      urlToOpen,
-    })
-  );
-};

ts/components/dialog/StyledSubText.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
+
+export const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>`
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  margin-bottom: var(--margins-lg);
+
+  max-width: ${props =>
+    props.textLength > 90
+      ? '60ch'
+      : '33ch'}; // this is ugly, but we want the dialog description to have multiple lines when a short text is displayed
+`;
+
+export const StyledSubMessageText = styled(SessionHtmlRenderer)`
+  // Overrides SASS in this one case
+  margin-top: 0;
+  margin-bottom: var(--margins-md);
+`;

ts/interactions/conversationInteractions.ts

@@ -715,8 +715,6 @@ export async function showLinkSharingConfirmationModalDialog(e: any) {
     if (!alreadyDisplayedPopup) {
       window.inboxStore?.dispatch(
         updateConfirmModal({
-          shouldShowConfirm:
-            !window.getSettingValue(SettingsKey.settingsLinkPreview) && !alreadyDisplayedPopup,
           title: window.i18n('linkPreviewsSend'),
           message: window.i18n('linkPreviewsSendModalDescription'),
           okTheme: SessionButtonColor.Danger,

ts/state/ducks/modalDialog.tsx

@@ -155,7 +155,7 @@ const ModalSlice = createSlice({
       return { ...state, hideRecoveryPasswordModalState: action.payload };
     },
     updateOpenUrlModal(state, action: PayloadAction<OpenUrlModalState>) {
-      return { ...state, updateOpenUrlModal: action.payload };
+      return { ...state, openUrlModal: action.payload };
     },
     updateLightBoxOptions(state, action: PayloadAction<LightBoxOptions>) {
       const lightBoxOptions = action.payload;