Merge pull request #4043 from ChantsovaEkaterina/improvement/replace-deprecated-portal-injector

Refactoring: replace deprecated PortalInjector

ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts

@@ -14,14 +14,23 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { AliasInfo, IAliasController } from '@core/api/widget-api.models';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   ALIASES_ENTITY_SELECT_PANEL_DATA,
   AliasesEntitySelectPanelComponent,
@@ -136,12 +145,12 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
     overlayRef.attach(new ComponentPortal(AliasesEntitySelectPanelComponent, this.viewContainerRef, injector));
   }
 
-  private _createAliasesEntitySelectPanelInjector(overlayRef: OverlayRef, data: AliasesEntitySelectPanelData): PortalInjector {
+  private _createAliasesEntitySelectPanelInjector(overlayRef: OverlayRef, data: AliasesEntitySelectPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [ALIASES_ENTITY_SELECT_PANEL_DATA, data],
+      {provide: ALIASES_ENTITY_SELECT_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private updateDisplayValue() {

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -19,9 +19,11 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
+  Injector,
   Input,
   NgZone,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -62,7 +64,7 @@ import {
   EditAttributeValuePanelComponent,
   EditAttributeValuePanelData
 } from './edit-attribute-value-panel.component';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { TelemetryWebsocketService } from '@core/ws/telemetry-websocket.service';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { DataKey, Datasource, DatasourceType, Widget, widgetType } from '@shared/models/widget.models';
@@ -319,13 +321,19 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     overlayRef.backdropClick().subscribe(() => {
       overlayRef.dispose();
     });
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [EDIT_ATTRIBUTE_VALUE_PANEL_DATA, {
+      {
-        attributeValue: attribute.value
+        provide: EDIT_ATTRIBUTE_VALUE_PANEL_DATA,
-      } as EditAttributeValuePanelData],
+        useValue: {
-      [OverlayRef, overlayRef]
+          attributeValue: attribute.value
-    ]);
+        } as EditAttributeValuePanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     const componentRef = overlayRef.attach(new ComponentPortal(EditAttributeValuePanelComponent,
       this.viewContainerRef, injector));
     componentRef.onDestroy(() => {

ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { IAliasController } from '@core/api/widget-api.models';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
@@ -28,7 +37,7 @@ import {
   FiltersEditPanelComponent,
   FiltersEditPanelData
 } from '@home/components/filter/filters-edit-panel.component';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { UserFilterDialogComponent, UserFilterDialogData } from '@home/components/filter/user-filter-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -153,12 +162,12 @@ export class FiltersEditComponent implements OnInit, OnDestroy {
     }
   }
 
-  private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): PortalInjector {
+  private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [FILTER_EDIT_PANEL_DATA, data],
+      {provide: FILTER_EDIT_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private updateFiltersInfo() {

ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts

@@ -14,11 +14,22 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  Inject,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { WINDOW } from '@core/services/window.service';
@@ -140,12 +151,12 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
     overlayRef.attach(new ComponentPortal(LegendConfigPanelComponent, this.viewContainerRef, injector));
   }
 
-  private _createLegendConfigPanelInjector(overlayRef: OverlayRef, data: LegendConfigPanelData): PortalInjector {
+  private _createLegendConfigPanelInjector(overlayRef: OverlayRef, data: LegendConfigPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [LEGEND_CONFIG_PANEL_DATA, data],
+      {provide: LEGEND_CONFIG_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -19,9 +19,11 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  Injector,
   Input,
   NgZone,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -64,7 +66,7 @@ import {
   widthStyle
 } from '@home/components/widget/lib/table-widget.models';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   DISPLAY_COLUMNS_PANEL_DATA,
   DisplayColumnsPanelComponent,
@@ -452,20 +454,26 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       };
     });
 
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DISPLAY_COLUMNS_PANEL_DATA, {
+      {
-        columns,
+        provide: DISPLAY_COLUMNS_PANEL_DATA,
-        columnsUpdated: (newColumns) => {
+        useValue: {
-          this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
+          columns,
-          if (this.enableSelection) {
+          columnsUpdated: (newColumns) => {
-            this.displayedColumns.unshift('select');
+            this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
+            if (this.enableSelection) {
+              this.displayedColumns.unshift('select');
+            }
+            this.displayedColumns.push('actions');
           }
-          this.displayedColumns.push('actions');
+        } as DisplayColumnsPanelData
-        }
+      },
-      } as DisplayColumnsPanelData],
+      {
-      [OverlayRef, overlayRef]
+        provide: OverlayRef,
-    ]);
+        useValue: overlayRef
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
       this.viewContainerRef, injector));
     this.ctx.detectChanges();
@@ -492,15 +500,21 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     overlayRef.backdropClick().subscribe(() => {
       overlayRef.dispose();
     });
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [ALARM_FILTER_PANEL_DATA, {
+      {
-        statusList: this.pageLink.statusList,
+        provide: ALARM_FILTER_PANEL_DATA,
-        severityList: this.pageLink.severityList,
+        useValue: {
-        typeList: this.pageLink.typeList
+          statusList: this.pageLink.statusList,
-      } as AlarmFilterPanelData],
+          severityList: this.pageLink.severityList,
-      [OverlayRef, overlayRef]
+          typeList: this.pageLink.typeList
-    ]);
+        } as AlarmFilterPanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     const componentRef = overlayRef.attach(new ComponentPortal(AlarmFilterPanelComponent,
       this.viewContainerRef, injector));
     componentRef.onDestroy(() => {

ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts

@@ -18,9 +18,11 @@ import {
   Component,
   Inject,
   InjectionToken,
+  Injector,
   Input,
   OnDestroy,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
@@ -41,7 +43,7 @@ import {
 import { KeyValue } from '@angular/common';
 import * as _moment from 'moment';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { MatSelect } from '@angular/material/select';
 import { Subscription } from 'rxjs';
 import { HistoryWindowType, TimewindowType } from '@shared/models/time/time.models';
@@ -142,18 +144,24 @@ export class DateRangeNavigatorWidgetComponent extends PageComponent implements
     overlayRef.backdropClick().subscribe(() => {
       overlayRef.dispose();
     });
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DATE_RANGE_NAVIGATOR_PANEL_DATA, {
+      {
-        model: cloneDateRangeNavigatorModel(this.advancedModel),
+        provide: DATE_RANGE_NAVIGATOR_PANEL_DATA,
-        settings: this.settings,
+        useValue: {
-        onChange: model => {
+          model: cloneDateRangeNavigatorModel(this.advancedModel),
-          this.advancedModel = model;
+          settings: this.settings,
-          this.triggerChange();
+          onChange: model => {
-        }
+            this.advancedModel = model;
-      } as DateRangeNavigatorPanelData],
+            this.triggerChange();
-      [OverlayRef, overlayRef]
+          }
-    ]);
+        } as DateRangeNavigatorPanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     overlayRef.attach(new ComponentPortal(DateRangeNavigatorPanelComponent,
       this.viewContainerRef, injector));
     this.ctx.detectChanges();

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts

@@ -18,9 +18,11 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  Injector,
   Input,
   NgZone,
   OnInit,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -70,7 +72,7 @@ import {
   widthStyle
 } from '@home/components/widget/lib/table-widget.models';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   DISPLAY_COLUMNS_PANEL_DATA,
   DisplayColumnsPanelComponent,
@@ -422,17 +424,23 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
       };
     });
 
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DISPLAY_COLUMNS_PANEL_DATA, {
+      {
-        columns,
+        provide: DISPLAY_COLUMNS_PANEL_DATA,
-        columnsUpdated: (newColumns) => {
+        useValue: {
-          this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
+          columns,
-          this.displayedColumns.push('actions');
+          columnsUpdated: (newColumns) => {
-        }
+            this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
-      } as DisplayColumnsPanelData],
+            this.displayedColumns.push('actions');
-      [OverlayRef, overlayRef]
+          }
-    ]);
+        } as DisplayColumnsPanelData
-    const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      },
+      {
+        provide: OverlayRef,
+        useValue: overlayRef
+      }
+    ];
+    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
       this.viewContainerRef, injector));
     this.ctx.detectChanges();

