feat: monolithic env var editing with bulk save (#158)
All checks were successful
Check / check (push) Successful in 6s

This PR fixes env var handling by consolidating individual add/edit/delete operations into a single monolithic bulk save.

## Changes

- **Template**: Restored original table-based UI with key/value rows, edit/delete buttons, and add form. Uses Alpine.js to manage the env var list client-side. On form submit, all env vars are collected into a hidden textarea and POSTed as a single bulk request.
- **Handler**: `HandleEnvVarSave` atomically replaces all env vars (DELETE all + INSERT full set).
- **Routes**: Single `POST /apps/{id}/env` endpoint replaces individual env var CRUD routes.
- **Models**: Added `DeleteEnvVarsByAppID` and `FindEnvVarsByAppID` for bulk operations.

closes #156
closes #163

Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de>
Co-authored-by: Jeffrey Paul <sneak@noreply.example.org>
Co-authored-by: user <user@Mac.lan guest wan>
Reviewed-on: #158
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>
This commit was merged in pull request #158.
This commit is contained in:
2026-03-11 12:06:56 +01:00
committed by Jeffrey Paul
parent e1dc865226
commit fd110e69db
7 changed files with 481 additions and 168 deletions

View File

@@ -101,9 +101,10 @@
</div>
<!-- Environment Variables -->
<div class="card p-6 mb-6">
<div class="card p-6 mb-6" x-data="envVarEditor('{{.App.ID}}')">
<h2 class="section-title mb-4">Environment Variables</h2>
{{if .EnvVars}}
{{range .EnvVars}}<span class="env-init hidden" data-key="{{.Key}}" data-value="{{.Value}}"></span>{{end}}
<template x-if="vars.length > 0">
<div class="overflow-x-auto mb-4">
<table class="table">
<thead class="table-header">
@@ -114,47 +115,43 @@
</tr>
</thead>
<tbody class="table-body">
{{range .EnvVars}}
<tr x-data="{ editing: false }">
<template x-if="!editing">
<td class="font-mono font-medium">{{.Key}}</td>
<template x-for="(env, idx) in vars" :key="idx">
<tr>
<template x-if="editIdx !== idx">
<td class="font-mono font-medium" x-text="env.key"></td>
</template>
<template x-if="!editing">
<td class="font-mono text-gray-500">{{.Value}}</td>
<template x-if="editIdx !== idx">
<td class="font-mono text-gray-500" x-text="env.value"></td>
</template>
<template x-if="!editing">
<template x-if="editIdx !== idx">
<td class="text-right">
<button @click="editing = true" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
<form method="POST" action="/apps/{{$.App.ID}}/env-vars/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this environment variable?')" @submit="confirm($event)">
{{ $.CSRFField }}
<button type="submit" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
</form>
<button @click="startEdit(idx)" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
<button @click="removeVar(idx)" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
</td>
</template>
<template x-if="editing">
<template x-if="editIdx === idx">
<td colspan="3">
<form method="POST" action="/apps/{{$.App.ID}}/env-vars/{{.ID}}/edit" class="flex gap-2 items-center">
{{ $.CSRFField }}
<input type="text" name="key" value="{{.Key}}" required class="input flex-1 font-mono text-sm">
<input type="text" name="value" value="{{.Value}}" required class="input flex-1 font-mono text-sm">
<form @submit.prevent="saveEdit(idx)" class="flex gap-2 items-center">
<input type="text" x-model="editKey" required class="input flex-1 font-mono text-sm">
<input type="text" x-model="editVal" required class="input flex-1 font-mono text-sm">
<button type="submit" class="btn-primary text-sm">Save</button>
<button type="button" @click="editing = false" class="text-gray-500 hover:text-gray-700 text-sm">Cancel</button>
<button type="button" @click="editIdx = -1" class="text-gray-500 hover:text-gray-700 text-sm">Cancel</button>
</form>
<p class="text-xs text-amber-600 mt-1">⚠ Container restart needed after env var changes.</p>
</td>
</template>
</tr>
{{end}}
</template>
</tbody>
</table>
</div>
{{end}}
<form method="POST" action="/apps/{{.App.ID}}/env" class="flex flex-col sm:flex-row gap-2">
{{ .CSRFField }}
<input type="text" name="key" placeholder="KEY" required class="input flex-1 font-mono text-sm">
<input type="text" name="value" placeholder="value" required class="input flex-1 font-mono text-sm">
</template>
<form @submit.prevent="addVar($refs.newKey, $refs.newVal)" class="flex flex-col sm:flex-row gap-2">
<input x-ref="newKey" type="text" placeholder="KEY" required class="input flex-1 font-mono text-sm">
<input x-ref="newVal" type="text" placeholder="value" required class="input flex-1 font-mono text-sm">
<button type="submit" class="btn-primary">Add</button>
</form>
<div class="hidden">{{ .CSRFField }}</div>
</div>
<!-- Labels -->