Removes some Backbone views

ts/shims/showConfirmationDialog.tsx

@@ -17,8 +17,8 @@ type ConfirmationDialogViewProps = {
   resolve: () => void;
 };
 
-let confirmationDialogViewNode: HTMLElement | null = null;
-let confirmationDialogPreviousFocus: HTMLElement | null = null;
+let confirmationDialogViewNode: HTMLElement | undefined;
+let confirmationDialogPreviousFocus: HTMLElement | undefined;
 
 function removeConfirmationDialog() {
   if (!confirmationDialogViewNode) {
@@ -34,7 +34,7 @@ function removeConfirmationDialog() {
   ) {
     confirmationDialogPreviousFocus.focus();
   }
-  confirmationDialogViewNode = null;
+  confirmationDialogViewNode = undefined;
 }
 
 function showConfirmationDialog(options: ConfirmationDialogViewProps) {

ts/shims/showSafetyNumberChangeDialog.tsx

@@ -0,0 +1,67 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// This file is here temporarily while we're switching off of Backbone into
+// React. In the future, and in React-land, please just import and use
+// the component directly. This is the thin API layer to bridge the gap
+// while we convert things over. Please delete this file once all usages are
+// ported over.
+
+import React from 'react';
+import { unmountComponentAtNode, render } from 'react-dom';
+import { ConversationModel } from '../models/conversations';
+import { SafetyNumberChangeDialog } from '../components/SafetyNumberChangeDialog';
+
+export type SafetyNumberChangeViewProps = {
+  confirmText?: string;
+  contacts: Array<ConversationModel>;
+  reject: () => void;
+  resolve: () => void;
+};
+
+let dialogContainerNode: HTMLElement | undefined;
+
+function removeDialog() {
+  if (!dialogContainerNode) {
+    return;
+  }
+
+  unmountComponentAtNode(dialogContainerNode);
+  document.body.removeChild(dialogContainerNode);
+
+  dialogContainerNode = undefined;
+}
+
+export function showSafetyNumberChangeDialog(
+  options: SafetyNumberChangeViewProps
+): void {
+  if (dialogContainerNode) {
+    removeDialog();
+  }
+
+  dialogContainerNode = document.createElement('div');
+  document.body.appendChild(dialogContainerNode);
+
+  render(
+    <SafetyNumberChangeDialog
+      confirmText={options.confirmText}
+      contacts={options.contacts.map(contact => contact.format())}
+      i18n={window.i18n}
+      onCancel={() => {
+        options.reject();
+        removeDialog();
+      }}
+      onConfirm={() => {
+        options.resolve();
+        removeDialog();
+      }}
+      renderSafetyNumber={props => {
+        return window.Signal.State.Roots.createSafetyNumberViewer(
+          window.reduxStore,
+          props
+        );
+      }}
+    />,
+    dialogContainerNode
+  );
+}