adding warning message for experimental features

Author: tmunzer

angular/src/app/pages/tools/tools.component.html

@@ -39,3 +39,11 @@ <h2>API Token Tools</h2>
   [ngClass]="{ hidden: view != 'token-usage' }"
   (closePopup)="closePopup('token-usage')"
 ></app-tools-token-usage>
+<app-tools-warning
+  [warningMessage]="warningMessage"
+  [experimentalMessage]="experimentalMessage"
+  class="popup transparent"
+  [ngClass]="{ hidden: view != 'warning' }"
+  (warningConfirm)="warningConfirm()"
+  (warningCancel)="warningCancel()"
+></app-tools-warning>

angular/src/app/pages/tools/tools.component.ts

@@ -16,29 +16,54 @@ import { BrowserService } from "../../services/browser.service";
 export class ToolsComponent implements OnInit {
   eventTokenInfo: Subject<boolean> = new Subject<boolean>()
   eventTokenUsage: Subject<boolean> = new Subject<boolean>()
+  eventWarning: Subject<boolean> = new Subject<boolean>()
+  experimentalMessage: boolean = false;
+  warningMessage: string = "";
   view: string = "";
-  id_links:boolean = false;
+  id_links: boolean = false;
   constructor(
     private _cd: ChangeDetectorRef,
-        private _browser: BrowserService
+    private _browser: BrowserService
   ) { }
 
   ngOnInit() {
-    this._browser.getStorage("id_links", (result)=>{
+    this._browser.getStorage("id_links", (result) => {
       if (result == "true") this.id_links = true;
       else this.id_links = false;
     })
   }
 
-  changeIdLinks():void{
-    console.log(this.id_links)
-    if (this.id_links) this._browser.setStorage("id_links", "true");
-    else this._browser.setStorage("id_links", "false");
+  changeIdLinks(): void {
+    if (this.id_links) {
+      this.view = "warning";
+      this.experimentalMessage = true;
+      this.warningMessage = "It may not work as expected and may impact your browser performance, especially on Mist API pages with a large number of entries.";
+      this.eventWarning.next(true);
+      this._cd.detectChanges();
+      //this._browser.setStorage("id_links", "true")
+    } else this._browser.setStorage("id_links", "false");
   }
 
-  openPopup(view:string): void {
+  warningConfirm(): void {
+    this.view = "";
+    this.experimentalMessage = false;
+    this._browser.setStorage("id_links", "true");
+    this.id_links = true;
+    this.eventWarning.next(false);
+    this._cd.detectChanges();
+  }
+  warningCancel(): void {
+    this.view = "";
+    this.experimentalMessage = false;
+    this._browser.setStorage("id_links", "false");
+    this.id_links = false;
+    this.eventWarning.next(false);
+    this._cd.detectChanges();
+  }
+
+  openPopup(view: string): void {
     this.view = view;
-    switch(view){
+    switch (view) {
       case "token-info":
         this.eventTokenInfo.next(true)
         break;
@@ -49,9 +74,9 @@ export class ToolsComponent implements OnInit {
     this._cd.detectChanges();
   }
 
-  closePopup(view:string): void {
+  closePopup(view: string): void {
     this.view = "";
-    switch(view){
+    switch (view) {
       case "token-info":
         this.eventTokenInfo.next(false)
         break;

angular/src/app/pages/tools/warning/warning.component.html

@@ -0,0 +1,13 @@
+<div class="popup-content">
+    <div class="popup-header">
+        <h2>Warning</h2>
+    </div>
+    <div class="popup-body">
+      <div *ngIf="experimentalMessage">This is an experimental feature. </div>
+        <div>{{ warningMessage }}</div>
+        <div>Do you want to continue?</div>
+    </div>
+    <div class="popup-footer">
+      <button (click)="cancel()">CANCEL</button>
+      <button (click)="confirm()">CONFIRM</button>
+</div>

angular/src/app/pages/tools/warning/warning.component.scss

@@ -0,0 +1,14 @@
+.popup-header h2 {
+    color: #ffa500;
+}
+.popup-body {
+    font-size: larger;
+    margin-bottom: 1em;
+    div {
+        margin: 1em 0;
+    }
+}
+
+.popup-footer {
+    display: flex;
+}

angular/src/app/pages/tools/warning/warning.component.ts

@@ -0,0 +1,35 @@
+import { Component, Output, Input, ChangeDetectionStrategy, EventEmitter, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-tools-warning',
+  templateUrl: 'warning.component.html',
+  styleUrls: [
+    '../../../scss/popup.component.scss',
+    '../../../scss/button.component.scss',
+    'warning.component.scss',
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ToolsWarningComponent implements OnInit {
+
+  @Input() experimentalMessage: boolean = false;
+  @Input() warningMessage: string;
+  @Output() warningConfirm = new EventEmitter<string>();
+  @Output() warningCancel = new EventEmitter<string>();
+  constructor(
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  confirm(): void {
+    this.warningConfirm.emit();
+  }
+  cancel(): void {
+    this.warningCancel.emit();
+  }
+
+
+}