Created
April 8, 2021 07:22
-
-
Save y-nk/def303d75db1d10d71fc267c6f581ed2 to your computer and use it in GitHub Desktop.
Gitlab environment variable filter by scope bookmarklet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| how to use: | |
| 1. preview this page with: http://htmlpreview.github.io/ | |
| 2. drag the link in your bookmarks bar | |
| 3. visit the page https://gitlab.com/xxxx/-/settings/ci_cd | |
| 4. click on the bookmarklet. | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gitlab Environment Grouping bookmarklet</title> | |
| <link rel="stylesheet" href="https://unpkg.com/98.css" /> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| width: 100vw; | |
| height: 100vh; | |
| margin: 0; | |
| background: teal; | |
| line-height: 1.4; | |
| } | |
| body { padding: 10vw; } | |
| h4 { margin: 0; } | |
| h5 { margin-top: .5rem; } | |
| .window-body { padding: 1rem; } | |
| ol { padding: 0 0 0 1rem; } | |
| ol > li { padding-left: .5rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="window" style="max-width: 50vw"> | |
| <div class="title-bar"> | |
| <div class="title-bar-text">A little tool created by @y_nk</div> | |
| </div> | |
| <div class="window-body"> | |
| <h4>Gitlab Environment Grouping bookmarklet</h4> | |
| <h5>A simple hack to help managing environment variables in gitlab!</h5> | |
| <p>How to use:</p> | |
| <ol> | |
| <li>Drag the bookmarklet below in your bookmark bar</li> | |
| <li>Visit your projects CI/CD configuration page on Gitlab</li> | |
| <li>Click on the bookmarklet!</li> | |
| </ol> | |
| <p>The bookmarklet will inject a little piece of javascript to create a select box to filter your environment variables by scope. Voila!</p> | |
| <ul class="tree-view"> | |
| <li><strong>the bookmarklet:</strong></li> | |
| <li><a | |
| href="javascript:(function()%7Bconst%20table%20%3D%20document.querySelector('table%5Bdata-qa-selector%3D%22ci_variable_table_content%22%5D')%3B%0Aconst%20cells%20%3D%20table.querySelectorAll('td%5Bdata-label%3D%22Environments%22%5D')%3B%0Aconst%20envs%20%3D%20Array.from(cells).map(cell%20%3D%3E%20cell.textContent).filter((e%2C%20i%2C%20a)%20%3D%3E%20a.indexOf(e)%20%3D%3D%3D%20i)%3B%0Aconst%20div%20%3D%20document.createElement('div')%3B%0Adiv.style.display%20%3D%20'flex'%3B%0Adiv.style.alignItems%20%3D%20'baseline'%3B%0Adiv.style.gap%20%3D%20'1rem'%3B%0Adiv.style.margin%20%3D%20'1rem%200%202rem'%3B%0Aconst%20label%20%3D%20document.createElement('label')%3B%0Alabel.textContent%20%3D%20'Environment'%3B%0Aconst%20select%20%3D%20document.createElement('select')%3B%0Aselect.className%20%3D%20%22gl-form-select%20custom-select%22%3B%0Aenvs.forEach(env%20%3D%3E%20%7B%0A%20%20const%20option%20%3D%20document.createElement('option')%0A%20%20option.value%20%3D%20env%0A%20%20option.textContent%20%3D%20env%0A%20%20select.appendChild(option)%0A%7D)%3B%0Adiv.appendChild(label)%3B%0Adiv.appendChild(select)%3B%0Atable.parentNode.insertBefore(div%2C%20table)%3B%0Aselect.onchange%20%3D%20(e)%20%3D%3E%20%7B%0A%20%20Array.from(cells).forEach(cell%20%3D%3E%20cell.closest('tr').style.display%20%3D%20'none')%0A%0A%20%20Array.from(cells)%0A%20%20%20%20.filter(cell%20%3D%3E%20cell.textContent%20%3D%3D%3D%20e.target.value)%0A%20%20%20%20.forEach(cell%20%3D%3E%20cell.closest('tr').style.display%20%3D%20'')%0A%7D%3B%7D)()%3B">Github | |
| Env Grouping | |
| </a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment