From ecb19d5a10b5a65d2eb000f5ed5a0440f11cb485 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Tue, 15 Apr 2025 13:01:17 -0700
Subject: [PATCH] Fix join group modal

---
 .../fun/FunEmojiLocalizationProvider.tsx      | 20 +++++++
 ts/shims/renderClearingDataView.tsx           |  5 +-
 ts/state/roots/createGroupV2JoinModal.tsx     |  9 ++-
 ts/util/longRunningTaskWrapper.tsx            |  8 ++-
 ts/util/showConfirmationDialog.tsx            | 57 ++++++++++---------
 ts/windows/about/app.tsx                      | 19 ++++---
 ts/windows/debuglog/app.tsx                   | 17 +++---
 ts/windows/permissions/app.tsx                | 15 +++--
 ts/windows/screenShare/app.tsx                | 21 ++++---
 9 files changed, 110 insertions(+), 61 deletions(-)

diff --git a/ts/components/fun/FunEmojiLocalizationProvider.tsx b/ts/components/fun/FunEmojiLocalizationProvider.tsx
index 62f04606918..412436fb906 100644
--- a/ts/components/fun/FunEmojiLocalizationProvider.tsx
+++ b/ts/components/fun/FunEmojiLocalizationProvider.tsx
@@ -70,6 +70,26 @@ export const FunEmojiLocalizationProvider = memo(
   }
 );
 
