feat: show deprecation notice (#587)

* feat: show deprecation notice

* feat: show deprecation message

* chore(deps): update snjs

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

app/assets/javascripts/directives/views/componentView.ts

@@ -33,6 +33,9 @@ class ComponentViewCtrl implements ComponentViewScope {
   private unregisterComponentHandler!: () => void
   private unregisterDesktopObserver!: () => void
   private issueLoading = false
+  private isDeprecated = false
+  private deprecationMessage = ''
+  private deprecationMessageDismissed = false
   public reloading = false
   private expired = false
   private loading = false
@@ -175,6 +178,12 @@ class ComponentViewCtrl implements ComponentViewScope {
     });
   }
 
+  private dismissDeprecationMessage() {
+    this.$timeout(() => {
+      this.deprecationMessageDismissed = true;
+    });
+  }
+
   private onVisibilityChange() {
     if (document.visibilityState === 'hidden') {
       return;
@@ -215,6 +224,8 @@ class ComponentViewCtrl implements ComponentViewScope {
     if (this.expired && doManualReload) {
       this.$rootScope.$broadcast(RootScopeMessages.ReloadExtendedData);
     }
+    this.isDeprecated = component.isDeprecated;
+    this.deprecationMessage = component.package_info.deprecation_message;
   }
 
   private async handleIframeLoadTimeout() {

app/assets/templates/directives/component-view.pug

@@ -33,6 +33,14 @@
             rel='noopener',
             target='_blank'
             ) Help
+.sn-component(ng-if='ctrl.isDeprecated && !ctrl.deprecationMessageDismissed')
+  .sk-app-bar.no-edges.no-top-edge.dynamic-height
+    .left
+      .sk-app-bar-item
+        .sk-label.warning {{ctrl.deprecationMessage || 'This extension is deprecated.'}}
+    .right
+      .sk-app-bar-item(ng-click='ctrl.dismissDeprecationMessage()')
+        button.sn-button.small.info Dismiss
 
 .sn-component(ng-if="ctrl.error == 'offline-restricted'")
   .sk-panel.static

package.json

@@ -71,7 +71,7 @@
     "@reach/checkbox": "^0.13.2",
     "@reach/dialog": "^0.13.0",
     "@standardnotes/sncrypto-web": "1.2.10",
-    "@standardnotes/snjs": "2.7.9",
+    "@standardnotes/snjs": "2.7.10",
     "mobx": "^6.1.6",
     "mobx-react-lite": "^3.2.0",
     "preact": "^10.5.12"

yarn.lock

@@ -1936,10 +1936,10 @@
     "@standardnotes/sncrypto-common" "^1.2.7"
     libsodium-wrappers "^0.7.8"
 
-"@standardnotes/snjs@2.7.9":
-  version "2.7.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.7.9.tgz#8b2a5d0f6248e1872b2fe68a73307f754528b4c3"
-  integrity sha512-FNiLXdaUb2+WpCteTbfg/iiv4k0UXFzz57RnY1O8X40vEVFVY8VjrJuJxxwDuZqidUZeLIdTMlmfdKWoD+NRDA==
+"@standardnotes/snjs@2.7.10":
+  version "2.7.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.7.10.tgz#da92ed0ab8aca74ed885d2e1bec14c21ad03f4d2"
+  integrity sha512-aG0EOWOoybLXg3D9szoXsETNtYoaPSWzQBgrj14TwmENsJ70nLUW7TtzKwOny2hP6PegEFF3VdIE3tp7t5VGUg==
   dependencies:
     "@standardnotes/auth" "^2.0.0"
     "@standardnotes/sncrypto-common" "^1.2.9"