[PM-6780][PM-6781] Create vault-export-ui package / Migrate export-scope-callout.component to CL (#8318)

* PM-6780 - Create vault-export-ui package

* Migrate export-scope-callout to CL
- Move export-scope-callout.component to vault-export-UI
- Use bit-callout instead of app-callout
- Make component standalone
- Remove from jslib.module
- Prefix selector with team-name
- Export it from vault-export-ui

* Update usage of tools-export-scope-callout for desktop

* Update usage of tools-export-scope-callout for web

* Update usage of tools-export-scope-callout for browser

* Change package description

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

libs/tools/export/vault-export/README.md

@@ -13,3 +13,5 @@ Currently in use by the Bitwarden Web Vault, CLI, desktop app and browser extens
 ## vault-export-ui
 
 Package name: `@bitwarden/vault-export-ui`
+
+Contains all UI components used for the vault-export

libs/tools/export/vault-export/vault-export-ui/jest.config.js

@@ -0,0 +1,13 @@
+const { pathsToModuleNameMapper } = require("ts-jest");
+
+const { compilerOptions } = require("../../../../shared/tsconfig.libs");
+
+/** @type {import('jest').Config} */
+module.exports = {
+  testMatch: ["**/+(*.)+(spec).+(ts)"],
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
+    prefix: "<rootDir>/../../../",
+  }),
+};

libs/tools/export/vault-export/vault-export-ui/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@bitwarden/vault-export-ui",
+  "version": "0.0.0",
+  "description": "Angular components for the Bitwarden vault exporter",
+  "keywords": [
+    "bitwarden"
+  ],
+  "author": "Bitwarden Inc.",
+  "homepage": "https://bitwarden.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bitwarden/clients"
+  },
+  "license": "GPL-3.0",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsc",
+    "build:watch": "npm run clean && tsc -watch"
+  },
+  "dependencies": {
+    "@bitwarden/common": "file:../../../../common",
+    "@bitwarden/angular": "file:../../../../angular",
+    "@bitwarden/vault-export-core": "file:../vault-export-core"
+  }
+}

libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.html

@@ -0,0 +1,5 @@
+<ng-container *ngIf="show">
+  <bit-callout type="info" title="{{ scopeConfig.title | i18n }}">
+    {{ scopeConfig.description | i18n: scopeConfig.scopeIdentifier }}
+  </bit-callout>
+</ng-container>

libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.ts

@@ -0,0 +1,64 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnInit } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { CalloutModule } from "@bitwarden/components";
+
+@Component({
+  selector: "tools-export-scope-callout",
+  templateUrl: "export-scope-callout.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule, CalloutModule],
+})
+export class ExportScopeCalloutComponent implements OnInit {
+  show = false;
+  scopeConfig: {
+    title: string;
+    description: string;
+    scopeIdentifier: string;
+  };
+
+  private _organizationId: string;
+
+  get organizationId(): string {
+    return this._organizationId;
+  }
+
+  @Input() set organizationId(value: string) {
+    this._organizationId = value;
+    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.getScopeMessage(this._organizationId);
+  }
+
+  constructor(
+    protected organizationService: OrganizationService,
+    protected stateService: StateService,
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    if (!(await this.organizationService.hasOrganizations())) {
+      return;
+    }
+
+    await this.getScopeMessage(this.organizationId);
+    this.show = true;
+  }
+
+  private async getScopeMessage(organizationId: string) {
+    this.scopeConfig =
+      organizationId != null
+        ? {
+            title: "exportingOrganizationVaultTitle",
+            description: "exportingOrganizationVaultDesc",
+            scopeIdentifier: (await this.organizationService.get(organizationId)).name,
+          }
+        : {
+            title: "exportingPersonalVaultTitle",
+            description: "exportingIndividualVaultDescription",
+            scopeIdentifier: await this.stateService.getEmail(),
+          };
+  }
+}

libs/tools/export/vault-export/vault-export-ui/src/index.ts

@@ -0,0 +1 @@
+export { ExportScopeCalloutComponent } from "./components/export-scope-callout.component";

libs/tools/export/vault-export/vault-export-ui/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../../shared/tsconfig.libs",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

libs/tools/export/vault-export/vault-export-ui/tsconfig.spec.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}