+export type FunEmptyEmojiLocalizationProviderProps = Readonly<{
+  children: ReactNode;
+}>;
+
+export function FunDefaultEnglishEmojiLocalizationProvider(
+  props: FunEmptyEmojiLocalizationProviderProps
+): JSX.Element {
+  const context = useMemo(() => {
+    return {
+      emojiSearchIndex: getEmojiDefaultEnglishSearchIndex(),
+      emojiLocalizerIndex: getEmojiDefaultEnglishLocalizerIndex(),
+    };
+  }, []);
+  return (
+    <FunEmojiLocalizationContext.Provider value={context}>
+      {props.children}
+    </FunEmojiLocalizationContext.Provider>
+  );
+}
+
 function useLocaleEmojiList(i18n: LocalizerType): LocaleEmojiListType | null {
   const locale = useMemo(() => i18n.getLocale(), [i18n]);
 
diff --git a/ts/shims/renderClearingDataView.tsx b/ts/shims/renderClearingDataView.tsx
index ebdc69410e7..80a99614b4a 100644
--- a/ts/shims/renderClearingDataView.tsx
+++ b/ts/shims/renderClearingDataView.tsx
@@ -6,10 +6,13 @@ import { render } from 'react-dom';
 
 import { ClearingData } from '../components/ClearingData';
 import { deleteAllData } from './deleteAllData';
+import { FunDefaultEnglishEmojiLocalizationProvider } from '../components/fun/FunEmojiLocalizationProvider';
 
 export function renderClearingDataView(): void {
   render(
-    <ClearingData deleteAllData={deleteAllData} i18n={window.i18n} />,
+    <FunDefaultEnglishEmojiLocalizationProvider>
+      <ClearingData deleteAllData={deleteAllData} i18n={window.i18n} />
+    </FunDefaultEnglishEmojiLocalizationProvider>,
     document.getElementById('app-container')
   );
 }
diff --git a/ts/state/roots/createGroupV2JoinModal.tsx b/ts/state/roots/createGroupV2JoinModal.tsx
index a4f79a95dbd..90f5cd3e1b2 100644
--- a/ts/state/roots/createGroupV2JoinModal.tsx
+++ b/ts/state/roots/createGroupV2JoinModal.tsx
@@ -11,6 +11,7 @@ import type { Store } from 'redux';
 import { ModalHost } from '../../components/ModalHost';
 import type { SmartGroupV2JoinDialogProps } from '../smart/GroupV2JoinDialog';
 import { SmartGroupV2JoinDialog } from '../smart/GroupV2JoinDialog';
+import { FunEmojiLocalizationProvider } from '../../components/fun/FunEmojiLocalizationProvider';
 
 export const createGroupV2JoinModal = (
   store: Store,
@@ -20,9 +21,11 @@ export const createGroupV2JoinModal = (
 
   return (
     <Provider store={store}>
-      <ModalHost modalName="createGroupV2JoinModal" onClose={onClose}>
-        <SmartGroupV2JoinDialog {...props} />
-      </ModalHost>
+      <FunEmojiLocalizationProvider i18n={window.i18n}>
+        <ModalHost modalName="createGroupV2JoinModal" onClose={onClose}>
+          <SmartGroupV2JoinDialog {...props} />
+        </ModalHost>
+      </FunEmojiLocalizationProvider>
     </Provider>
   );
 };
diff --git a/ts/util/longRunningTaskWrapper.tsx b/ts/util/longRunningTaskWrapper.tsx
index d8592c790d2..81931e94cb7 100644
--- a/ts/util/longRunningTaskWrapper.tsx
+++ b/ts/util/longRunningTaskWrapper.tsx
@@ -9,6 +9,7 @@ import * as log from '../logging/log';
 import { ProgressModal } from '../components/ProgressModal';
 import { clearTimeoutIfNecessary } from './clearTimeoutIfNecessary';
 import { sleep } from './sleep';
+import { FunDefaultEnglishEmojiLocalizationProvider } from '../components/fun/FunEmojiLocalizationProvider';
 
 export async function longRunningTaskWrapper<T>({
   name,
@@ -31,7 +32,12 @@ export async function longRunningTaskWrapper<T>({
     progressNode = document.createElement('div');
 
     log.info(`longRunningTaskWrapper/${idLog}: Creating spinner`);
-    render(<ProgressModal i18n={window.i18n} />, progressNode);
+    render(
+      <FunDefaultEnglishEmojiLocalizationProvider>
+        <ProgressModal i18n={window.i18n} />
+      </FunDefaultEnglishEmojiLocalizationProvider>,
+      progressNode
+    );
     spinnerStart = Date.now();
   }, TWO_SECONDS);
 
diff --git a/ts/util/showConfirmationDialog.tsx b/ts/util/showConfirmationDialog.tsx
index 9db08e9a88b..d7dd94c5dc7 100644
--- a/ts/util/showConfirmationDialog.tsx
+++ b/ts/util/showConfirmationDialog.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { ConfirmationDialog } from '../components/ConfirmationDialog';
+import { FunDefaultEnglishEmojiLocalizationProvider } from '../components/fun/FunEmojiLocalizationProvider';
 
 type ConfirmationDialogViewProps = {
   onTopOfEverything?: boolean;
@@ -55,33 +56,37 @@ export function showConfirmationDialog(
   confirmationDialogPreviousFocus = document.activeElement as HTMLElement;
 
   render(
-    <ConfirmationDialog
-      dialogName={options.dialogName}
-      onTopOfEverything={options.onTopOfEverything}
-      actions={[
-        {
-          action: () => {
-            options.resolve();
+    <FunDefaultEnglishEmojiLocalizationProvider>
+      <ConfirmationDialog
+        dialogName={options.dialogName}
+        onTopOfEverything={options.onTopOfEverything}
+        actions={[
+          {
+            action: () => {
+              options.resolve();
+            },
+            style: options.confirmStyle,
+            text: options.okText || window.i18n('icu:ok'),
           },
-          style: options.confirmStyle,
-          text: options.okText || window.i18n('icu:ok'),
-        },
-      ]}
-      cancelText={options.cancelText || window.i18n('icu:cancel')}
-      i18n={window.i18n}
-      onCancel={() => {
-        if (options.reject) {
-          options.reject(new Error('showConfirmationDialog: onCancel called'));
-        }
-      }}
-      onClose={() => {
-        removeConfirmationDialog();
-      }}
-      title={options.title}
-      noMouseClose={options.noMouseClose}
-    >
-      {options.description}
-    </ConfirmationDialog>,
+        ]}
+        cancelText={options.cancelText || window.i18n('icu:cancel')}
+        i18n={window.i18n}
+        onCancel={() => {
+          if (options.reject) {
+            options.reject(
+              new Error('showConfirmationDialog: onCancel called')
+            );
+          }
+        }}
+        onClose={() => {
+          removeConfirmationDialog();
+        }}
+        title={options.title}
+        noMouseClose={options.noMouseClose}
+      >
+        {options.description}
+      </ConfirmationDialog>
+    </FunDefaultEnglishEmojiLocalizationProvider>,
     confirmationDialogViewNode
   );
 }
diff --git a/ts/windows/about/app.tsx b/ts/windows/about/app.tsx
index 084c5ce519f..fb05e129b37 100644
--- a/ts/windows/about/app.tsx
+++ b/ts/windows/about/app.tsx
@@ -7,19 +7,22 @@ import ReactDOM from 'react-dom';
 import { About } from '../../components/About';
 import { i18n } from '../sandboxedInit';
 import { strictAssert } from '../../util/assert';
+import { FunDefaultEnglishEmojiLocalizationProvider } from '../../components/fun/FunEmojiLocalizationProvider';
 
 const { AboutWindowProps } = window.Signal;
 
 strictAssert(AboutWindowProps, 'window values not provided');
 
 ReactDOM.render(
-  <About
-    closeAbout={() => window.SignalContext.executeMenuRole('close')}
-    appEnv={AboutWindowProps.appEnv}
-    platform={AboutWindowProps.platform}
-    arch={AboutWindowProps.arch}
-    i18n={i18n}
-    version={window.SignalContext.getVersion()}
-  />,
+  <FunDefaultEnglishEmojiLocalizationProvider>
+    <About
+      closeAbout={() => window.SignalContext.executeMenuRole('close')}
+      appEnv={AboutWindowProps.appEnv}
+      platform={AboutWindowProps.platform}
+      arch={AboutWindowProps.arch}
+      i18n={i18n}
+      version={window.SignalContext.getVersion()}
+    />
+  </FunDefaultEnglishEmojiLocalizationProvider>,
   document.getElementById('app')
 );
diff --git a/ts/windows/debuglog/app.tsx b/ts/windows/debuglog/app.tsx
index e24b3a57b97..44899c7cc39 100644
--- a/ts/windows/debuglog/app.tsx
+++ b/ts/windows/debuglog/app.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { DebugLogWindow } from '../../components/DebugLogWindow';
+import { FunDefaultEnglishEmojiLocalizationProvider } from '../../components/fun/FunEmojiLocalizationProvider';
 import { i18n } from '../sandboxedInit';
 import { strictAssert } from '../../util/assert';
 
@@ -12,12 +13,14 @@ const { DebugLogWindowProps } = window.Signal;
 strictAssert(DebugLogWindowProps, 'window values not provided');
 
 render(
-  <DebugLogWindow
-    closeWindow={() => window.SignalContext.executeMenuRole('close')}
-    downloadLog={DebugLogWindowProps.downloadLog}
-    i18n={i18n}
-    fetchLogs={DebugLogWindowProps.fetchLogs}
-    uploadLogs={DebugLogWindowProps.uploadLogs}
-  />,
+  <FunDefaultEnglishEmojiLocalizationProvider>
+    <DebugLogWindow
+      closeWindow={() => window.SignalContext.executeMenuRole('close')}
+      downloadLog={DebugLogWindowProps.downloadLog}
+      i18n={i18n}
+      fetchLogs={DebugLogWindowProps.fetchLogs}
+      uploadLogs={DebugLogWindowProps.uploadLogs}
+    />
+  </FunDefaultEnglishEmojiLocalizationProvider>,
   document.getElementById('app')
 );
diff --git a/ts/windows/permissions/app.tsx b/ts/windows/permissions/app.tsx
index d5a2d235d48..bf89d222481 100644
--- a/ts/windows/permissions/app.tsx
+++ b/ts/windows/permissions/app.tsx
@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
 import { PermissionsPopup } from '../../components/PermissionsPopup';
 import { i18n } from '../sandboxedInit';
 import { strictAssert } from '../../util/assert';
+import { FunDefaultEnglishEmojiLocalizationProvider } from '../../components/fun/FunEmojiLocalizationProvider';
 
 const { PermissionsWindowProps } = window.Signal;
 
@@ -26,11 +27,13 @@ if (forCalling) {
 }
 
 ReactDOM.render(
-  <PermissionsPopup
-    i18n={i18n}
-    message={message}
-    onAccept={PermissionsWindowProps.onAccept}
-    onClose={PermissionsWindowProps.onClose}
-  />,
+  <FunDefaultEnglishEmojiLocalizationProvider>
+    <PermissionsPopup
+      i18n={i18n}
+      message={message}
+      onAccept={PermissionsWindowProps.onAccept}
+      onClose={PermissionsWindowProps.onClose}
+    />
+  </FunDefaultEnglishEmojiLocalizationProvider>,
   document.getElementById('app')
 );
diff --git a/ts/windows/screenShare/app.tsx b/ts/windows/screenShare/app.tsx
index 871795f1ba0..1dc1a895937 100644
--- a/ts/windows/screenShare/app.tsx
+++ b/ts/windows/screenShare/app.tsx
@@ -9,6 +9,7 @@ import { i18n } from '../sandboxedInit';
 import { strictAssert } from '../../util/assert';
 import { drop } from '../../util/drop';
 import { parseEnvironment, setEnvironment } from '../../environment';
+import { FunDefaultEnglishEmojiLocalizationProvider } from '../../components/fun/FunEmojiLocalizationProvider';
 
 const { ScreenShareWindowProps } = window.Signal;
 
@@ -28,15 +29,17 @@ function render() {
   strictAssert(ScreenShareWindowProps, 'window values not provided');
 
   ReactDOM.render(
-    <div className="App dark-theme">
-      <CallingScreenSharingController
-        i18n={i18n}
-        onCloseController={onCloseController}
-        onStopSharing={ScreenShareWindowProps.onStopSharing}
-        status={ScreenShareWindowProps.getStatus()}
-        presentedSourceName={ScreenShareWindowProps.presentedSourceName}
-      />
-    </div>,
+    <FunDefaultEnglishEmojiLocalizationProvider>
+      <div className="App dark-theme">
+        <CallingScreenSharingController
+          i18n={i18n}
+          onCloseController={onCloseController}
+          onStopSharing={ScreenShareWindowProps.onStopSharing}
+          status={ScreenShareWindowProps.getStatus()}
+          presentedSourceName={ScreenShareWindowProps.presentedSourceName}
+        />
+      </div>
+    </FunDefaultEnglishEmojiLocalizationProvider>,
 
     document.getElementById('app')
   );