Fix ng select and product switcher (#15046)

* Fix ng select and product switcher

* Fix story

* Fix tests

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.stories.ts

@@ -3,7 +3,6 @@ import { RouterModule } from "@angular/router";
 import { applicationConfig, Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 import { BehaviorSubject, firstValueFrom, Observable, of } from "rxjs";
 
-import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
@@ -18,6 +17,7 @@ import { LayoutComponent, NavigationModule } from "@bitwarden/components";
 // FIXME: remove `src` and fix import
 // eslint-disable-next-line no-restricted-imports
 import { I18nMockService } from "@bitwarden/components/src/utils/i18n-mock.service";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 import { ProductSwitcherService } from "../shared/product-switcher.service";
 
@@ -109,9 +109,8 @@ export default {
         MockProviderService,
         StoryLayoutComponent,
         StoryContentComponent,
-        I18nPipe,
       ],
-      imports: [NavigationModule, RouterModule, LayoutComponent],
+      imports: [NavigationModule, RouterModule, LayoutComponent, I18nPipe],
       providers: [
         { provide: OrganizationService, useClass: MockOrganizationService },
         { provide: AccountService, useClass: MockAccountService },
@@ -119,12 +118,6 @@ export default {
         { provide: SyncService, useClass: MockSyncService },
         { provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
         ProductSwitcherService,
-        {
-          provide: I18nPipe,
-          useFactory: () => ({
-            transform: (key: string) => translations[key],
-          }),
-        },
         {
           provide: I18nService,
           useFactory: () => {

apps/web/src/app/layouts/product-switcher/product-switcher.module.ts

@@ -2,8 +2,8 @@ import { A11yModule } from "@angular/cdk/a11y";
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
-import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
 import { NavigationModule } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 import { SharedModule } from "../../shared";
 
@@ -12,13 +12,12 @@ import { ProductSwitcherContentComponent } from "./product-switcher-content.comp
 import { ProductSwitcherComponent } from "./product-switcher.component";
 
 @NgModule({
-  imports: [SharedModule, A11yModule, RouterModule, NavigationModule],
+  imports: [SharedModule, A11yModule, RouterModule, NavigationModule, I18nPipe],
   declarations: [
     ProductSwitcherComponent,
     ProductSwitcherContentComponent,
     NavigationProductSwitcherComponent,
   ],
   exports: [ProductSwitcherComponent, NavigationProductSwitcherComponent],
-  providers: [I18nPipe],
 })
 export class ProductSwitcherModule {}

apps/web/src/app/layouts/product-switcher/shared/product-switcher.service.spec.ts

@@ -5,13 +5,13 @@ import { ActivatedRoute, Router, convertToParamMap } from "@angular/router";
 import { mock, MockProxy } from "jest-mock-extended";
 import { Observable, firstValueFrom, of } from "rxjs";
 
-import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { SyncService } from "@bitwarden/common/platform/sync";
@@ -70,9 +70,9 @@ describe("ProductSwitcherService", () => {
           },
         },
         {
-          provide: I18nPipe,
+          provide: I18nService,
           useValue: {
-            transform: (key: string) => key,
+            t: (id: string, p1?: string | number, p2?: string | number, p3?: string | number) => id,
           },
         },
         {

apps/web/src/app/layouts/product-switcher/shared/product-switcher.service.ts

@@ -14,7 +14,6 @@ import {
   switchMap,
 } from "rxjs";
 
-import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
 import {
   canAccessOrgAdmin,
   OrganizationService,
@@ -25,6 +24,7 @@ import { PolicyType, ProviderType } from "@bitwarden/common/admin-console/enums"
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/platform/sync";
 
@@ -103,11 +103,11 @@ export class ProductSwitcherService {
     private providerService: ProviderService,
     private route: ActivatedRoute,
     private router: Router,
-    private i18n: I18nPipe,
     private syncService: SyncService,
     private accountService: AccountService,
     private platformUtilsService: PlatformUtilsService,
     private policyService: PolicyService,
+    private i18nService: I18nService,
   ) {
     this.pollUntilSynced();
   }
@@ -197,7 +197,7 @@ export class ProductSwitcherService {
           },
           isActive: this.router.url.includes("/sm/"),
           otherProductOverrides: {
-            supportingText: this.i18n.transform("secureYourInfrastructure"),
+            supportingText: this.i18nService.t("secureYourInfrastructure"),
           },
         },
         ac: {
@@ -222,7 +222,7 @@ export class ProductSwitcherService {
           marketingRoute: orgsMarketingRoute,
           otherProductOverrides: {
             name: "Share your passwords",
-            supportingText: this.i18n.transform("protectYourFamilyOrBusiness"),
+            supportingText: this.i18nService.t("protectYourFamilyOrBusiness"),
           },
         },
       } satisfies Record<string, ProductSwitcherItem>;

apps/web/webpack.config.js

@@ -259,7 +259,7 @@ const devServer =
                   'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='
                   'sha256-or0p3LaHetJ4FRq+flVORVFFNsOjQGWrDvX8Jf7ACWg='
                   'sha256-jvLh2uL2/Pq/gpvNJMaEL4C+TNhBeGadLIUyPcVRZvY='
-                  'sha256-VZTcMoTEw3nbAHejvqlyyRm1Mdx+DVNgyKANjpWw0qg='
+                  'sha256-EnIJNDxVnh0++RytXJOkU0sqtLDFt1nYUDOfeJ5SKxg='
                 ;img-src
                   'self'
                   data: