From 1574cd2c52d85e0c24f289959faa6a66f507beab Mon Sep 17 00:00:00 2001
From: Gary Luu <garylau.work@gmail.com>
Date: Thu, 18 Jun 2020 10:03:03 -0400
Subject: [PATCH] Feature/seab 1367/pretty alerts and pagination (#1010)

* Prettier alerts, add basic pagination

* Better Angular typing

* Fix strict null checks

* Add pagination test
---
 cypress/integration/group2/myworkflows.ts     |  1 +
 .../github-apps-logs.component.html           | 12 +++++++++---
 .../github-apps-logs.component.ts             | 19 +++++++++++--------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/cypress/integration/group2/myworkflows.ts b/cypress/integration/group2/myworkflows.ts
index eefec841fb..6460a2b0ef 100644
--- a/cypress/integration/group2/myworkflows.ts
+++ b/cypress/integration/group2/myworkflows.ts
@@ -110,6 +110,7 @@ describe('Dockstore my workflows', () => {
       cy.contains('See GitHub Apps Logs').click();
       cy.contains('Feb 20, 2020, 2:20:20 AM');
       cy.contains('Jun 5, 2020, 2:40:41 PM');
+      cy.contains('1 - 2 of 2');
       cy.contains('Close').click();
     });
     it('Should contain the extended properties and be able to edit the info tab', () => {
diff --git a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html
index ec618153df..180904c8b1 100644
--- a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html
+++ b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html
@@ -1,13 +1,17 @@
 <h1 mat-dialog-title>GitHub App Logs</h1>
 <div mat-dialog-content>
   <app-loading [loading]="loading">
-    <span *ngIf="showContent === 'error'">There were problems retrieving GitHub App logs for this organization.</span>
-    <span *ngIf="showContent === 'empty'">There are no GitHub App logs for this organization.</span>
+    <mat-card *ngIf="showContent === 'error'" class="alert alert-warning" role="alert">
+      <mat-icon>warning</mat-icon> There were problems retrieving GitHub App logs for this organization.
+    </mat-card>
+    <mat-card *ngIf="showContent === 'empty'" class="alert alert-info" role="alert">
+      <mat-icon>warning</mat-icon> There are no GitHub App logs for this organization.
+    </mat-card>
     <!-- *ngIf doesn't work with the sorting implementation, using hidden for now -->
     <div [hidden]="showContent !== 'table'">
       <mat-form-field>
         <mat-label>Filter (except Date)</mat-label>
-        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. PUSH" />
+        <input #filter matInput (keyup)="applyFilter(filter.value)" placeholder="Ex. PUSH" />
       </mat-form-field>
       <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z3 w-100" matSort>
         <ng-container matColumnDef="eventDate">
@@ -45,6 +49,8 @@ <h1 mat-dialog-title>GitHub App Logs</h1>
         ></tr>
         <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
       </table>
+
+      <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
     </div>
   </app-loading>
 </div>
diff --git a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts
index db8bf32b49..a9b856f7ae 100644
--- a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts
+++ b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts
@@ -1,6 +1,6 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatSnackBar, MatSort, MatTableDataSource } from '@angular/material';
+import { MAT_DIALOG_DATA, MatPaginator, MatSnackBar, MatSort, MatTableDataSource } from '@angular/material';
 import { AlertService } from 'app/shared/alert/state/alert.service';
 import { LambdaEvent, LambdaEventsService } from 'app/shared/openapi';
 import { finalize } from 'rxjs/operators';
@@ -8,10 +8,9 @@ import { finalize } from 'rxjs/operators';
 /**
  * Based on https://material.angular.io/components/table/examples example with expandable rows
  * TODO: Filter by date (datasource is using timestamp instead of medium date)
- * TODO: Change to prettier empty and error messages (cards)
  * TODO: Friendly value map for reference (maybe success, maybe type too)
  * TODO: Fix sort expanding every row
- * TODO: Add pagination
+ * TODO: Add backend pagination
  * @export
  * @class GithubAppsLogsComponent
  * @implements {OnInit}
@@ -36,7 +35,8 @@ export class GithubAppsLogsComponent implements OnInit {
   ) {}
   columnsToDisplay: string[] = ['repository', 'reference', 'success', 'type'];
   displayedColumns: string[] = ['eventDate', 'githubUsername', ...this.columnsToDisplay];
-  lambdaEvents: LambdaEvent[];
+  lambdaEvents: LambdaEvent[] | null;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   loading = true;
   public LambdaEvent = LambdaEvent;
@@ -48,6 +48,7 @@ export class GithubAppsLogsComponent implements OnInit {
   ngOnInit() {
     this.loading = true;
     this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
     this.lambdaEventsService
       .getLambdaEventsByOrganization(this.data)
       .pipe(
@@ -67,7 +68,7 @@ export class GithubAppsLogsComponent implements OnInit {
   }
 
   updateContentToShow(lambdaEvents: LambdaEvent[] | null) {
-    this.dataSource.data = lambdaEvents;
+    this.dataSource.data = lambdaEvents ? lambdaEvents : [];
     if (!lambdaEvents) {
       this.showContent = 'error';
     } else {
@@ -79,8 +80,10 @@ export class GithubAppsLogsComponent implements OnInit {
     }
   }
 
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
+  applyFilter(event: string) {
+    this.dataSource.filter = event.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
   }
 }