From 415c95907bf23a3c4f435e7d6bf914b71b1d2fcd Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Fri, 14 Apr 2023 18:33:42 +0300
Subject: [PATCH 1/5] UI: widget extension module support in custom actions

---
 ...ction-pretty-resources-tabs.component.html |  6 ++-
 .../widget/dialog/custom-dialog.service.ts    |  9 ++--
 .../components/widget/widget.component.ts     | 53 ++++++++++++++++---
 ui-ngx/src/app/shared/models/widget.models.ts |  3 +-
 4 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html
index c3d0141d20..3e4564f505 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html
@@ -27,6 +27,10 @@
                    (ngModelChange)="notifyActionUpdated()"
                    placeholder="{{ 'widget.resource-url' | translate }}"/>
           </mat-form-field>
+          <mat-checkbox [(ngModel)]="resource.isModule"
+                        (ngModelChange)="notifyActionUpdated()">
+            {{ 'widget.resource-is-module' | translate }}
+          </mat-checkbox>
           <button mat-icon-button color="primary"
                   [disabled]="isLoading$ | async"
                   type="button"
@@ -90,7 +94,7 @@
     <tb-js-func
       [(ngModel)]="action.customFunction"
       (ngModelChange)="notifyActionUpdated()"
-      [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
+      [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', 'customModules']"
       [disableUndefinedCheck]="true"
       [validationArgs]="[]"
       [editorCompleter]="customPrettyActionEditorCompleter"
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
index 356b31a312..8a8806ee98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
@@ -29,6 +29,7 @@ import {
 } from '@home/components/widget/dialog/custom-dialog-container.component';
 import { SHARED_MODULE_TOKEN } from '@shared/components/tokens';
 import { HOME_COMPONENTS_MODULE_TOKEN, SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
+import { isObject } from '@core/utils';
 
 @Injectable()
 export class CustomDialogService {
@@ -46,10 +47,12 @@ export class CustomDialogService {
 
   customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any,
                config?: MatDialogConfig): Observable<any> {
+    const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule];
+    if (isObject(data) && data.hasOwnProperty('customModules')) {
+      modules.push(data.customModules);
+    }
     return this.dynamicComponentFactoryService.createDynamicComponentFactory(
-      class CustomDialogComponentInstance extends CustomDialogComponent {},
-      template,
-      [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule]).pipe(
+      class CustomDialogComponentInstance extends CustomDialogComponent {}, template, modules).pipe(
       mergeMap((factory) => {
           const dialogData: CustomDialogContainerData = {
             controller,
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 f96ef46893..fa0489d3dc 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
@@ -29,8 +29,10 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
+  Optional,
   Renderer2,
   SimpleChanges,
+  Type,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
@@ -90,7 +92,7 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { ActivatedRoute, Router } from '@angular/router';
 import cssjs from '@core/css/css';
 import { ResourcesService } from '@core/services/resources.service';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import { catchError, map, mergeMap, switchMap } from 'rxjs/operators';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TimeService } from '@core/services/time.service';
 import { DeviceService } from '@app/core/http/device.service';
@@ -115,6 +117,8 @@ import { DialogService } from '@core/services/dialog.service';
 import { PopoverPlacement } from '@shared/components/popover.models';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { DASHBOARD_PAGE_COMPONENT_TOKEN } from '@home/components/tokens';
+import { MODULES_MAP } from '@shared/models/constants';
+import { IModulesMap } from '@modules/common/modules-map.models';
 
 @Component({
   selector: 'tb-widget',
@@ -190,6 +194,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
               private popoverService: TbPopoverService,
               @Inject(EMBED_DASHBOARD_DIALOG_TOKEN) private embedDashboardDialogComponent: ComponentType<any>,
               @Inject(DASHBOARD_PAGE_COMPONENT_TOKEN) private dashboardPageComponent: ComponentType<any>,
+              @Optional() @Inject(MODULES_MAP) private modulesMap: IModulesMap,
               private widgetService: WidgetService,
               private resources: ResourcesService,
               private timeService: TimeService,
@@ -1160,7 +1165,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         if (isDefined(customHtml) && customHtml.length > 0) {
           htmlTemplate = customHtml;
         }
-        this.loadCustomActionResources(actionNamespace, customCss, customResources).subscribe(
+        this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe(
           () => {
             if (isDefined(customPrettyFunction) && customPrettyFunction.length > 0) {
               try {
@@ -1168,8 +1173,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
                   additionalParams = {};
                 }
                 const customActionPrettyFunction = new Function('$event', 'widgetContext', 'entityId',
-                  'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', customPrettyFunction);
-                customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
+                  'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', 'customModules', customPrettyFunction);
+                customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel, descriptor.customModules);
               } catch (e) {
                 console.error(e);
               }
@@ -1473,20 +1478,54 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     }
   }
 
-  private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array<WidgetResource>): Observable<any> {
+  private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array<WidgetResource>, actionDescriptor: WidgetActionDescriptor): Observable<any> {
     if (isDefined(customCss) && customCss.length > 0) {
       this.cssParser.cssPreviewNamespace = actionNamespace;
       this.cssParser.createStyleElement(actionNamespace, customCss, 'nonamespace');
     }
     const resourceTasks: Observable<string>[] = [];
+    const modulesTasks: Observable<Type<any>[] | string>[] = [];
     if (isDefined(customResources) && customResources.length > 0) {
-      customResources.forEach((resource) => {
+      customResources.filter(r => r.isModule).forEach(
+        (resource) => {
+          modulesTasks.push(
+            this.resources.loadModules(resource.url, this.modulesMap).pipe(
+              catchError((e: Error) => of(e?.message ? e.message : `Failed to load custom action resource module: '${resource.url}'`))
+            )
+          );
+        }
+      );
+      customResources.filter(r => !r.isModule).forEach((resource) => {
         resourceTasks.push(
           this.resources.loadResource(resource.url).pipe(
             catchError(e => of(`Failed to load custom action resource: '${resource.url}'`))
           )
         );
       });
+
+      if (modulesTasks.length) {
+        let modulesObservable: Observable<string | Type<any>[]> = forkJoin(modulesTasks).pipe(
+          map(res => {
+            const msg = res.find(r => typeof r === 'string');
+            if (msg) {
+              return msg as string;
+            } else {
+              return (res as Type<any>[][]).flat();
+            }
+          })
+        );
+
+        resourceTasks.push(modulesObservable.pipe(
+          mergeMap((resolvedModules) => {
+            if (typeof resolvedModules === 'string') {
+              return of(resolvedModules);
+            } else {
+              actionDescriptor.customModules = resolvedModules;
+              return of(null);
+            }
+          })));
+      }
+
       return forkJoin(resourceTasks).pipe(
         switchMap(msgs => {
             let errors: string[];
@@ -1499,7 +1538,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
               return of(null);
             }
           }
-      ));
+        ));
     } else {
       return of(null);
     }
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index bd7e051b58..e65f396ad4 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -26,7 +26,7 @@ import * as moment_ from 'moment';
 import { EntityDataPageLink, EntityFilter, KeyFilter } from '@shared/models/query/query.models';
 import { PopoverPlacement } from '@shared/components/popover.models';
 import { PageComponent } from '@shared/components/page.component';
-import { AfterViewInit, Directive, EventEmitter, Inject, OnInit } from '@angular/core';
+import { AfterViewInit, Directive, EventEmitter, Inject, OnInit, Type } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { AbstractControl, UntypedFormGroup } from '@angular/forms';
@@ -550,6 +550,7 @@ export interface CustomActionDescriptor {
   customResources?: Array<WidgetResource>;
   customHtml?: string;
   customCss?: string;
+  customModules?: Type<any>[];
 }
 
 export interface WidgetActionDescriptor extends CustomActionDescriptor {

From 2ab487f4124762ac46959a25b6b26ba92501536b Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Thu, 27 Apr 2023 10:55:40 +0300
Subject: [PATCH 2/5] Load module with factories

---
 .../home/components/widget/widget.component.ts    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

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 fa0489d3dc..7b118a0ebf 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
@@ -91,7 +91,7 @@ import {
 import { EntityId } from '@shared/models/id/entity-id';
 import { ActivatedRoute, Router } from '@angular/router';
 import cssjs from '@core/css/css';
-import { ResourcesService } from '@core/services/resources.service';
+import { ModulesWithFactories, ResourcesService } from '@core/services/resources.service';
 import { catchError, map, mergeMap, switchMap } from 'rxjs/operators';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TimeService } from '@core/services/time.service';
@@ -1484,12 +1484,12 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       this.cssParser.createStyleElement(actionNamespace, customCss, 'nonamespace');
     }
     const resourceTasks: Observable<string>[] = [];
-    const modulesTasks: Observable<Type<any>[] | string>[] = [];
+    const modulesTasks: Observable<ModulesWithFactories | string>[] = [];
     if (isDefined(customResources) && customResources.length > 0) {
       customResources.filter(r => r.isModule).forEach(
         (resource) => {
           modulesTasks.push(
-            this.resources.loadModules(resource.url, this.modulesMap).pipe(
+            this.resources.loadFactories(resource.url, this.modulesMap).pipe(
               catchError((e: Error) => of(e?.message ? e.message : `Failed to load custom action resource module: '${resource.url}'`))
             )
           );
@@ -1504,13 +1504,18 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       });
 
       if (modulesTasks.length) {
-        let modulesObservable: Observable<string | Type<any>[]> = forkJoin(modulesTasks).pipe(
+        const modulesObservable: Observable<string | Type<any>[]> = forkJoin(modulesTasks).pipe(
           map(res => {
             const msg = res.find(r => typeof r === 'string');
             if (msg) {
               return msg as string;
             } else {
-              return (res as Type<any>[][]).flat();
+              const modulesWithFactoriesList = res as ModulesWithFactories[];
+              const resModulesWithFactories: ModulesWithFactories = {
+                modules: modulesWithFactoriesList.map(mf => mf.modules).flat(),
+                factories: modulesWithFactoriesList.map(mf => mf.factories).flat()
+              };
+              return resModulesWithFactories.modules;
             }
           })
         );

From 4058b9e4685201d0a74f94f1ac76e41e92739f8f Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Thu, 27 Apr 2023 11:52:23 +0300
Subject: [PATCH 3/5] Add custom modules to JS function arguments list

---
 .../widget/action/custom-action-pretty-editor.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html
index 727b5655df..1d72b6c05a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html
@@ -51,7 +51,7 @@
             [(ngModel)]="action.customFunction"
             (ngModelChange)="onActionUpdated()"
             [fillHeight]="true"
-            [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
+            [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', 'customModules']"
             [disableUndefinedCheck]="true"
             [validationArgs]="[]"
             [editorCompleter]="customPrettyActionEditorCompleter"

From bc93e16cede23ac2b99870c899a27d0526118ea8 Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Thu, 27 Apr 2023 13:27:33 +0300
Subject: [PATCH 4/5] Refactoring

---
 .../widget/dialog/custom-dialog.service.ts    |  2 +-
 .../components/widget/widget.component.ts     | 45 +++++++++----------
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
index 8a8806ee98..68111bd53f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
@@ -49,7 +49,7 @@ export class CustomDialogService {
                config?: MatDialogConfig): Observable<any> {
     const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule];
     if (isObject(data) && data.hasOwnProperty('customModules')) {
-      modules.push(data.customModules);
+      modules.push(...data.customModules);
     }
     return this.dynamicComponentFactoryService.createDynamicComponentFactory(
       class CustomDialogComponentInstance extends CustomDialogComponent {}, template, modules).pipe(
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 7b118a0ebf..ed301988a0 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
@@ -1479,28 +1479,29 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   }
 
   private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array<WidgetResource>, actionDescriptor: WidgetActionDescriptor): Observable<any> {
+    const resourceTasks: Observable<string>[] = [];
+    const modulesTasks: Observable<ModulesWithFactories | string>[] = [];
+
     if (isDefined(customCss) && customCss.length > 0) {
       this.cssParser.cssPreviewNamespace = actionNamespace;
       this.cssParser.createStyleElement(actionNamespace, customCss, 'nonamespace');
     }
-    const resourceTasks: Observable<string>[] = [];
-    const modulesTasks: Observable<ModulesWithFactories | string>[] = [];
+
     if (isDefined(customResources) && customResources.length > 0) {
-      customResources.filter(r => r.isModule).forEach(
-        (resource) => {
+      customResources.forEach(resource => {
+        if (resource.isModule) {
           modulesTasks.push(
             this.resources.loadFactories(resource.url, this.modulesMap).pipe(
               catchError((e: Error) => of(e?.message ? e.message : `Failed to load custom action resource module: '${resource.url}'`))
             )
           );
+        } else {
+          resourceTasks.push(
+            this.resources.loadResource(resource.url).pipe(
+              catchError(() => of(`Failed to load custom action resource: '${resource.url}'`))
+            )
+          );
         }
-      );
-      customResources.filter(r => !r.isModule).forEach((resource) => {
-        resourceTasks.push(
-          this.resources.loadResource(resource.url).pipe(
-            catchError(e => of(`Failed to load custom action resource: '${resource.url}'`))
-          )
-        );
       });
 
       if (modulesTasks.length) {
@@ -1521,28 +1522,24 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         );
 
         resourceTasks.push(modulesObservable.pipe(
-          mergeMap((resolvedModules) => {
+          map((resolvedModules) => {
             if (typeof resolvedModules === 'string') {
-              return of(resolvedModules);
+              return resolvedModules;
             } else {
               actionDescriptor.customModules = resolvedModules;
-              return of(null);
+              return null;
             }
           })));
       }
 
       return forkJoin(resourceTasks).pipe(
         switchMap(msgs => {
-            let errors: string[];
-            if (msgs && msgs.length) {
-              errors = msgs.filter(msg => msg && msg.length > 0);
-            }
-            if (errors && errors.length) {
-              return throwError(errors);
-            } else {
-              return of(null);
-            }
-          }
+          const errors = msgs.filter(msg => msg && msg.length > 0);
+          if (errors.length > 0) {
+            return throwError(() => errors);
+          } else {
+            return of(null);
+          }}
         ));
     } else {
       return of(null);

From ab844525c3ccd2dc20d99cde068cfe140e98a890 Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Tue, 2 May 2023 12:54:45 +0300
Subject: [PATCH 5/5] Change approach of adding custom modules to a custom
 dialog

---
 .../custom-action-pretty-editor.component.html    |  2 +-
 ...om-action-pretty-resources-tabs.component.html |  2 +-
 .../widget/dialog/custom-dialog.service.ts        | 11 ++++++++---
 .../components/widget/widget-components.module.ts |  4 ----
 .../home/components/widget/widget.component.ts    | 15 ++++++++-------
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html
index 1d72b6c05a..727b5655df 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html
@@ -51,7 +51,7 @@
             [(ngModel)]="action.customFunction"
             (ngModelChange)="onActionUpdated()"
             [fillHeight]="true"
-            [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', 'customModules']"
+            [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
             [disableUndefinedCheck]="true"
             [validationArgs]="[]"
             [editorCompleter]="customPrettyActionEditorCompleter"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html
index 3e4564f505..7014570235 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html
@@ -94,7 +94,7 @@
     <tb-js-func
       [(ngModel)]="action.customFunction"
       (ngModelChange)="notifyActionUpdated()"
-      [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', 'customModules']"
+      [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
       [disableUndefinedCheck]="true"
       [validationArgs]="[]"
       [editorCompleter]="customPrettyActionEditorCompleter"
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
index 68111bd53f..c18367d864 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
@@ -29,11 +29,12 @@ import {
 } from '@home/components/widget/dialog/custom-dialog-container.component';
 import { SHARED_MODULE_TOKEN } from '@shared/components/tokens';
 import { HOME_COMPONENTS_MODULE_TOKEN, SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
-import { isObject } from '@core/utils';
 
 @Injectable()
 export class CustomDialogService {
 
+  private customModules: Array<Type<any>>
+
   constructor(
     private translate: TranslateService,
     private authService: AuthService,
@@ -45,11 +46,15 @@ export class CustomDialogService {
   ) {
   }
 
+  setAdditionalModules(modules: Array<Type<any>>) {
+    this.customModules = modules;
+  }
+
   customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any,
                config?: MatDialogConfig): Observable<any> {
     const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule];
-    if (isObject(data) && data.hasOwnProperty('customModules')) {
-      modules.push(...data.customModules);
+    if (Array.isArray(this.customModules)) {
+      modules.push(...this.customModules);
     }
     return this.dynamicComponentFactoryService.createDynamicComponentFactory(
       class CustomDialogComponentInstance extends CustomDialogComponent {}, template, modules).pipe(
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
index 9d3b6a737b..4f0454bb1c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
@@ -23,7 +23,6 @@ import { AlarmsTableWidgetComponent } from '@home/components/widget/lib/alarms-t
 import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module';
 import { TimeseriesTableWidgetComponent } from '@home/components/widget/lib/timeseries-table-widget.component';
 import { EntitiesHierarchyWidgetComponent } from '@home/components/widget/lib/entities-hierarchy-widget.component';
-import { CustomDialogService } from '@home/components/widget/dialog/custom-dialog.service';
 import { RpcWidgetsModule } from '@home/components/widget/lib/rpc/rpc-widgets.module';
 import {
   DateRangeNavigatorPanelComponent,
@@ -33,7 +32,6 @@ import { MultipleInputWidgetComponent } from '@home/components/widget/lib/multip
 import { TripAnimationComponent } from '@home/components/widget/trip-animation/trip-animation.component';
 import { PhotoCameraInputWidgetComponent } from '@home/components/widget/lib/photo-camera-input.component';
 import { GatewayFormComponent } from '@home/components/widget/lib/gateway/gateway-form.component';
-import { ImportExportService } from '@home/components/import-export/import-export.service';
 import { NavigationCardsWidgetComponent } from '@home/components/widget/lib/navigation-cards-widget.component';
 import { NavigationCardWidgetComponent } from '@home/components/widget/lib/navigation-card-widget.component';
 import { EdgesOverviewWidgetComponent } from '@home/components/widget/lib/edges-overview-widget.component';
@@ -93,8 +91,6 @@ import { WIDGET_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
         MarkdownWidgetComponent
     ],
   providers: [
-    CustomDialogService,
-    ImportExportService,
     {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule }
   ]
 })
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 ed301988a0..5a3b55bf2d 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
@@ -92,7 +92,7 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { ActivatedRoute, Router } from '@angular/router';
 import cssjs from '@core/css/css';
 import { ModulesWithFactories, ResourcesService } from '@core/services/resources.service';
-import { catchError, map, mergeMap, switchMap } from 'rxjs/operators';
+import { catchError, map, switchMap } from 'rxjs/operators';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TimeService } from '@core/services/time.service';
 import { DeviceService } from '@app/core/http/device.service';
@@ -1165,25 +1165,26 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         if (isDefined(customHtml) && customHtml.length > 0) {
           htmlTemplate = customHtml;
         }
-        this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe(
-          () => {
+        this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe({
+          next: () => {
             if (isDefined(customPrettyFunction) && customPrettyFunction.length > 0) {
               try {
                 if (!additionalParams) {
                   additionalParams = {};
                 }
                 const customActionPrettyFunction = new Function('$event', 'widgetContext', 'entityId',
-                  'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', 'customModules', customPrettyFunction);
-                customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel, descriptor.customModules);
+                  'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', customPrettyFunction);
+                this.widgetContext.customDialog.setAdditionalModules(descriptor.customModules);
+                customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
               } catch (e) {
                 console.error(e);
               }
             }
           },
-          (errorMessages: string[]) => {
+          error: (errorMessages: string[]) => {
             this.processResourcesLoadErrors(errorMessages);
           }
-        );
+        });
         break;
       case WidgetActionType.mobileAction:
         const mobileAction = descriptor.mobileAction;