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