From a09f4d12d50cf56d7959df8c82303bfcc0de3efa Mon Sep 17 00:00:00 2001
From: Lukas Brabec <lbrabec@redhat.com>
Date: Jul 08 2020 09:57:22 +0000
Subject: ProposedBlocker badge, bug sort (proposed first)


---

diff --git a/src/App.css b/src/App.css
index 72754a8..d4008d8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -199,3 +199,20 @@ html, body {
 .text-muted-more {
   color: #9facb8 !important;
 }
+
+.proposed-blocker {
+
+}
+
+.proposed-blocker .media i.fa {
+  color: #ffc107;
+}
+
+.proposed-blocker a {
+}
+
+.proposed-blocker .comments {
+}
+
+.proposed-blocker small {
+}
diff --git a/src/components/Widget.js b/src/components/Widget.js
index 0093dd9..5bfb820 100644
--- a/src/components/Widget.js
+++ b/src/components/Widget.js
@@ -7,9 +7,10 @@ import { Override } from "./WidgetItemOverride"
 import { Koschei } from "./WidgetItemKoschei"
 import { FTI } from "./WidgetItemFTI"
 import { Orphan } from "./WidgetItemOrphan"
-import { OrphanBadge, FTBadge } from "./WidgetLayout"
+import { OrphanBadge, FTBadge, BBBadge } from "./WidgetLayout"
 import $ from "jquery"
 import * as R from "ramda"
+import * as moment from "moment"
 
 class Widget extends PureComponent {
   componentDidMount() {
@@ -31,7 +32,12 @@ class Widget extends PureComponent {
       orphan,
     } = this.props
 
-    const bugs_items = bugs.map((bug) => <Bug {...bug} key={bug.url} />)
+    const bugs_items = R.sortWith([
+      R.descend(bug => bug.keywords.includes("ProposedBlocker")? 1:0 +
+                       bug.keywords.includes("AcceptedBlocker")? 1:0
+      ),
+      R.descend(bug => moment.utc(bug.reported).unix())
+    ], bugs).map((bug) => <Bug {...bug} key={bug.url} />)
     const updates_items = updates.map((update) => (
       <Update {...update} key={title + update.pretty_name} />
     ))
@@ -54,6 +60,7 @@ class Widget extends PureComponent {
     const fti_src = fti.map(f => R.keys(f.reason).includes("src")).some(R.identity)
     const ftbfs_badge = (fti_src || koschei.length > 0) ? <FTBadge>FTBFS</FTBadge> : null
     const fti_badge = fti_no_src.length > 0 ? <FTBadge>FTI</FTBadge> : null
+    const pb_badge = bugs.map(bug => bug.keywords.includes("ProposedBlocker")).some(R.identity)? <BBBadge color="warning">Proposed Blocker</BBBadge> : null
 
     return (
       <div className="widget card py-3">
@@ -64,6 +71,7 @@ class Widget extends PureComponent {
               {orphan_badge}
               {ftbfs_badge}
               {fti_badge}
+              {pb_badge}
             </h5>
           </div>
           <div>{ownershipIcon}</div>
diff --git a/src/components/WidgetItemBug.js b/src/components/WidgetItemBug.js
index 8c7a6d1..d03aa4a 100644
--- a/src/components/WidgetItemBug.js
+++ b/src/components/WidgetItemBug.js
@@ -27,9 +27,10 @@ const priority_severity_color = (ps) => {
 export class Bug extends PureComponent {
   render() {
     const reported = moment.utc(this.props.reported)
+    const isProposedB = this.props.keywords.includes("ProposedBlocker")
 
     return (
-      <WidgetRow>
+      <WidgetRow className={isProposedB? "proposed-blocker": ""}>
         <WidgetHead type="This is a bug" icon="fa-bug">
           <WidgetTitle fulltitle={this.props.title}>
             <a href={this.props.url}>{this.props.title}</a>
@@ -42,7 +43,7 @@ export class Bug extends PureComponent {
         <WidgetBadge type={badge_color(this.props.status.toLowerCase())}>
           {this.props.status}
         </WidgetBadge>
-        <WidgetIconDetail icon="fa-comment-o" alt="Number of comments" color="text-muted">
+        <WidgetIconDetail icon="fa-comment-o" alt="Number of comments" color="text-muted" className="comments">
           {this.props.comments}
         </WidgetIconDetail>
         {this.props.priority_severity === "unspecified" ? null : (
diff --git a/src/components/WidgetLayout.js b/src/components/WidgetLayout.js
index 5edb294..49d8467 100644
--- a/src/components/WidgetLayout.js
+++ b/src/components/WidgetLayout.js
@@ -5,7 +5,7 @@ import * as moment from "moment"
 export class WidgetRow extends PureComponent {
   render() {
     return (
-      <div className="list-group-item p-1">
+      <div className={`list-group-item p-1 ${this.props.className || ""}`}>
         <div className="row align-items-center no-gutters">{this.props.children}</div>
       </div>
     )
@@ -103,7 +103,7 @@ export class WidgetIconDetail extends PureComponent {
     return (
       <div
         className={
-          "col-auto min-width-3 pl-4 pl-sm-4 pl-md-4 pl-lg-0 font-weight-bold mr-3 " +
+          `col-auto min-width-3 pl-4 pl-sm-4 pl-md-4 pl-lg-0 font-weight-bold mr-3 ${this.props.className || ""} ` +
           this.props.color
         }>
         <div>
@@ -141,6 +141,18 @@ export class FTBadge extends PureComponent {
   }
 }
 
+export class BBBadge extends PureComponent {
+  render() {
+    return (
+      <span className={`ml-3 font-size-09 p-1 font-weight-normal badge badge-${this.props.color}`}>
+        <span className="font-weight-bold">
+          <i className="fas fa-bug"></i>&nbsp;{this.props.children}
+        </span>
+      </span>
+    )
+  }
+}
+
 export class WidgetChevron extends PureComponent {
   render() {
     return (