fix(web-app, admin): Angular 21+ modernizing for feeds & authentication

web-app/src/app/admin/admin-authentication/admin-authentication-delete/admin-authentication-delete.component.html

@@ -1,10 +1,13 @@
 <h2 mat-dialog-title>Delete {{ strategy.title }} Authentication?</h2>
 
 <mat-dialog-content>
-  By deleting this authentication strategy, {{ userCount }} users will no longer be able to access MAGE.
+  By deleting this authentication strategy, {{ userCount() }} users will no longer be able to access MAGE.
 </mat-dialog-content>
 
 <mat-dialog-actions>
-  <button matButton (click)="close()" cdkFocusInitial>Cancel</button>
-  <button matButton class="delete-button" (click)="delete()">Delete</button>
+  <button matButton type="button" (click)="close()" cdkFocusInitial data-testid="cancel-button">Cancel</button>
+  <button matButton type="button" class="delete-button" (click)="delete()" data-testid="delete-button">
+    <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
+    Delete Authentication
+  </button>
 </mat-dialog-actions>

web-app/src/app/admin/admin-authentication/admin-authentication-delete/admin-authentication-delete.component.scss

@@ -3,5 +3,5 @@ mat-dialog-actions {
 }
 
 .delete-button {
-  color: var(--mat-sys-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }

web-app/src/app/admin/admin-authentication/admin-authentication-delete/admin-authentication-delete.component.ts

@@ -1,16 +1,25 @@
-import { AfterViewInit, Component, Inject } from '@angular/core'
-import { MatDialogRef as MatDialogRef, MAT_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/dialog'
+import { AfterViewInit, Component, Inject, signal } from '@angular/core'
+import { MatDialogRef as MatDialogRef, MAT_DIALOG_DATA as MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'
 import { Strategy } from '../../admin-authentication/admin-settings.model'
 import { AuthenticationConfigurationService } from '../../services/admin-authentication-configuration.service'
+import { MatButtonModule } from '@angular/material/button'
+import { MatIconModule } from '@angular/material/icon'
+import { A11yModule } from '@angular/cdk/a11y'
 
 @Component({
     selector: 'admin-authentication-delete',
     templateUrl: './admin-authentication-delete.component.html',
     styleUrls: ['./admin-authentication-delete.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      MatDialogModule,
+      MatButtonModule,
+      MatIconModule,
+      A11yModule
+    ]
 })
 export class AuthenticationDeleteComponent implements AfterViewInit {
-  userCount = 0
+  readonly userCount = signal(0)
 
   constructor(
     public dialogRef: MatDialogRef<AuthenticationDeleteComponent>,
@@ -21,7 +30,7 @@ export class AuthenticationDeleteComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     this.authenticationConfigurationService.countUsers(this.strategy._id).subscribe({
       next: (result: any) => {
-        this.userCount = result?.data?.count ?? result?.count ?? 0
+        this.userCount.set(result?.data?.count ?? result?.count ?? 0)
       },
       error: (err: any) => {
         console.error(err)

web-app/src/app/admin/admin-authentication/admin-authentication.component.scss

@@ -34,7 +34,7 @@ mat-accordion {
 }
 
 .delete-button {
-  color: var(--mat-sys-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }
 
 mat-panel-title {

web-app/src/app/admin/admin-authentication/admin-authentication.component.ts

@@ -215,8 +215,7 @@ export class AdminAuthenticationComponent
     this.dialog
       .open(AuthenticationDeleteComponent, {
         width: '500px',
-        data: strategy,
-        autoFocus: false
+        data: strategy
       })
       .afterClosed()
       .subscribe(async (result) => {

web-app/src/app/admin/admin-devices/delete-device/delete-device.component.scss

@@ -3,5 +3,5 @@ mat-dialog-actions {
 }
 
 .delete-button {
-  color: var(--mat-sys-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }

web-app/src/app/admin/admin-event/delete-event/delete-event.component.scss

@@ -34,5 +34,5 @@ mat-dialog-actions {
 }
 
 .delete-button:not(:disabled) {
-  color: var(--mat-sys-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }

web-app/src/app/admin/admin-feeds/admin-feed/admin-feed-delete/admin-feed-delete.component.html

@@ -10,6 +10,9 @@
 </div>
 
 <mat-dialog-actions align="end">
-  <button matButton [mat-dialog-close]="false">Cancel</button>
-  <button matButton="filled" class="delete-button" [mat-dialog-close]="true">Delete</button>
+  <button matButton type="button" [mat-dialog-close]="false" cdkFocusInitial data-testid="cancel-button">Cancel</button>
+  <button matButton type="button" class="delete-button" [mat-dialog-close]="true" data-testid="delete-button">
+    <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
+    Delete Feed
+  </button>
 </mat-dialog-actions>

web-app/src/app/admin/admin-feeds/admin-feed/admin-feed-delete/admin-feed-delete.component.scss

@@ -17,6 +17,5 @@
 }
 
 .delete-button {
-  --mat-button-filled-container-color: var(--mat-sys-error);
-  --mat-button-filled-label-text-color: var(--mat-sys-on-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }

web-app/src/app/admin/admin-feeds/admin-feed/admin-feed-delete/admin-feed-delete.component.spec.ts

@@ -16,8 +16,7 @@ describe('AdminFeedDeleteComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-    declarations: [AdminFeedDeleteComponent],
-    imports: [MatDialogModule],
+    imports: [MatDialogModule, AdminFeedDeleteComponent],
     providers: [
         { provide: MatDialogRef, useValue: {} },
         { provide: MAT_DIALOG_DATA, useValue: feedData },

web-app/src/app/admin/admin-feeds/admin-feed/admin-feed-delete/admin-feed-delete.component.ts

@@ -1,12 +1,21 @@
 import { Component, Inject } from '@angular/core'
-import { MAT_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/dialog'
+import { MatButtonModule } from '@angular/material/button'
+import { MAT_DIALOG_DATA as MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'
+import { MatIconModule } from '@angular/material/icon'
+import { A11yModule } from '@angular/cdk/a11y'
 import { Feed } from '@ngageoint/mage.web-core-lib/feed'
 
 @Component({
     selector: 'app-admin-feed-delete',
     templateUrl: './admin-feed-delete.component.html',
     styleUrls: ['./admin-feed-delete.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      MatDialogModule,
+      MatButtonModule,
+      MatIconModule,
+      A11yModule
+    ]
 })
 export class AdminFeedDeleteComponent {
 

web-app/src/app/admin/admin-feeds/admin-feed/admin-feed.component.ts

@@ -313,7 +313,6 @@ export class AdminFeedComponent implements OnInit, OnDestroy {
     this.dialog
       .open(AdminFeedDeleteComponent, {
         data: this.feed,
-        autoFocus: false,
         disableClose: true
       })
       .afterClosed()

web-app/src/app/admin/admin-feeds/admin-feeds.component.ts

@@ -115,7 +115,6 @@ export class AdminFeedsComponent implements OnInit, OnDestroy {
 
     this.dialog.open(AdminServiceDeleteComponent, {
       data: { service, feeds: this._feeds.filter(f => f.service === service.id) },
-      autoFocus: false,
       disableClose: true
     }).afterClosed().subscribe(result => {
       if (result === true) {
@@ -137,7 +136,6 @@ export class AdminFeedsComponent implements OnInit, OnDestroy {
 
     this.dialog.open(AdminFeedDeleteComponent, {
       data: feed,
-      autoFocus: false,
       disableClose: true
     }).afterClosed().subscribe(result => {
       if (result === true) {

web-app/src/app/admin/admin-feeds/admin-feeds.module.ts

@@ -28,15 +28,13 @@ import { MomentModule } from '../../../app/moment/moment.module';
 import { AdminBreadcrumbModule } from '../admin-breadcrumb/admin-breadcrumb.module';
 import { AdminFeedsComponent } from './admin-feeds.component';
 import { AdminFeedComponent } from './admin-feed/admin-feed.component';
-import { AdminFeedDeleteComponent } from './admin-feed/admin-feed-delete/admin-feed-delete.component';
 import { AdminFeedEditComponent } from './admin-feed/admin-feed-edit/admin-feed-edit.component';
 import { JsonSchemaWidgetAutocompleteComponent } from '../json-schema/json-schema-widget/json-schema-widget-autocomplete.component';
 import { AdminServiceEditComponent } from './admin-service/admin-service-edit/admin-service-edit.component';
 import { AdminFeedEditItemPropertiesComponent } from './admin-feed/admin-feed-edit/admin-feed-edit-item-properties/admin-feed-edit-item-properties.component';
 import { AdminFeedEditTopicComponent } from './admin-feed/admin-feed-edit/admin-feed-edit-topic/admin-feed-edit-topic.component';
 import { AdminFeedEditConfigurationComponent } from './admin-feed/admin-feed-edit/admin-feed-edit-configuration.component';
 import { AdminServiceComponent } from './admin-service/admin-service.component';
-import { AdminServiceDeleteComponent } from './admin-service/admin-service-delete/admin-service-delete.component';
 import { AdminFeedEditTopicConfigurationComponent } from './admin-feed/admin-feed-edit/admin-feed-edit-topic/admin-feed-edit-topic-configuration.component';
 import { JsonSchemaModule } from '../json-schema/json-schema.module';
 import { FeedItemSummaryModule } from '../../feed/feed-item/feed-item-summary/feed-item-summary.module';
@@ -48,7 +46,6 @@ import { RouterModule } from '@angular/router';
   declarations: [
     AdminFeedsComponent,
     AdminFeedComponent,
-    AdminFeedDeleteComponent,
     AdminFeedEditComponent,
     JsonSchemaWidgetAutocompleteComponent,
     AdminServiceEditComponent,
@@ -58,7 +55,6 @@ import { RouterModule } from '@angular/router';
     AdminFeedEditTopicConfigurationComponent,
     AdminFeedEditTopicComponent,
     AdminServiceComponent,
-    AdminServiceDeleteComponent
   ],
   imports: [
     FormsModule,

web-app/src/app/admin/admin-feeds/admin-service/admin-service-delete/admin-service-delete.component.html

@@ -3,19 +3,26 @@
 </div>
 
 <div mat-dialog-content>
-  <div *ngIf="feeds?.length" class="danger-zone">
-    <h3 class="danger-zone-title">
-      <mat-icon fontSet="material-symbols-outlined">warning</mat-icon>
-      {{feeds.length}} {{feeds.length === 1 ? 'feed' : 'feeds'}} will also be deleted
-    </h3>
-    <p class="feed-list__label">The following feeds will be permanently deleted:</p>
-    <div class="feed-list">
-      <div *ngFor="let feed of feeds" class="feed-list__item">{{feed.title}}</div>
+  @if (feeds?.length) {
+    <div class="danger-zone">
+      <h3 class="danger-zone-title">
+        <mat-icon fontSet="material-symbols-outlined">warning</mat-icon>
+        {{feeds.length}} {{feeds.length === 1 ? 'feed' : 'feeds'}} will also be deleted
+      </h3>
+      <p class="feed-list__label">The following feeds will be permanently deleted:</p>
+      <div class="feed-list">
+        @for (feed of feeds; track feed.id) {
+          <div class="feed-list__item">{{feed.title}}</div>
+        }
+      </div>
     </div>
-  </div>
+  }
 </div>
 
 <mat-dialog-actions align="end">
-  <button matButton [mat-dialog-close]="false">Cancel</button>
-  <button matButton="filled" class="delete-button" [mat-dialog-close]="true">Delete</button>
+  <button matButton type="button" [mat-dialog-close]="false" cdkFocusInitial data-testid="cancel-button">Cancel</button>
+  <button matButton type="button" class="delete-button" [mat-dialog-close]="true" data-testid="delete-button">
+    <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
+    Delete Service
+  </button>
 </mat-dialog-actions>

web-app/src/app/admin/admin-feeds/admin-service/admin-service-delete/admin-service-delete.component.scss

@@ -37,6 +37,5 @@
 }
 
 .delete-button {
-  --mat-button-filled-container-color: var(--mat-sys-error);
-  --mat-button-filled-label-text-color: var(--mat-sys-on-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }

web-app/src/app/admin/admin-feeds/admin-service/admin-service-delete/admin-service-delete.component.spec.ts

@@ -30,12 +30,11 @@ describe('AdminServiceDeleteComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule],
+      imports: [MatDialogModule, AdminServiceDeleteComponent],
       providers: [
         { provide: MatDialogRef, useValue: {} },
         { provide: MAT_DIALOG_DATA, useValue: dialogData }
-      ],
-      declarations: [AdminServiceDeleteComponent]
+      ]
     }).compileComponents();
   }));
 

web-app/src/app/admin/admin-feeds/admin-service/admin-service-delete/admin-service-delete.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA as MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { A11yModule } from '@angular/cdk/a11y';
 import { Service, Feed } from '@ngageoint/mage.web-core-lib/feed';
 
 type ServiceWithFeeds = {
@@ -11,7 +14,13 @@ type ServiceWithFeeds = {
     selector: 'app-admin-service-delete',
     templateUrl: './admin-service-delete.component.html',
     styleUrls: ['./admin-service-delete.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      MatDialogModule,
+      MatButtonModule,
+      MatIconModule,
+      A11yModule
+    ]
 })
 export class AdminServiceDeleteComponent {
 

web-app/src/app/admin/admin-feeds/admin-service/admin-service.component.ts

@@ -116,7 +116,6 @@ export class AdminServiceComponent implements OnInit, OnDestroy {
           service: this.service,
           feeds: this.feeds
         },
-        autoFocus: false,
         disableClose: true
       })
       .afterClosed()

web-app/src/app/admin/admin-layers/delete-layer/delete-layer.component.scss

@@ -14,5 +14,5 @@ mat-dialog-actions {
 }
 
 .delete-button {
-  color: var(--mat-sys-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }

web-app/src/app/admin/admin-teams/delete-team/delete-team.component.scss

@@ -42,5 +42,5 @@ mat-dialog-actions {
 }
 
 .delete-button {
-  color: var(--mat-sys-error);
+  --mat-button-text-label-text-color: var(--mat-sys-error);
 }

web-app/src/app/admin/admin.module.ts

@@ -49,7 +49,6 @@ import { PluginModule } from './admin-plugins/plugins.module';
 import { AdminAuthenticationComponent } from './admin-authentication/admin-authentication.component';
 import { AdminAuthenticationSettingsComponent } from './admin-authentication/admin-authentication-settings.component';
 import { AuthenticationCreateComponent } from './admin-authentication/admin-authentication-create/admin-authentication-create.component';
-import { AuthenticationDeleteComponent } from './admin-authentication/admin-authentication-delete/admin-authentication-delete.component';
 import { ButtonPreviewComponent } from './admin-authentication/admin-authentication-create/button-preview/button-preview.component';
 import { IconUploadComponent } from './admin-authentication/admin-authentication-create/icon-upload/icon-upload.component';
 import { AdminAuthenticationOidcComponent } from './admin-authentication/admin-authentication-oidc/admin-authentication-oidc.component';
@@ -110,7 +109,6 @@ import { AccountLockComponent } from './admin-authentication/admin-authenticatio
     AdminAuthenticationComponent,
     AdminAuthenticationSettingsComponent,
     AuthenticationCreateComponent,
-    AuthenticationDeleteComponent,
     ButtonPreviewComponent,
     IconUploadComponent,
     AdminAuthenticationOidcComponent,