Skip to content

Feature/expanable settings #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tmseidel merged 2 commits into from
May 24, 2026
Merged

Feature/expanable settings #170

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b1c2ec
feat(ui): Added expandable/collapsable sections
tmseidel May 23, 2026
385f141
Merge remote-tracking branch 'origin/feature/configure-e2e-pr-workflo…
tmseidel May 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 132 additions & 25 deletions src/main/resources/templates/system-settings/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,41 @@

<div class="d-flex justify-content-between align-items-center mb-4">
<h2><i class="bi bi-gear"></i> System settings</h2>
<div>
<button type="button" class="btn btn-outline-secondary btn-sm me-2" id="expandAllSections">
<i class="bi bi-arrows-expand"></i> Expand all
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" id="collapseAllSections">
<i class="bi bi-arrows-collapse"></i> Collapse all
</button>
</div>
</div>

<style>
.collapsible-card-header { cursor: pointer; }
.collapsible-card-header .section-chevron { transition: transform 0.2s ease-in-out; }
.collapsible-card-header.collapsed .section-chevron { transform: rotate(-90deg); }
</style>

<div class="row g-4">
<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="mb-0">System prompts</h5>
<small class="text-secondary">Prompt sets available to bot configurations.</small>
<div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
data-bs-toggle="collapse" data-bs-target="#section-system-prompts"
role="button" aria-expanded="true" aria-controls="section-system-prompts">
<div class="d-flex align-items-center">
<i class="bi bi-chevron-down section-chevron me-2"></i>
<div>
<h5 class="mb-0">System prompts</h5>
<small class="text-secondary">Prompt sets available to bot configurations.</small>
</div>
</div>
<a th:href="@{/system-settings/system-prompts/new}" class="btn btn-primary btn-sm">
<a th:href="@{/system-settings/system-prompts/new}" class="btn btn-primary btn-sm"
onclick="event.stopPropagation();">
<i class="bi bi-plus-circle"></i> Add
</a>
</div>
<div class="collapse show" id="section-system-prompts">
<div class="card-body">
<div th:if="${#lists.isEmpty(systemPrompts)}" class="text-center py-4">
<i class="bi bi-inbox fs-1 text-secondary"></i>
Expand Down Expand Up @@ -71,20 +92,28 @@ <h5 class="mb-0">System prompts</h5>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="mb-0">MCP configurations</h5>
<small class="text-secondary">Remote MCP server configurations assignable to bots.</small>
<div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
data-bs-toggle="collapse" data-bs-target="#section-mcp-configurations"
role="button" aria-expanded="true" aria-controls="section-mcp-configurations">
<div class="d-flex align-items-center">
<i class="bi bi-chevron-down section-chevron me-2"></i>
<div>
<h5 class="mb-0">MCP configurations</h5>
<small class="text-secondary">Remote MCP server configurations assignable to bots.</small>
</div>
</div>
<a th:href="@{/system-settings/mcp-configurations/new}" class="btn btn-primary btn-sm">
<a th:href="@{/system-settings/mcp-configurations/new}" class="btn btn-primary btn-sm"
onclick="event.stopPropagation();">
<i class="bi bi-plus-circle"></i> Add
</a>
</div>
<div class="collapse show" id="section-mcp-configurations">
<div class="card-body">
<div th:if="${#lists.isEmpty(mcpConfigurations)}" class="text-center py-4">
<i class="bi bi-inbox fs-1 text-secondary"></i>
Expand Down Expand Up @@ -130,20 +159,28 @@ <h5 class="mb-0">MCP configurations</h5>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="mb-0">Tool configurations</h5>
<small class="text-secondary">Whitelists of built-in agent tools (file, context, validation, repository) assignable to bots.</small>
<div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
data-bs-toggle="collapse" data-bs-target="#section-bot-tools"
role="button" aria-expanded="true" aria-controls="section-bot-tools">
<div class="d-flex align-items-center">
<i class="bi bi-chevron-down section-chevron me-2"></i>
<div>
<h5 class="mb-0">Tool configurations</h5>
<small class="text-secondary">Whitelists of built-in agent tools (file, context, validation, repository) assignable to bots.</small>
</div>
</div>
<a th:href="@{/system-settings/bot-tools/new}" class="btn btn-primary btn-sm">
<a th:href="@{/system-settings/bot-tools/new}" class="btn btn-primary btn-sm"
onclick="event.stopPropagation();">
<i class="bi bi-plus-circle"></i> Add
</a>
</div>
<div class="collapse show" id="section-bot-tools">
<div class="card-body">
<div th:if="${#lists.isEmpty(botToolConfigurations)}" class="text-center py-4">
<i class="bi bi-inbox fs-1 text-secondary"></i>
Expand Down Expand Up @@ -198,20 +235,28 @@ <h5 class="mb-0">Tool configurations</h5>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="mb-0">Workflow configurations</h5>
<small class="text-secondary">Named whitelists of PR workflows (review, tests, …) assignable to bots.</small>
<div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
data-bs-toggle="collapse" data-bs-target="#section-workflow-configurations"
role="button" aria-expanded="true" aria-controls="section-workflow-configurations">
<div class="d-flex align-items-center">
<i class="bi bi-chevron-down section-chevron me-2"></i>
<div>
<h5 class="mb-0">Workflow configurations</h5>
<small class="text-secondary">Named whitelists of PR workflows (review, tests, …) assignable to bots.</small>
</div>
</div>
<a th:href="@{/system-settings/workflow-configurations/new}" class="btn btn-primary btn-sm">
<a th:href="@{/system-settings/workflow-configurations/new}" class="btn btn-primary btn-sm"
onclick="event.stopPropagation();">
<i class="bi bi-plus-circle"></i> Add
</a>
</div>
<div class="collapse show" id="section-workflow-configurations">
<div class="card-body">
<div th:if="${#lists.isEmpty(workflowConfigurations)}" class="text-center py-4">
<i class="bi bi-inbox fs-1 text-secondary"></i>
Expand Down Expand Up @@ -266,20 +311,28 @@ <h5 class="mb-0">Workflow configurations</h5>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="mb-0">Deployment targets</h5>
<small class="text-secondary">Per-PR preview environments used by workflows that need a live deployment (E2E tests, smoke checks).</small>
<div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
data-bs-toggle="collapse" data-bs-target="#section-deployment-targets"
role="button" aria-expanded="true" aria-controls="section-deployment-targets">
<div class="d-flex align-items-center">
<i class="bi bi-chevron-down section-chevron me-2"></i>
<div>
<h5 class="mb-0">Deployment targets</h5>
<small class="text-secondary">Per-PR preview environments used by workflows that need a live deployment (E2E tests, smoke checks).</small>
</div>
</div>
<a th:href="@{/system-settings/deployment-targets/new}" class="btn btn-primary btn-sm">
<a th:href="@{/system-settings/deployment-targets/new}" class="btn btn-primary btn-sm"
onclick="event.stopPropagation();">
<i class="bi bi-plus-circle"></i> Add
</a>
</div>
<div class="collapse show" id="section-deployment-targets">
<div class="card-body">
<div th:if="${#lists.isEmpty(deploymentTargets)}" class="text-center py-4">
<i class="bi bi-cloud-slash fs-1 text-secondary"></i>
Expand Down Expand Up @@ -328,10 +381,64 @@ <h5 class="mb-0">Deployment targets</h5>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
(function () {
const STORAGE_KEY = 'systemSettings.collapsedSections';
const loadCollapsed = () => {
try { return new Set(JSON.parse(localStorage.getItem(STORAGE_KEY)) || []); }
catch (e) { return new Set(); }
};
const saveCollapsed = (set) => {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(set))); }
catch (e) { /* ignore */ }
};

