From 8a7e038d773fbae483d5366d7f27bd403f072665 Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott@gmail.com>
Date: Fri, 15 Apr 2022 17:04:11 -0700
Subject: [PATCH] feat(apps): create summary column (#520)

Create a summary column in the prs application for displaying information about a pull request.

PR Close #520
---
 .../app/pr-table/columns/columns.module.ts    | 11 ++++++
 .../columns/summary/summary.component.html    | 16 +++++++++
 .../columns/summary/summary.component.scss    | 34 +++++++++++++++++++
 .../columns/summary/summary.component.ts      | 12 +++++++
 .../src/app/pr-table/pr-table.component.ts    |  7 ++--
 apps/prs/src/models/pull-request.ts           |  2 +-
 apps/shared/models/BUILD.bazel                |  1 +
 apps/shared/models/pull-request.ts            |  8 +++--
 8 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 apps/prs/src/app/pr-table/columns/columns.module.ts
 create mode 100644 apps/prs/src/app/pr-table/columns/summary/summary.component.html
 create mode 100644 apps/prs/src/app/pr-table/columns/summary/summary.component.scss
 create mode 100644 apps/prs/src/app/pr-table/columns/summary/summary.component.ts

diff --git a/apps/prs/src/app/pr-table/columns/columns.module.ts b/apps/prs/src/app/pr-table/columns/columns.module.ts
new file mode 100644
index 000000000..ad8d82ed4
--- /dev/null
+++ b/apps/prs/src/app/pr-table/columns/columns.module.ts
@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {MatTableModule} from '@angular/material/table';
+import {SummaryColumn} from './summary/summary.component';
+
+@NgModule({
+  declarations: [SummaryColumn],
+  imports: [CommonModule, MatTableModule],
+})
+export class ColumnsModule {}
diff --git a/apps/prs/src/app/pr-table/columns/summary/summary.component.html b/apps/prs/src/app/pr-table/columns/summary/summary.component.html
new file mode 100644
index 000000000..0b2a6ae4b
--- /dev/null
+++ b/apps/prs/src/app/pr-table/columns/summary/summary.component.html
@@ -0,0 +1,16 @@
+
+  <mat-header-cell *matHeaderCellDef>Pull Request</mat-header-cell>
+  <mat-cell *matCellDef="let pr">
+    <div class="summary">
+      <a target="_blank" rel="noopener" href="//github.com/{{pr.owner}}/{{pr.repo}}/pull/{{pr.number}}">{{pr.title}}</a>
+    </div>
+    <div class="info">
+      <span class="pr-number">#{{pr.number}}</span>
+      <span class="pr-author">{{pr.user?.name}}</span>
+      <span class="pr-labels">
+        <span *ngFor="let label of pr.labels" class="label" [style.background-color]="label.color" [style.color]="label.fontColor">
+          {{label.name}}
+        </span>
+      </span>
+  </div>
+  </mat-cell>
diff --git a/apps/prs/src/app/pr-table/columns/summary/summary.component.scss b/apps/prs/src/app/pr-table/columns/summary/summary.component.scss
new file mode 100644
index 000000000..8864a921d
--- /dev/null
+++ b/apps/prs/src/app/pr-table/columns/summary/summary.component.scss
@@ -0,0 +1,34 @@
+.mat-column-summary {
+  &.mat-header-cell {
+  }
+
+  &.mat-cell {
+    flex-direction: column;
+
+    .summary {
+      width: 100%;
+      a {
+        text-decoration: none;
+        color: currentColor;
+      }
+    }
+
+    .info {
+      width: 100%;
+      .pr-number, .pr-author {
+        margin-right: 8px;
+        font-size: .8em;
+      }
+
+      .label {
+        border-radius: 0.5em;
+        padding: 0.1em 0.4em;
+        font-size: .8em;
+        margin-right: 4px;
+        background-color: #b1b1b1;
+        color: currentColor;
+        white-space: nowrap;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/prs/src/app/pr-table/columns/summary/summary.component.ts b/apps/prs/src/app/pr-table/columns/summary/summary.component.ts
new file mode 100644
index 000000000..129f3501f
--- /dev/null
+++ b/apps/prs/src/app/pr-table/columns/summary/summary.component.ts
@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {BaseColumn} from '../base';
+
+@Component({
+  selector: 'summary-column',
+  templateUrl: './summary.component.html',
+  styleUrls: ['./summary.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SummaryColumn extends BaseColumn {
+  name = 'summary';
+}
diff --git a/apps/prs/src/app/pr-table/pr-table.component.ts b/apps/prs/src/app/pr-table/pr-table.component.ts
index 875930b72..394628300 100644
--- a/apps/prs/src/app/pr-table/pr-table.component.ts
+++ b/apps/prs/src/app/pr-table/pr-table.component.ts
@@ -1,6 +1,5 @@
 import {CdkColumnDef} from '@angular/cdk/table';
 import {Component, Injector, AfterViewInit, ViewChild, ViewContainerRef, Type} from '@angular/core';
-import {Firestore, collectionData, collectionGroup, query, limit} from '@angular/fire/firestore';
 import {
   MatColumnDef,
   MatHeaderRowDef,
@@ -8,8 +7,9 @@ import {
   MatTable,
   MatTableDataSource,
 } from '@angular/material/table';
-import {PullRequest} from '../../../../shared/models/app-models';
+import {PullRequest} from '../../models/pull-request';
 import {BaseColumn} from './columns/base';
+import {SummaryColumn} from './columns/summary/summary.component';
 
 @Component({
   selector: 'pr-table',
@@ -18,10 +18,9 @@ import {BaseColumn} from './columns/base';
 })
 export class PrTableComponent implements AfterViewInit {
   /** The columns used in the PR table. */
-  columns: Type<BaseColumn>[] = [];
+  columns: Type<BaseColumn>[] = [SummaryColumn];
   /** Data source for the table providing the list of pull requests/ */
   dataSource: MatTableDataSource<PullRequest> = new MatTableDataSource();
-
   /** The table. */
   @ViewChild(MatTable, {static: true}) table!: MatTable<PullRequest>;
   /** The row definintion. */
diff --git a/apps/prs/src/models/pull-request.ts b/apps/prs/src/models/pull-request.ts
index 229ee0cb8..6b00cc2b0 100644
--- a/apps/prs/src/models/pull-request.ts
+++ b/apps/prs/src/models/pull-request.ts
@@ -1,3 +1,3 @@
 import {PullRequest as SharedPullRequest} from '../../../shared/models/app-models';
 
-export class PullRequest extends SharedPullRequest {}
\ No newline at end of file
+export class PullRequest extends SharedPullRequest {}
diff --git a/apps/shared/models/BUILD.bazel b/apps/shared/models/BUILD.bazel
index afb9ffa29..bd76573d1 100644
--- a/apps/shared/models/BUILD.bazel
+++ b/apps/shared/models/BUILD.bazel
@@ -38,5 +38,6 @@ ts_library(
     ),
     deps = [
         "@npm//@octokit/webhooks-types",
+        "@npm//font-color-contrast",
     ],
 )
diff --git a/apps/shared/models/pull-request.ts b/apps/shared/models/pull-request.ts
index c7acf7642..b2dfb3406 100644
--- a/apps/shared/models/pull-request.ts
+++ b/apps/shared/models/pull-request.ts
@@ -72,8 +72,12 @@ export class PullRequest extends GithubBaseModel<FirestorePullRequest> {
     this.milestone = data.milestone as any;
     this.assignees = data.assignees as any;
     this.commit = data.commit;
-    User.getByReference(data.user).then((u) => (this.user = u));
-    Promise.all(data.labels.map((l) => Label.getByReference(l))).then((l) => (this.labels = l));
+
+    // All asyncronous data fields should be awaited together.
+    await Promise.all([
+      User.getByReference(data.user).then((u) => (this.user = u)),
+      Promise.all(data.labels.map((l) => Label.getByReference(l))).then((l) => (this.labels = l)),
+    ]);
   }
 
   static override githubHelpers: GithubHelperFunctions<