Chore: ditch the abandoned ngx-bootstrap-icons, roll our own (#14665)

src-ui/src/app/components/common/toast/toast.component.html

@@ -18,13 +18,13 @@
         <div class="d-flex align-items-top">
         @switch (toast.level) {
             @case (ToastLevel.Success) {
-                <i-bs width="0.9em" height="0.9em" name="check-circle" class="toast-icon"></i-bs>
+                <pngx-bs-icon width="0.9em" height="0.9em" name="check-circle" class="toast-icon"></pngx-bs-icon>
             }
             @case (ToastLevel.Error) {
-                <i-bs width="0.9em" height="0.9em" name="exclamation-triangle" class="toast-icon"></i-bs>
+                <pngx-bs-icon width="0.9em" height="0.9em" name="exclamation-triangle" class="toast-icon"></pngx-bs-icon>
             }
             @default {
-                <i-bs width="0.9em" height="0.9em" name="info-circle" class="toast-icon"></i-bs>
+                <pngx-bs-icon width="0.9em" height="0.9em" name="info-circle" class="toast-icon"></pngx-bs-icon>
             }
         }
         <div class="toast-content">
@@ -46,10 +46,10 @@
                     <div class="col offset-sm-3">
                     <button class="btn btn-sm btn-outline-secondary" (click)="copyError(toast.error)">
                         @if (!copied()) {
-                        <i-bs name="clipboard" class="me-1"></i-bs>
+                        <pngx-bs-icon name="clipboard" class="me-1"></pngx-bs-icon>
                         }
                         @if (copied()) {
-                        <i-bs name="clipboard-check" class="me-1"></i-bs>
+                        <pngx-bs-icon name="clipboard-check" class="me-1"></pngx-bs-icon>
                         }
                         <ng-container i18n>Copy Raw Error</ng-container>
                     </button>

src-ui/src/app/components/common/toast/toast.component.spec.ts

@@ -4,7 +4,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { Clipboard } from '@angular/cdk/clipboard'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { ToastLevel } from 'src/app/services/toast.service'
 import { ToastComponent } from './toast.component'
 
@@ -33,7 +32,7 @@ describe('ToastComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ToastComponent, NgxBootstrapIconsModule.pick(allIcons)],
+      imports: [ToastComponent],
       providers: [
         DatePipe,
         provideHttpClient(withInterceptorsFromDi()),
@@ -140,7 +139,7 @@ describe('ToastComponent', () => {
     }
     fixture.detectChanges()
     const el: HTMLElement = fixture.nativeElement
-    expect(el.querySelector('i-bs[name="check-circle"]')).not.toBeNull()
+    expect(el.querySelector('pngx-bs-icon[name="check-circle"]')).not.toBeNull()
     expect(el.querySelector('ngb-toast').classList).not.toContain('toast-error')
 
     fixture = TestBed.createComponent(ToastComponent)
@@ -152,7 +151,7 @@ describe('ToastComponent', () => {
     fixture.detectChanges()
     const errorEl: HTMLElement = fixture.nativeElement
     expect(
-      errorEl.querySelector('i-bs[name="exclamation-triangle"]')
+      errorEl.querySelector('pngx-bs-icon[name="exclamation-triangle"]')
     ).not.toBeNull()
     expect(errorEl.querySelector('ngb-toast').classList).toContain(
       'toast-error'
@@ -162,7 +161,7 @@ describe('ToastComponent', () => {
     fixture.componentInstance.toast = { content: 'Started', delay: 5000 }
     fixture.detectChanges()
     expect(
-      fixture.nativeElement.querySelector('i-bs[name="info-circle"]')
+      fixture.nativeElement.querySelector('pngx-bs-icon[name="info-circle"]')
     ).not.toBeNull()
   })
 

src-ui/src/app/components/common/toast/toast.component.ts

@@ -17,8 +17,8 @@ import {
   NgbToast,
   NgbToastModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subscription, interval, takeWhile } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { Toast, ToastLevel } from 'src/app/services/toast.service'
 
@@ -28,7 +28,7 @@ import { Toast, ToastLevel } from 'src/app/services/toast.service'
     DecimalPipe,
     NgbToastModule,
     NgbProgressbarModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
   templateUrl: './toast.component.html',
   styleUrl: './toast.component.scss',