Remove duplicate badge component and org name pipe

apps/desktop/src/vault/app/vault-v3/pipes/pipes.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from "@angular/core";
-
-import { GetOrgNameFromIdPipe } from "@bitwarden/vault";
-
-@NgModule({
-  declarations: [GetOrgNameFromIdPipe],
-  exports: [GetOrgNameFromIdPipe],
-})
-export class PipesModule {}

apps/desktop/src/vault/app/vault-v3/vault-items/vault-items.module.ts

@@ -14,10 +14,11 @@ import {
   ScrollLayoutDirective,
   TableModule,
 } from "@bitwarden/components";
-import { CopyCipherFieldDirective } from "@bitwarden/vault";
-
-import { OrganizationNameBadgeComponent } from "../organization-badge/organization-name-badge.component";
-import { PipesModule } from "../pipes/pipes.module";
+import {
+  CopyCipherFieldDirective,
+  GetOrgNameFromIdPipe,
+  OrganizationNameBadgeComponent,
+} from "@bitwarden/vault";
 
 import { VaultCipherRowComponent } from "./vault-cipher-row.component";
 import { VaultCollectionRowComponent } from "./vault-collection-row.component";
@@ -38,7 +39,7 @@ import { VaultCollectionRowComponent } from "./vault-collection-row.component";
     ScrollLayoutDirective,
     PremiumBadgeComponent,
     OrganizationNameBadgeComponent,
-    PipesModule,
+    GetOrgNameFromIdPipe,
   ],
   declarations: [VaultCipherRowComponent, VaultCollectionRowComponent],
   exports: [VaultCipherRowComponent, VaultCollectionRowComponent],

apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.spec.ts

@@ -16,9 +16,11 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { CipherViewLike } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
 import { IconButtonModule, MenuModule } from "@bitwarden/components";
-import { CopyCipherFieldDirective, CopyCipherFieldService } from "@bitwarden/vault";
-
-import { OrganizationNameBadgeComponent } from "../../individual-vault/organization-badge/organization-name-badge.component";
+import {
+  CopyCipherFieldDirective,
+  CopyCipherFieldService,
+  OrganizationNameBadgeComponent,
+} from "@bitwarden/vault";
 
 import { VaultCipherRowComponent } from "./vault-cipher-row.component";
 

apps/web/src/app/vault/individual-vault/organization-badge/organization-badge.module.ts

@@ -1,12 +1,14 @@
 import { NgModule } from "@angular/core";
 
+import { OrganizationNameBadgeComponent } from "@bitwarden/vault";
+
 import { SharedModule } from "../../../shared/shared.module";
 
-import { OrganizationNameBadgeComponent } from "./organization-name-badge.component";
-
+/**
+ * @deprecated Use `OrganizationNameBadgeComponent` directly since it is now standalone.
+ */
 @NgModule({
-  imports: [SharedModule],
-  declarations: [OrganizationNameBadgeComponent],
+  imports: [SharedModule, OrganizationNameBadgeComponent],
   exports: [OrganizationNameBadgeComponent],
 })
 export class OrganizationBadgeModule {}

apps/web/src/app/vault/individual-vault/organization-badge/organization-name-badge.component.html

@@ -1,13 +0,0 @@
-<button
-  bitBadge
-  type="button"
-  [disabled]="disabled"
-  [style.color]="textColor"
-  [style.background-color]="color"
-  appA11yTitle="{{ organizationName }}"
-  routerLink
-  [queryParams]="{ organizationId: organizationIdLink }"
-  queryParamsHandling="merge"
->
-  {{ name | ellipsis: 13 }}
-</button>

apps/web/src/app/vault/individual-vault/organization-badge/organization-name-badge.component.ts

@@ -1,71 +0,0 @@
-// 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 { firstValueFrom } from "rxjs";
-
-import { Unassigned } from "@bitwarden/common/admin-console/models/collections";
-import { AvatarService } from "@bitwarden/common/auth/abstractions/avatar.service";
-import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { OrganizationId } from "@bitwarden/sdk-internal";
-
-// 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-org-badge",
-  templateUrl: "organization-name-badge.component.html",
-  standalone: false,
-})
-export class OrganizationNameBadgeComponent implements OnChanges {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() organizationId?: OrganizationId | string;
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() organizationName: string;
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() disabled: boolean;
-
-  // Need a separate variable or we get weird behavior when used as part of cdk virtual scrolling
-  name: string;
-  color: string;
-  textColor: string;
-  isMe: boolean;
-
-  constructor(
-    private i18nService: I18nService,
-    private avatarService: AvatarService,
-    private tokenService: TokenService,
-  ) {}
-
-  // ngOnChanges is required since this component might be reused as part of
-  // cdk virtual scrolling
-  async ngOnChanges() {
-    this.isMe = this.organizationName == null || this.organizationName === "";
-
-    if (this.isMe) {
-      this.name = this.i18nService.t("me");
-      this.color = await firstValueFrom(this.avatarService.avatarColor$);
-      if (this.color == null) {
-        const userId = await this.tokenService.getUserId();
-        if (userId != null) {
-          this.color = Utils.stringToColor(userId);
-        } else {
-          const userName =
-            (await this.tokenService.getName()) ?? (await this.tokenService.getEmail());
-          this.color = Utils.stringToColor(userName.toUpperCase());
-        }
-      }
-    } else {
-      this.name = this.organizationName;
-      this.color = Utils.stringToColor(this.organizationName.toUpperCase());
-    }
-    this.textColor = Utils.pickTextColorBasedOnBgColor(this.color, 135, true) + "!important";
-  }
-
-  get organizationIdLink() {
-    return this.organizationId ?? Unassigned;
-  }
-}

apps/web/src/app/vault/individual-vault/pipes/pipes.module.ts

@@ -5,7 +5,8 @@ import { GetOrgNameFromIdPipe } from "@bitwarden/vault";
 import { GetGroupNameFromIdPipe } from "./get-group-name.pipe";
 
 @NgModule({
-  declarations: [GetOrgNameFromIdPipe, GetGroupNameFromIdPipe],
+  imports: [GetOrgNameFromIdPipe],
+  declarations: [GetGroupNameFromIdPipe],
   exports: [GetOrgNameFromIdPipe, GetGroupNameFromIdPipe],
 })
 export class PipesModule {}

libs/vault/src/index.ts

@@ -33,6 +33,7 @@ export * from "./components/permit-cipher-details-popover/permit-cipher-details-
 export * from "./components/vault-items-transfer";
 export { VaultItem } from "./components/vault-item";
 export { VaultItemEvent } from "./components/vault-item-event";
+export * from "./components/organization-name-badge/organization-name-badge.component";
 
 export { DefaultSshImportPromptService } from "./services/default-ssh-import-prompt.service";
 export { SshImportPromptService } from "./services/ssh-import-prompt.service";

libs/vault/src/pipes/get-organization-name.pipe.ts

@@ -6,7 +6,6 @@ import { OrganizationId } from "@bitwarden/sdk-internal";
 @Pipe({
   name: "orgNameFromId",
   pure: true,
-  standalone: false,
 })
 export class GetOrgNameFromIdPipe implements PipeTransform {
   transform(value: string | OrganizationId, organizations: Organization[]) {