[EC-18] Reporting side nav direction (#3420)

* [EC-18] Re-order side nav for org reports according to Figma

* [EC-18] Fix rxjs linter errors and redundant org flag

apps/web/src/app/organizations/reporting/reporting.component.html

@@ -4,6 +4,14 @@
       <div class="card" *ngIf="organization">
         <div class="card-header">{{ "reporting" | i18n }}</div>
         <div class="list-group list-group-flush">
+          <a
+            routerLink="events"
+            class="list-group-item"
+            routerLinkActive="active"
+            *ngIf="organization.canAccessEventLogs"
+          >
+            {{ "eventLogs" | i18n }}
+          </a>
           <a
             routerLink="reports"
             class="list-group-item"
@@ -12,14 +20,6 @@
           >
             {{ "reports" | i18n }}
           </a>
-          <a
-            routerLink="events"
-            class="list-group-item"
-            routerLinkActive="active"
-            *ngIf="organization.canAccessEventLogs && accessEvents"
-          >
-            {{ "eventLogs" | i18n }}
-          </a>
         </div>
       </div>
     </div>

apps/web/src/app/organizations/reporting/reporting.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
+import { concatMap, Subject, takeUntil } from "rxjs";
 
 import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { Organization } from "@bitwarden/common/models/domain/organization";
@@ -8,19 +9,28 @@ import { Organization } from "@bitwarden/common/models/domain/organization";
   selector: "app-org-reporting",
   templateUrl: "reporting.component.html",
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class ReportingComponent implements OnInit {
+export class ReportingComponent implements OnInit, OnDestroy {
   organization: Organization;
-  accessEvents = false;
   showLeftNav = true;
 
+  private destroy$ = new Subject<void>();
+
   constructor(private route: ActivatedRoute, private organizationService: OrganizationService) {}
 
   ngOnInit() {
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-    this.route.parent.params.subscribe(async (params) => {
-      this.organization = await this.organizationService.get(params.organizationId);
-      this.accessEvents = this.showLeftNav = this.organization.useEvents;
-    });
+    this.route.params
+      .pipe(
+        concatMap(async (params) => {
+          this.organization = await this.organizationService.get(params.organizationId);
+          this.showLeftNav = this.organization.canAccessEventLogs;
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }