NAS-133384: Use red color for destructive actions (#11280)

src/app/interfaces/dialog.interface.ts

@@ -7,7 +7,7 @@ export interface ConfirmOptions {
   cancelText?: string;
   disableClose?: boolean;
   confirmationCheckboxText?: string;
-  buttonColor?: 'primary' | 'red';
+  buttonColor?: 'primary' | 'warn';
 }
 
 export interface ConfirmOptionsWithSecondaryCheckbox extends ConfirmOptions {

src/app/modules/slide-ins/components/slide-in/slide-in.component.spec.ts

@@ -215,7 +215,7 @@ describe('SlideInComponent', () => {
       message: 'You have unsaved changes. Are you sure you want to close?',
       cancelText: 'No',
       buttonText: 'Yes',
-      buttonColor: 'red',
+      buttonColor: 'warn',
       hideCheckbox: true,
     });
     discardPeriodicTasks();
@@ -236,14 +236,7 @@ describe('SlideInComponent', () => {
     const backdrop = spectator.query('.ix-slide-in2-background')!;
     backdrop.dispatchEvent(new Event('click'));
 
-    expect(spectator.inject(DialogService).confirm).not.toHaveBeenCalledWith({
-      title: 'Unsaved Changes',
-      message: 'You have unsaved changes. Are you sure you want to close?',
-      cancelText: 'No',
-      buttonText: 'Yes',
-      buttonColor: 'red',
-      hideCheckbox: true,
-    });
+    expect(spectator.inject(DialogService).confirm).not.toHaveBeenCalled();
     discardPeriodicTasks();
   }));
 });

src/app/modules/slide-ins/components/slide-in/slide-in.component.ts

@@ -218,7 +218,7 @@ export class SlideInComponent implements OnInit, OnDestroy {
       message: this.translate.instant('You have unsaved changes. Are you sure you want to close?'),
       cancelText: this.translate.instant('No'),
       buttonText: this.translate.instant('Yes'),
-      buttonColor: 'red',
+      buttonColor: 'warn',
       hideCheckbox: true,
     });
   }

src/app/pages/apps/components/app-delete-dialog/app-delete-dialog.component.html

@@ -33,7 +33,7 @@ <h1 matDialogTitle>
     <button
       mat-button
       type="submit"
-      color="primary"
+      color="warn"
       ixTest="delete"
       [disabled]="form.invalid"
     >

src/app/pages/apps/components/docker-images/docker-image-delete-dialog/docker-image-delete-dialog.component.html

@@ -53,7 +53,7 @@ <h1 matDialogTitle>{{ 'Delete' | translate }}</h1>
           <button
             mat-button
             type="submit"
-            color="primary"
+            color="warn"
             ixTest="delete"
             [disabled]="form.invalid || !!runningCount"
           >

src/app/pages/credentials/backup-credentials/cloud-credentials-card/cloud-credentials-card.component.ts

