[PM-11901] Refactoring self-hosting license file uploader

[jonashendrickx]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-11901

📔 Objective

Deduplicate the code where self-hosting licenses are being uploaded for organizations. Some additional work was done for individual licenses.

📸 Screenshots

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[codecov]

Codecov Report

Attention: Patch coverage is 24.77876% with 85 lines in your changes missing coverage. Please review.

Project coverage is 35.15%. Comparing base (c8084cc) to head (df049c7).
Report is 19 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ization-self-hosting-license-uploader.component.ts	30.43%	23 Missing and 9 partials ⚠️
...bstract-self-hosting-license-uploader.component.ts	9.52%	19 Missing ⚠️
...ividual-self-hosting-license-uploader.component.ts	35.71%	12 Missing and 6 partials ⚠️
...billing/individual/premium/premium-v2.component.ts	0.00%	8 Missing ⚠️
...ling/organizations/organization-plans.component.ts	0.00%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11083      +/-   ##
==========================================
+ Coverage   35.07%   35.15%   +0.08%     
==========================================
  Files        2718     2722       +4     
  Lines       84841    85033     +192     
  Branches    16134    16180      +46     
==========================================
+ Hits        29757    29893     +136     
- Misses      54106    54147      +41     
- Partials      978      993      +15     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Checkmarx One – Scan Summary & Details – 22a84e6e-0457-423b-9347-2defd295b16c

No New Or Fixed Issues Found

[amorask-bitwarden]

Great first pass! Please fix up the comments marked with ❌ and let me know what you think about the ⛏️ s.

[amorask-bitwarden]

⛏️ Since this only encapsulates an organizationId, I'd argue could probably just do away with it to reduce our file count. The naming of the event emitter itself already clarifies what event your listening for in the parent component.

// Uploader .ts
@Output() onLicenseFileUploaded = new EventEmitter<string>();

// Parent .ts
protected onLicenseFileUploaded = async (organizationId: string) => {}

[jonashendrickx]

I personally like the verbosity, so if the code needs to be extended it would be easier, or simply easier to read if you want to know what the string is for, but I will remove it.

[amorask-bitwarden]

⛏️ I'll let you ultimately decide this because it's only a matter of style, but a more functional approach would be to combine all 3 of the license uploading components and then pass in what you need as inputs.

For example:

export class SelfHostLicenseUploaderComponent {
    @Input({ required: true }) private description: string;
    @Input({ required: true }) private hintFileName: string;
    @Input({ required: true }) private onSubmit: File => Promise<void>;
}

The onSubmit input can be passed in from the parent to tell the license uploader what specifically we want to do with the File if the existing validation passes.

submit = async () => {
  this.form.markAllAsTouched();

  if (this.form.invalid) {
    return this.toastService.showToast({
      variant: "error",
      title: this.i18nService.t("errorOccurred"),
      message: this.i18nService.t("selectFile"),
    });
  }

  const emailVerified = await this.tokenService.getEmailVerified();
  if (!emailVerified) {
    return this.toastService.showToast({
      variant: "error",
      title: this.i18nService.t("errorOccurred"),
      message: this.i18nService.t("verifyEmailFirst"),
    });
  }

  await this.onSubmit(this.form.value.file);

  // You can either include the necessary post-processing in the `onSubmit` or emit an event to handle it in the parent.
}

Example of this approach in the manage-tax-information.component.

[cturnbull-bitwarden]

Overall looks good. Up to you on the remaining nitpicks, though it does look like you have a conflict at apps\web\src\app\billing\organizations\organization-plans.component.html

[amorask-bitwarden]

Just one change on the premium component template, otherwise looks good.

[amorask-bitwarden]

❌ I think this is supposed to be:
(onLicenseFileUploaded)="onLicenseFileSelectedChange()"

[jonashendrickx]

@amorask-bitwarden The warning is gone once I added the brackets.