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

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

apps/browser/src/_locales/en/messages.json

@@ -3006,11 +3006,22 @@
   "passkeyRemoved": {
     "message": "Passkey removed"
   },
-  "unassignedItemsBanner": {
-    "message": "Notice: Unassigned organization items are no longer visible in the All Vaults view and only accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
+  "unassignedItemsBannerNotice": {
+    "message": "Notice: Unassigned organization items are no longer visible in the All Vaults view and only accessible via the Admin Console."
   },
-  "unassignedItemsBannerSelfHost": {
-    "message": "Notice: On May 2, 2024, unassigned organization items will no longer be visible in the All Vaults view and will only be accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
+  "unassignedItemsBannerSelfHostNotice": {
+    "message": "Notice: On May 16, 2024, unassigned organization items will no longer be visible in the All Vaults view and will only be accessible via the Admin Console."
+  },
+  "unassignedItemsBannerCTAPartOne": {
+    "message": "Assign these items to a collection from the",
+    "description": "This will be part of a larger sentence, which will read like so: Assign these items to a collection from the Admin Console to make them visible."
+  },
+  "unassignedItemsBannerCTAPartTwo": {
+    "message": "to make them visible.",
+    "description": "This will be part of a larger sentence, which will read like so: Assign these items to a collection from the Admin Console to make them visible."
+  },
+  "adminConsole": {
+    "message": "Admin Console"
   },
   "errorAssigningTargetCollection": {
     "message": "Error assigning target collection."

apps/browser/src/vault/popup/components/vault/current-tab.component.html

@@ -40,12 +40,22 @@
       *ngIf="
         (unassignedItemsBannerEnabled$ | async) &&
         (unassignedItemsBannerService.showBanner$ | async) &&
-        (unassignedItemsBannerService.bannerText$ | async)
+        !(unassignedItemsBannerService.loading$ | async)
       "
       type="info"
     >
       <p>
         {{ unassignedItemsBannerService.bannerText$ | async | i18n }}
+        {{ "unassignedItemsBannerCTAPartOne" | i18n }}
+        <a
+          [href]="unassignedItemsBannerService.adminConsoleUrl$ | async"
+          bitLink
+          linkType="contrast"
+          target="_blank"
+          rel="noreferrer"
+          >{{ "adminConsole" | i18n }}</a
+        >
+        {{ "unassignedItemsBannerCTAPartTwo" | i18n }}
         <a
           href="https://bitwarden.com/help/unassigned-vault-items-moved-to-admin-console"
           bitLink

apps/web/src/app/layouts/header/web-header.component.html

@@ -4,10 +4,19 @@
   *ngIf="
     (unassignedItemsBannerEnabled$ | async) &&
     (unassignedItemsBannerService.showBanner$ | async) &&
-    (unassignedItemsBannerService.bannerText$ | async)
+    !(unassignedItemsBannerService.loading$ | async)
   "
 >
   {{ unassignedItemsBannerService.bannerText$ | async | i18n }}
+  {{ "unassignedItemsBannerCTAPartOne" | i18n }}
+  <a
+    [href]="unassignedItemsBannerService.adminConsoleUrl$ | async"
+    bitLink
+    linkType="contrast"
+    rel="noreferrer"
+    >{{ "adminConsole" | i18n }}</a
+  >
+  {{ "unassignedItemsBannerCTAPartTwo" | i18n }}
   <a
     href="https://bitwarden.com/help/unassigned-vault-items-moved-to-admin-console"
     bitLink

apps/web/src/locales/en/messages.json

@@ -7900,15 +7900,23 @@
   "machineAccountAccessUpdated": {
     "message": "Machine account access updated"
   },
-  "unassignedItemsBanner": {
-    "message": "Notice: Unassigned organization items are no longer visible in your All Vaults view across devices and are now only accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
-  },
-  "unassignedItemsBannerSelfHost": {
-    "message": "Notice: On May 2, 2024, unassigned organization items will no longer be visible in your All Vaults view across devices and will only be accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
-  },
   "restrictedGroupAccessDesc": {
     "message": "You cannot add yourself to a group."
   },
+  "unassignedItemsBannerNotice": {
+    "message": "Notice: Unassigned organization items are no longer visible in your All Vaults view across devices and are now only accessible via the Admin Console."
+  },
+  "unassignedItemsBannerSelfHostNotice": {
+    "message": "Notice: On May 16, 2024, unassigned organization items will no longer be visible in your All Vaults view across devices and will only be accessible via the Admin Console."
+  },
+  "unassignedItemsBannerCTAPartOne": {
+    "message": "Assign these items to a collection from the",
+    "description": "This will be part of a larger sentence, which will read like so: Assign these items to a collection from the Admin Console to make them visible."
+  },
+  "unassignedItemsBannerCTAPartTwo": {
+    "message": "to make them visible.",
+    "description": "This will be part of a larger sentence, which will read like so: Assign these items to a collection from the Admin Console to make them visible."
+  },
   "deleteProvider": {
     "message": "Delete provider"
   },

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() {