Added PR labels to the PR list

github_list_own_prs_in_repo.js

@@ -23,7 +23,7 @@
                 "Content-Type": "application/json",
                 "Authorization": `token ${GITHUB_AUTH}`
             },
-            "body": "{\"query\":\"{\\n  user(login: \\\"" + GITHUB_USERNAME + "\\\") {\\n    pullRequests(first: 100, states: OPEN, baseRefName:\\\"master\\\") {\\n      totalCount\\n      nodes {\\n        createdAt\\n        number\\n        title\\n        mergeable\\n        url\\n        commits(last:1) {\\n          nodes {\\n            commit {\\n              statusCheckRollup{\\n                state\\n              }\\n            }\\n          }\\n        }\\n        baseRefName\\n        headRefName\\n        repository{\\n          nameWithOwner\\n        }\\n      }\\n      pageInfo {\\n        hasNextPage\\n        endCursor\\n      }\\n    }\\n  }\\n}\"}"
+            "body": "{\"query\":\"{\\n  user(login: \\\"" + GITHUB_USERNAME + "\\\") {\\n    pullRequests(first: 100, states: OPEN, baseRefName:\\\"master\\\") {\\n      totalCount\\n      nodes {\\n        createdAt\\n        number\\n        title\\n        mergeable\\n        url\\n        labels(first: 10){\\n          nodes{\\n            color\\n            description\\n            name\\n            \\n          }\\n        }\\n        commits(last:1) {\\n          nodes {\\n            commit {\\n              statusCheckRollup{\\n                state\\n              }\\n            }\\n          }\\n        }\\n        baseRefName\\n        headRefName\\n        repository{\\n          nameWithOwner\\n        }\\n      }\\n      pageInfo {\\n        hasNextPage\\n        endCursor\\n      }\\n    }\\n  }\\n}\"}"
         });
         const payload = await response.json();
         const prs = payload.data.user.pullRequests.nodes.filter(pr => {
@@ -66,6 +66,19 @@
             window.open(pr.url, '_blank');
         }
         div.className = "btn d-sm-flex Box mb-2 Box-body color-bg-secondary";
+        const lblElements = pr.labels.nodes.reduce((elements, lbl) => {
+            const colors = HexToRgbHsl(lbl.color);
+            return `${elements}
+            <a title="${pr.description}" data-name="${lbl.name}" style="--label-r:${colors.r};--label-g:${colors.g};--label-b:${colors.b};--label-h:${colors.h};--label-s:${colors.s};--label-l:${colors.l};" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mr-1">
+                <span class="css-truncate css-truncate-target width-fit">${lbl.name}</span>
+            </a> 
+            `
+        }, '');
+        const lblInnerHtml = `
+        <div class="js-issue-labels flex-wrap">
+        ${lblElements}
+        </div>
+        `
         div.innerHTML = `
 <div class="d-flex flex-auto">
     <div class="flex-shrink-0 mr-2" >
@@ -76,6 +89,9 @@
     <p style="padding-top:5px" class="mb-0">
         ${pr.title}
     </p>
+    <div class="flex-auto"></div>
+    ${lblInnerHtml}
+    <div class="flex-auto"></div>
 </div>
 `;
         return div;
@@ -84,5 +100,47 @@
     function generatePrItemId(prNumber) {
         return `PR-${prNumber}`;
     }
+    function HexToRgbHsl(_hex) {
+        let hex = _hex.replace(/#/g, '');
+        if (hex.length === 3) {
+            hex = hex.split('').map(function (hex) {
+                return hex + hex;
+            }).join('');
+        }
+        const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex);
+        if (result) {
+            const r = parseInt(result[1], 16);
+            const g = parseInt(result[2], 16);
+            const b = parseInt(result[3], 16);
+            const r225 = r / 225;
+            const g225 = g / 225;
+            const b225 = b / 225;
+            const min = Math.min(r / 225, g / 225, b / 225);
+            const max = Math.max(r / 225, g / 225, b / 225);
+            const delta = max - min;
+            let h = 0, s = 0, l = 0;
+            if (max == min) {
+                h = 0;
+            } else if (r225 == max) {
+                h = (g225 - b225) / delta;
+            } else if (g225 == max) {
+                h = 2 + (b225 - r225) / delta;
+            } else if (b225 == max) {
+                h = 4 + (r225 - g225) / delta;
+            }
+            h = Math.min(h * 60, 360);
+            if (h < 0) h += 360;
+            l = (min + max) / 2;
+            if (max == min) s = 0;
+            else if (l <= 0.5) s = delta / (max + min);
+            else s = delta / (2 - max - min);
+            h = Math.round(h);
+            s = Math.round(s * 100);
+            l = Math.round(l * 100);
+            return { r, g, b, h, s, l };
+        } else {
+            return {};
+        }
+    }
 })();