@@ -173,6 +173,7 @@ export class CloudCredentialsCardComponent implements OnInit {
         message: this.translate.instant('Are you sure you want to delete the <b>{name}</b>?', {
           name: credential.name,
         }),
+        buttonColor: 'warn',
         buttonText: this.translate.instant('Delete'),
       })
       .pipe(

src/app/pages/credentials/backup-credentials/ssh-connection-card/ssh-connection-card.component.ts

@@ -139,6 +139,7 @@ export class SshConnectionCardComponent implements OnInit {
         message: this.translate.instant('Are you sure you want to delete the <b>{name}</b> SSH Connection?', {
           name: credential.name,
         }),
+        buttonColor: 'warn',
         buttonText: this.translate.instant('Delete'),
       })
       .pipe(

src/app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.ts

@@ -154,6 +154,7 @@ export class SshKeypairCardComponent implements OnInit {
         message: this.translate.instant('Are you sure you want to delete the <b>{name}</b>?', {
           name: credential.name,
         }),
+        buttonColor: 'warn',
         buttonText: this.translate.instant('Delete'),
       })
       .pipe(

src/app/pages/credentials/certificates-dash/acme-dns-authenticator-list/acme-dns-authenticator-list.component.ts

@@ -148,6 +148,7 @@ export class AcmeDnsAuthenticatorListComponent implements OnInit {
         message: this.translate.instant('Are you sure you want to delete the <b>{name}</b> DNS Authenticator?', {
           name: authenticator.name,
         }),
+        buttonColor: 'warn',
         buttonText: this.translate.instant('Delete'),
       })
       .pipe(

src/app/pages/credentials/certificates-dash/certificate-authority-list/certificate-authority-list.component.spec.ts

@@ -111,6 +111,7 @@ describe('CertificateAuthorityListComponent', () => {
 
     expect(dialog.confirm).toHaveBeenCalledWith({
       buttonText: 'Delete',
+      buttonColor: 'warn',
       message: 'Are you sure you want to delete the <b>certificate-authority-0</b> certificate authority?',
       title: 'Delete Certificate Authority',
     });

src/app/pages/credentials/certificates-dash/certificate-authority-list/certificate-authority-list.component.ts

@@ -215,6 +215,7 @@ export class CertificateAuthorityListComponent implements OnInit {
           message: this.translate.instant('Are you sure you want to delete the <b>{name}</b> certificate authority?', {
             name: authority.name,
           }),
+          buttonColor: 'warn',
           buttonText: this.translate.instant('Delete'),
         })
         .pipe(

src/app/pages/credentials/certificates-dash/certificate-list/certificate-list.component.spec.ts

@@ -134,7 +134,7 @@ describe('CertificateListComponent', () => {
       hideCheckbox: true,
       secondaryCheckbox: true,
       secondaryCheckboxText: 'Force',
-      buttonColor: 'red',
+      buttonColor: 'warn',
       buttonText: 'Delete',
     });
     expect(spectator.inject(DialogService).jobDialog).toHaveBeenCalled();

src/app/pages/credentials/certificates-dash/certificate-list/certificate-list.component.ts

@@ -200,7 +200,7 @@ export class CertificateListComponent implements OnInit {
       message: this.translate.instant('Are you sure you want to delete "{name}"?', { name: certificate.name }),
       hideCheckbox: true,
       secondaryCheckbox: true,
-      buttonColor: 'red',
+      buttonColor: 'warn',
       secondaryCheckboxText: this.translate.instant('Force'),
       buttonText: this.translate.instant('Delete'),
     }).pipe(

src/app/pages/credentials/certificates-dash/csr-list/csr-list.component.spec.ts

@@ -120,7 +120,7 @@ describe('CertificateSigningRequestsListComponent', () => {
       hideCheckbox: true,
       secondaryCheckbox: true,
       secondaryCheckboxText: 'Force',
-      buttonColor: 'red',
+      buttonColor: 'warn',
       buttonText: 'Delete',
     });
     expect(spectator.inject(DialogService).jobDialog).toHaveBeenCalled();

src/app/pages/credentials/certificates-dash/csr-list/csr-list.component.ts

@@ -181,7 +181,7 @@ export class CertificateSigningRequestsListComponent implements OnInit {
       hideCheckbox: true,
       secondaryCheckbox: true,
       secondaryCheckboxText: this.translate.instant('Force'),
-      buttonColor: 'red',
+      buttonColor: 'warn',
       buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter((confirmation: DialogWithSecondaryCheckboxResult) => confirmation.confirmed),

src/app/pages/credentials/groups/group-details-row/delete-group-dialog/delete-group-dialog.component.html

@@ -15,7 +15,7 @@ <h1 mat-dialog-title>{{ 'Delete Group' | translate }}</h1>
   <button
     *ixRequiresRoles="requiredRoles"
     mat-button
-    color="primary"
+    color="warn"
     ixTest="delete"
     (click)="onDelete()"
   >

src/app/pages/credentials/groups/privilege/privilege-list/privilege-list.component.ts

@@ -176,6 +176,7 @@ export class PrivilegeListComponent implements OnInit {
         message: this.translate.instant('Are you sure you want to delete the <b>{name}</b>?', {
           name: privilege.name,
         }),
+        buttonColor: 'warn',
         buttonText: this.translate.instant('Delete'),
       })
       .pipe(

src/app/pages/credentials/users/user-api-keys/user-api-keys.component.spec.ts

@@ -139,7 +139,7 @@ describe('UserApiKeysComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Delete API Key',
       buttonText: 'Delete',
-      cancelText: 'Cancel',
+      buttonColor: 'warn',
       message: 'Are you sure you want to delete the <b>first-api-key</b> API Key?',
     });
 

src/app/pages/credentials/users/user-api-keys/user-api-keys.component.ts

@@ -199,7 +199,7 @@ export class UserApiKeysComponent implements OnInit {
       title: this.translate.instant('Delete API Key'),
       message: this.translate.instant('Are you sure you want to delete the <b>{name}</b> API Key?', { name: apiKey.name }),
       buttonText: this.translate.instant('Delete'),
-      cancelText: this.translate.instant('Cancel'),
+      buttonColor: 'warn',
     }).pipe(
       filter(Boolean),
       tap(() => this.loader.open()),

src/app/pages/credentials/users/user-details-row/delete-user-dialog/delete-user-dialog.component.html

@@ -16,7 +16,7 @@ <h1 mat-dialog-title>{{ 'Delete User' | translate }}</h1>
   <button
     *ixRequiresRoles="requiredRoles"
     mat-button
-    color="primary"
+    color="warn"
     ixTest="delete"
     (click)="onDelete()"
   >

src/app/pages/data-protection/cloud-backup/cloud-backup-card/cloud-backup-card.component.spec.ts

@@ -151,6 +151,8 @@ describe('CloudBackupCardComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Cloud Backup <b>"test one"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('cloud_backup.delete', [1]);

src/app/pages/data-protection/cloud-backup/cloud-backup-card/cloud-backup-card.component.ts

@@ -211,6 +211,8 @@ export class CloudBackupCardComponent implements OnInit {
       message: this.translate.instant('Delete Cloud Backup <b>"{name}"</b>?', {
         name: row.description,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('cloud_backup.delete', [row.id]).pipe(this.appLoader.withLoader())),

src/app/pages/data-protection/cloud-backup/cloud-backup-details/cloud-backup-snapshots/cloud-backup-snapshots.component.ts

@@ -146,6 +146,7 @@ export class CloudBackupSnapshotsComponent implements OnChanges {
         message: this.translate.instant('Are you sure you want to delete the <b>{name}</b>?', {
           name: row.hostname,
         }),
+        buttonColor: 'warn',
         buttonText: this.translate.instant('Delete'),
       })
       .pipe(

src/app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component.spec.ts

@@ -154,6 +154,8 @@ describe('CloudBackupListComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Cloud Backup <b>"UA"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('cloud_backup.delete', [1]);

src/app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component.ts

@@ -224,6 +224,8 @@ export class CloudBackupListComponent implements OnInit {
   doDelete(row: CloudBackup): void {
     this.dialogService.confirm({
       title: this.translate.instant('Confirmation'),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
       message: this.translate.instant('Delete Cloud Backup <b>"{name}"</b>?', {
         name: row.description,
       }),

src/app/pages/data-protection/cloudsync/cloudsync-list/cloudsync-list.component.spec.ts

@@ -214,6 +214,8 @@ describe('CloudSyncListComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Cloud Sync Task <b>"custom-cloudlist"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('cloudsync.delete', [1]);

src/app/pages/data-protection/cloudsync/cloudsync-list/cloudsync-list.component.ts

@@ -300,6 +300,8 @@ export class CloudSyncListComponent implements OnInit {
       message: this.translate.instant('Delete Cloud Sync Task <b>"{name}"</b>?', {
         name: row.description,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('cloudsync.delete', [row.id])),

src/app/pages/data-protection/cloudsync/cloudsync-task-card/cloudsync-task-card.component.spec.ts

@@ -237,6 +237,8 @@ describe('CloudSyncTaskCardComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Cloud Sync Task <b>"custom-cloudsync"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('cloudsync.delete', [3]);

src/app/pages/data-protection/cloudsync/cloudsync-task-card/cloudsync-task-card.component.ts

@@ -192,6 +192,8 @@ export class CloudSyncTaskCardComponent implements OnInit {
       message: this.translate.instant('Delete Cloud Sync Task <b>"{name}"</b>?', {
         name: cloudsyncTask.description,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('cloudsync.delete', [cloudsyncTask.id])),

src/app/pages/data-protection/replication/replication-list/replication-list.component.spec.ts

@@ -226,6 +226,8 @@ describe('ReplicationListComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Replication Task <b>"pewl - pewl"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('replication.delete', [1]);

src/app/pages/data-protection/replication/replication-list/replication-list.component.ts

@@ -273,6 +273,8 @@ export class ReplicationListComponent implements OnInit {
       message: this.translate.instant('Delete Replication Task <b>"{name}"</b>?', {
         name: row.name,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('replication.delete', [row.id]).pipe(this.appLoader.withLoader())),

src/app/pages/data-protection/replication/replication-task-card/replication-task-card.component.spec.ts

@@ -191,6 +191,8 @@ describe('ReplicationTaskCardComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Replication Task <b>"APPS/test2 - APPS/test3"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('replication.delete', [1]);

src/app/pages/data-protection/replication/replication-task-card/replication-task-card.component.ts

@@ -182,6 +182,8 @@ export class ReplicationTaskCardComponent implements OnInit {
       message: this.translate.instant('Delete Replication Task <b>"{name}"</b>?', {
         name: replicationTask.name,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('replication.delete', [replicationTask.id])),

src/app/pages/data-protection/rsync-task/rsync-task-card/rsync-task-card.component.spec.ts

@@ -174,6 +174,8 @@ describe('RsyncTaskCardComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Rsync Task <b>"asd - asdad"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('rsynctask.delete', [1]);

src/app/pages/data-protection/rsync-task/rsync-task-card/rsync-task-card.component.ts

@@ -172,6 +172,8 @@ export class RsyncTaskCardComponent implements OnInit {
       message: this.translate.instant('Delete Rsync Task <b>"{name}"</b>?', {
         name: `${row.remotehost || row.path} ${row.remotemodule ? '- ' + row.remotemodule : ''}`,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('rsynctask.delete', [row.id])),

src/app/pages/data-protection/rsync-task/rsync-task-list/rsync-task-list.component.ts

@@ -262,6 +262,7 @@ export class RsyncTaskListComponent implements OnInit {
       title: this.translate.instant('Delete Task'),
       message: this.translate.instant('Are you sure you want to delete this task?'),
       buttonText: this.translate.instant('Delete'),
+      buttonColor: 'warn',
     })
       .pipe(
         filter(Boolean),

src/app/pages/data-protection/scrub-task/scrub-list/scrub-list.component.ts

@@ -161,6 +161,7 @@ export class ScrubListComponent implements OnInit {
       title: this.translate.instant('Delete Task'),
       message: this.translate.instant('Are you sure you want to delete this task?'),
       buttonText: this.translate.instant('Delete'),
+      buttonColor: 'warn',
     })
       .pipe(
         filter(Boolean),

src/app/pages/data-protection/scrub-task/scrub-task-card/scrub-task-card.component.spec.ts

@@ -136,6 +136,8 @@ describe('ScrubTaskCardComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete Scrub Task <b>"APPS"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('pool.scrub.delete', [1]);

src/app/pages/data-protection/scrub-task/scrub-task-card/scrub-task-card.component.ts

@@ -136,6 +136,8 @@ export class ScrubTaskCardComponent implements OnInit {
     this.dialogService.confirm({
       title: this.translate.instant('Confirmation'),
       message: this.translate.instant('Delete Scrub Task <b>"{name}"</b>?', { name: scrubTask.pool_name }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('pool.scrub.delete', [scrubTask.id])),

src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.spec.ts

@@ -176,6 +176,8 @@ describe('SmartTaskCardComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete S.M.A.R.T. Test <b>"LONG - test"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('smart.test.delete', [1]);

src/app/pages/data-protection/smart-task/smart-task-card/smart-task-card.component.ts

@@ -156,6 +156,8 @@ export class SmartTaskCardComponent implements OnInit {
       message: this.translate.instant('Delete S.M.A.R.T. Test <b>"{name}"</b>?', {
         name: `${smartTask.type} - ${smartTask.desc}`,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('smart.test.delete', [smartTask.id])),

src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.spec.ts

@@ -168,6 +168,8 @@ describe('SmartTaskCardComponent', () => {
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({
       title: 'Confirmation',
       message: 'Delete S.M.A.R.T. Test <b>"LONG - test"</b>?',
+      buttonColor: 'warn',
+      buttonText: 'Delete',
     });
 
     expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('smart.test.delete', [1]);

src/app/pages/data-protection/smart-task/smart-task-list/smart-task-list.component.ts

@@ -176,6 +176,8 @@ export class SmartTaskListComponent implements OnInit {
       message: this.translate.instant('Delete S.M.A.R.T. Test <b>"{name}"</b>?', {
         name: `${smartTask.type} - ${smartTask.desc}`,
       }),
+      buttonColor: 'warn',
+      buttonText: this.translate.instant('Delete'),
     }).pipe(
       filter(Boolean),
       switchMap(() => this.api.call('smart.test.delete', [smartTask.id])),