Filter environment variables by scope
Proposal
Please do provide a filter to group environment variables by scope. When a project grows larger in scale, the current UI becomes unbearable.
For reference, I've been making a bookmarket for myself:
const table = document.querySelector('table[data-qa-selector="ci_variable_table_content"]');
const cells = table.querySelectorAll('td[data-label="Environments"]');
const envs = Array.from(cells).map(cell => cell.textContent).filter((e, i, a) => a.indexOf(e) === i);
const div = document.createElement('div');
div.style.display = 'flex';
div.style.alignItems = 'baseline';
div.style.gap = '1rem';
div.style.margin = '1rem 0 2rem';
const label = document.createElement('label');
label.textContent = 'Environment';
const select = document.createElement('select');
select.className = "gl-form-select custom-select";
envs.forEach(env => {
const option = document.createElement('option')
option.value = env
option.textContent = env
select.appendChild(option)
});
div.appendChild(label);
div.appendChild(select);
table.parentNode.insertBefore(div, table);
select.onchange = (e) => {
Array.from(cells).forEach(cell => cell.closest('tr').style.display = 'none')
Array.from(cells)
.filter(cell => cell.textContent === e.target.value)
.forEach(cell => cell.closest('tr').style.display = '')
};
Which renders like this:
It should help you getting started
Edited by Julien Barbay