fix error in console (#17468)

Author: BTreston

apps/web/src/app/admin-console/organizations/collections/group-badge/group-name-badge.component.html

@@ -1 +1 @@
-<bit-badge-list [items]="groupNames" [maxItems]="3" variant="secondary"></bit-badge-list>
+<bit-badge-list [items]="groupNames()" [maxItems]="3" variant="secondary"></bit-badge-list>

apps/web/src/app/admin-console/organizations/collections/group-badge/group-name-badge.component.ts

@@ -1,36 +1,33 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, Input, OnChanges } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 
 import { SelectionReadOnlyRequest } from "@bitwarden/common/admin-console/models/request/selection-read-only.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { GroupView } from "../../core";
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-group-badge",
   templateUrl: "group-name-badge.component.html",
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GroupNameBadgeComponent implements OnChanges {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() selectedGroups: SelectionReadOnlyRequest[];
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() allGroups: GroupView[];
+export class GroupNameBadgeComponent {
+  readonly selectedGroups = input<SelectionReadOnlyRequest[]>([]);
+  readonly allGroups = input<GroupView[]>([]);
 
-  protected groupNames: string[] = [];
+  protected readonly groupNames = computed(() => {
+    const allGroups = this.allGroups();
+    if (!allGroups) {
+      return [];
+    }
 
-  constructor(private i18nService: I18nService) {}
-
-  ngOnChanges() {
-    this.groupNames = this.selectedGroups
+    return this.selectedGroups()
       .map((g) => {
-        return this.allGroups.find((o) => o.id === g.id)?.name;
+        return allGroups.find((o) => o.id === g.id)?.name;
       })
+      .filter((name): name is string => name !== undefined)
       .sort(this.i18nService.collator.compare);
-  }
+  });
+
+  constructor(private i18nService: I18nService) {}
 }