alexei.dolgolyov
3f6858513f
- Add SSE connection status banner showing when real-time updates are lost (UX-H8, UX-M1) - Add password visibility toggle on login page (UX-H10) - Add dark mode variants to stat card backgrounds (UX-M11) - Add overflow-x-auto to tables for mobile responsiveness (UX-H9) - Add flex-wrap to stage header for mobile overflow (UX-H11) - Fix theme store system preference listener reactivity (UX-M12) - Parallelize registry health checks (UX-L4)
351 lines
14 KiB
Svelte
351 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import type { Stage, StageEnv } from '$lib/types';
|
|
import * as api from '$lib/api';
|
|
import { toasts } from '$lib/stores/toast';
|
|
import { t } from '$lib/i18n';
|
|
import { IconChevronRight, IconPlus, IconEdit, IconTrash, IconCheck, IconX, IconLock, IconLoader } from '$lib/components/icons';
|
|
import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
|
|
import Skeleton from '$lib/components/Skeleton.svelte';
|
|
import EmptyState from '$lib/components/EmptyState.svelte';
|
|
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
|
|
|
let stages = $state<Stage[]>([]);
|
|
let selectedStageId = $state('');
|
|
let envVars = $state<StageEnv[]>([]);
|
|
let projectEnv = $state<Record<string, string>>({});
|
|
let loading = $state(true);
|
|
let envLoading = $state(false);
|
|
let error = $state('');
|
|
|
|
let newKey = $state('');
|
|
let newValue = $state('');
|
|
let newEncrypted = $state(false);
|
|
let saving = $state(false);
|
|
|
|
let editingId = $state('');
|
|
let editKey = $state('');
|
|
let editValue = $state('');
|
|
let editEncrypted = $state(false);
|
|
|
|
let envDeleteTarget = $state<string | null>(null);
|
|
|
|
const projectId = $derived($page.params.id);
|
|
|
|
async function loadProject() {
|
|
loading = true;
|
|
error = '';
|
|
try {
|
|
const detail = await api.getProject(projectId);
|
|
stages = detail.stages ?? [];
|
|
try {
|
|
projectEnv = JSON.parse(detail.project.env || '{}');
|
|
} catch {
|
|
projectEnv = {};
|
|
}
|
|
if (stages.length > 0 && !selectedStageId) {
|
|
selectedStageId = stages[0].id;
|
|
}
|
|
} catch (e) {
|
|
error = e instanceof Error ? e.message : $t('envEditor.loadFailed');
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
async function loadStageEnv(stageId: string) {
|
|
if (!stageId) return;
|
|
envLoading = true;
|
|
try {
|
|
envVars = await api.listStageEnv(projectId, stageId);
|
|
} catch (e) {
|
|
toasts.error(e instanceof Error ? e.message : $t('envEditor.loadEnvFailed'));
|
|
envVars = [];
|
|
} finally {
|
|
envLoading = false;
|
|
}
|
|
}
|
|
|
|
async function handleAdd() {
|
|
if (!newKey.trim() || !selectedStageId) return;
|
|
saving = true;
|
|
try {
|
|
await api.createStageEnv(projectId, selectedStageId, {
|
|
key: newKey.trim(),
|
|
value: newValue,
|
|
encrypted: newEncrypted
|
|
});
|
|
newKey = '';
|
|
newValue = '';
|
|
newEncrypted = false;
|
|
toasts.success($t('envEditor.envAdded'));
|
|
await loadStageEnv(selectedStageId);
|
|
} catch (e) {
|
|
toasts.error(e instanceof Error ? e.message : $t('envEditor.addFailed'));
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
function startEdit(env: StageEnv) {
|
|
editingId = env.id;
|
|
editKey = env.key;
|
|
editValue = env.encrypted ? '' : env.value;
|
|
editEncrypted = env.encrypted;
|
|
}
|
|
|
|
function cancelEdit() {
|
|
editingId = '';
|
|
}
|
|
|
|
async function handleUpdate() {
|
|
if (!editKey.trim()) return;
|
|
saving = true;
|
|
try {
|
|
const data: { key?: string; value?: string; encrypted?: boolean } = {
|
|
key: editKey.trim(),
|
|
encrypted: editEncrypted
|
|
};
|
|
if (editValue) {
|
|
data.value = editValue;
|
|
}
|
|
await api.updateStageEnv(projectId, selectedStageId, editingId, data);
|
|
editingId = '';
|
|
toasts.success($t('envEditor.envUpdated'));
|
|
await loadStageEnv(selectedStageId);
|
|
} catch (e) {
|
|
toasts.error(e instanceof Error ? e.message : $t('envEditor.updateFailed'));
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
async function handleDelete(envId: string) {
|
|
try {
|
|
await api.deleteStageEnv(projectId, selectedStageId, envId);
|
|
toasts.success($t('envEditor.envDeleted'));
|
|
await loadStageEnv(selectedStageId);
|
|
} catch (e) {
|
|
toasts.error(e instanceof Error ? e.message : $t('envEditor.deleteFailed'));
|
|
}
|
|
}
|
|
|
|
function isOverridden(key: string): boolean {
|
|
return envVars.some((e) => e.key === key);
|
|
}
|
|
|
|
$effect(() => {
|
|
void projectId;
|
|
loadProject();
|
|
});
|
|
|
|
$effect(() => {
|
|
if (selectedStageId) {
|
|
loadStageEnv(selectedStageId);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{$t('envEditor.title')} - {$t('app.name')}</title>
|
|
</svelte:head>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Header -->
|
|
<div>
|
|
<div class="flex items-center gap-1.5 text-sm text-[var(--text-tertiary)]">
|
|
<a href="/projects/{projectId}" class="hover:text-[var(--text-link)] transition-colors">{$t('common.project')}</a>
|
|
<IconChevronRight size={14} />
|
|
</div>
|
|
<h1 class="mt-1 text-2xl font-bold text-[var(--text-primary)]">{$t('envEditor.title')}</h1>
|
|
<p class="mt-1 text-sm text-[var(--text-secondary)]">{$t('envEditor.description')}</p>
|
|
</div>
|
|
|
|
{#if loading}
|
|
<div class="space-y-4">
|
|
<Skeleton width="16rem" height="2.5rem" />
|
|
<Skeleton height="12rem" />
|
|
</div>
|
|
{:else if error}
|
|
<div class="rounded-xl border border-[var(--color-danger-light)] bg-[var(--color-danger-light)] p-4">
|
|
<p class="text-sm text-[var(--color-danger)]">{error}</p>
|
|
</div>
|
|
{:else}
|
|
<!-- Stage selector -->
|
|
<div>
|
|
<label for="stage-select" class="block text-sm font-medium text-[var(--text-primary)]">{$t('envEditor.stage')}</label>
|
|
<select
|
|
id="stage-select"
|
|
bind:value={selectedStageId}
|
|
class="mt-1 block w-64 rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-3 py-2 text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-2 focus:ring-[var(--color-brand-500)] focus:outline-none"
|
|
>
|
|
{#each stages as stage (stage.id)}
|
|
<option value={stage.id}>{stage.name}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
{#if stages.length === 0}
|
|
<EmptyState title={$t('envEditor.noStages')} icon="instances" />
|
|
{:else}
|
|
<!-- Project-level env -->
|
|
{#if Object.keys(projectEnv).length > 0}
|
|
<div>
|
|
<h2 class="text-sm font-semibold text-[var(--text-secondary)]">{$t('envEditor.projectDefaults')}</h2>
|
|
<div class="mt-2 overflow-x-auto rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card-hover)]">
|
|
<table class="min-w-full divide-y divide-[var(--border-primary)]">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.key')}</th>
|
|
<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.value')}</th>
|
|
<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.source')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-[var(--border-secondary)]">
|
|
{#each Object.entries(projectEnv) as [key, value] (key)}
|
|
<tr class={isOverridden(key) ? 'opacity-50' : ''}>
|
|
<td class="whitespace-nowrap px-4 py-2.5 font-mono text-sm text-[var(--text-primary)]">{key}</td>
|
|
<td class="px-4 py-2.5 font-mono text-sm text-[var(--text-secondary)]">{value}</td>
|
|
<td class="px-4 py-2.5 text-sm">
|
|
{#if isOverridden(key)}
|
|
<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">{$t('envEditor.overridden')}</span>
|
|
{:else}
|
|
<span class="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">{$t('envEditor.inherited')}</span>
|
|
{/if}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Stage-level overrides -->
|
|
<div>
|
|
<h2 class="text-sm font-semibold text-[var(--text-secondary)]">{$t('envEditor.stageOverrides')}</h2>
|
|
|
|
{#if envLoading}
|
|
<div class="mt-4 flex items-center justify-center gap-2 py-8 text-[var(--text-tertiary)]">
|
|
<IconLoader size={20} />
|
|
<span class="text-sm">{$t('common.loading')}</span>
|
|
</div>
|
|
{:else}
|
|
<div class="mt-2 overflow-x-auto rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)]">
|
|
<table class="min-w-full divide-y divide-[var(--border-primary)]">
|
|
<thead class="bg-[var(--surface-card-hover)]">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.key')}</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.value')}</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.secret')}</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.source')}</th>
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.actions')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-[var(--border-secondary)]">
|
|
{#each envVars as env (env.id)}
|
|
{#if editingId === env.id}
|
|
<tr class="bg-[var(--color-brand-50)]/30">
|
|
<td class="px-4 py-2.5">
|
|
<input type="text" bind:value={editKey} class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
|
|
</td>
|
|
<td class="px-4 py-2.5">
|
|
<input type={editEncrypted ? 'password' : 'text'} bind:value={editValue} placeholder={env.encrypted ? 'Leave empty to keep current' : ''} class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
|
|
</td>
|
|
<td class="px-4 py-2.5">
|
|
<ToggleSwitch bind:checked={editEncrypted} label="Secret" />
|
|
</td>
|
|
<td class="px-4 py-2.5"></td>
|
|
<td class="px-4 py-2.5 text-right">
|
|
<div class="flex items-center justify-end gap-1">
|
|
<button type="button" class="rounded-lg p-1.5 text-emerald-600 hover:bg-emerald-50 transition-colors" disabled={saving} onclick={handleUpdate} title={$t('envEditor.save')}>
|
|
<IconCheck size={16} />
|
|
</button>
|
|
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--surface-card-hover)] transition-colors" onclick={cancelEdit} title={$t('common.cancel')}>
|
|
<IconX size={16} />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{:else}
|
|
<tr class="hover:bg-[var(--surface-card-hover)] transition-colors">
|
|
<td class="whitespace-nowrap px-4 py-2.5 font-mono text-sm text-[var(--text-primary)]">{env.key}</td>
|
|
<td class="px-4 py-2.5 font-mono text-sm text-[var(--text-secondary)]">
|
|
{env.encrypted ? '••••••••' : env.value}
|
|
</td>
|
|
<td class="px-4 py-2.5">
|
|
{#if env.encrypted}
|
|
<span class="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">
|
|
<IconLock size={12} />
|
|
{$t('envEditor.secret')}
|
|
</span>
|
|
{/if}
|
|
</td>
|
|
<td class="px-4 py-2.5 text-sm">
|
|
{#if env.key in projectEnv}
|
|
<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">{$t('envEditor.overridesProject')}</span>
|
|
{:else}
|
|
<span class="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{$t('envEditor.stageOnly')}</span>
|
|
{/if}
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-2.5 text-right">
|
|
<div class="flex items-center justify-end gap-1">
|
|
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-link)] transition-colors" onclick={() => startEdit(env)} title={$t('envEditor.edit')}>
|
|
<IconEdit size={16} />
|
|
</button>
|
|
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-red-50 hover:text-red-600 transition-colors" onclick={() => { envDeleteTarget = env.id; }} title={$t('envEditor.delete')}>
|
|
<IconTrash size={16} />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/if}
|
|
{/each}
|
|
|
|
<!-- Add new row -->
|
|
<tr class="bg-[var(--surface-card-hover)]">
|
|
<td class="px-4 py-2.5">
|
|
<input type="text" bind:value={newKey} placeholder="KEY_NAME" class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
|
|
</td>
|
|
<td class="px-4 py-2.5">
|
|
<input type={newEncrypted ? 'password' : 'text'} bind:value={newValue} placeholder="value" class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
|
|
</td>
|
|
<td class="px-4 py-2.5">
|
|
<ToggleSwitch bind:checked={newEncrypted} label="Secret" />
|
|
</td>
|
|
<td class="px-4 py-2.5"></td>
|
|
<td class="px-4 py-2.5 text-right">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-1 rounded-lg bg-[var(--color-brand-600)] px-3 py-1.5 text-xs font-medium text-white hover:bg-[var(--color-brand-700)] disabled:opacity-50 transition-colors active:animate-press"
|
|
disabled={!newKey.trim() || saving}
|
|
onclick={handleAdd}
|
|
>
|
|
<IconPlus size={14} />
|
|
{saving ? $t('envEditor.adding') : $t('envEditor.add')}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<ConfirmDialog
|
|
open={envDeleteTarget !== null}
|
|
title={$t('envEditor.deleteTitle')}
|
|
message={$t('envEditor.deleteMessage')}
|
|
confirmLabel={$t('common.delete')}
|
|
confirmVariant="danger"
|
|
onconfirm={async () => {
|
|
const envId = envDeleteTarget;
|
|
envDeleteTarget = null;
|
|
if (envId) await handleDelete(envId);
|
|
}}
|
|
oncancel={() => { envDeleteTarget = null; }}
|
|
/>
|