☰

GitHub - Pull Request - Add Atlantis buttons

Add Atlantis buttons to the footer of your Pull Request

当前为 2024-10-29 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         GitHub - Pull Request - Add Atlantis buttons
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Add Atlantis buttons to the footer of your Pull Request
  6. // @author       You
  7. // @match        https://github.com/Audibene-GMBH/*/pull/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
  9. // @grant        none
  10. // ==/UserScript==
  11. (() => {
  12.     'use strict';
  13.  
  14.     let interval
  15.  
  16.     const addElements = () => {
  17.         var ctas = document.querySelector('#partial-new-comment-form-actions')
  18.  
  19.         document.body.querySelectorAll('div[x-data-n8="true"]')?.forEach((el) => ctas.removeChild(el))
  20.  
  21.         var container = document.createElement('div')
  22.  
  23.         container.setAttribute('x-data-n8', true)
  24.         container.classList.add(...'d-flex'.split(' '))
  25.         ctas.prepend(container)
  26.  
  27.         const toggle = createToggle()
  28.  
  29.         toggle.addEventListener('change', (e) => {
  30.           const actionText = toggle.checked ? 'apply' : 'plan'
  31.  
  32.           if (!document.querySelector('#new_comment_field').value) {
  33.               return
  34.           }
  35.  
  36.           document.querySelector('#new_comment_field').value = document.querySelector('#new_comment_field').value.replace(/(apply|plan)/gmi, actionText)
  37.  
  38.           setTimeout(() => Array.from(document.querySelectorAll('.btn-primary.btn')).find(btn => btn.innerText === 'Comment')?.removeAttribute('disabled'), 50)
  39.         })
  40.  
  41.         var addButton = (name, env, rightPad = 0) => {
  42.             var newButton = document.createElement('button')
  43.  
  44.             newButton.setAttribute('x-data-n8', true)
  45.             newButton.setAttribute('x-data-n8-name', name)
  46.             newButton.classList.add(...'btn js-quick-submit-alternative js-comment-and-button'.split(' '))
  47.             newButton.style.marginRight = rightPad ? `${rightPad}px` : undefined
  48.             newButton.type = 'button'
  49.             container.parentNode.parentNode.disabled = true
  50.             container.append(newButton)
  51.             setTimeout(() => { newButton.innerText = `${name}` }, 0)
  52.             newButton.addEventListener('click', (e) => {
  53.                 e.preventDefault()
  54.                 newButton.setAttribute('disabled', true)
  55.                 document.querySelector('#new_comment_field').value = `atlantis ${toggle.checked ? 'apply' : 'plan'} -p ${env}`
  56.                 setTimeout(() => { newButton.removeAttribute('disabled') }, 1_000)
  57.                 Array.from(document.querySelectorAll('.btn-primary.btn')).find(btn => btn.innerText === 'Comment')?.removeAttribute('disabled')
  58.             })
  59.         }
  60.  
  61.         document.querySelector('#new_comment_field').addEventListener('keyup', () => {
  62.             [...container.children].forEach((el) => {
  63.                 el.innerText = el.getAttribute('x-data-n8-name')
  64.             })
  65.         })
  66.  
  67.         addButton('TST', 'infrastructure-eu-central-1-testing', 5)
  68.         addButton('STG', 'infrastructure-eu-central-1-staging', 5)
  69.         addButton('PRD [NA]', 'infrastructure-us-east-1-production', 5)
  70.         addButton('PRD [EU]', 'infrastructure-eu-central-1-production', 5)
  71.  
  72.         container.append(toggle)
  73.  
  74.         clearInterval(interval);
  75.     }
  76.  
  77.     interval = setInterval(addElements, 500)
  78. })()
  79.  
  80. function createToggle(handler) {
  81.     const toggle = document.createElement('input')
  82.     const toggleClassName = `toggle-n8`
  83.     const styleId = 'toggle-n8'
  84.  
  85.     if (!document.querySelector(`style#${styleId}`)) {
  86.         const style = document.createElement('style')
  87.  
  88.         style.id = styleId
  89.  
  90.         style.textContent = `
  91.           .${toggleClassName} {
  92.             appearance: none;
  93.             background-color: #707070;
  94.             border-radius: 1.5em;
  95.             border: none;
  96.             box-sizing: content-box;
  97.             cursor: pointer;
  98.             display: inline-block;
  99.             height: 2em;
  100.             overflow: hidden;
  101.             padding: 0.2em;
  102.             position: relative;
  103.             transition: background ease 0.3s;
  104.             width: 6em;
  105.  
  106.             &:before {
  107.               content: "apply  plan";
  108.               display: block;
  109.               position: absolute;
  110.               z-index: 2;
  111.               width: 2em;
  112.               height: 2em;
  113.               font-family: system-ui;
  114.               font-size: 1em;
  115.               line-height: 2em;
  116.               font-weight: 500;
  117.               text-transform: uppercase;
  118.               text-indent: -3.5em;
  119.               word-spacing: 2.55em;
  120.               text-shadow: -1px -1px rgba(0,0,0,0.15);
  121.               white-space: nowrap;
  122.               background: #fff;
  123.               color: #fff;
  124.               border-radius: 1.5em;
  125.               transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
  126.             }
  127.  
  128.             &:checked {
  129.               background-color: red;
  130.             }
  131.  
  132.             &:checked:before {
  133.               transform: translateX(4em);
  134.             }
  135.           }
  136.         `
  137.  
  138.         document.body.append(style)
  139.     }
  140.  
  141.     toggle.type = 'checkbox'
  142.     toggle.classList.add(toggleClassName)
  143.  
  144.     return toggle
  145. }