From ac9be1f9087cee26218e2c6785df8dbf54a14d5a Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 6 Feb 2024 22:24:57 -0800
Subject: [PATCH] Use confirm button for saved view delete

---
 .../components/admin/settings/settings.component.html  | 10 +++++++++-
 .../admin/settings/settings.component.spec.ts          |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html
index 8b239e772..5b9ce7d9f 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -319,7 +319,15 @@
               </div>
               <div class="mb-2 col-auto">
                 <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
-                <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
+
+                <pngx-confirm-button
+                  label="Delete"
+                  i18n-label
+                  (confirm)="deleteSavedView(view)"
+                  *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }"
+                  buttonClasses="btn-sm btn-outline-danger form-control"
+                  iconName="trash">
+                </pngx-confirm-button>
               </div>
             </div>
           }
diff --git a/src-ui/src/app/components/admin/settings/settings.component.spec.ts b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
index 6e105ed11..6a9ca36da 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
@@ -38,6 +38,7 @@ import { PageHeaderComponent } from '../../common/page-header/page-header.compon
 import { SettingsComponent } from './settings.component'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 
 const savedViews = [
   { id: 1, name: 'view1', show_in_sidebar: true, show_on_dashboard: true },
@@ -83,6 +84,7 @@ describe('SettingsComponent', () => {
         PermissionsUserComponent,
         PermissionsGroupComponent,
         IfOwnerDirective,
+        ConfirmButtonComponent,
       ],
       providers: [CustomDatePipe, DatePipe, PermissionsGuard],
       imports: [