From c6327d7f12fd3aa21fbf3ced9e40644a8c015277 Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Wed, 20 Mar 2024 23:11:57 +0100 Subject: [PATCH] [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 --- .eslintrc.json | 9 +++++++ apps/browser/src/popup/app.module.ts | 2 ++ .../popup/settings/export.component.html | 2 +- apps/browser/tsconfig.json | 1 + apps/desktop/src/app/app.module.ts | 2 ++ .../app/tools/export/export.component.html | 2 +- apps/desktop/tsconfig.json | 1 + .../vault-export/org-vault-export.module.ts | 9 ++++++- .../tools/vault-export/export.component.html | 4 +-- .../app/tools/vault-export/export.module.ts | 4 ++- apps/web/tsconfig.json | 1 + bitwarden_license/bit-web/tsconfig.json | 1 + libs/angular/src/jslib.module.ts | 3 --- libs/shared/tsconfig.libs.json | 1 + libs/tools/export/vault-export/README.md | 2 ++ .../vault-export-ui/jest.config.js | 13 ++++++++++ .../vault-export/vault-export-ui/package.json | 25 +++++++++++++++++++ .../export-scope-callout.component.html | 4 +-- .../export-scope-callout.component.ts | 7 +++++- .../vault-export/vault-export-ui/src/index.ts | 1 + .../vault-export-ui/tsconfig.json | 5 ++++ .../vault-export-ui/tsconfig.spec.json | 3 +++ tsconfig.eslint.json | 1 + tsconfig.json | 1 + 24 files changed, 92 insertions(+), 12 deletions(-) create mode 100644 libs/tools/export/vault-export/vault-export-ui/jest.config.js create mode 100644 libs/tools/export/vault-export/vault-export-ui/package.json rename libs/{angular/src/tools/export => tools/export/vault-export/vault-export-ui/src}/components/export-scope-callout.component.html (59%) rename libs/{angular/src/tools/export => tools/export/vault-export/vault-export-ui/src}/components/export-scope-callout.component.ts (86%) create mode 100644 libs/tools/export/vault-export/vault-export-ui/src/index.ts create mode 100644 libs/tools/export/vault-export/vault-export-ui/tsconfig.json create mode 100644 libs/tools/export/vault-export/vault-export-ui/tsconfig.spec.json diff --git a/.eslintrc.json b/.eslintrc.json index 47d45f23c3..f21e2b0872 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -191,6 +191,15 @@ ] } }, + { + "files": ["libs/tools/export/vault-export/vault-export-ui/src/**/*.ts"], + "rules": { + "no-restricted-imports": [ + "error", + { "patterns": ["@bitwarden/vault-export-ui/*", "src/**/*"] } + ] + } + }, { "files": ["libs/importer/src/**/*.ts"], "rules": { diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index e438f2588b..d179868448 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/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, diff --git a/apps/browser/src/tools/popup/settings/export.component.html b/apps/browser/src/tools/popup/settings/export.component.html index db072d6b50..aae3584f6c 100644 --- a/apps/browser/src/tools/popup/settings/export.component.html +++ b/apps/browser/src/tools/popup/settings/export.component.html @@ -19,7 +19,7 @@ {{ "personalVaultExportPolicyInEffect" | i18n }} - +
diff --git a/apps/browser/tsconfig.json b/apps/browser/tsconfig.json index a4176be0b0..694246f59a 100644 --- a/apps/browser/tsconfig.json +++ b/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"], diff --git a/apps/desktop/src/app/app.module.ts b/apps/desktop/src/app/app.module.ts index 6317b6aaaf..199ed510f1 100644 --- a/apps/desktop/src/app/app.module.ts +++ b/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, diff --git a/apps/desktop/src/app/tools/export/export.component.html b/apps/desktop/src/app/tools/export/export.component.html index 8b3af4f1da..a6ed098181 100644 --- a/apps/desktop/src/app/tools/export/export.component.html +++ b/apps/desktop/src/app/tools/export/export.component.html @@ -9,7 +9,7 @@ > {{ "personalVaultExportPolicyInEffect" | i18n }} - +

{{ "exportVault" | i18n }} diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json index 63a1af06d7..a62d494f29 100644 --- a/apps/desktop/tsconfig.json +++ b/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/*"], diff --git a/apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.module.ts b/apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.module.ts index 34b4fa4adb..ca8a75165b 100644 --- a/apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.module.ts +++ b/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 {} diff --git a/apps/web/src/app/tools/vault-export/export.component.html b/apps/web/src/app/tools/vault-export/export.component.html index 8ed82b9fd9..9f47adf8aa 100644 --- a/apps/web/src/app/tools/vault-export/export.component.html +++ b/apps/web/src/app/tools/vault-export/export.component.html @@ -5,10 +5,10 @@ {{ "personalVaultExportPolicyInEffect" | i18n }} - + > diff --git a/apps/web/src/app/tools/vault-export/export.module.ts b/apps/web/src/app/tools/vault-export/export.module.ts index aca8bdbd4e..ddf82b0a10 100644 --- a/apps/web/src/app/tools/vault-export/export.module.ts +++ b/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 {} diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json index ba8060b93a..543d7f25b1 100644 --- a/apps/web/tsconfig.json +++ b/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"], diff --git a/bitwarden_license/bit-web/tsconfig.json b/bitwarden_license/bit-web/tsconfig.json index 01610c5e4a..0f19c6736a 100644 --- a/bitwarden_license/bit-web/tsconfig.json +++ b/bitwarden_license/bit-web/tsconfig.json @@ -11,6 +11,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-core/src"], "@bitwarden/platform": ["../../libs/platform/src"], "@bitwarden/vault": ["../../libs/vault/src"], "@bitwarden/web-vault/*": ["../../apps/web/src/*"] diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts index 1177106767..64fb44e3b8 100644 --- a/libs/angular/src/jslib.module.ts +++ b/libs/angular/src/jslib.module.ts @@ -29,7 +29,6 @@ import { UserTypePipe } from "./pipes/user-type.pipe"; import { EllipsisPipe } from "./platform/pipes/ellipsis.pipe"; import { FingerprintPipe } from "./platform/pipes/fingerprint.pipe"; import { I18nPipe } from "./platform/pipes/i18n.pipe"; -import { ExportScopeCalloutComponent } from "./tools/export/components/export-scope-callout.component"; import { PasswordStrengthComponent } from "./tools/password-strength/password-strength.component"; import { IconComponent } from "./vault/components/icon.component"; @@ -54,7 +53,6 @@ import { IconComponent } from "./vault/components/icon.component"; CopyTextDirective, CreditCardNumberPipe, EllipsisPipe, - ExportScopeCalloutComponent, FallbackSrcDirective, I18nPipe, IconComponent, @@ -85,7 +83,6 @@ import { IconComponent } from "./vault/components/icon.component"; CopyTextDirective, CreditCardNumberPipe, EllipsisPipe, - ExportScopeCalloutComponent, FallbackSrcDirective, I18nPipe, IconComponent, diff --git a/libs/shared/tsconfig.libs.json b/libs/shared/tsconfig.libs.json index 079a49fbd5..713d34a10e 100644 --- a/libs/shared/tsconfig.libs.json +++ b/libs/shared/tsconfig.libs.json @@ -10,6 +10,7 @@ "@bitwarden/common/*": ["../common/src/*"], "@bitwarden/components": ["../components/src"], "@bitwarden/vault-export-core": ["../tools/export/vault-export/vault-export-core/src"], + "@bitwarden/vault-export-ui": ["../tools/export/vault-export/vault-export-ui/src"], "@bitwarden/importer/core": ["../importer/src"], "@bitwarden/importer/ui": ["../importer/src/components"], "@bitwarden/platform": ["../platform/src"], diff --git a/libs/tools/export/vault-export/README.md b/libs/tools/export/vault-export/README.md index 45d9e08e5e..e6bce1c525 100644 --- a/libs/tools/export/vault-export/README.md +++ b/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 diff --git a/libs/tools/export/vault-export/vault-export-ui/jest.config.js b/libs/tools/export/vault-export/vault-export-ui/jest.config.js new file mode 100644 index 0000000000..955b8e7763 --- /dev/null +++ b/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: "/../../../", + }), +}; diff --git a/libs/tools/export/vault-export/vault-export-ui/package.json b/libs/tools/export/vault-export/vault-export-ui/package.json new file mode 100644 index 0000000000..e27140f365 --- /dev/null +++ b/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" + } +} diff --git a/libs/angular/src/tools/export/components/export-scope-callout.component.html b/libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.html similarity index 59% rename from libs/angular/src/tools/export/components/export-scope-callout.component.html rename to libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.html index c6b5e1e852..a660219499 100644 --- a/libs/angular/src/tools/export/components/export-scope-callout.component.html +++ b/libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.html @@ -1,5 +1,5 @@ - + {{ scopeConfig.description | i18n: scopeConfig.scopeIdentifier }} - + diff --git a/libs/angular/src/tools/export/components/export-scope-callout.component.ts b/libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.ts similarity index 86% rename from libs/angular/src/tools/export/components/export-scope-callout.component.ts rename to libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.ts index 545dfe4560..0f246c3a34 100644 --- a/libs/angular/src/tools/export/components/export-scope-callout.component.ts +++ b/libs/tools/export/vault-export/vault-export-ui/src/components/export-scope-callout.component.ts @@ -1,11 +1,16 @@ +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: "app-export-scope-callout", + selector: "tools-export-scope-callout", templateUrl: "export-scope-callout.component.html", + standalone: true, + imports: [CommonModule, JslibModule, CalloutModule], }) export class ExportScopeCalloutComponent implements OnInit { show = false; diff --git a/libs/tools/export/vault-export/vault-export-ui/src/index.ts b/libs/tools/export/vault-export/vault-export-ui/src/index.ts new file mode 100644 index 0000000000..4165ee4558 --- /dev/null +++ b/libs/tools/export/vault-export/vault-export-ui/src/index.ts @@ -0,0 +1 @@ +export { ExportScopeCalloutComponent } from "./components/export-scope-callout.component"; diff --git a/libs/tools/export/vault-export/vault-export-ui/tsconfig.json b/libs/tools/export/vault-export/vault-export-ui/tsconfig.json new file mode 100644 index 0000000000..5cb9026037 --- /dev/null +++ b/libs/tools/export/vault-export/vault-export-ui/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "../../../../shared/tsconfig.libs", + "include": ["src"], + "exclude": ["node_modules", "dist"] +} diff --git a/libs/tools/export/vault-export/vault-export-ui/tsconfig.spec.json b/libs/tools/export/vault-export/vault-export-ui/tsconfig.spec.json new file mode 100644 index 0000000000..fc8520e737 --- /dev/null +++ b/libs/tools/export/vault-export/vault-export-ui/tsconfig.spec.json @@ -0,0 +1,3 @@ +{ + "extends": "./tsconfig.json" +} diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index c8144b97b9..19d35b2896 100644 --- a/tsconfig.eslint.json +++ b/tsconfig.eslint.json @@ -22,6 +22,7 @@ "@bitwarden/common/*": ["./libs/common/src/*"], "@bitwarden/components": ["./libs/components/src"], "@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"], diff --git a/tsconfig.json b/tsconfig.json index 4aaf670dbc..ab3f8861a9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,7 @@ "@bitwarden/common/*": ["./libs/common/src/*"], "@bitwarden/components": ["./libs/components/src"], "@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"],