Generate daily log links from a PR

daily-log-links.js

// What does this do?
//
// It adds two buttons the GitHub PR UI which, when clicked, copy markdown
// footnote links to the users clipboard. Which links?:
// 1. A preview url
// 2. The Jira ticket
// 3. The PR URL

const startingLinkNumber = parseInt(window.prompt('What is the next link number?'));

const prDescription = document.querySelector('.comment-body');
const prDescriptionLinks = prDescription.querySelectorAll('a');

const devboxPreviewLink = [...prDescriptionLinks].find(link => link.innerHTML.includes('preview')).href
const jiraTicketLink = [...prDescriptionLinks].find(link => link.innerHTML.includes('Jira ticket')).href
const prLink = window.location.href

const dailyLogFootnotes = `[${startingLinkNumber}]: ${devboxPreviewLink}\n[${startingLinkNumber + 1}]: ${jiraTicketLink}\n[${startingLinkNumber + 2}]: ${prLink}`;
const dailyLogLinks = `([devbox][${startingLinkNumber}] | [ticket][${startingLinkNumber + 1}] | [PR][${startingLinkNumber + 2}])`;

const copyToClipboard = async (contents) => {
  try {
    await navigator.clipboard.writeText(contents);
    console.log('Content copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}


// Create the copy to clipboard buttons
const parser = new DOMParser();
const sidebarContainer = document.querySelector('#partial-discussion-sidebar');

const newSidebarSection = parser.parseFromString(`
<div class="discussion-sidebar-item">
   <div class="discussion-sidebar-heading text-bold">Daily log links</div>
   <div class="cta-container" style="display:flex; gap: 8px">
      <button class="btn-sm btn btn-block btn-footnotes">
         <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy" style="display: inline-block;">
            <path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
            <path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
         </svg>
         Footnotes
      </button>
      <button class="btn-sm btn btn-block btn-links">
         <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy" style="display: inline-block;">
            <path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
            <path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
         </svg>
         Links
      </button>
   </div>
</div>
`, "text/html").querySelector('.discussion-sidebar-item');

const footnotesButton = newSidebarSection.querySelector('.btn-footnotes');
const linksButton = newSidebarSection.querySelector('.btn-links');


footnotesButton.addEventListener('click', () => copyToClipboard(dailyLogFootnotes));
linksButton.addEventListener('click', () => copyToClipboard(dailyLogLinks));

sidebarContainer.prepend(newSidebarSection);