Move confirmation_dialog_view to ts and React

* Moves confirmation_dialog_view to ts and React

* showConfirmationDialog API

js/permissions_popup_start.js

@@ -1,7 +1,7 @@
 // Copyright 2018-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global $, Whisper, i18n */
+/* global $, i18n */
 
 $(document).on('keydown', e => {
   if (e.keyCode === 27) {
@@ -35,7 +35,8 @@ if (window.forCalling) {
   message = i18n('audioPermissionNeeded');
 }
 
-window.view = new Whisper.ConfirmationDialogView({
+window.showConfirmationDialog({
+  confirmStyle: 'affirmative',
   message,
   okText: i18n('allowAccess'),
   resolve: () => {
@@ -48,5 +49,3 @@ window.view = new Whisper.ConfirmationDialogView({
   },
   reject: window.closePermissionsPopup,
 });
-
-window.view.$el.appendTo($body);

js/views/confirmation_dialog_view.js

@@ -1,79 +0,0 @@
-// Copyright 2015-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-/* global Backbone, Whisper, i18n */
-
-// eslint-disable-next-line func-names
-(function () {
-  window.Whisper = window.Whisper || {};
-
-  Whisper.ConfirmationDialogView = Whisper.View.extend({
-    className: 'confirmation-dialog modal',
-    templateName: 'confirmation-dialog',
-    initialize(options) {
-      this.previousFocus = document.activeElement;
-
-      this.message = options.message;
-      this.hideCancel = options.hideCancel;
-
-      this.resolve = options.resolve;
-      this.okText = options.okText || i18n('ok');
-
-      this.reject = options.reject;
-      this.cancelText = options.cancelText || i18n('cancel');
-
-      if (Whisper.activeConfirmationView) {
-        Whisper.activeConfirmationView.remove();
-        Whisper.activeConfirmationView = null;
-      }
-
-      Whisper.activeConfirmationView = this;
-
-      this.render();
-    },
-    events: {
-      keydown: 'onKeydown',
-      'click .ok': 'ok',
-      'click .cancel': 'cancel',
-    },
-    remove() {
-      if (this.previousFocus && this.previousFocus.focus) {
-        this.previousFocus.focus();
-      }
-      Backbone.View.prototype.remove.call(this);
-    },
-    render_attributes() {
-      return {
-        message: this.message,
-        showCancel: !this.hideCancel,
-        cancel: this.cancelText,
-        ok: this.okText,
-      };
-    },
-    ok() {
-      this.remove();
-      if (this.resolve) {
-        this.resolve();
-      }
-    },
-    cancel() {
-      this.remove();
-      if (this.reject) {
-        this.reject(new Error('User clicked cancel button'));
-      }
-    },
-    onKeydown(event) {
-      if (event.key === 'Escape' || event.key === 'Esc') {
-        this.cancel();
-
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    focusCancel() {
-      // We delay this call because we might be called inside click handlers
-      //   which would set focus to themselves afterwards!
-      setTimeout(() => this.$('.cancel').focus(), 1);
-    },
-  });
-})();

js/views/whisper_view.js

@@ -54,14 +54,12 @@
       },
       confirm(message, okText) {
         return new Promise((resolve, reject) => {
-          const dialog = new Whisper.ConfirmationDialogView({
+          window.showConfirmationDialog({
             message,
             okText,
             resolve,
             reject,
           });
-          this.$el.append(dialog.el);
-          dialog.focusCancel();
         });
       },
     },