Add display dialog logic

js/background.js

@@ -527,6 +527,10 @@
       }
     };
 
+    window.showOnionStatusDialog = () => {
+      appView.showOnionStatusDialog();
+    }
+
     // Set user's launch count.
     const prevLaunchCount = window.getSettingValue('launch-count');
     const launchCount = !prevLaunchCount ? 1 : prevLaunchCount + 1;

js/views/app_view.js

@@ -126,6 +126,12 @@
       const dialog = new Whisper.SessionNicknameDialog(modifiedOptions);
       this.el.prepend(dialog.el);
     },
+    showOnionStatusDialog() {
+      // eslint-disable-next-line no-param-reassign
+      const theme = this.getThemeObject();
+      const dialog = new Whisper.OnionStatusDialogView({theme});
+      this.el.prepend(dialog.el);
+    },
     showResetSessionIdDialog() {
       const theme = this.getThemeObject();
       const resetSessionIDDialog = new Whisper.SessionIDResetDialog({ theme });

js/views/onion_status_dialog_view.js

@@ -0,0 +1,38 @@
+/* global i18n, Whisper */
+
+// eslint-disable-next-line func-names
+(function() {
+    'use strict';
+  
+    window.Whisper = window.Whisper || {};
+  
+    Whisper.EditProfileDialogView = Whisper.View.extend({
+      className: 'loki-dialog modal',
+      initialize({ theme }) {
+        this.close = this.close.bind(this);
+  
+        this.theme = theme;
+  
+        this.$el.focus();
+        this.render();
+      },
+      render() {
+        this.dialogView = new Whisper.ReactWrapperView({
+          className: 'onion-status-dialog',
+          Component: window.Signal.Components.OnionStatusDialog,
+          props: {
+            onClose: this.close,
+            i18n,
+            theme: this.theme,
+          },
+        });
+  
+        this.$el.append(this.dialogView.el);
+        return this;
+      },
+      close() {
+        this.remove();
+      },
+    });
+  })();
+  

stylesheets/_index.scss

@@ -9,7 +9,8 @@
 
 .edit-profile-dialog,
 .create-group-dialog,
-.user-details-dialog {
+.user-details-dialog,
+.onion-status-dialog {
   .content {
     max-width: 100% !important;
   }

ts/components/OnionStatusDialog.tsx

@@ -14,15 +14,6 @@ import { DefaultTheme } from 'styled-components';
 import { MAX_USERNAME_LENGTH } from './session/registration/RegistrationTabs';
 import { SessionSpinner } from './session/SessionSpinner';
 
-// interface Props {
-//   i18n: any;
-//   profileName: string;
-//   avatarPath: string;
-//   pubkey: string;
-//   onClose: any;
-//   onOk: any;
-//   theme: DefaultTheme;
-// }
 
 interface State {
   profileName: string;
@@ -35,7 +26,7 @@ interface State {
 interface Props {
   i18n: any;
   theme: DefaultTheme;
-  nodes: Array<string>;
+  nodes?: Array<string>;
   onClose: any;
 }
 

ts/components/session/ActionsPanel.tsx

@@ -70,7 +70,7 @@ const Section = (props: { type: SectionType; avatarPath?: string }) => {
     } else if (type === SectionType.PathIndicator) {
       // Show Path Indicator Modal
       console.log("status clicked")
-      // window.showOnionStatusDialog();
+      window.showOnionStatusDialog();
     }
     else {
       dispatch(clearSearch());

ts/window.d.ts

@@ -69,6 +69,7 @@ declare global {
     setSettingValue: any;
     showEditProfileDialog: any;
     showNicknameDialog: (options: { convoId: string }) => void;
+    showOnionStatusDialog: any;
     showResetSessionIdDialog: any;
     storage: any;
     textsecure: LibTextsecure;