From db1eb1682f291c380fb66d6a44b06bd563315cb5 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 28 Jul 2025 17:24:37 +0300
Subject: [PATCH] UI: Fixed edit and improve create new

---
 .../template/template-notification-dialog.component.ts |  4 ++++
 .../notification/template-autocomplete.component.html  |  5 ++++-
 .../notification/template-autocomplete.component.ts    | 10 ++++++++++
 ui-ngx/src/assets/locale/locale.constant-en_US.json    |  1 +
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
index 98595de798..0f13409a3e 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
@@ -40,6 +40,7 @@ export interface TemplateNotificationDialogData {
   predefinedType?: NotificationType;
   isAdd?: boolean;
   isCopy?: boolean;
+  name?: string;
 }
 
 @Component({
@@ -85,6 +86,9 @@ export class TemplateNotificationDialogComponent
       this.hideSelectType = true;
       this.templateNotificationForm.get('notificationType').setValue(this.data.predefinedType, {emitEvent: false});
     }
+    if (isDefinedAndNotNull(this.data?.name)) {
+      this.templateNotificationForm.get('name').setValue(this.data.name, {emitEvent: false});
+    }
 
     if (data.isAdd || data.isCopy) {
       this.dialogTitle = 'notification.add-notification-template';
diff --git a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
index d5e67a1f60..446dc18e34 100644
--- a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
@@ -29,7 +29,7 @@
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
-  <button *ngIf="selectTemplateFormGroup.get('templateName').value && !disabled && allowEdit"
+  <button *ngIf="selectTemplateFormGroup.get('templateName').value?.id && !disabled && allowEdit"
           type="button"
           matSuffix mat-icon-button aria-label="Edit"
           matTooltip="{{ 'notification.edit-notification-template' | translate }}"
@@ -62,6 +62,9 @@
         </div>
         <ng-template #searchNotEmpty>
           <span>{{ 'notification.no-template-matching' | translate : {template: truncate.transform(searchText, true, 6, &apos;...&apos;)} }}</span>
+          <span *ngIf="allowCreate">
+            <a translate (click)="createTemplateBySearchText($event, searchText)">notification.create-new-template</a>
+          </span>
         </ng-template>
       </div>
     </mat-option>
diff --git a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
index 97c2a56bf5..3bf066d43b 100644
--- a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
@@ -221,6 +221,16 @@ export class TemplateAutocompleteComponent implements ControlValueAccessor, OnIn
       predefinedType: this.notificationTypes
     });
   }
+  createTemplateBySearchText($event: Event, searchText: string) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.openNotificationTemplateDialog({
+      isAdd: true,
+      predefinedType: this.notificationTypes,
+      name: searchText
+    });
+  }
 
   private openNotificationTemplateDialog(dialogData?: TemplateNotificationDialogData) {
     this.dialog.open<TemplateNotificationDialogComponent, TemplateNotificationDialogData,
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index a7396ad49e..f714c1a6ff 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4071,6 +4071,7 @@
         "no-severity-found": "No severity found",
         "no-severity-matching": "'{{severity}}' not found.",
         "no-template-matching": "No resource matching '{{template}}' were found.",
+        "create-new-template": "Create a new one!",
         "not-found-slack-recipient": "Slack recipient not found",
         "notification": "Notification",
         "notification-center": "Notification center",