[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>

apps/browser/src/popup/app.module.ts

@@ -16,6 +16,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
 import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
 import { AvatarModule, ButtonModule } from "@bitwarden/components";
+import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
 
 import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component";
 import { AccountComponent } from "../auth/popup/account-switching/account.component";
@@ -107,6 +108,7 @@ import "../platform/popup/locales";
     AvatarModule,
     AccountComponent,
     ButtonModule,
+    ExportScopeCalloutComponent,
   ],
   declarations: [
     ActionButtonsComponent,

apps/browser/src/tools/popup/settings/export.component.html

@@ -19,7 +19,7 @@
     <app-callout type="warning" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
       {{ "personalVaultExportPolicyInEffect" | i18n }}
     </app-callout>
-    <app-export-scope-callout *ngIf="!disabledByPolicy"></app-export-scope-callout>
+    <tools-export-scope-callout *ngIf="!disabledByPolicy"></tools-export-scope-callout>
 
     <div class="box">
       <div class="box-content">

apps/browser/tsconfig.json

@@ -20,6 +20,7 @@
       "@bitwarden/vault-export-core": [
         "../../libs/tools/export/vault-export/vault-export-core/src"
       ],
+      "@bitwarden/vault-export-ui": ["../../libs/tools/export/vault-export/vault-export-ui/src"],
       "@bitwarden/importer/core": ["../../libs/importer/src"],
       "@bitwarden/importer/ui": ["../../libs/importer/src/components"],
       "@bitwarden/platform": ["../../libs/platform/src"],

apps/desktop/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { NgModule } from "@angular/core";
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
 import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
 import { DialogModule } from "@bitwarden/components";
+import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
 
 import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
 import { DeleteAccountComponent } from "../auth/delete-account.component";
@@ -61,6 +62,7 @@ import { SendComponent } from "./tools/send/send.component";
     DialogModule,
     DeleteAccountComponent,
     UserVerificationComponent,
+    ExportScopeCalloutComponent,
   ],
   declarations: [
     AccessibilityCookieComponent,

apps/desktop/src/app/tools/export/export.component.html

@@ -9,7 +9,7 @@
         >
           {{ "personalVaultExportPolicyInEffect" | i18n }}
         </app-callout>
-        <app-export-scope-callout *ngIf="!disabledByPolicy"></app-export-scope-callout>
+        <tools-export-scope-callout *ngIf="!disabledByPolicy"></tools-export-scope-callout>
         <div class="box">
           <h1 class="box-header" id="exportTitle">
             {{ "exportVault" | i18n }}

apps/desktop/tsconfig.json

@@ -20,6 +20,7 @@
       "@bitwarden/vault-export-core": [
         "../../libs/tools/export/vault-export/vault-export-core/src"
       ],
+      "@bitwarden/vault-export-ui": ["../../libs/tools/export/vault-export/vault-export-ui/src"],
       "@bitwarden/importer/core": ["../../libs/importer/src"],
       "@bitwarden/importer/ui": ["../../libs/importer/src/components"],
       "@bitwarden/node/*": ["../../libs/node/src/*"],

apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.module.ts

@@ -1,12 +1,19 @@
 import { NgModule } from "@angular/core";
 
+import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
+
 import { LooseComponentsModule, SharedModule } from "../../../../shared";
 
 import { OrganizationVaultExportRoutingModule } from "./org-vault-export-routing.module";
 import { OrganizationVaultExportComponent } from "./org-vault-export.component";
 
 @NgModule({
-  imports: [SharedModule, LooseComponentsModule, OrganizationVaultExportRoutingModule],
+  imports: [
+    SharedModule,
+    LooseComponentsModule,
+    OrganizationVaultExportRoutingModule,
+    ExportScopeCalloutComponent,
+  ],
   declarations: [OrganizationVaultExportComponent],
 })
 export class OrganizationVaultExportModule {}

apps/web/src/app/tools/vault-export/export.component.html

@@ -5,10 +5,10 @@
     <bit-callout type="danger" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
       {{ "personalVaultExportPolicyInEffect" | i18n }}
     </bit-callout>
-    <app-export-scope-callout
+    <tools-export-scope-callout
       [organizationId]="organizationId"
       *ngIf="!disabledByPolicy"
-    ></app-export-scope-callout>
+    ></tools-export-scope-callout>
 
     <ng-container *ngIf="organizations$ | async as organizations">
       <bit-form-field *ngIf="organizations.length > 0">

apps/web/src/app/tools/vault-export/export.module.ts

@@ -1,12 +1,14 @@
 import { NgModule } from "@angular/core";
 
+import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
+
 import { LooseComponentsModule, SharedModule } from "../../shared";
 
 import { ExportRoutingModule } from "./export-routing.module";
 import { ExportComponent } from "./export.component";
 
 @NgModule({
-  imports: [SharedModule, LooseComponentsModule, ExportRoutingModule],
+  imports: [SharedModule, LooseComponentsModule, ExportRoutingModule, ExportScopeCalloutComponent],
   declarations: [ExportComponent],
 })
 export class ExportModule {}

apps/web/tsconfig.json

@@ -15,6 +15,7 @@
       "@bitwarden/vault-export-core": [
         "../../libs/tools/export/vault-export/vault-export-core/src"
       ],
+      "@bitwarden/vault-export-ui": ["../../libs/tools/export/vault-export/vault-export-ui/src"],
       "@bitwarden/importer/core": ["../../libs/importer/src"],
       "@bitwarden/importer/ui": ["../../libs/importer/src/components"],
       "@bitwarden/platform": ["../../libs/platform/src"],