AC-2410 Migrate Events Component (#8970)

* AC-2410 Migrate Events Component * AC-2410 Addressed a minor correction
2024-11-24 12:06:15 +01:00 · 2024-05-23 18:59:24 +05:30 · 2024-05-23 18:59:24 +05:30 · dd53a1c5ce
commit dd53a1c5ce
parent ad3c40297f
7 changed files with 144 additions and 171 deletions
--- a/apps/web/src/app/admin-console/common/base.events.component.ts
+++ b/apps/web/src/app/admin-console/common/base.events.component.ts
@ -1,4 +1,5 @@
 import { Directive } from "@angular/core";
+import { FormControl, FormGroup } from "@angular/forms";

 import { EventResponse } from "@bitwarden/common/models/response/event.response";
 import { ListResponse } from "@bitwarden/common/models/response/list.response";
@ -16,16 +17,16 @@ export abstract class BaseEventsComponent {
  loading = true;
  loaded = false;
  events: EventView[];
-  start: string;
-  end: string;
  dirtyDates = true;
  continuationToken: string;
-  refreshPromise: Promise<any>;
-  exportPromise: Promise<any>;
-  morePromise: Promise<any>;

  abstract readonly exportFileName: string;

+  protected eventsForm = new FormGroup({
+    start: new FormControl(null),
+    end: new FormControl(null),
+  });
+
  constructor(
    protected eventService: EventService,
    protected i18nService: I18nService,
@ -39,8 +40,32 @@ export abstract class BaseEventsComponent {
    this.end = defaultDates[1];
  }

-  async exportEvents() {
-    if (this.appApiPromiseUnfulfilled() || this.dirtyDates) {
+  get start(): string {
+    return this.eventsForm.value.start;
+  }
+
+  set start(val: string) {
+    this.eventsForm.get("start").setValue(val);
+  }
+
+  get end(): string {
+    return this.eventsForm.value.end;
+  }
+
+  set end(val: string) {
+    this.eventsForm.get("end").setValue(val);
+  }
+
+  loadMoreEvents = async () => {
+    await this.loadEvents(false);
+  };
+
+  refreshEvents = async () => {
+    await this.loadEvents(true);
+  };
+
+  exportEvents = async () => {
+    if (this.dirtyDates) {
      return;
    }

@ -51,23 +76,19 @@ export abstract class BaseEventsComponent {
      return;
    }

+    let promise: Promise<any>;
    try {
-      this.exportPromise = this.export(dates[0], dates[1]);
-
-      await this.exportPromise;
+      promise = this.export(dates[0], dates[1]);
+      await promise;
    } catch (e) {
      this.logService.error(`Handled exception: ${e}`);
    }

-    this.exportPromise = null;
+    promise = null;
    this.loading = false;
-  }
-
-  async loadEvents(clearExisting: boolean) {
-    if (this.appApiPromiseUnfulfilled()) {
-      return;
-    }
+  };

+  loadEvents = async (clearExisting: boolean) => {
    const dates = this.parseDates();
    if (dates == null) {
      return;
@ -75,17 +96,14 @@ export abstract class BaseEventsComponent {

    this.loading = true;
    let events: EventView[] = [];
+    let promise: Promise<any>;
    try {
-      const promise = this.loadAndParseEvents(
+      promise = this.loadAndParseEvents(
        dates[0],
        dates[1],
        clearExisting ? null : this.continuationToken,
      );
-      if (clearExisting) {
-        this.refreshPromise = promise;
-      } else {
-        this.morePromise = promise;
-      }
+
      const result = await promise;
      this.continuationToken = result.continuationToken;
      events = result.events;
@ -101,9 +119,8 @@ export abstract class BaseEventsComponent {

    this.dirtyDates = false;
    this.loading = false;
-    this.morePromise = null;
-    this.refreshPromise = null;
-  }
+    promise = null;
+  };

  protected abstract requestEvents(
    startDate: string,
@ -161,10 +178,6 @@ export abstract class BaseEventsComponent {
    return dates;
  }

-  protected appApiPromiseUnfulfilled() {
-    return this.refreshPromise != null || this.morePromise != null || this.exportPromise != null;
-  }
-
  private async export(start: string, end: string) {
    let continuationToken = this.continuationToken;
    let events = [].concat(this.events);
--- a/apps/web/src/app/admin-console/organizations/manage/events.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/events.component.html
@ -1,6 +1,6 @@
 <app-header></app-header>

-<div class="tw-mb-4">
+<div class="tw-mb-4" [formGroup]="eventsForm">
  <div class="tw-mt-4 tw-flex tw-items-center">
    <bit-form-field>
      <bit-label>{{ "from" | i18n }}</bit-label>
@ -8,7 +8,7 @@
        bitInput
        type="datetime-local"
        placeholder="{{ 'startDate' | i18n }}"
-        [(ngModel)]="start"
+        formControlName="start"
        (change)="dirtyDates = true"
      />
    </bit-form-field>
@ -19,51 +19,44 @@
        bitInput
        type="datetime-local"
        placeholder="{{ 'endDate' | i18n }}"
-        [(ngModel)]="end"
+        formControlName="end"
        (change)="dirtyDates = true"
      />
    </bit-form-field>
-    <form #refreshForm [appApiAction]="refreshPromise">
+    <form>
      <button
        class="tw-mx-3 tw-mt-1"
        type="button"
        bitButton
+        bitFormButton
        buttonType="primary"
-        (click)="loadEvents(true)"
-        [disabled]="loaded && refreshForm.loading"
+        [bitAction]="refreshEvents"
      >
        {{ "update" | i18n }}
      </button>
    </form>
-    <form #exportForm [appApiAction]="exportPromise">
+    <form>
      <button
        type="button"
        class="tw-mt-1"
        bitButton
-        [ngClass]="{ loading: exportForm.loading }"
-        (click)="exportEvents()"
-        [disabled]="(loaded && exportForm.loading) || dirtyDates"
+        bitFormButton
+        [bitAction]="exportEvents"
+        [disabled]="dirtyDates"
      >
        <span>{{ "export" | i18n }}</span>
-        <i
-          class="bwi bwi-fw"
-          aria-hidden="true"
-          [ngClass]="{
-            'bwi-sign-in': !exportForm.loading,
-            'bwi-spinner bwi-spin': exportForm.loading
-          }"
-        ></i>
+        <i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
      </button>
    </form>
  </div>
 </div>
 <ng-container *ngIf="!loaded">
  <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
  <p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
@ -90,21 +83,12 @@
    </ng-template>
  </bit-table>
  <button
-    #moreBtn
-    [appApiAction]="morePromise"
    type="button"
    bitButton
    buttonType="primary"
-    (click)="loadEvents(false)"
-    [disabled]="loaded && $any(moreBtn).loading"
+    [bitAction]="loadMoreEvents"
    *ngIf="continuationToken"
  >
-    <i
-      class="bwi bwi-spinner bwi-spin"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-      *ngIf="moreBtn.loading"
-    ></i>
-    <span>{{ "loadMore" | i18n }}</span>
+    {{ "loadMore" | i18n }}
  </button>
 </ng-container>
--- a/apps/web/src/app/admin-console/organizations/manage/events.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/events.component.ts
@ -108,7 +108,7 @@ export class EventsComponent extends BaseEventsComponent implements OnInit, OnDe
      }
    }

-    await this.loadEvents(true);
+    await this.refreshEvents();
    this.loaded = true;
  }

--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.html
@ -1,104 +1,97 @@
 <app-header></app-header>

-<div class="ml-auto d-flex">
-  <div class="form-inline">
-    <label class="sr-only" for="start">{{ "startDate" | i18n }}</label>
-    <input
-      type="datetime-local"
-      class="form-control form-control-sm"
-      id="start"
-      placeholder="{{ 'startDate' | i18n }}"
-      [(ngModel)]="start"
-      placeholder="YYYY-MM-DDTHH:MM"
-      (change)="dirtyDates = true"
-    />
-    <span class="mx-2">-</span>
-    <label class="sr-only" for="end">{{ "endDate" | i18n }}</label>
-    <input
-      type="datetime-local"
-      class="form-control form-control-sm"
-      id="end"
-      placeholder="{{ 'endDate' | i18n }}"
-      [(ngModel)]="end"
-      placeholder="YYYY-MM-DDTHH:MM"
-      (change)="dirtyDates = true"
-    />
+<div class="tw-mb-4" [formGroup]="eventsForm">
+  <div class="tw-mt-4 tw-flex tw-items-center">
+    <bit-form-field>
+      <bit-label>{{ "startDate" | i18n }}</bit-label>
+      <input
+        bitInput
+        type="datetime-local"
+        placeholder="{{ 'startDate' | i18n }}"
+        formControlName="start"
+        (change)="dirtyDates = true"
+      />
+    </bit-form-field>
+    <span class="tw-mx-2">-</span>
+    <bit-form-field>
+      <bit-label>{{ "endDate" | i18n }}</bit-label>
+      <input
+        bitInput
+        type="datetime-local"
+        placeholder="{{ 'endDate' | i18n }}"
+        formControlName="end"
+        (change)="dirtyDates = true"
+      />
+    </bit-form-field>
+    <form>
+      <button
+        class="tw-mx-3 tw-mt-1"
+        type="button"
+        bitButton
+        bitFormButton
+        buttonType="primary"
+        [bitAction]="refreshEvents"
+      >
+        {{ "refresh" | i18n }}
+      </button>
+    </form>
+    <form>
+      <button
+        type="button"
+        class="tw-mt-1"
+        bitButton
+        bitFormButton
+        [bitAction]="exportEvents"
+        [disabled]="dirtyDates"
+      >
+        <span>{{ "export" | i18n }}</span>
+        <i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
+      </button>
+    </form>
  </div>
-  <form #refreshForm [appApiAction]="refreshPromise" class="d-inline">
-    <button
-      type="button"
-      class="btn btn-sm btn-outline-primary ml-3"
-      (click)="loadEvents(true)"
-      [disabled]="loaded && refreshForm.loading"
-    >
-      <i
-        class="bwi bwi-refresh bwi-fw"
-        aria-hidden="true"
-        [ngClass]="{ 'bwi-spin': loaded && refreshForm.loading }"
-      ></i>
-      {{ "refresh" | i18n }}
-    </button>
-  </form>
-  <form #exportForm [appApiAction]="exportPromise" class="d-inline">
-    <button
-      type="button"
-      class="btn btn-sm btn-outline-primary btn-submit manual ml-3"
-      [ngClass]="{ loading: exportForm.loading }"
-      (click)="exportEvents()"
-      [disabled]="(loaded && exportForm.loading) || dirtyDates"
-    >
-      <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i>
-      <span>{{ "export" | i18n }}</span>
-    </button>
-  </form>
 </div>
-
 <ng-container *ngIf="!loaded">
  <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
  <p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
-  <table class="table table-hover" *ngIf="events && events.length">
-    <thead>
+  <bit-table *ngIf="events && events.length">
+    <ng-container header>
      <tr>
-        <th class="border-top-0" width="210">{{ "timestamp" | i18n }}</th>
-        <th class="border-top-0" width="40">
-          <span class="sr-only">{{ "device" | i18n }}</span>
-        </th>
-        <th class="border-top-0" width="150">{{ "user" | i18n }}</th>
-        <th class="border-top-0">{{ "event" | i18n }}</th>
+        <th bitCell>{{ "timestamp" | i18n }}</th>
+        <th bitCell>{{ "device" | i18n }}</th>
+        <th bitCell>{{ "user" | i18n }}</th>
+        <th bitCell>{{ "event" | i18n }}</th>
      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let e of events">
-        <td>{{ e.date | date: "medium" }}</td>
-        <td>
+    </ng-container>
+    <ng-template body>
+      <tr bitRow *ngFor="let e of events" alignContent="top">
+        <td bitCell class="tw-whitespace-nowrap">{{ e.date | date: "medium" }}</td>
+        <td bitCell>
          <i
-            class="text-muted bwi bwi-lg {{ e.appIcon }}"
+            class="tw-text-muted bwi bwi-lg {{ e.appIcon }}"
            title="{{ e.appName }}, {{ e.ip }}"
            aria-hidden="true"
          ></i>
-          <span class="sr-only">{{ e.appName }}, {{ e.ip }}</span>
+          <span class="tw-sr-only">{{ e.appName }}, {{ e.ip }}</span>
        </td>
-        <td>
+        <td bitCell>
          <span title="{{ e.userEmail }}">{{ e.userName }}</span>
        </td>
-        <td [innerHTML]="e.message"></td>
+        <td bitCell [innerHTML]="e.message"></td>
      </tr>
-    </tbody>
-  </table>
+    </ng-template>
+  </bit-table>
  <button
-    #moreBtn
-    [appApiAction]="morePromise"
+    bitButton
    type="button"
-    class="btn btn-block btn-link btn-submit"
-    (click)="loadEvents(false)"
-    [disabled]="loaded && $any(moreBtn).loading"
+    buttonType="primary"
+    [bitAction]="loadMoreEvents"
    *ngIf="continuationToken"
  >
    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.ts
@ -70,7 +70,7 @@ export class EventsComponent extends BaseEventsComponent implements OnInit {
      this.providerUsersIdMap.set(u.id, { name: name, email: u.email });
      this.providerUsersUserIdMap.set(u.userId, { name: name, email: u.email });
    });
-    await this.loadEvents(true);
+    await this.refreshEvents();
    this.loaded = true;
  }

--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/event-logs/service-accounts-events.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/event-logs/service-accounts-events.component.html
@ -1,13 +1,13 @@
 <div class="tw-mb-4">
  <h1>{{ "eventLogs" | i18n }}</h1>
-  <div class="tw-mt-4 tw-flex tw-items-center">
+  <div class="tw-mt-4 tw-flex tw-items-center" [formGroup]="eventsForm">
    <bit-form-field>
      <bit-label>{{ "from" | i18n }}</bit-label>
      <input
        bitInput
        type="datetime-local"
        placeholder="{{ 'startDate' | i18n }}"
-        [(ngModel)]="start"
+        formControlName="start"
        (change)="dirtyDates = true"
      />
    </bit-form-field>
@ -18,51 +18,43 @@
        bitInput
        type="datetime-local"
        placeholder="{{ 'endDate' | i18n }}"
-        [(ngModel)]="end"
+        formControlName="end"
        (change)="dirtyDates = true"
      />
    </bit-form-field>
-    <form #refreshForm [appApiAction]="refreshPromise">
+    <form>
      <button
        class="tw-mx-3 tw-mt-1"
        type="button"
        bitButton
+        bitFormButton
        buttonType="primary"
-        (click)="loadEvents(true)"
-        [disabled]="loaded && refreshForm.loading"
+        [bitAction]="refreshEvents"
      >
        {{ "update" | i18n }}
      </button>
    </form>
-    <form #exportForm [appApiAction]="exportPromise">
+    <form>
      <button
        type="button"
        class="tw-mt-1"
        bitButton
-        [ngClass]="{ loading: exportForm.loading }"
-        (click)="exportEvents()"
-        [disabled]="(loaded && exportForm.loading) || dirtyDates"
+        [bitAction]="exportEvents"
+        [disabled]="dirtyDates"
      >
        <span>{{ "export" | i18n }}</span>
-        <i
-          class="bwi bwi-fw"
-          aria-hidden="true"
-          [ngClass]="{
-            'bwi-sign-in': !exportForm.loading,
-            'bwi-spinner bwi-spin': exportForm.loading
-          }"
-        ></i>
+        <i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
      </button>
    </form>
  </div>
 </div>
 <ng-container *ngIf="!loaded">
  <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
  <p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
@ -85,21 +77,12 @@
    </ng-template>
  </bit-table>
  <button
-    #moreBtn
-    [appApiAction]="morePromise"
    type="button"
    bitButton
    buttonType="primary"
-    (click)="loadEvents(false)"
-    [disabled]="loaded && $any(moreBtn).loading"
+    [bitAction]="loadMoreEvents"
    *ngIf="continuationToken"
  >
-    <i
-      class="bwi bwi-spinner bwi-spin"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-      *ngIf="moreBtn.loading"
-    ></i>
    <span>{{ "loadMore" | i18n }}</span>
  </button>
 </ng-container>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/event-logs/service-accounts-events.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/event-logs/service-accounts-events.component.ts
@ -50,7 +50,7 @@ export class ServiceAccountEventsComponent extends BaseEventsComponent implement
  }

  async load() {
-    await this.loadEvents(true);
+    await this.refreshEvents();
    this.loaded = true;
  }