Removes ReactWrapperView

ts/components/ErrorModal.stories.tsx

@@ -16,7 +16,6 @@ const i18n = setupI18n('en', enMessages);
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   title: text('title', overrideProps.title || ''),
   description: text('description', overrideProps.description || ''),
-  buttonText: text('buttonText', overrideProps.buttonText || ''),
   i18n,
   onClose: action('onClick'),
 });
@@ -35,7 +34,6 @@ export function CustomStrings(): JSX.Element {
       {...createProps({
         title: 'Real bad!',
         description: 'Just avoid that next time, kay?',
-        buttonText: 'Fine',
       })}
     />
   );

ts/components/ErrorModal.tsx

@@ -8,7 +8,6 @@ import { Modal } from './Modal';
 import { Button, ButtonVariant } from './Button';
 
 export type PropsType = {
-  buttonText?: string;
   description?: string;
   title?: string;
 
@@ -23,11 +22,11 @@ function focusRef(el: HTMLElement | null) {
 }
 
 export function ErrorModal(props: PropsType): JSX.Element {
-  const { buttonText, description, i18n, onClose, title } = props;
+  const { description, i18n, onClose, title } = props;
 
   const footer = (
     <Button onClick={onClose} ref={focusRef} variant={ButtonVariant.Secondary}>
-      {buttonText || i18n('Confirmation--confirm')}
+      {i18n('Confirmation--confirm')}
     </Button>
   );
 

ts/components/GlobalModalContainer.tsx

@@ -19,9 +19,18 @@ import { WhatsNewModal } from './WhatsNewModal';
 export type PropsType = {
   i18n: LocalizerType;
   theme: ThemeType;
+  // AddUserToAnotherGroupModal
+  addUserToAnotherGroupModalContactId?: string;
+  renderAddUserToAnotherGroup: () => JSX.Element;
   // ContactModal
   contactModalState?: ContactModalStateType;
   renderContactModal: () => JSX.Element;
+  // ErrorModal
+  errorModalProps?: { description?: string; title?: string };
+  renderErrorModal: (opts: {
+    description?: string;
+    title?: string;
+  }) => JSX.Element;
   // ForwardMessageModal
   forwardMessageProps?: ForwardMessagePropsType;
   renderForwardMessageModal: () => JSX.Element;
@@ -31,9 +40,9 @@ export type PropsType = {
   // SafetyNumberModal
   safetyNumberModalContactId?: string;
   renderSafetyNumber: () => JSX.Element;
-  // AddUserToAnotherGroupModal
-  addUserToAnotherGroupModalContactId?: string;
-  renderAddUserToAnotherGroup: () => JSX.Element;
+  // ShortcutGuideModal
+  isShortcutGuideModalVisible: boolean;
+  renderShortcutGuideModal: () => JSX.Element;
   // SignalConnectionsModal
   isSignalConnectionsVisible: boolean;
   toggleSignalConnectionsModal: () => unknown;
@@ -57,9 +66,15 @@ export type PropsType = {
 
 export function GlobalModalContainer({
   i18n,
+  // AddUserToAnotherGroupModal
+  addUserToAnotherGroupModalContactId,
+  renderAddUserToAnotherGroup,
   // ContactModal
   contactModalState,
   renderContactModal,
+  // ErrorModal
+  errorModalProps,
+  renderErrorModal,
   // ForwardMessageModal
   forwardMessageProps,
   renderForwardMessageModal,
@@ -69,9 +84,9 @@ export function GlobalModalContainer({
   // SafetyNumberModal
   safetyNumberModalContactId,
   renderSafetyNumber,
-  // AddUserToAnotherGroupModal
-  addUserToAnotherGroupModalContactId,
-  renderAddUserToAnotherGroup,
+  // ShortcutGuideModal
+  isShortcutGuideModalVisible,
+  renderShortcutGuideModal,
   // SignalConnectionsModal
   isSignalConnectionsVisible,
   toggleSignalConnectionsModal,
@@ -92,18 +107,66 @@ export function GlobalModalContainer({
   hideWhatsNewModal,
   isWhatsNewVisible,
 }: PropsType): JSX.Element | null {
-  // We want the send anyway dialog to supersede most modals since this is an
-  // immediate action the user needs to take.
+  // We want the following dialogs to show in this order:
+  // 1. Errors
+  // 2. Safety Number Changes
+  // 3. The Rest (in no particular order, but they're ordered alphabetically)
+
+  // Errors
+  if (errorModalProps) {
+    return renderErrorModal(errorModalProps);
+  }
+
+  // Safety Number
   if (hasSafetyNumberChangeModal || safetyNumberChangedBlockingData) {
     return renderSendAnywayDialog();
   }
 
+  // The Rest
+
+  if (addUserToAnotherGroupModalContactId) {
+    return renderAddUserToAnotherGroup();
+  }
+
+  if (contactModalState) {
+    return renderContactModal();
+  }
+
+  if (forwardMessageProps) {
+    return renderForwardMessageModal();
+  }
+
+  if (isProfileEditorVisible) {
+    return renderProfileEditor();
+  }
+
+  if (isShortcutGuideModalVisible) {
+    return renderShortcutGuideModal();
+  }
+
+  if (isSignalConnectionsVisible) {
+    return (
+      <SignalConnectionsModal
+        i18n={i18n}
+        onClose={toggleSignalConnectionsModal}
+      />
+    );
+  }
+
+  if (isStoriesSettingsVisible) {
+    return renderStoriesSettings();
+  }
+
+  if (isWhatsNewVisible) {
+    return <WhatsNewModal hideWhatsNewModal={hideWhatsNewModal} i18n={i18n} />;
+  }
+
   if (safetyNumberModalContactId) {
     return renderSafetyNumber();
   }
 
-  if (addUserToAnotherGroupModalContactId) {
-    return renderAddUserToAnotherGroup();
+  if (stickerPackPreviewId) {
+    return renderStickerPreviewModal();
   }
 
   if (userNotFoundModalState) {
@@ -135,38 +198,5 @@ export function GlobalModalContainer({
     );
   }
 
-  if (contactModalState) {
-    return renderContactModal();
-  }
-
-  if (isProfileEditorVisible) {
-    return renderProfileEditor();
-  }
-
-  if (isWhatsNewVisible) {
-    return <WhatsNewModal hideWhatsNewModal={hideWhatsNewModal} i18n={i18n} />;
-  }
-
-  if (forwardMessageProps) {
-    return renderForwardMessageModal();
-  }
-
-  if (isSignalConnectionsVisible) {
-    return (
-      <SignalConnectionsModal
-        i18n={i18n}
-        onClose={toggleSignalConnectionsModal}
-      />
-    );
-  }
-
-  if (isStoriesSettingsVisible) {
-    return renderStoriesSettings();
-  }
-
-  if (stickerPackPreviewId) {
-    return renderStickerPreviewModal();
-  }
-
   return null;
 }

ts/components/ShortcutGuideModal.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -9,14 +9,15 @@ import { ShortcutGuide } from './ShortcutGuide';
 export type PropsType = {
   hasInstalledStickers: boolean;
   platform: string;
-  readonly close: () => unknown;
+  readonly closeShortcutGuideModal: () => unknown;
   readonly i18n: LocalizerType;
 };
 
 export const ShortcutGuideModal = React.memo(function ShortcutGuideModalInner(
   props: PropsType
 ) {
-  const { i18n, close, hasInstalledStickers, platform } = props;
+  const { i18n, closeShortcutGuideModal, hasInstalledStickers, platform } =
+    props;
   const [root, setRoot] = React.useState<HTMLElement | null>(null);
 
   React.useEffect(() => {
@@ -34,10 +35,10 @@ export const ShortcutGuideModal = React.memo(function ShortcutGuideModalInner(
         <div className="module-shortcut-guide-modal">
           <div className="module-shortcut-guide-container">
             <ShortcutGuide
+              close={closeShortcutGuideModal}
               hasInstalledStickers={hasInstalledStickers}
-              platform={platform}
-              close={close}
               i18n={i18n}
+              platform={platform}
             />
           </div>
         </div>,

ts/components/ToastAlreadyGroupMember.stories.tsx

@@ -1,28 +0,0 @@
-// Copyright 2021 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { ToastAlreadyGroupMember } from './ToastAlreadyGroupMember';
-
-import { setupI18n } from '../util/setupI18n';
-import enMessages from '../../_locales/en/messages.json';
-
-const i18n = setupI18n('en', enMessages);
-
-const defaultProps = {
-  i18n,
-  onClose: action('onClose'),
-};
-
-export default {
-  title: 'Components/ToastAlreadyGroupMember',
-};
-
-export const _ToastAlreadyGroupMember = (): JSX.Element => (
-  <ToastAlreadyGroupMember {...defaultProps} />
-);
-
-_ToastAlreadyGroupMember.story = {
-  name: 'ToastAlreadyGroupMember',
-};

ts/components/ToastAlreadyGroupMember.tsx

@@ -1,20 +0,0 @@
-// Copyright 2021 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React from 'react';
-import type { LocalizerType } from '../types/Util';
-import { Toast } from './Toast';
-
-type PropsType = {
-  i18n: LocalizerType;
-  onClose: () => unknown;
-};
-
-export function ToastAlreadyGroupMember({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element {
-  return (
-    <Toast onClose={onClose}>{i18n('GroupV2--join--already-in-group')}</Toast>
-  );
-}

ts/components/ToastManager.stories.tsx

@@ -51,6 +51,20 @@ AddingUserToGroup.args = {
   },
 };
 
+export const AlreadyGroupMember = Template.bind({});
+AlreadyGroupMember.args = {
+  toast: {
+    toastType: ToastType.AlreadyGroupMember,
+  },
+};
+
+export const AlreadyRequestedToJoin = Template.bind({});
+AlreadyRequestedToJoin.args = {
+  toast: {
+    toastType: ToastType.AlreadyRequestedToJoin,
+  },
+};
+
 export const Blocked = Template.bind({});
 Blocked.args = {
   toast: {

ts/components/ToastManager.tsx

@@ -45,6 +45,22 @@ export function ToastManager({
     );
   }
 
+  if (toastType === ToastType.AlreadyGroupMember) {
+    return (
+      <Toast onClose={hideToast}>
+        {i18n('GroupV2--join--already-in-group')}
+      </Toast>
+    );
+  }
+
+  if (toastType === ToastType.AlreadyRequestedToJoin) {
+    return (
+      <Toast onClose={hideToast}>
+        {i18n('GroupV2--join--already-awaiting-approval')}
+      </Toast>
+    );
+  }
+
   if (toastType === ToastType.Blocked) {
     return <Toast onClose={hideToast}>{i18n('unblockToSend')}</Toast>;
   }