ui-ngx/src/app/shared/components/dashboard-select.component.ts

@@ -14,7 +14,17 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Inject, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  Inject,
+  Injector,
+  Input,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
@@ -32,7 +42,7 @@ import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { DOCUMENT } from '@angular/common';
 import { WINDOW } from '@core/services/window.service';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import {
   DASHBOARD_SELECT_PANEL_DATA,
   DashboardSelectPanelComponent,
@@ -186,12 +196,12 @@ export class DashboardSelectComponent implements ControlValueAccessor, OnInit {
     overlayRef.attach(new ComponentPortal(DashboardSelectPanelComponent, this.viewContainerRef, injector));
   }
 
-  private _createDashboardSelectPanelInjector(overlayRef: OverlayRef, data: DashboardSelectPanelData): PortalInjector {
+  private _createDashboardSelectPanelInjector(overlayRef: OverlayRef, data: DashboardSelectPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [DASHBOARD_SELECT_PANEL_DATA, data],
+      {provide: DASHBOARD_SELECT_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private updateView() {

ui-ngx/src/app/shared/components/time/timewindow.component.ts

@@ -14,7 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  Inject,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  StaticProvider,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
@@ -32,7 +43,7 @@ import {
   TimewindowPanelComponent,
   TimewindowPanelData
 } from '@shared/components/time/timewindow-panel.component';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { WINDOW } from '@core/services/window.service';
@@ -229,12 +240,12 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
     });
   }
 
-  private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): PortalInjector {
+  private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): Injector {
-    const injectionTokens = new WeakMap<any, any>([
+    const providers: StaticProvider[] = [
-      [TIMEWINDOW_PANEL_DATA, data],
+      {provide: TIMEWINDOW_PANEL_DATA, useValue: data},
-      [OverlayRef, overlayRef]
+      {provide: OverlayRef, useValue: overlayRef}
-    ]);
+    ];
-    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   registerOnChange(fn: any): void {

ui-ngx/src/app/shared/components/toast.directive.ts

@@ -20,9 +20,11 @@ import {
   Directive,
   ElementRef, HostBinding,
   Inject,
+  Injector,
   Input,
   NgZone,
   OnDestroy, Optional,
+  StaticProvider,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -34,7 +36,6 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { MatButton } from '@angular/material/button';
 import Timeout = NodeJS.Timeout;
-import { PortalInjector } from '@angular/cdk/portal';
 
 @Directive({
   selector: '[tb-toast]'
@@ -138,10 +139,10 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
           this.toastComponentRef.destroy();
         }
       };
-      const injectionTokens = new WeakMap<any, any>([
+      const providers: StaticProvider[] = [
-        [MAT_SNACK_BAR_DATA, data]
+        {provide: MAT_SNACK_BAR_DATA, useValue: data}
-      ]);
+      ];
-      const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+      const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
       this.toastComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
       this.cd.detectChanges();