[PM-21804] Migrate vault loose components (#14850)

* Migrate PremiumBadgeComponen to standalone.
* Remove unused FolderAddEdit (usage has previously been replaced with the v2 dialog)

apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts

@@ -16,8 +16,7 @@ export default {
   component: ReportCardComponent,
   decorators: [
     moduleMetadata({
-      imports: [JslibModule, BadgeModule, IconModule, RouterTestingModule],
-      declarations: [PremiumBadgeComponent],
+      imports: [JslibModule, BadgeModule, IconModule, RouterTestingModule, PremiumBadgeComponent],
     }),
     applicationConfig({
       providers: [importProvidersFrom(PreloadedEnglishI18nModule)],

apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts

@@ -18,8 +18,8 @@ export default {
   component: ReportListComponent,
   decorators: [
     moduleMetadata({
-      imports: [JslibModule, BadgeModule, RouterTestingModule, IconModule],
-      declarations: [PremiumBadgeComponent, ReportCardComponent],
+      imports: [JslibModule, BadgeModule, RouterTestingModule, IconModule, PremiumBadgeComponent],
+      declarations: [ReportCardComponent],
     }),
     applicationConfig({
       providers: [importProvidersFrom(PreloadedEnglishI18nModule)],

apps/web/src/app/shared/loose-components.module.ts

@@ -42,10 +42,8 @@ import { WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent } from
 import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { HeaderModule } from "../layouts/header/header.module";
 import { PremiumBadgeComponent } from "../vault/components/premium-badge.component";
-import { FolderAddEditComponent } from "../vault/individual-vault/folder-add-edit.component";
 import { OrganizationBadgeModule } from "../vault/individual-vault/organization-badge/organization-badge.module";
 import { PipesModule } from "../vault/individual-vault/pipes/pipes.module";
-import { PurgeVaultComponent } from "../vault/settings/purge-vault.component";
 
 import { AccountFingerprintComponent } from "./components/account-fingerprint/account-fingerprint.component";
 import { SharedModule } from "./shared.module";
@@ -68,6 +66,7 @@ import { SharedModule } from "./shared.module";
     OrganizationLayoutComponent,
     VerifyRecoverDeleteOrgComponent,
     VaultTimeoutInputComponent,
+    PremiumBadgeComponent,
   ],
   declarations: [
     AcceptFamilySponsorshipComponent,
@@ -76,7 +75,6 @@ import { SharedModule } from "./shared.module";
     EmergencyAccessConfirmComponent,
     EmergencyAccessTakeoverComponent,
     EmergencyAccessViewComponent,
-    FolderAddEditComponent,
     OrgEventsComponent,
     OrgExposedPasswordsReportComponent,
     OrgInactiveTwoFactorReportComponent,
@@ -84,8 +82,6 @@ import { SharedModule } from "./shared.module";
     OrgUnsecuredWebsitesReportComponent,
     OrgUserConfirmComponent,
     OrgWeakPasswordsReportComponent,
-    PremiumBadgeComponent,
-    PurgeVaultComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
     RemovePasswordComponent,
@@ -106,7 +102,6 @@ import { SharedModule } from "./shared.module";
     EmergencyAccessConfirmComponent,
     EmergencyAccessTakeoverComponent,
     EmergencyAccessViewComponent,
-    FolderAddEditComponent,
     OrganizationLayoutComponent,
     OrgEventsComponent,
     OrgExposedPasswordsReportComponent,
@@ -116,7 +111,6 @@ import { SharedModule } from "./shared.module";
     OrgUserConfirmComponent,
     OrgWeakPasswordsReportComponent,
     PremiumBadgeComponent,
-    PurgeVaultComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
     RemovePasswordComponent,

apps/web/src/app/vault/components/premium-badge.component.ts

@@ -1,6 +1,8 @@
 import { Component } from "@angular/core";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { BadgeModule } from "@bitwarden/components";
 
 @Component({
   selector: "app-premium-badge",
@@ -9,7 +11,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
       {{ "premium" | i18n }}
     </button>
   `,
-  standalone: false,
+  imports: [JslibModule, BadgeModule],
 })
 export class PremiumBadgeComponent {
   constructor(private messagingService: MessagingService) {}

apps/web/src/app/vault/individual-vault/folder-add-edit.component.html

@@ -1,32 +0,0 @@
-<form [bitSubmit]="submitAndClose" [formGroup]="formGroup">
-  <bit-dialog>
-    <span bitDialogTitle>
-      {{ title }}
-    </span>
-    <span bitDialogContent>
-      <bit-form-field>
-        <bit-label>{{ "name" | i18n }}</bit-label>
-        <input bitInput id="name" formControlName="name" />
-      </bit-form-field>
-    </span>
-    <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary" bitFormButton type="submit">
-        <span>{{ "save" | i18n }}</span>
-      </button>
-      <button bitButton buttonType="secondary" bitDialogClose type="button">
-        {{ "cancel" | i18n }}
-      </button>
-      <div class="tw-m-0 tw-ml-auto">
-        <button
-          buttonType="danger"
-          bitIconButton="bwi-trash"
-          bitFormButton
-          type="button"
-          appA11yTitle="{{ 'delete' | i18n }}"
-          *ngIf="editMode"
-          [bitAction]="deleteAndClose"
-        ></button>
-      </div>
-    </ng-container>
-  </bit-dialog>
-</form>

apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts

@@ -1,139 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, Inject } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
-import { firstValueFrom } from "rxjs";
-
-import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { FolderApiServiceAbstraction } from "@bitwarden/common/vault/abstractions/folder/folder-api.service.abstraction";
-import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
-import {
-  DIALOG_DATA,
-  DialogConfig,
-  DialogRef,
-  DialogService,
-  ToastService,
-} from "@bitwarden/components";
-import { KeyService } from "@bitwarden/key-management";
-
-@Component({
-  selector: "app-folder-add-edit",
-  templateUrl: "folder-add-edit.component.html",
-  standalone: false,
-})
-export class FolderAddEditComponent extends BaseFolderAddEditComponent {
-  protected override componentName = "app-folder-add-edit";
-  constructor(
-    folderService: FolderService,
-    folderApiService: FolderApiServiceAbstraction,
-    protected accountSerivce: AccountService,
-    protected keyService: KeyService,
-    i18nService: I18nService,
-    platformUtilsService: PlatformUtilsService,
-    logService: LogService,
-    dialogService: DialogService,
-    formBuilder: FormBuilder,
-    protected toastService: ToastService,
-    protected dialogRef: DialogRef<FolderAddEditDialogResult>,
-    @Inject(DIALOG_DATA) params: FolderAddEditDialogParams,
-  ) {
-    super(
-      folderService,
-      folderApiService,
-      accountSerivce,
-      keyService,
-      i18nService,
-      platformUtilsService,
-      logService,
-      dialogService,
-      formBuilder,
-      toastService,
-    );
-    // FIXME: Remove when updating file. Eslint update
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    params?.folderId ? (this.folderId = params.folderId) : null;
-  }
-
-  deleteAndClose = async () => {
-    const confirmed = await this.dialogService.openSimpleDialog({
-      title: { key: "deleteFolder" },
-      content: { key: "deleteFolderConfirmation" },
-      type: "warning",
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      await this.folderApiService.delete(this.folder.id, await firstValueFrom(this.activeUserId$));
-      this.toastService.showToast({
-        variant: "success",
-        title: null,
-        message: this.i18nService.t("deletedFolder"),
-      });
-    } catch (e) {
-      this.logService.error(e);
-    }
-
-    this.dialogRef.close(FolderAddEditDialogResult.Deleted);
-  };
-
-  submitAndClose = async () => {
-    this.folder.name = this.formGroup.controls.name.value;
-    if (this.folder.name == null || this.folder.name === "") {
-      this.formGroup.controls.name.markAsTouched();
-      return;
-    }
-
-    try {
-      const activeAccountId = await firstValueFrom(this.activeUserId$);
-      const userKey = await this.keyService.getUserKeyWithLegacySupport(activeAccountId);
-      const folder = await this.folderService.encrypt(this.folder, userKey);
-      this.formPromise = this.folderApiService.save(folder, activeAccountId);
-      await this.formPromise;
-      this.toastService.showToast({
-        variant: "success",
-        title: null,
-        message: this.i18nService.t(this.editMode ? "editedFolder" : "addedFolder"),
-      });
-      this.onSavedFolder.emit(this.folder);
-      this.dialogRef.close(FolderAddEditDialogResult.Saved);
-    } catch (e) {
-      this.logService.error(e);
-    }
-    return;
-  };
-}
-
-export interface FolderAddEditDialogParams {
-  folderId: string;
-}
-
-export const FolderAddEditDialogResult = {
-  Deleted: "deleted",
-  Canceled: "canceled",
-  Saved: "saved",
-} as const;
-
-export type FolderAddEditDialogResult = UnionOfValues<typeof FolderAddEditDialogResult>;
-
-/**
- * Strongly typed helper to open a FolderAddEdit dialog
- * @param dialogService Instance of the dialog service that will be used to open the dialog
- * @param config Optional configuration for the dialog
- */
-export function openFolderAddEditDialog(
-  dialogService: DialogService,
-  config?: DialogConfig<FolderAddEditDialogParams>,
-) {
-  return dialogService.open<FolderAddEditDialogResult, FolderAddEditDialogParams>(
-    FolderAddEditComponent,
-    config,
-  );
-}

apps/web/src/app/vault/settings/purge-vault.component.ts

@@ -18,14 +18,16 @@ import {
   ToastService,
 } from "@bitwarden/components";
 
+import { UserVerificationModule } from "../../auth/shared/components/user-verification";
+import { SharedModule } from "../../shared";
+
 export interface PurgeVaultDialogData {
   organizationId: string;
 }
 
 @Component({
-  selector: "app-purge-vault",
   templateUrl: "purge-vault.component.html",
-  standalone: false,
+  imports: [SharedModule, UserVerificationModule],
 })
 export class PurgeVaultComponent {
   organizationId: string = null;