Use confirm button for saved view delete

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>
           }

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: [