refactor: migrate remaining angular components to react (#833)

* refactor: menuRow directive to MenuRow component

* refactor: migrate footer to react

* refactor: migrate actions menu to react

* refactor: migrate history menu to react

* fix: click outside handler use capture to trigger event before re-render occurs which would otherwise cause node.contains to return incorrect result (specifically for the account menu)

* refactor: migrate revision preview modal to react

* refactor: migrate permissions modal to react

* refactor: migrate password wizard to react

* refactor: remove unused input modal directive

* refactor: remove unused delay hide component

* refactor: remove unused filechange directive

* refactor: remove unused elemReady directive

* refactor: remove unused sn-enter directive

* refactor: remove unused lowercase directive

* refactor: remove unused autofocus directive

* refactor(wip): note view to react

* refactor: use mutation observer to deinit textarea listeners

* refactor: migrate challenge modal to react

* refactor: migrate note group view to react

* refactor(wip): migrate remaining classes

* fix: navigation parent ref

* refactor: fully remove angular assets

* fix: account switcher

* fix: application view state

* refactor: remove unused password wizard type

* fix: revision preview and permissions modal

* fix: remove angular comment

* refactor: react panel resizers for editor

* feat: simple panel resizer

* fix: use simple panel resizer everywhere

* fix: simplify panel resizer state

* chore: rename simple panel resizer to panel resizer

* refactor: simplify column layout

* fix: editor mount safety check

* fix: use inline onLoad callback for iframe, as setting onload after it loads will never call it

* chore: fix note view test

* chore(deps): upgrade snjs

app/assets/javascripts/ui_models/application.ts

@@ -1,5 +1,4 @@
 import { WebCrypto } from '@/crypto';
-import { InputModalScope } from '@/directives/views/inputModal';
 import { AlertService } from '@/services/alertService';
 import { ArchiveManager } from '@/services/archiveManager';
 import { AutolockService } from '@/services/autolock_service';
@@ -8,18 +7,15 @@ import { DesktopManager } from '@/services/desktopManager';
 import { IOService } from '@/services/ioService';
 import { StatusManager } from '@/services/statusManager';
 import { ThemeManager } from '@/services/themeManager';
-import { PasswordWizardScope, PasswordWizardType } from '@/types';
 import { AppState } from '@/ui_models/app_state';
 import { WebDeviceInterface } from '@/web_device_interface';
 import {
   DeinitSource,
-  PermissionDialog,
   Platform,
   SNApplication,
   NoteGroupController,
+  removeFromArray,
 } from '@standardnotes/snjs';
-import angular from 'angular';
-import { AccountSwitcherScope, PermissionsModalScope } from './../types';
 
 type WebServices = {
   appState: AppState;
@@ -31,20 +27,23 @@ type WebServices = {
   io: IOService;
 };
 
-export class WebApplication extends SNApplication {
-  private scope?: angular.IScope;
-  private webServices!: WebServices;
-  private currentAuthenticationElement?: angular.IRootElementService;
-  public noteControllerGroup: NoteGroupController;
+export enum WebAppEvent {
+  NewUpdateAvailable = 'NewUpdateAvailable',
+  DesktopWindowGainedFocus = 'DesktopWindowGainedFocus',
+  DesktopWindowLostFocus = 'DesktopWindowLostFocus',
+}
+
+export type WebEventObserver = (event: WebAppEvent) => void;
+
+export class WebApplication extends SNApplication {
+  private webServices!: WebServices;
+  public noteControllerGroup: NoteGroupController;
+  private webEventObservers: WebEventObserver[] = [];
 
-  /* @ngInject */
   constructor(
     deviceInterface: WebDeviceInterface,
     platform: Platform,
     identifier: string,
-    private $compile: angular.ICompileService,
-    private $timeout: angular.ITimeoutService,
-    scope: angular.IScope,
     defaultSyncServerHost: string,
     public bridge: Bridge,
     enableUnfinishedFeatures: boolean,
@@ -63,11 +62,8 @@ export class WebApplication extends SNApplication {
       enableUnfinishedFeatures,
       webSocketUrl
     );
-    this.$compile = $compile;
-    this.scope = scope;
     deviceInterface.setApplication(this);
     this.noteControllerGroup = new NoteGroupController(this);
-    this.presentPermissionsDialog = this.presentPermissionsDialog.bind(this);
   }
 
   /** @override */
@@ -79,14 +75,12 @@ export class WebApplication extends SNApplication {
       (service as any).application = undefined;
     }
     this.webServices = {} as WebServices;
-    (this.$compile as unknown) = undefined;
     this.noteControllerGroup.deinit();
-    (this.scope as any).application = undefined;
-    this.scope!.$destroy();
-    this.scope = undefined;
-    (this.presentPermissionsDialog as unknown) = undefined;
-    /** Allow our Angular directives to be destroyed and any pending digest cycles
-     * to complete before destroying the global application instance and all its services */
+    this.webEventObservers.length = 0;
+    /**
+     * Allow any pending renders to complete before destroying the global
+     * application instance and all its services
+     */
     setTimeout(() => {
       super.deinit(source);
       if (source === DeinitSource.SignOut) {
@@ -95,24 +89,21 @@ export class WebApplication extends SNApplication {
     }, 0);
   }
 
-  onStart(): void {
-    super.onStart();
-    this.componentManager.presentPermissionsDialog =
-      this.presentPermissionsDialog;
-  }
-
   setWebServices(services: WebServices): void {
     this.webServices = services;
   }
 
-  /**
-   * If a UI change is made in an async function, Angular might not re-render the change.
-   * Use this function to force re-render the UI after an async function has made UI changes.
-   */
-  public performFunctionWithAngularDigestCycleAfterAsyncChange(
-    func: () => void
-  ) {
-    this.$timeout(func);
+  public addWebEventObserver(observer: WebEventObserver): () => void {
+    this.webEventObservers.push(observer);
+    return () => {
+      removeFromArray(this.webEventObservers, observer);
+    };
+  }
+
+  public notifyWebEvent(event: WebAppEvent): void {
+    for (const observer of this.webEventObservers) {
+      observer(event);
+    }
   }
 
   public getAppState(): AppState {
@@ -147,79 +138,12 @@ export class WebApplication extends SNApplication {
     return this.protocolUpgradeAvailable();
   }
 
-  presentPasswordWizard(type: PasswordWizardType) {
-    const scope = this.scope!.$new(true) as PasswordWizardScope;
-    scope.type = type;
-    scope.application = this;
-    const el = this.$compile!(
-      "<password-wizard application='application' type='type'></password-wizard>"
-    )(scope as any);
-    this.applicationElement.append(el);
-  }
-
   downloadBackup(): void | Promise<void> {
     return this.bridge.downloadBackup();
   }
 
-  authenticationInProgress() {
-    return this.currentAuthenticationElement != null;
-  }
-
-  get applicationElement() {
-    return angular.element(document.getElementById(this.identifier)!);
-  }
-
   async signOutAndDeleteLocalBackups(): Promise<void> {
     await this.bridge.deleteLocalBackups();
     return this.signOut();
   }
-
-  presentPasswordModal(callback: () => void) {
-    const scope = this.scope!.$new(true) as InputModalScope;
-    scope.type = 'password';
-    scope.title = 'Decryption Assistance';
-    scope.message = `Unable to decrypt this item with your current keys.
-                     Please enter your account password at the time of this revision.`;
-    scope.callback = callback;
-    const el = this.$compile!(
-      `<input-modal type='type' message='message'
-     title='title' callback='callback()'></input-modal>`
-    )(scope as any);
-    this.applicationElement.append(el);
-  }
-
-  presentRevisionPreviewModal(uuid: string, content: any, title?: string) {
-    const scope: any = this.scope!.$new(true);
-    scope.uuid = uuid;
-    scope.content = content;
-    scope.title = title;
-    scope.application = this;
-    const el = this.$compile!(
-      `<revision-preview-modal application='application' uuid='uuid' content='content' title='title'
-      class='sk-modal'></revision-preview-modal>`
-    )(scope);
-    this.applicationElement.append(el);
-  }
-
-  public openAccountSwitcher() {
-    const scope = this.scope!.$new(true) as Partial<AccountSwitcherScope>;
-    scope.application = this;
-    const el = this.$compile!(
-      "<account-switcher application='application' " +
-        "class='sk-modal'></account-switcher>"
-    )(scope as any);
-    this.applicationElement.append(el);
-  }
-
-  presentPermissionsDialog(dialog: PermissionDialog) {
-    const scope = this.scope!.$new(true) as PermissionsModalScope;
-    scope.permissionsString = dialog.permissionsString;
-    scope.component = dialog.component;
-    scope.callback = dialog.callback;
-    const el = this.$compile!(
-      "<permissions-modal component='component' permissions-string='permissionsString'" +
-        " callback='callback' class='sk-modal'></permissions-modal>"
-    )(scope as any);
-    this.applicationElement.append(el);
-  }
 }