Fix K2 for new GitHub UI

CHANGELOG.md

@@ -1,3 +1,7 @@
+#1.4.0
+- Updated the extension to work with new GitHub UI
+- Updated the extension to work with GitHub's new PR merge experience
+
 #1.3.74
 - Moved the previous query string params to Onyx
 

assets/manifest-firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
 
   "name": "K2 for GitHub",
-  "version": "1.3.74",
+  "version": "1.4.0",
   "description": "Manage your Kernel Scheduling from directly inside GitHub",
 
   "browser_specific_settings": {

assets/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
 
   "name": "K2 for GitHub",
-  "version": "1.3.74",
+  "version": "1.4.0",
   "description": "Manage your Kernel Scheduling from directly inside GitHub",
 
   "icons": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "k2-extension",
-  "version": "1.3.74",
+  "version": "1.4.0",
   "description": "A Chrome Extension for Kernel Schedule",
   "private": true,
   "scripts": {

src/js/lib/pages/github/_base.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 /**
  * This class is to be extended by each of the distinct types of webpages that the extension works on
  * @returns {Object}
@@ -47,11 +45,11 @@ export default function () {
     Page.setup = function () {};
 
     Page.getRepoOwner = function () {
-        return $('.author a span').text();
+        return document.querySelectorAll('.AppHeader-context-item-label.Truncate-text')[0].textContent.trim();
     };
 
     Page.getRepo = function () {
-        return $('.js-current-repository').text();
+        return document.querySelectorAll('.AppHeader-context-item-label.Truncate-text')[1].textContent.trim();
     };
 
     return Page;

src/js/lib/pages/github/issue.js

@@ -13,12 +13,12 @@ import * as API from '../../api';
 
 let clearErrorTimeoutID;
 function catchError(e) {
-    $('.gh-header-actions .k2-element').remove();
-    $('.gh-header-actions').append('<span class="alert k2-element">OOPS!</span>');
+    $('div[data-component="PH_Actions"] .k2-element').remove();
+    $('.div[data-component="PH_Actions"]').append('<span class="alert k2-element">OOPS!</span>');
     console.error(e);
     clearTimeout(clearErrorTimeoutID);
     clearErrorTimeoutID = setTimeout(() => {
-        $('.gh-header-actions .k2-element').remove();
+        $('.div[data-component="PH_Actions"] .k2-element').remove();
     }, 30000);
 }
 
@@ -43,7 +43,7 @@ const copyReviewerChecklist = (e) => {
 const renderCopyChecklistButton = () => {
     // Look through all the comments on the page to find one that has the template for the copy/paste checklist button
     // eslint-disable-next-line rulesdir/prefer-underscore-method
-    $('.js-comment-body').each((i, el) => {
+    $('.markdown-body > p').each((i, el) => {
         const commentHtml = $(el).html();
 
         // When the button template is found, replace it with an HTML button and then put that back into the DOM so someone can click on it
@@ -107,24 +107,24 @@ function replaceOwner(oldOwner, newOwner) {
  */
 const refreshAssignees = () => {
     // Always start by erasing whatever was drawn before (so it always starts from a clean slate)
-    $('.js-issue-assignees .k2-element').remove();
+    $('div[data-testid="sidebar-section"] > .k2-element').remove();
 
     // Check if there is an owner for the issue
-    const ghDescription = $('.comment-body').text();
+    const ghDescription = $('.markdown-body').first().text();
     const regexResult = ghDescription.match(/Current Issue Owner:\s@(?<owner>\S+)/i);
     const currentOwner = regexResult && regexResult.groups && regexResult.groups.owner;
 
     // Add buttons to each assignee
-    $('.js-issue-assignees > p > span').each((i, el) => {
-        const assignee = $(el).find('.assignee span').text();
+    $('div[data-testid="issue-assignees"]').each((i, el) => {
+        const assignee = $(el).text();
         if (assignee === currentOwner) {
-            $(el).append(`
+            $(el).closest('li').append(`
                 <button type="button" class="Button flex-md-order-2 m-0 owner k2-element k2-button k2-button-remove-owner" data-owner="${currentOwner}">
                     ★
                 </button>
             `);
         } else {
-            $(el).append(`
+            $(el).closest('li').append(`
                 <button type="button" class="Button flex-md-order-2 m-0 k2-element k2-button k2-button-make-owner" data-owner="${assignee}">
                     ☆
                 </button>
@@ -156,7 +156,7 @@ const refreshAssignees = () => {
 const refreshPicker = function () {
     // Add our wrappers to the DOM which all the React components will be rendered into
     if (!$('.k2picker-wrapper').length) {
-        $('.js-issue-labels').after(sidebarWrapperHTML);
+        $('div[data-testid="issue-viewer-metadata-pane"] > :nth-child(3)').after(sidebarWrapperHTML);
     }
 
     new K2picker().draw();
@@ -197,7 +197,7 @@ export default function () {
             if (!$('.k2picker-wrapper').length) {
                 refreshPicker();
             }
-            if (!$('.js-issue-assignees .k2-element').length) {
+            if (!$('div[data-testid="issue-viewer-metadata-pane"] > :nth-child(2) .k2-element').length) {
                 refreshAssignees();
             }
         }, 1000);

src/js/lib/pages/github/pr.js

@@ -39,7 +39,7 @@ const copyReviewerChecklist = (e) => {
 const renderCopyChecklistButton = () => {
     // Look through all the comments on the page to find one that has the template for the copy/paste checklist button
     // eslint-disable-next-line rulesdir/prefer-underscore-method
-    $('.js-comment-body').each((i, el) => {
+    $('.markdown-body > p').each((i, el) => {
         const commentHtml = $(el).html();
 
         // When the button template is found, replace it with an HTML button and then put that back into the DOM so someone can click on it
@@ -55,54 +55,106 @@ const renderCopyChecklistButton = () => {
 
 const refreshHold = function () {
     const prTitle = $('.js-issue-title').text();
-    const prAuthor = $('.pull-header-username').text();
+    const prAuthor = $('.gh-header-meta .author').text();
     const getCurrentUser = API.getCurrentUser();
-    const branchName = $('.head-ref').text();
+    const branchName = $('.head-ref span').text();
+
+    const isNewMerge = $('div[data-testid="mergebox-partial"]').length;
+
+    // Classic merge experience
+    if (!isNewMerge) {
+        if (prTitle.toLowerCase().indexOf('[hold') > -1 || prTitle.toLowerCase().indexOf('[wip') > -1) {
+            $('.branch-action') // entire section
+                .removeClass('branch-action-state-clean')
+                .addClass('branch-action-state-dirty');
+            $('.merge-message button') // merge pull request button
+                .removeClass('btn-primary')
+                .attr('disabled', 'disabled');
+            // eslint-disable-next-line rulesdir/prefer-underscore-method
+            $('.branch-action-item').last().find('.completeness-indicator') // Last section
+                .removeClass('completeness-indicator-success')
+                .addClass('completeness-indicator-problem')
+                .end()
+                .find('.status-heading')
+                .text('This pull request has a hold on it and cannot be merged')
+                .end()
+                .find('.status-meta')
+                .html('Remove the HOLD or WIP label from the title of the PR to make it mergeable')
+                .end()
+                .find('.octicon')
+                .removeClass('octicon-check')
+                .addClass('octicon-alert');
+        }
+
+        if (!(branchName.toLowerCase() === 'master' || branchName.toLowerCase() === 'main') && !isSelfMergingAllowed() && getCurrentUser === prAuthor) {
+            $('.branch-action')
+                .removeClass('branch-action-state-clean')
+                .addClass('branch-action-state-dirty');
+            $('.merge-message button')
+                .removeClass('btn-primary')
+                .attr('disabled', 'disabled');
+            // eslint-disable-next-line rulesdir/prefer-underscore-method
+            $('.branch-action-item').last().find('.completeness-indicator')
+                .removeClass('completeness-indicator-success')
+                .addClass('completeness-indicator-problem')
+                .end()
+                .find('.status-heading')
+                .text('You cannot merge your own PR.')
+                .end()
+                .find('.status-meta')
+                .html('I\'m sorry Dave, I\'m afraid you can\'t merge your own PR')
+                .end()
+                .find('.octicon')
+                .removeClass('octicon-check')
+                .addClass('octicon-alert');
+        }
+        return;
+    }
 
     if (prTitle.toLowerCase().indexOf('[hold') > -1 || prTitle.toLowerCase().indexOf('[wip') > -1) {
-        $('.branch-action')
-            .removeClass('branch-action-state-clean')
-            .addClass('branch-action-state-dirty');
-        $('.merge-message button')
-            .removeClass('btn-primary')
+        $('div[data-testid="mergebox-partial"] > div > div:last-of-type')
+            .removeClass('borderColor-success-emphasis');
+        $('div[data-testid="mergebox-partial"] > div > div > div button').first() // merge pull request button
+            .css({backgroundColor: 'var(--bgColor-neutral-muted)', borderColor: 'var(--bgColor-neutral-muted)'})
             .attr('disabled', 'disabled');
+        $('div[data-testid="mergebox-partial"] > div > div button[data-component="IconButton"]').first()
+            .css({backgroundColor: 'var(--bgColor-neutral-muted)', borderColor: 'var(--bgColor-neutral-muted)'})
+            .attr('disabled', 'disabled');
+        $('div[data-testid="mergebox-partial"] > div > div > div > div > div')
+            .css({borderColor: 'var(--bgColor-neutral-muted)'});
+        $('div[data-testid="mergeability-icon-wrapper"] div').css({backgroundColor: 'var(--bgColor-neutral-emphasis)'});
         // eslint-disable-next-line rulesdir/prefer-underscore-method
-        $('.branch-action-item').last().find('.completeness-indicator')
-            .removeClass('completeness-indicator-success')
-            .addClass('completeness-indicator-problem')
-            .end()
-            .find('.status-heading')
-            .text('This pull request has a hold on it and cannot be merged')
-            .end()
-            .find('.status-meta')
-            .html('Remove the HOLD or WIP label from the title of the PR to make it mergeable')
-            .end()
-            .find('.octicon')
-            .removeClass('octicon-check')
-            .addClass('octicon-alert');
+        $('div[data-testid="mergebox-partial"] > div > div > section:last-of-type svg') // Last section
+            .parent()
+            .removeClass('bgColor-success-emphasis')
+            .css({backgroundColor: 'var(--bgColor-neutral-emphasis)'});
+        $('div[data-testid="mergebox-partial"] > div > div > section:last-of-type h3')
+            .text('This pull request has a hold on it and cannot be merged');
+        $('div[data-testid="mergebox-partial"] > div > div > section:last-of-type p')
+            .html('Remove the HOLD or WIP label from the title of the PR to make it mergeable');
     }
 
     if (!(branchName.toLowerCase() === 'master' || branchName.toLowerCase() === 'main') && !isSelfMergingAllowed() && getCurrentUser === prAuthor) {
-        $('.branch-action')
-            .removeClass('branch-action-state-clean')
-            .addClass('branch-action-state-dirty');
-        $('.merge-message button')
-            .removeClass('btn-primary')
+        $('div[data-testid="mergebox-partial"] > div > div:last-of-type')
+            .removeClass('borderColor-success-emphasis');
+        $('div[data-testid="mergebox-partial"] > div > div > div button').first() // merge pull request button
+            .css({backgroundColor: 'var(--bgColor-neutral-muted)', borderColor: 'var(--bgColor-neutral-muted)'})
+            .attr('disabled', 'disabled');
+        $('div[data-testid="mergebox-partial"] > div > div button[data-component="IconButton"]').first()
+            .css({backgroundColor: 'var(--bgColor-neutral-muted)', borderColor: 'var(--bgColor-neutral-muted)'})
             .attr('disabled', 'disabled');
+        $('div[data-testid="mergebox-partial"] > div > div > div > div > div')
+            .css({borderColor: 'var(--bgColor-neutral-muted)'});
+        $('div[data-testid="mergeability-icon-wrapper"] div').css({backgroundColor: 'var(--bgColor-neutral-emphasis)'});
         // eslint-disable-next-line rulesdir/prefer-underscore-method
-        $('.branch-action-item').last().find('.completeness-indicator')
-            .removeClass('completeness-indicator-success')
-            .addClass('completeness-indicator-problem')
-            .end()
-            .find('.status-heading')
-            .text('You cannot merge your own PR.')
-            .end()
-            .find('.status-meta')
-            .html('I\'m sorry Dave, I\'m afraid you can\'t merge your own PR')
-            .end()
-            .find('.octicon')
-            .removeClass('octicon-check')
-            .addClass('octicon-alert');
+        $('div[data-testid="mergebox-partial"] > div > div > section:last-of-type svg') // Last section
+            .parent()
+            .removeClass('bgColor-success-emphasis')
+            .css({backgroundColor: 'var(--bgColor-neutral-emphasis)'});
+        $('div[data-testid="mergebox-partial"] > div > div > section:last-of-type h3')
+            .text('You cannot merge your own PR');
+        $('div[data-testid="mergebox-partial"] > div > div > section:last-of-type p')
+            .html('It\'s like giving yourself a high-five in public.');
     }
 };