diff --git a/src/app/components/pull-request-view/pull-request.component.html b/src/app/components/pull-request-view/pull-request.component.html
index 9ec7b8b..57bc08c 100644
--- a/src/app/components/pull-request-view/pull-request.component.html
+++ b/src/app/components/pull-request-view/pull-request.component.html
@@ -3,21 +3,23 @@
- {{pullRequest.title}}
+
+ {{pullRequest.title}}
+
- {{pullRequest.state}}
+ [ngClass]="{'conflicts': hasConflicts, 'approved': approved, 'needs-work': needsWork}">
+ {{status}}
{{pullRequest.createdDate | date}}
-
{{pullRequest.fromRef.repository.name}}
+
+ {{pullRequest.fromRef.repository.name}}
+
{{pullRequest.toRef.displayId}}
@@ -27,7 +29,6 @@
-
diff --git a/src/app/components/pull-request-view/pull-request.component.scss b/src/app/components/pull-request-view/pull-request.component.scss
index 6a1511b..6adaf27 100644
--- a/src/app/components/pull-request-view/pull-request.component.scss
+++ b/src/app/components/pull-request-view/pull-request.component.scss
@@ -51,8 +51,8 @@
overflow: hidden;
text-overflow: ellipsis;
- &.conflicts {
- color: rgb(255, 139, 0);
+ &.conflicts, &.needs-work {
+ color: $pr-needs-work-color;
}
}
}
@@ -83,14 +83,14 @@
border-radius: $pr-control-border-radius;
font-weight: 700;
margin-right: $pr-control-distance;
-}
-.pr-approved {
- background-color: $pr-approved-color;
-}
+ &.approved {
+ background-color: $pr-approved-color;
+ }
-.pr-has-conflicts {
- background-color: rgb(255, 139, 0);
+ &.conflicts, &.needs-work {
+ background-color: $pr-needs-work-color;
+ }
}
.comments {
@@ -104,7 +104,7 @@
.to-ref {
border: 1px solid $border-color;
border-radius: $pr-control-border-radius;
- color: orange;
+ color: #ffc682;
background-color: $pr-background-color-hover;
margin-right: $pr-control-distance;
}
diff --git a/src/app/components/pull-request-view/pull-request.component.ts b/src/app/components/pull-request-view/pull-request.component.ts
index 173335c..920ca25 100644
--- a/src/app/components/pull-request-view/pull-request.component.ts
+++ b/src/app/components/pull-request-view/pull-request.component.ts
@@ -1,5 +1,6 @@
import {Component, Input, OnInit} from '@angular/core';
import {PullRequest} from '../../models/models';
+import {PullRequestStatus} from '../../models/enums';
@Component({
selector: 'app-pull-request',
@@ -13,7 +14,9 @@ export class PullRequestComponent implements OnInit {
selfUrl!: string;
approved!: boolean;
+ needsWork!: boolean;
hasConflicts!: boolean;
+ status!: string;
commentsCount!: number;
constructor() {
@@ -24,9 +27,15 @@ export class PullRequestComponent implements OnInit {
this.selfUrl = this.pullRequest.links.self[0].href;
}
- this.approved = this.pullRequest.reviewers.some(r => r.approved);
+ this.needsWork = this.pullRequest.reviewers.some(r => r.status === PullRequestStatus.NeedsWork);
+ this.approved = !this.needsWork && this.pullRequest.reviewers.some(r => r.status === PullRequestStatus.Approved);
this.hasConflicts = this.pullRequest.properties.mergeResult.outcome !== 'CLEAN'; // CONFLICTED
+ this.status = this.needsWork && 'NEEDS WORK'
+ || this.hasConflicts && 'HAS CONFLICTS'
+ || this.approved && 'APPROVED'
+ || 'OPEN';
+
this.commentsCount = this.pullRequest.properties.commentCount || 0;
}
diff --git a/src/variables.scss b/src/variables.scss
index 4a8a5e2..d4e86dc 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -4,5 +4,5 @@ $role-title-color: #ffffffe0;
$pr-control-distance: 5px;
$pr-control-border-radius: 3px;
$pr-approved-color: rgb(0, 135, 90);
-$pr-needs-work-color: rgb(255, 171, 0);
+$pr-needs-work-color: rgb(255, 139, 0);
$pr-background-color-hover: #2D333B;