Adds a button to GitHub issues to redirect you to ZenHub

github-to-zenhub-link-v2.js

// ==UserScript==
// @name         GitHub to ZenHub Link
// @namespace    boehs.com
// @include      *://github.com/*/issues/*
// @grant        none
// @run-at       document-ready
// ==/UserScript==

setTimeout(() => {
(() => {
  const regex = /https:\/\/github\.com\/(.+)\/(.+)\/issues\/(\d+)$/;
  const input = window.location.href;
  const match = input.match(regex);
  if (match) {
    const org = match[1];
    const repo = match[2];
    const issueNumber = match[3];
    let workspace = localStorage.getItem('zenhubWorkspace');

    if (!workspace) {
      workspace = prompt("Enter your ZenHub workspace name (e.g. backend-team-abc123):");
      localStorage.setItem('zenhubWorkspace', workspace);
    }

    const url = `https://app.zenhub.com/workspaces/${workspace}/issues/gh/${org}/${repo}/${issueNumber}`;
    const editButtonClasses = document.querySelector("div[data-component='PH_Actions'] div button").className
    const zenhubLinkHtml = `<a style="box-shadow: none; background-color: rgb(79, 87, 249); border-color: rgb(60, 65, 225); color:#fff" href="${url}" class="${editButtonClasses}" target="_blank"><div style="display: flex; align-items: center;"><span>ZenHub</span></div></a>`;
    const actionsDiv = document.querySelector("div[data-component='PH_Actions'] div");
    actionsDiv.insertAdjacentHTML('afterbegin', zenhubLinkHtml);
      
    const zenhubButton = actionsDiv.querySelector('a[href^="https://app.zenhub.com"]');
    zenhubButton.addEventListener('click', (e) => {
      zenhubButton.style.backgroundColor = '#f6f8fa';
      zenhubButton.style.borderColor = '#d0d7de';
      zenhubButton.style.color = '#24292f';
    });

    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.key === 'z') {
        zenhubButton.click()
      }
    });
  }
})()
}, 100);

This is an update to the previous version for the new GitHub Issues UI.