[AC-2444] Add deep links to unassigned items banner (#8720)

* Add link to Admin Console
* update date on self-hosted banner

libs/angular/src/services/unassigned-items-banner.service.spec.ts

@@ -1,6 +1,7 @@
 import { MockProxy, mock } from "jest-mock-extended";
 import { firstValueFrom, of } from "rxjs";
 
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { FakeStateProvider, mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -12,9 +13,15 @@ describe("UnassignedItemsBanner", () => {
   let stateProvider: FakeStateProvider;
   let apiService: MockProxy<UnassignedItemsBannerApiService>;
   let environmentService: MockProxy<EnvironmentService>;
+  let organizationService: MockProxy<OrganizationService>;
 
   const sutFactory = () =>
-    new UnassignedItemsBannerService(stateProvider, apiService, environmentService);
+    new UnassignedItemsBannerService(
+      stateProvider,
+      apiService,
+      environmentService,
+      organizationService,
+    );
 
   beforeEach(() => {
     const fakeAccountService = mockAccountServiceWith("userId" as UserId);
@@ -22,6 +29,8 @@ describe("UnassignedItemsBanner", () => {
     apiService = mock();
     environmentService = mock();
     environmentService.environment$ = of(null);
+    organizationService = mock();
+    organizationService.organizations$ = of([]);
   });
 
   it("shows the banner if showBanner local state is true", async () => {

libs/angular/src/services/unassigned-items-banner.service.ts

@@ -1,6 +1,10 @@
 import { Injectable } from "@angular/core";
-import { concatMap, map } from "rxjs";
+import { combineLatest, concatMap, map, startWith } from "rxjs";
 
+import {
+  OrganizationService,
+  canAccessOrgAdmin,
+} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import {
   EnvironmentService,
   Region,
@@ -40,18 +44,41 @@ export class UnassignedItemsBannerService {
     }),
   );
 
+  private adminConsoleOrg$ = this.organizationService.organizations$.pipe(
+    map((orgs) => orgs.find((o) => canAccessOrgAdmin(o))),
+  );
+
+  adminConsoleUrl$ = combineLatest([
+    this.adminConsoleOrg$,
+    this.environmentService.environment$,
+  ]).pipe(
+    map(([org, environment]) => {
+      if (org == null || environment == null) {
+        return "#";
+      }
+
+      return environment.getWebVaultUrl() + "/#/organizations/" + org.id;
+    }),
+  );
+
   bannerText$ = this.environmentService.environment$.pipe(
     map((e) =>
       e?.getRegion() == Region.SelfHosted
-        ? "unassignedItemsBannerSelfHost"
-        : "unassignedItemsBanner",
+        ? "unassignedItemsBannerSelfHostNotice"
+        : "unassignedItemsBannerNotice",
     ),
   );
 
+  loading$ = combineLatest([this.adminConsoleUrl$, this.bannerText$]).pipe(
+    startWith(true),
+    map(() => false),
+  );
+
   constructor(
     private stateProvider: StateProvider,
     private apiService: UnassignedItemsBannerApiService,
     private environmentService: EnvironmentService,
+    private organizationService: OrganizationService,
   ) {}
 
   async hideBanner() {