fix: misplaced modal in <aside> [WPB-6844] (#17161)

* fix: misplaced modal in <aside> * chore: extract MessageContent from Modal * chore: simplify some code * chore: not allowed to call a subfolder components, braks tests * fix: use css instead of style attribute * fix: revert wrongfully merged changes * fix: type
wireapp · Mar 26, 2024 · 02ab8d5 · 02ab8d5
1 parent 402b56f
commit 02ab8d5
Show file tree

Hide file tree

Showing 10 changed files with 198 additions and 258 deletions.
diff --git a/src/script/components/Modals/CertificateDetailsModal/CertificateDetailsModal.test.tsx b/src/script/components/Modals/CertificateDetailsModal/CertificateDetailsModal.test.tsx
diff --git a/src/script/components/Modals/CertificateDetailsModal/CertificateDetailsModal.tsx b/src/script/components/Modals/CertificateDetailsModal/CertificateDetailsModal.tsx
diff --git a/src/script/components/Modals/CertificateDetailsModal/index.ts b/src/script/components/Modals/CertificateDetailsModal/index.ts
diff --git a/...lsModal/CertificateDetailsModal.styles.ts → ...s/PrimaryModal/Content/MessageContent.tsx b/...lsModal/CertificateDetailsModal.styles.ts → ...s/PrimaryModal/Content/MessageContent.tsx
@@ -1,6 +1,6 @@
 /*
  * Wire
- * Copyright (C) 2023 Wire Swiss GmbH
+ * Copyright (C) 2024 Wire Swiss GmbH
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -17,24 +17,22 @@
  *
  */
 
-import {CSSObject} from '@emotion/serialize';
-
-interface Styles {
-  content: CSSObject;
-  modalWrapper: CSSObject;
+interface MessageContentProps {
+  messageHtml?: string;
+  message?: React.ReactNode;
 }
 
-export const styles: Styles = {
-  modalWrapper: {
-    maxWidth: '460px',
-    width: '100%',
-  },
-  content: {
-    overflow: 'auto',
-    maxHeight: '251px',
-    fontSize: 'var(--font-size-small)',
-    letterSpacing: '0.05px',
-    lineHeight: 'var(--line-height-md)',
-    wordBreak: 'break-word',
-  },
+const isStringMessage = (message: unknown): message is string => typeof message === 'string';
+
+export const MessageContent = ({message, messageHtml}: MessageContentProps) => {
+  if (!message && !messageHtml) {
+    return null;
+  }
+
+  return (
+    <div className="modal__text" data-uie-name="status-modal-text">
+      {messageHtml && <p id="modal-description-html" dangerouslySetInnerHTML={{__html: messageHtml}} />}
+      {message && <div id="modal-description-text">{isStringMessage(message) ? <p>{message}</p> : message}</div>}
+    </div>
+  );
 };
diff --git a/src/script/components/Modals/PrimaryModal/PrimaryModal.tsx b/src/script/components/Modals/PrimaryModal/PrimaryModal.tsx
@@ -34,9 +34,10 @@ import {isEscapeKey} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {isValidPassword} from 'Util/StringUtil';
 
+import {MessageContent} from './Content/MessageContent';
 import {guestLinkPasswordInputStyles} from './PrimaryModal.styles';
 import {usePrimaryModalState, showNextModalInQueue, defaultContent, removeCurrentModal} from './PrimaryModalState';
-import {Action, PrimaryModalType} from './PrimaryModalTypes';
+import {ButtonAction, PrimaryModalType} from './PrimaryModalTypes';
 
 export const PrimaryModalComponent: FC = () => {
   const [inputValue, updateInputValue] = useState<string>('');
@@ -55,6 +56,7 @@ export const PrimaryModalComponent: FC = () => {
   const {
     checkboxLabel,
     closeOnConfirm,
+    closeOnSecondaryAction,
     currentType,
     inputPlaceholder,
     message,
@@ -120,7 +122,10 @@ export const PrimaryModalComponent: FC = () => {
     (!isGuestLinkPassword || !!passwordValue.trim().length) &&
     checkGuestLinkPassword(passwordValue, passwordConfirmationValue);
 
-  const isPrimaryActionDisabled = () => {
+  const isPrimaryActionDisabled = (disabled: boolean | undefined) => {
+    if (!!disabled) {
+      return true;
+    }
     if (isConfirm) {
       return false;
     }
@@ -199,16 +204,17 @@ export const PrimaryModalComponent: FC = () => {
   };
 
   const secondaryButtons = secondaryActions
-    .filter((action): action is Action => action !== null && !!action.text)
+    .filter((action): action is ButtonAction => action !== null && !!action.text)
     .map(action => (
       <button
         key={`${action.text}-${action.uieName}`}
         type="button"
-        onClick={doAction(action.action, true, true)}
+        onClick={doAction(action.action, !!closeOnSecondaryAction, true)}
         data-uie-name={action.uieName}
         className={cx('modal__button modal__button--secondary', {
           'modal__button--full': hasMultipleSecondary || allButtonsFullWidth,
         })}
+        disabled={action.disabled || false}
       >
         {action.text}
       </button>
@@ -219,7 +225,7 @@ export const PrimaryModalComponent: FC = () => {
       ref={primaryActionButtonRef}
       type="button"
       onClick={doAction(confirm, !!closeOnConfirm)}
-      disabled={isPrimaryActionDisabled()}
+      disabled={isPrimaryActionDisabled(primaryAction.disabled)}
       className={cx('modal__button modal__button--primary', {
         'modal__button--full': hasMultipleSecondary || allButtonsFullWidth,
       })}
@@ -268,12 +274,7 @@ export const PrimaryModalComponent: FC = () => {
             </div>
 
             <FadingScrollbar className="modal__body">
-              {(messageHtml || message) && (
-                <div className="modal__text" data-uie-name="status-modal-text">
-                  {messageHtml && <p id="modal-description-html" dangerouslySetInnerHTML={{__html: messageHtml}} />}
-                  {message && <p id="modal-description-text">{message}</p>}
-                </div>
-              )}
+              <MessageContent message={message} messageHtml={messageHtml} />
 
               {isGuestLinkPassword && (
                 <PasswordGeneratorButton

diff --git a/src/script/components/Modals/PrimaryModal/PrimaryModalState.tsx b/src/script/components/Modals/PrimaryModal/PrimaryModalState.tsx
@@ -27,7 +27,15 @@ import {formatLocale} from 'Util/TimeUtil';
 import {noop} from 'Util/util';
 import {createUuid} from 'Util/uuid';
 
-import {Action, ModalContent, ModalItem, ModalOptions, ModalQueue, PrimaryModalType, Text} from './PrimaryModalTypes';
+import {
+  ButtonAction,
+  ModalContent,
+  ModalItem,
+  ModalOptions,
+  ModalQueue,
+  PrimaryModalType,
+  Text,
+} from './PrimaryModalTypes';
 
 import {Config} from '../../../Config';
 import {ClientNotificationData} from '../../../notification/PreferenceNotificationRepository';
@@ -56,7 +64,7 @@ const defaultContent: ModalContent = {
   messageHtml: '',
   modalUie: '',
   onBgClick: noop,
-  primaryAction: {} as Action,
+  primaryAction: {} as ButtonAction,
   secondaryAction: [],
   titleText: '',
   copyPassword: false,
@@ -137,6 +145,7 @@ const updateCurrentModalContent = (type: PrimaryModalType, options: ModalOptions
     confirmCancelBtnLabel,
     allButtonsFullWidth = false,
     primaryBtnFirst = false,
+    closeOnSecondaryAction = true,
   } = options;
 
   const content = {
@@ -159,6 +168,7 @@ const updateCurrentModalContent = (type: PrimaryModalType, options: ModalOptions
     confirmCancelBtnLabel,
     allButtonsFullWidth,
     primaryBtnFirst,
+    closeOnSecondaryAction,
   };
 
   switch (type) {