feat: component viewer (#781)

* wip: component viewer

* feat: get component status from component viewer

* fix: remove unused property

* chore(deps): snjs 2.29.0

* fix: import location

app/assets/javascripts/services/desktopManager.ts

@@ -1,40 +1,34 @@
 import {
   SNComponent,
-  PurePayload,
   ComponentMutator,
   AppDataField,
   EncryptionIntent,
   ApplicationService,
   ApplicationEvent,
   removeFromArray,
-  BackupFile,
+  DesktopManagerInterface,
 } from '@standardnotes/snjs';
-/* eslint-disable camelcase */
+
 import { WebApplication } from '@/ui_models/application';
-// An interface used by the Desktop app to interact with SN
 import { isDesktopApplication } from '@/utils';
 import { Bridge } from './bridge';
 
-type UpdateObserverCallback = (component: SNComponent) => void;
-type ComponentActivationCallback = (payload: PurePayload) => void;
-type ComponentActivationObserver = {
-  id: string;
-  callback: ComponentActivationCallback;
-};
-
-export class DesktopManager extends ApplicationService {
+/**
+ * An interface used by the Desktop application to interact with SN
+ */
+export class DesktopManager
+  extends ApplicationService
+  implements DesktopManagerInterface
+{
   $rootScope: ng.IRootScopeService;
   $timeout: ng.ITimeoutService;
-  componentActivationObservers: ComponentActivationObserver[] = [];
   updateObservers: {
-    callback: UpdateObserverCallback;
+    callback: (component: SNComponent) => void;
   }[] = [];
 
   isDesktop = isDesktopApplication();
-
   dataLoaded = false;
   lastSearchedText?: string;
-  private removeComponentObserver?: () => void;
 
   constructor(
     $rootScope: ng.IRootScopeService,
@@ -52,10 +46,7 @@ export class DesktopManager extends ApplicationService {
   }
 
   deinit() {
-    this.componentActivationObservers.length = 0;
     this.updateObservers.length = 0;
-    this.removeComponentObserver?.();
-    this.removeComponentObserver = undefined;
     super.deinit();
   }
 
@@ -73,9 +64,9 @@ export class DesktopManager extends ApplicationService {
     this.bridge.onMajorDataChange();
   }
 
-  getExtServerHost() {
+  getExtServerHost(): string {
     console.assert(!!this.bridge.extensionsServerHost, 'extServerHost is null');
-    return this.bridge.extensionsServerHost;
+    return this.bridge.extensionsServerHost!;
   }
 
   /**
@@ -83,7 +74,7 @@ export class DesktopManager extends ApplicationService {
    * Keys are not passed into ItemParams, so the result is not encrypted
    */
   convertComponentForTransmission(component: SNComponent) {
-    return this.application!.protocolService!.payloadByEncryptingPayload(
+    return this.application.protocolService!.payloadByEncryptingPayload(
       component.payloadRepresentation(),
       EncryptionIntent.FileDecrypted
     );
@@ -107,7 +98,7 @@ export class DesktopManager extends ApplicationService {
     });
   }
 
-  registerUpdateObserver(callback: UpdateObserverCallback) {
+  registerUpdateObserver(callback: (component: SNComponent) => void) {
     const observer = {
       callback: callback,
     };
@@ -143,11 +134,11 @@ export class DesktopManager extends ApplicationService {
     componentData: any,
     error: any
   ) {
-    const component = this.application!.findItem(componentData.uuid);
+    const component = this.application.findItem(componentData.uuid);
     if (!component) {
       return;
     }
-    const updatedComponent = await this.application!.changeAndSaveItem(
+    const updatedComponent = await this.application.changeAndSaveItem(
       component.uuid,
       (m) => {
         const mutator = m as ComponentMutator;
@@ -168,34 +159,8 @@ export class DesktopManager extends ApplicationService {
     });
   }
 
-  desktop_registerComponentActivationObserver(
-    callback: ComponentActivationCallback
-  ) {
-    const observer = { id: `${Math.random}`, callback: callback };
-    this.componentActivationObservers.push(observer);
-    return observer;
-  }
-
-  desktop_deregisterComponentActivationObserver(
-    observer: ComponentActivationObserver
-  ) {
-    removeFromArray(this.componentActivationObservers, observer);
-  }
-
-  /* Notify observers that a component has been registered/activated */
-  async notifyComponentActivation(component: SNComponent) {
-    const serializedComponent = await this.convertComponentForTransmission(
-      component
-    );
-    this.$timeout(() => {
-      for (const observer of this.componentActivationObservers) {
-        observer.callback(serializedComponent);
-      }
-    });
-  }
-
   async desktop_requestBackupFile() {
-    const data = await this.application!.createBackupFile(
+    const data = await this.application.createBackupFile(
       this.application.hasProtectionSources()
         ? EncryptionIntent.FileEncrypted
         : EncryptionIntent.FileDecrypted

app/assets/javascripts/services/themeManager.ts

@@ -7,12 +7,14 @@ import {
   removeFromArray,
   ApplicationEvent,
   ContentType,
+  UuidString,
+  FeatureStatus,
 } from '@standardnotes/snjs';
 
 const CACHED_THEMES_KEY = 'cachedThemes';
 
 export class ThemeManager extends ApplicationService {
-  private activeThemes: string[] = [];
+  private activeThemes: UuidString[] = [];
   private unregisterDesktop!: () => void;
   private unregisterStream!: () => void;
 
@@ -22,6 +24,8 @@ export class ThemeManager extends ApplicationService {
       this.deactivateAllThemes();
     } else if (event === ApplicationEvent.StorageReady) {
       await this.activateCachedThemes();
+    } else if (event === ApplicationEvent.FeaturesUpdated) {
+      this.reloadThemeStatus();
     }
   }
 
@@ -34,11 +38,24 @@ export class ThemeManager extends ApplicationService {
     this.activeThemes.length = 0;
     this.unregisterDesktop();
     this.unregisterStream();
-    (this.unregisterDesktop as any) = undefined;
-    (this.unregisterStream as any) = undefined;
+    (this.unregisterDesktop as unknown) = undefined;
+    (this.unregisterStream as unknown) = undefined;
     super.deinit();
   }
 
+  reloadThemeStatus(): void {
+    for (const themeUuid of this.activeThemes) {
+      const theme = this.application.findItem(themeUuid) as SNTheme;
+      if (
+        !theme ||
+        this.application.getFeatureStatus(theme.identifier) !==
+          FeatureStatus.Entitled
+      ) {
+        this.deactivateTheme(themeUuid);
+      }
+    }
+  }
+
   /** @override */
   async onAppStart() {
     super.onAppStart();
@@ -99,7 +116,11 @@ export class ThemeManager extends ApplicationService {
       return;
     }
     this.activeThemes.push(theme.uuid);
-    const url = this.application!.componentManager!.urlForComponent(theme)!;
+    const url = this.application.componentManager.urlForComponent(theme);
+    if (!url) {
+      return;
+    }
+
     const link = document.createElement('link');
     link.href = url;
     link.type = 'text/css';
@@ -125,19 +146,19 @@ export class ThemeManager extends ApplicationService {
   }
 
   private async cacheThemes() {
-    const themes = this.application!.getAll(this.activeThemes) as SNTheme[];
+    const themes = this.application.getAll(this.activeThemes) as SNTheme[];
     const mapped = await Promise.all(
       themes.map(async (theme) => {
         const payload = theme.payloadRepresentation();
         const processedPayload =
-          await this.application!.protocolService!.payloadByEncryptingPayload(
+          await this.application.protocolService.payloadByEncryptingPayload(
             payload,
             EncryptionIntent.LocalStorageDecrypted
           );
         return processedPayload;
       })
     );
-    return this.application!.setValue(
+    return this.application.setValue(
       CACHED_THEMES_KEY,
       mapped,
       StorageValueModes.Nonwrapped
@@ -154,15 +175,15 @@ export class ThemeManager extends ApplicationService {
   }
 
   private async getCachedThemes() {
-    const cachedThemes = (await this.application!.getValue(
+    const cachedThemes = (await this.application.getValue(
       CACHED_THEMES_KEY,
       StorageValueModes.Nonwrapped
     )) as SNTheme[];
     if (cachedThemes) {
       const themes = [];
       for (const cachedTheme of cachedThemes) {
-        const payload = this.application!.createPayloadFromObject(cachedTheme);
-        const theme = this.application!.createItemFromPayload(
+        const payload = this.application.createPayloadFromObject(cachedTheme);
+        const theme = this.application.createItemFromPayload(
           payload
         ) as SNTheme;
         themes.push(theme);