From 720d26483289d35403c6f2a747029a3447214bb3 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 11 Oct 2021 13:23:21 +0300
Subject: [PATCH] Use signleton marked options service. Fix popover size to not
 overflow viewport size. Add path routing for rulenode help assets to k8s
 ingress configuration.

---
 k8s/common/thingsboard.yml                           |  4 ++++
 .../dashboard-page/dashboard-page.component.html     |  2 +-
 .../home/components/widget/widget.component.ts       |  4 +++-
 .../shared/components/help-markdown.component.scss   |  4 ++--
 .../src/app/shared/components/popover.component.scss | 12 ++++++++++++
 .../src/app/shared/components/popover.component.ts   |  5 +++--
 ui-ngx/src/app/shared/shared.module.ts               |  3 ++-
 7 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/k8s/common/thingsboard.yml b/k8s/common/thingsboard.yml
index 51f39823df..ee360c27b7 100644
--- a/k8s/common/thingsboard.yml
+++ b/k8s/common/thingsboard.yml
@@ -424,6 +424,10 @@ spec:
         backend:
           serviceName: tb-node
           servicePort: 8080
+      - path: /assets/help/.*/rulenode/.*
+        backend:
+          serviceName: tb-node
+          servicePort: 8080
       - path: /oauth2/.*
         backend:
           serviceName: tb-node
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index a6d91d87ae..a97004d798 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-dashboard-page mat-content" [ngClass]="{'mobile-app': isMobileApp && !isEdit}" style="padding-top: 150px;" tb-toast toastTarget="dashboardRoot"
+<div class="tb-dashboard-page mat-content" [ngClass]="{'mobile-app': isMobileApp && !isEdit}" tb-toast toastTarget="dashboardRoot"
      fxFlex tb-fullscreen [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
   <section class="tb-dashboard-toolbar"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 0f13269e04..e7a92bf594 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -1355,8 +1355,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
           parentDashboard: this.widgetContext.parentDashboard ?
             this.widgetContext.parentDashboard : this.widgetContext.dashboard
         },
+        {width: popoverWidth, height: popoverHeight},
         popoverStyle,
-        {width: popoverWidth, height: popoverHeight}
+        {}
       );
       this.widgetContext.registerPopoverComponent(component);
     }
@@ -1398,6 +1399,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     this.dialog.open(this.embedDashboardDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      viewContainerRef: this.widgetContentContainer,
       data: {
         dashboard,
         state: objToBase64([ stateObject ]),
diff --git a/ui-ngx/src/app/shared/components/help-markdown.component.scss b/ui-ngx/src/app/shared/components/help-markdown.component.scss
index 8c289b2add..28eebff44d 100644
--- a/ui-ngx/src/app/shared/components/help-markdown.component.scss
+++ b/ui-ngx/src/app/shared/components/help-markdown.component.scss
@@ -16,8 +16,8 @@
 :host {
   .tb-help-markdown {
     overflow: auto;
-    max-width: 50vw;
-    max-height: 50vh;
+    max-width: 80vw;
+    max-height: 80vh;
     margin-top: 30px;
   }
 }
diff --git a/ui-ngx/src/app/shared/components/popover.component.scss b/ui-ngx/src/app/shared/components/popover.component.scss
index d42c60a373..48b7eb7d27 100644
--- a/ui-ngx/src/app/shared/components/popover.component.scss
+++ b/ui-ngx/src/app/shared/components/popover.component.scss
@@ -31,6 +31,8 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
   text-align: left;
   cursor: auto;
   user-select: text;
+  max-width: 100vw;
+  max-height: 100vh;
 
   &::after {
     position: absolute;
@@ -74,6 +76,8 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
     box-shadow: $box-shadow-base;
     overflow: hidden;
     position: relative;
+    width: 100%;
+    height: 100%;
   }
 
   &-close-button {
@@ -97,9 +101,17 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
     }
   }
 
+  &-content {
+    width: 100%;
+    height: 100%;
+  }
+
   &-inner-content {
     padding: 12px 16px;
     color: rgba(0, 0, 0, 0.85);
+    overflow: auto;
+    width: 100%;
+    height: 100%;
   }
 
   // Arrows
diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts
index c1fd71c157..19a158cbc2 100644
--- a/ui-ngx/src/app/shared/components/popover.component.ts
+++ b/ui-ngx/src/app/shared/components/popover.component.ts
@@ -312,7 +312,7 @@ export class TbPopoverService {
 
   displayPopover<T>(trigger: Element, renderer: Renderer2, hostView: ViewContainerRef,
                     componentType: Type<T>, preferredPlacement: PopoverPlacement = 'top', hideOnClickOutside = true,
-                    injector?: Injector, context?: any, popoverStyle: any = {}, style?: any): TbPopoverComponent {
+                    injector?: Injector, context?: any, overlayStyle: any = {}, popoverStyle: any = {}, style?: any): TbPopoverComponent {
     const componentRef = hostView.createComponent(this.componentFactory);
     const component = componentRef.instance;
     this.popoverWithTriggers.push({
@@ -329,6 +329,7 @@ export class TbPopoverService {
     component.tbComponentFactory = this.resolver.resolveComponentFactory(componentType);
     component.tbComponentInjector = injector;
     component.tbComponentContext = context;
+    component.tbOverlayStyle = overlayStyle;
     component.tbPopoverInnerStyle = popoverStyle;
     component.tbComponentStyle = style;
     component.tbHideOnClickOutside = hideOnClickOutside;
@@ -474,7 +475,7 @@ export class TbPopoverService {
             </div>
             <div class="tb-popover-inner" [ngStyle]="tbPopoverInnerStyle" role="tooltip">
               <div class="tb-popover-close-button" (click)="closeButtonClick($event)">×</div>
-              <div>
+              <div style="width: 100%; height: 100%;">
                 <div class="tb-popover-inner-content">
                   <ng-container *ngIf="tbContent">
                     <ng-container *tbStringTemplateOutlet="tbContent">{{ tbContent }}</ng-container>
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 18c437d978..a9de684421 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -314,7 +314,8 @@ import { MarkedOptionsService } from '@shared/components/marked-options.service'
       sanitize: SecurityContext.NONE,
       markedOptions: {
         provide: MarkedOptions,
-        useClass: MarkedOptionsService
+        useFactory: (markedOptionsService: MarkedOptionsService) => markedOptionsService,
+        deps: [MarkedOptionsService]
       }
     })
   ],