From 8dc9b47bb9c47e7204b07a013fd232d36496c4e1 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Fri, 17 May 2024 11:08:35 +0300
Subject: [PATCH] UI: added default widget name to widget export file name

---
 .../home/components/dashboard/dashboard.component.ts     | 9 +++++++--
 .../modules/home/models/dashboard-component.models.ts    | 5 ++---
 .../app/shared/import-export/import-export.service.ts    | 8 +++++---
 ui-ngx/src/app/shared/models/widget.models.ts            | 1 -
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
index 6cc1ec7dbe..5bfad36151 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
@@ -54,7 +54,7 @@ import { IAliasController, IStateController } from '@app/core/api/widget-api.mod
 import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { SafeStyle } from '@angular/platform-browser';
-import { distinct } from 'rxjs/operators';
+import { distinct, take } from 'rxjs/operators';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { UtilsService } from '@core/services/utils.service';
 import { WidgetComponentAction, WidgetComponentActionType } from '@home/components/widget/widget-container.component';
@@ -436,7 +436,12 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
       $event.stopPropagation();
     }
     if (this.isExportActionEnabled && this.callbacks && this.callbacks.onExportWidget) {
-      this.callbacks.onExportWidget($event, widget.widget);
+      widget.title$.pipe(
+        take(1)
+      ).subscribe((title) => {
+        widget.widget.config.exportTitle = title;
+        this.callbacks.onExportWidget($event, widget.widget);
+      });
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
index 81a5a7c834..b7ccbd76bf 100644
--- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
@@ -26,7 +26,7 @@ import {
 import { WidgetLayout, WidgetLayouts } from '@app/shared/models/dashboard.models';
 import { IDashboardWidget, WidgetAction, WidgetContext, WidgetHeaderAction } from './widget-component.models';
 import { Timewindow } from '@shared/models/time/time.models';
-import { Observable, of, Subject, tap } from 'rxjs';
+import { Observable, of, Subject } from 'rxjs';
 import {
   convertKeysToCamelCase,
   formattedDataFormDatasourceData,
@@ -440,8 +440,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
 
     const title = isDefined(this.widgetContext.widgetTitle)
       && this.widgetContext.widgetTitle.length ? this.widgetContext.widgetTitle : this.widget.config.title;
-    this.title$ = this.widgetContext.registerLabelPattern(title, this.title$).pipe(
-      tap(value => this.widget.config.titleByPattern = value));
+    this.title$ = this.widgetContext.registerLabelPattern(title, this.title$);
     this.titleTooltip = isDefined(this.widgetContext.widgetTitleTooltip)
       && this.widgetContext.widgetTitleTooltip.length ? this.widgetContext.widgetTitleTooltip : this.widget.config.titleTooltip;
     this.titleTooltip = this.dashboard.utils.customTranslation(this.titleTooltip, this.titleTooltip);
diff --git a/ui-ngx/src/app/shared/import-export/import-export.service.ts b/ui-ngx/src/app/shared/import-export/import-export.service.ts
index ea4fd0892c..3071f38f74 100644
--- a/ui-ngx/src/app/shared/import-export/import-export.service.ts
+++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts
@@ -200,9 +200,11 @@ export class ImportExportService {
 
   public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget) {
     const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget);
-    let name = widgetItem.widget.config.titleByPattern;
-    name = name.toLowerCase().replace(/\W/g, '_');
-    this.exportToPc(this.prepareExport(widgetItem), name);
+    const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn)?.widgetName ||
+      widget.typeFullFqn.split('.').pop();
+    let fileName = widgetDefaultName + (isNotEmptyStr(widget.config.exportTitle) ? '_' + widget.config.exportTitle : '');
+    fileName = fileName.toLowerCase().replace(/\W/g, '_');
+    this.exportToPc(this.prepareExport(widgetItem), fileName);
   }
 
   public importWidget(dashboard: Dashboard, targetState: string,
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index b76c2322e3..c736ed7404 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -726,7 +726,6 @@ export enum WidgetConfigMode {
 export interface WidgetConfig {
   configMode?: WidgetConfigMode;
   title?: string;
-  titleByPattern?: string;
   titleFont?: Font;
   titleColor?: string;
   titleIcon?: string;