JUSN/tickte-system
0
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Preview: Block ausserhalb des Formulars, Validierung und Feinschliff

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-09-30 21:08:52 +00:00
1 parent 2de846436b
commit c1818fadcf
6 files changed
+61 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/AssignedProjectCard.jsx
+2 -2
View File
@@ -112,7 +112,7 @@ export default function AssignedProjectCard({ project, onUnassign, showActions =
<StatusBadge label="Provisioning" value={project.provisioningStatus} />
</div>
{showActions && (
{showActions && project.subdomain && (
<div style={{ marginTop: 10 }}>
<button
type="button"
@@ -124,7 +124,7 @@ export default function AssignedProjectCard({ project, onUnassign, showActions =
</button>
{showPreviewBlock && (
<div style={{ marginTop: 8 }}>
<PreviewBlock projectId={project.$id} />
<PreviewBlock key={project.$id} projectId={project.$id} />
</div>
)}
</div>
src/components/PreviewBlock.jsx
+37 -10
View File
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback, useRef } from 'react'
import { MODE_OPTIONS, previewStatus, modeHint } from '../lib/previewView'
import { isValidEnvName, buildEnvPayload, isDevPreview } from '../lib/previewEnv'
import { isValidEnvName, buildEnvPayload, isDevPreview, dotColor, envValueTooLong, MAX_ENV_VARS } from '../lib/previewEnv'
import {
fetchPreview,
setPreviewMode,
@@ -11,7 +11,7 @@ import {
fetchPreviewLog,
} from '../lib/previewApi'
const DOT = { green: '#10b981', yellow: '#f59e0b', red: '#ef4444', grey: '#a0aec0' }
const STATE_OF_COLOR = { green: 'online', yellow: 'building', red: 'failed', grey: 'off' }
const NOT_ACTIVE = 'Preview-Runner ist nicht aktiv'
const logDate = (at) => {
@@ -59,6 +59,7 @@ export default function PreviewBlock({ projectId }) {
if (!alive.current) return
setData(r)
setInactive(false)
setError('')
} catch (err) {
handleError(err)
} finally {
@@ -93,10 +94,17 @@ export default function PreviewBlock({ projectId }) {
setLogFile(runFile)
setLogText('')
if (!runFile) return
run(async () => {
const r = await fetchPreviewLog(projectId, runFile)
setLogText(Array.isArray(r.lines) ? r.lines.join('\n') : String(r.log ?? r.text ?? ''))
setBusy(true)
setError('')
fetchPreviewLog(projectId, runFile)
.then((r) => {
if (alive.current) setLogText(Array.isArray(r.lines) ? r.lines.join('\n') : String(r.log ?? r.text ?? ''))
})
.catch((err) => {
handleError(err)
if (alive.current) setLogText(`Fehler: ${err?.message || 'Protokoll konnte nicht geladen werden'}`)
})
.finally(() => { if (alive.current) setBusy(false) })
}
const addPending = (name, value) => {
@@ -113,6 +121,14 @@ export default function PreviewBlock({ projectId }) {
setEnvError('Bitte einen Wert eingeben.')
return
}
if (envValueTooLong(newValue)) {
setEnvError('Der Wert ist zu lang (max. 4096 Byte).')
return
}
if (!names.includes(newName) && names.length >= MAX_ENV_VARS) {
setEnvError(`Maximal ${MAX_ENV_VARS} Variablen möglich.`)
return
}
setEnvError('')
addPending(newName, newValue)
setNewName('')
@@ -132,6 +148,10 @@ export default function PreviewBlock({ projectId }) {
setEnvError('Bitte einen neuen Wert eingeben.')
return
}
if (envValueTooLong(editValue)) {
setEnvError('Der Wert ist zu lang (max. 4096 Byte).')
return
}
setEnvError('')
addPending(editName, editValue)
setEditName('')
@@ -144,6 +164,13 @@ export default function PreviewBlock({ projectId }) {
setPendingRemove([])
})
const enter = (fn) => (e) => {
if (e.key === 'Enter') {
e.preventDefault()
fn()
}
}
if (loading) return <div className="text-grey" style={{ fontSize: 12 }}>Lädt …</div>
const view = data ? { ...data } : { state: 'off' }
@@ -153,7 +180,7 @@ export default function PreviewBlock({ projectId }) {
const names = [...new Set([...(data?.envNames || []), ...Object.keys(pendingSet)])].filter((n) => !pendingRemove.includes(n))
const dirty = Object.keys(pendingSet).length > 0 || pendingRemove.length > 0
const dev = isDevPreview(data)
const logs = (data?.logs || []).slice(0, 5)
const logs = [...(data?.logs || [])].sort((a, b) => new Date(b.at) - new Date(a.at)).slice(0, 5)
const small = { fontSize: 12 }
@@ -176,7 +203,7 @@ export default function PreviewBlock({ projectId }) {
</div>
{hint && <div className="text-grey" style={{ ...small, marginTop: 4 }}>{hint}</div>}
<div style={{ marginTop: 8, display: 'flex', gap: 6, alignItems: 'flex-start' }}>
<span style={{ width: 10, height: 10, borderRadius: '50%', background: DOT[status.color], display: 'inline-block', flexShrink: 0, marginTop: 4 }} />
<span style={{ width: 10, height: 10, borderRadius: '50%', background: dotColor(STATE_OF_COLOR[status.color]), display: 'inline-block', flexShrink: 0, marginTop: 4 }} />
<span style={{ overflowWrap: 'anywhere' }}>{status.text}</span>
</div>
{data.state === 'failed' && data.error && (
@@ -240,7 +267,7 @@ export default function PreviewBlock({ projectId }) {
<span className="text-grey">•••</span>
{editName === n ? (
<>
<input type="text" className="form-control" style={{ flex: '1 1 120px', minWidth: 0 }} placeholder="Neuer Wert" value={editValue} onChange={(e) => setEditValue(e.target.value)} />
<input className="form-control" style={{ flex: '1 1 120px', minWidth: 0 }} type="password" autoComplete="off" placeholder="Neuer Wert" value={editValue} onKeyDown={enter(handleChange)} onChange={(e) => setEditValue(e.target.value)} />
<button type="button" className="btn btn-sm" onClick={handleChange}>Übernehmen</button>
</>
) : (
@@ -250,8 +277,8 @@ export default function PreviewBlock({ projectId }) {
</div>
))}
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', marginTop: 8 }}>
<input type="text" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="NAME" value={newName} onChange={(e) => setNewName(e.target.value)} />
<input type="text" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="Wert" value={newValue} onChange={(e) => setNewValue(e.target.value)} />
<input type="text" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="NAME" onKeyDown={enter(handleAdd)} value={newName} onChange={(e) => setNewName(e.target.value)} />
<input type="password" autoComplete="off" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="Wert" onKeyDown={enter(handleAdd)} value={newValue} onChange={(e) => setNewValue(e.target.value)} />
<button type="button" className="btn btn-sm" disabled={busy} onClick={handleAdd}>Hinzufügen</button>
</div>
{envError && <div style={{ color: '#f87171', ...small, marginTop: 4 }}>{envError}</div>}
src/lib/previewEnv.js
+5
View File
@@ -22,3 +22,8 @@ export function isDevPreview(p) {
if (p.mode === 'dev') return true
return (p.mode || 'auto') === 'auto' && typeof p.detected === 'string' && p.detected.startsWith('dev:')
}
export const MAX_ENV_VARS = 30
export function envValueTooLong(value) {
return new TextEncoder().encode(String(value ?? '')).length > 4096
}
src/pages/ProjectsPage.jsx
+6 -7
View File
@@ -735,13 +735,6 @@ export default function ProjectsPage() {
</div>
)}
{editForm.projectType !== 'project' && (
<div className="form-group">
<label className="form-label">Preview</label>
<PreviewBlock projectId={editProject.$id} />
</div>
)}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px', marginTop: '16px', flexWrap: 'wrap' }}>
<button
type="button"
@@ -759,6 +752,12 @@ export default function ProjectsPage() {
</button>
</div>
</form>
{editForm.projectType !== 'project' && (
<div className="form-group" style={{ marginTop: 16 }}>
<label className="form-label">Preview</label>
<PreviewBlock key={editProject.$id} projectId={editProject.$id} />
</div>
)}
</div>
</div>
)}
src/pages/ServicesPage.jsx
+3 -1
View File
@@ -58,7 +58,9 @@ export default function ServicesPage() {
<span
title={`Preview: ${p.previewState}`}
style={{ display: 'inline-block', width: 9, height: 9, borderRadius: '50%', background: dotColor(p.previewState), marginRight: 6 }}
/>
>
<span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' }}>{`Preview: ${p.previewState}`}</span>
</span>
)}
{p.projectName || p.repoFullName}
</div>
tests/unit/previewEnv.test.mjs
+8 -1
View File
@@ -2,7 +2,7 @@ import test from 'node:test'
import assert from 'node:assert/strict'
import { loadModule } from './load.mjs'
const { isValidEnvName, buildEnvPayload, dotColor, isDevPreview } = await loadModule('src/lib/previewEnv.js')
const { isValidEnvName, buildEnvPayload, dotColor, isDevPreview, envValueTooLong, MAX_ENV_VARS } = await loadModule('src/lib/previewEnv.js')
test('isValidEnvName', () => {
assert.equal(isValidEnvName('VITE_API_URL'), true)
@@ -35,3 +35,10 @@ test('isDevPreview', () => {
assert.equal(isDevPreview({ mode: 'build', detected: 'dev:npm' }), false)
assert.equal(isDevPreview(null), false)
})
test('envValueTooLong zählt Bytes', () => {
assert.equal(envValueTooLong('a'.repeat(4096)), false)
assert.equal(envValueTooLong('a'.repeat(4097)), true)
assert.equal(envValueTooLong('ä'.repeat(2049)), true)
assert.equal(MAX_ENV_VARS, 30)
})