diff --git a/src/mergify.js b/src/mergify.js index 29e14b3..ad72dde 100644 --- a/src/mergify.js +++ b/src/mergify.js @@ -9,6 +9,21 @@ // @grant none // ==/UserScript== +const LOGO_SVG = ` + + + + + + + + + + + + +` + function postCommand(command){ var input = document.querySelector("#new_comment_field") input.removeAttribute('disabled') @@ -30,42 +45,39 @@ function buildBtn(command) { return element } -function buildDetailItem () { +function getPullRequestData() { + var url = new URL(document.location.href) + var parts = url.pathname.split("/") + return { + org: parts[1], + repo: parts[2], + pull: parts[4] + } +} + +function getEventLogLink() { + var data = getPullRequestData() + return `https://dashboard.mergify.com/event-logs?login=${data.org}&repository=${data.repo}&pullRequestNumber=${data.pull}` +} + +function getMergeQueueLink() { + var data = getPullRequestData() + return `https://dashboard.mergify.com/queues?login=${data.org}&repository=${data.repo}&branch=main` +} + +function buildMergifySectionForClassicMergeBox () { var icon = document.createElement("div"); icon.className = "branch-action-item-icon" - icon.innerHTML = ` - - - - - - - - - - - - -` + icon.innerHTML = LOGO_SVG var title = document.createElement("div") title.innerHTML = '

Mergify

' - - - const url = new URL(document.location.href) - var parts = url.pathname.split("/") - var org = parts[1] - var repo = parts[2] - var pull = parts[4] - var eventlogLink = `https://dashboard.mergify.com/event-logs?login=${org}&repository=${repo}&pullRequestNumber=${pull}` - var mergequeueLink = `https://dashboard.mergify.com/queues?login=${org}&repository=${repo}&branch=main` - var headline = document.createElement("span") headline.className = "status-meta" headline.innerHTML = ` This pull request is managed by Mergify.
- View merge queue — - View event logs of the pull request. + View merge queue — + View event logs of the pull request. `; var btnbox = document.createElement("div"); @@ -90,13 +102,139 @@ function buildDetailItem () { return details; } +function buildLogoContainer() { + //
+ var container = document.createElement("div") + container.className = "mr-2 flex-shrink-0" + + //
+ var container2 = document.createElement("div") + container2.setAttribute("overflow", "hidden") + container2.setAttribute("size", "32") + container2.className = "Box-sc-g0xbh4-0 iAmUFw" + container.appendChild(container2) + + //
+ var container3 = document.createElement("div") + container3.setAttribute("display", "flex") + container3.setAttribute("size", "32") + container3.className = "Box-sc-g0xbh4-0 jneZjk" + container3.innerHTML = LOGO_SVG + container2.appendChild(container3) + + return container +} + +function buildTitleContainer () { + var container = document.createElement("div") + container.className = "flex-1" + + var title = document.createElement("h3") + title.className = "Box-sc-g0xbh4-0 isSOdJ prc-Heading-Heading-6CmGO" + title.textContent = "Mergify" + container.appendChild(title) + + var subtitle = document.createElement("p") + subtitle.className = "fgColor-muted mb-0" + subtitle.textContent = "This pull request is managed by Mergify." + container.appendChild(subtitle) + + var mergeQueueLink = document.createElement("p") + mergeQueueLink.className = "fgColor-muted mb-0" + mergeQueueLink.innerHTML = `View merge queue` + container.appendChild(mergeQueueLink) + + var eventLogLink = document.createElement("p") + eventLogLink.className = "fgColor-muted mb-0" + eventLogLink.innerHTML = `View event logs of the pull request` + container.appendChild(eventLogLink) + + return container +} + +function buildButton(command) { + var container = document.createElement("div") + container.className = "prc-ButtonGroup-ButtonGroup-vcMeG" + + var button = document.createElement("button") + button.setAttribute("aria-disabled", "false") + button.setAttribute("type", "button") + button.className = "prc-Button-ButtonBase-c50BI flex-1" + button.setAttribute("data-loading", "false") + button.setAttribute("data-no-visuals", "true") + button.setAttribute("data-size", "small") + button.setAttribute("data-variant", "default") + button.setAttribute("aria-describedby", ":r1o:-loading-announcement") + button.onclick = () => postCommand(command) + var label = command.charAt(0).toUpperCase() + command.slice(1) + button.innerHTML = ` + ${label} + ` + container.appendChild(button) + + return container +} + +function buildTitleAndButtonsContainer() { + var container = document.createElement("div") + container.className = "d-flex flex-1 flex-column flex-sm-row gap-2" + + container.appendChild(buildTitleContainer()) + container.appendChild(buildBtn("queue")) + container.appendChild(buildBtn("requeue")) + container.appendChild(buildBtn("dequeue")) + container.appendChild(buildBtn("refresh")) + container.appendChild(buildBtn("rebase")) + container.appendChild(buildBtn("update")) + + return container +} + +function buildMergifySectionForNewMergeBox () { + var section = document.createElement("section") + section.className = "border-bottom borderColor-muted" + section.setAttribute("aria-label", "Mergify") + + var container1 = document.createElement("div") + container1.className = "d-flex flex-column width-full overflow-hidden" + section.appendChild(container1) + + container2 = document.createElement("div") + container2.className = "MergeBoxSectionHeader-module__wrapper--f99Ts flex-column flex-sm-row flex-items-center flex-sm-items-start flex-justify-between" + container1.appendChild(container2) + + var container3 = document.createElement("div") + container3.className = "d-flex width-full" + container2.appendChild(container3) + + container3.appendChild(buildLogoContainer()) + container3.appendChild(buildTitleAndButtonsContainer()) + + return section +} + function tryInject() { - var MergifyEnabledOnTheRepo = document.querySelector('a[href="/apps/mergify"]') - var mergify = document.querySelector("#mergify") - var details = document.querySelector(".mergeability-details") - if (MergifyEnabledOnTheRepo && details && !mergify) { - details.insertBefore(buildDetailItem(), details.firstChild) + var isMergifyEnabledOnTheRepo = document.querySelector('a[href="/apps/mergify"]') + if (!isMergifyEnabledOnTheRepo) { + return + } + + var isMergifySectionInjected = document.querySelector("#mergify") + if (isMergifySectionInjected) { + return + } + + var detailSection = document.querySelector(".mergeability-details") + if (detailSection) { + // Classic merge box + detailSection.insertBefore(buildMergifySectionForClassicMergeBox(), detailSection.firstChild) + } else { + // New merge box + var detailSection = document.querySelector("div.border:nth-child(2)") + if (detailSection) { + detailSection.insertBefore(buildMergifySectionForNewMergeBox(), detailSection.firstChild) + } } }