feat(ui): add yaml syntax highlighting to dynamic proxy configs and file mounts

This commit is contained in:
Andras Bacsai
2026-10-12 14:31:37 +02:00
parent b13ecb0542
commit 12b35957eb
5 changed files with 9 additions and 7 deletions
@@ -372,6 +372,7 @@ class FileStorage extends Component
return view('livewire.project.service.file-storage', [
'deletionCheckboxes' => $deletionCheckboxes,
'deletionActions' => $deletionActions,
'isYamlFile' => str($this->fileStorage->fs_path)->lower()->endsWith(['.yml', '.yaml']),
]);
}
}
@@ -87,7 +87,7 @@
}
@endif
const editor = monaco.editor.create($refs.monacoEditorElement, {
value: monacoContent,
value: monacoContent ?? '',
theme: document.documentElement.classList.contains('dark') ? 'coolify-dark' : 'vs',
wordWrap: 'on',
readOnly: '{{ $readonly ?? false }}',
@@ -138,8 +138,8 @@
@endif
$watch('monacoContent', value => {
if (editor.getValue() !== value) {
editor.setValue(value);
if (editor.getValue() !== (value ?? '')) {
editor.setValue(value ?? '');
}
});
@@ -31,7 +31,7 @@
<div class="w-full" @if ($monacoRows > 0) style="--editor-height: {{ $monacoRows * 23 + 38 }}px" @endif>
<x-forms.monaco-editor id="{{ $modelBinding }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
name="{{ $modelBinding }}" model="{{ $value ?? $modelBinding }}" wire:model="{{ $value ?? $modelBinding }}"
readonly="{{ $readonly }}" label="dockerfile" autofocus="{{ $autofocus }}" />
readonly="{{ $readonly || $disabled }}" label="dockerfile" autofocus="{{ $autofocus }}" />
</div>
@else
@if ($type === 'password')
@@ -108,7 +108,7 @@
<x-forms.textarea
label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
helper="The content shown may be outdated. Click 'Load from server' to fetch the latest version."
rows="20" id="content"
rows="20" id="content" :useMonacoEditor="$isYamlFile" monacoEditorLanguage="yaml"
readonly="{{ $fileStorage->is_based_on_git || $fileStorage->is_binary || $fileStorage->is_too_large }}"></x-forms.textarea>
@else
@if (data_get($resource, 'settings.is_preserve_repository_enabled'))
@@ -141,7 +141,7 @@
<x-forms.textarea
label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
helper="The content shown may be outdated. Click 'Load from server' to fetch the latest version."
rows="20" id="content" disabled></x-forms.textarea>
rows="20" id="content" :useMonacoEditor="$isYamlFile" monacoEditorLanguage="yaml" disabled></x-forms.textarea>
@else
<x-callout type="info" title="Hidden (only admins can view)">
The file content can contain secrets.
@@ -1,6 +1,7 @@
<form wire:submit.prevent="addDynamicConfiguration" class="flex flex-col w-full gap-4">
<x-forms.input canGate="update" :canResource="$server" id="fileName" label="Filename" required />
<x-forms.textarea canGate="update" :canResource="$server" allowTab useMonacoEditor id="value" label="Configuration"
<x-forms.textarea canGate="update" :canResource="$server" allowTab useMonacoEditor
monacoEditorLanguage="{{ $server->proxyType() === \App\Enums\ProxyTypes::TRAEFIK->value ? 'yaml' : '' }}" id="value" label="Configuration"
required rows="20" />
<x-forms.button canGate="update" :canResource="$server" type="submit" @click="slideOverOpen=false">Save</x-forms.button>
</form>