[EC-8] Cleanup org reporting component redundancy

apps/web/src/app/modules/organizations/reporting/organization-reporting-routing.module.ts

@@ -11,27 +11,29 @@ import { InactiveTwoFactorReportComponent } from "../../../organizations/tools/i
 import { ReusedPasswordsReportComponent } from "../../../organizations/tools/reused-passwords-report.component";
 import { UnsecuredWebsitesReportComponent } from "../../../organizations/tools/unsecured-websites-report.component";
 import { WeakPasswordsReportComponent } from "../../../organizations/tools/weak-passwords-report.component";
+import { ReportListComponent } from "../../../reports/report-list.component";
 
-import { ReportListComponent } from "./report-list.component";
-import { ReportingComponent } from "./reporting.component";
+import { ReportsComponent } from "./../../../reports/reports.component";
+import { ReportingTabComponent } from "./reporting-tab.component";
 
 const routes: Routes = [
   {
     path: "",
-    component: ReportingComponent,
+    component: ReportingTabComponent,
     canActivate: [PermissionsGuard],
     data: { permissions: NavigationPermissionsService.getPermissions("reporting") },
     children: [
       { path: "", pathMatch: "full", redirectTo: "reports" },
       {
         path: "reports",
-        component: ReportListComponent,
+        component: ReportsComponent,
         canActivate: [PermissionsGuard],
         data: {
           titleId: "reports",
           permissions: [Permissions.AccessReports],
         },
         children: [
+          { path: "", pathMatch: "full", component: ReportListComponent },
           {
             path: "exposed-passwords-report",
             component: ExposedPasswordsReportComponent,

apps/web/src/app/modules/organizations/reporting/organization-reporting.module.ts

@@ -4,11 +4,10 @@ import { LooseComponentsModule } from "../../loose-components.module";
 import { SharedModule } from "../../shared.module";
 
 import { OrganizationReportingRoutingModule } from "./organization-reporting-routing.module";
-import { ReportListComponent } from "./report-list.component";
-import { ReportingComponent } from "./reporting.component";
+import { ReportingTabComponent } from "./reporting-tab.component";
 
 @NgModule({
   imports: [SharedModule, LooseComponentsModule, OrganizationReportingRoutingModule],
-  declarations: [ReportListComponent, ReportingComponent],
+  declarations: [ReportingTabComponent],
 })
 export class OrganizationReportingModule {}

apps/web/src/app/modules/organizations/reporting/report-list.component.html

@@ -1,24 +0,0 @@
-<ng-container *ngIf="homepage">
-  <div class="page-header">
-    <h1>{{ "reports" | i18n }}</h1>
-  </div>
-
-  <p>{{ "orgsReportsDesc" | i18n }}</p>
-
-  <div class="tw-inline-grid tw-grid-cols-3 tw-gap-4">
-    <div *ngFor="let report of reports">
-      <app-report-card [type]="report"></app-report-card>
-    </div>
-  </div>
-</ng-container>
-
-<router-outlet></router-outlet>
-
-<div class="row mt-4">
-  <div class="col">
-    <a bitButton routerLink="./" *ngIf="!homepage">
-      <i class="bwi bwi-angle-left" aria-hidden="true"></i>
-      {{ "backToReports" | i18n }}
-    </a>
-  </div>
-</div>

apps/web/src/app/modules/organizations/reporting/report-list.component.ts

@@ -1,34 +0,0 @@
-import { Component } from "@angular/core";
-import { NavigationEnd, Router } from "@angular/router";
-import { filter, Subscription } from "rxjs";
-
-import { ReportTypes } from "../../../reports/report-card.component";
-
-@Component({
-  selector: "app-org-report-list",
-  templateUrl: "report-list.component.html",
-})
-export class ReportListComponent {
-  reports = [
-    ReportTypes.exposedPasswords,
-    ReportTypes.reusedPasswords,
-    ReportTypes.weakPasswords,
-    ReportTypes.unsecuredWebsites,
-    ReportTypes.inactive2fa,
-  ];
-
-  homepage = true;
-  subscription: Subscription;
-
-  constructor(router: Router) {
-    this.subscription = router.events
-      .pipe(filter((event) => event instanceof NavigationEnd))
-      .subscribe((event) => {
-        this.homepage = (event as NavigationEnd).urlAfterRedirects.endsWith("/reports");
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
-  }
-}

apps/web/src/app/modules/organizations/reporting/reporting-tab.component.ts

@@ -6,9 +6,9 @@ import { Organization } from "@bitwarden/common/models/domain/organization";
 
 @Component({
   selector: "app-org-reporting",
-  templateUrl: "reporting.component.html",
+  templateUrl: "reporting-tab.component.html",
 })
-export class ReportingComponent implements OnInit {
+export class ReportingTabComponent implements OnInit {
   organization: Organization;
   accessEvents = false;
   showLeftNav = true;

apps/web/src/app/reports/report-list.component.html

@@ -2,10 +2,10 @@
   <h1>{{ "reports" | i18n }}</h1>
 </div>
 
-<p>{{ "reportsDesc" | i18n }}</p>
+<p>{{ reportDescKey | i18n }}</p>
 
 <div class="tw-inline-grid tw-grid-cols-3 tw-gap-4">
-  <div *ngFor="let report of reports">
+  <div *ngFor="let report of reportTypes">
     <app-report-card [type]="report"></app-report-card>
   </div>
 </div>

apps/web/src/app/reports/report-list.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
 import { ReportTypes } from "./report-card.component";
 
@@ -7,12 +8,25 @@ import { ReportTypes } from "./report-card.component";
   templateUrl: "report-list.component.html",
 })
 export class ReportListComponent {
-  reports = [
-    ReportTypes.exposedPasswords,
-    ReportTypes.reusedPasswords,
-    ReportTypes.weakPasswords,
-    ReportTypes.unsecuredWebsites,
-    ReportTypes.inactive2fa,
-    ReportTypes.dataBreach,
-  ];
+  forOrganization = false;
+
+  constructor(private route: ActivatedRoute) {
+    this.route.params.subscribe((params) => {
+      this.forOrganization = params.organizationId != null;
+    });
+  }
+
+  get reportDescKey() {
+    return this.forOrganization ? "orgsReportsDesc" : "reportsDesc";
+  }
+
+  get reportTypes() {
+    return [
+      ReportTypes.exposedPasswords,
+      ReportTypes.reusedPasswords,
+      ReportTypes.weakPasswords,
+      ReportTypes.unsecuredWebsites,
+      ReportTypes.inactive2fa,
+    ].concat(this.forOrganization ? [] : [ReportTypes.dataBreach]);
+  }
 }

apps/web/src/app/reports/reports.component.html

@@ -1,12 +1,10 @@
-<div class="container page-content">
-  <router-outlet></router-outlet>
+<router-outlet></router-outlet>
 
-  <div class="row mt-4">
-    <div class="col">
-      <a bitButton routerLink="./" *ngIf="!homepage">
-        <i class="bwi bwi-angle-left" aria-hidden="true"></i>
-        {{ "backToReports" | i18n }}
-      </a>
-    </div>
+<div class="row mt-4">
+  <div class="col">
+    <a bitButton routerLink="./" *ngIf="!homepage">
+      <i class="bwi bwi-angle-left" aria-hidden="true"></i>
+      {{ "backToReports" | i18n }}
+    </a>
   </div>
 </div>

apps/web/src/app/reports/reports.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnDestroy } from "@angular/core";
-import { NavigationEnd, Router } from "@angular/router";
+import { Component, HostBinding, OnDestroy } from "@angular/core";
+import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { Subscription } from "rxjs";
 import { filter } from "rxjs/operators";
 
@@ -10,15 +10,29 @@ import { filter } from "rxjs/operators";
 export class ReportsComponent implements OnDestroy {
   homepage = true;
   subscription: Subscription;
+  forOrganization: boolean;
+
+  @HostBinding("class")
+  get classList() {
+    return this.forOrganization ? [] : ["container", "page-content", "d-block"];
+  }
+
+  constructor(router: Router, route: ActivatedRoute) {
+    route.params.subscribe((params) => {
+      this.forOrganization = params.organizationId != null;
+    });
 
-  constructor(router: Router) {
     this.subscription = router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
       .subscribe((event) => {
-        this.homepage = (event as NavigationEnd).url == "/reports";
+        this.homepage = (event as NavigationEnd).urlAfterRedirects.endsWith("/reports");
       });
   }
 
+  get containerClasses() {
+    return this.forOrganization ? [] : ["container", "page-content"];
+  }
+
   ngOnDestroy(): void {
     this.subscription?.unsubscribe();
   }