const collapsed = loadCollapsed();
const collapses = document.querySelectorAll('[id^="section-"].collapse');

// Apply persisted state before Bootstrap initializes transitions.
collapses.forEach((el) => {
const header = document.querySelector('[data-bs-target="#' + el.id + '"]');
if (collapsed.has(el.id)) {
el.classList.remove('show');
if (header) {
header.classList.add('collapsed');
header.setAttribute('aria-expanded', 'false');
}
}
});

collapses.forEach((el) => {
el.addEventListener('shown.bs.collapse', () => {
collapsed.delete(el.id);
saveCollapsed(collapsed);
});
el.addEventListener('hidden.bs.collapse', () => {
collapsed.add(el.id);
saveCollapsed(collapsed);
});
});

const expandBtn = document.getElementById('expandAllSections');
const collapseBtn = document.getElementById('collapseAllSections');
if (expandBtn) {
expandBtn.addEventListener('click', () => {
collapses.forEach((el) => bootstrap.Collapse.getOrCreateInstance(el).show());
});
}
if (collapseBtn) {
collapseBtn.addEventListener('click', () => {
collapses.forEach((el) => bootstrap.Collapse.getOrCreateInstance(el).hide());
});
}
})();
</script>

</div>
</div>
</body>
Expand Down
Loading