tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-08-17 08:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improve configuration changes modal

Browse Source
This commit is contained in:
ShadowArcanist
2026-05-30 13:16:37 +05:30
parent dd8a0d501d
commit 84eb9d31bb
10 changed files with 426 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/deployment/configuration-diff.blade.php
+54 -7
View File
@@ -4,7 +4,7 @@
])
@php
$changes = collect(data_get($diff, 'changes', []))->filter(fn ($change) => data_get($change, 'key') !== 'domains.custom_labels')->values()->all();
$changes = collect(data_get($diff, 'changes', []))->values()->all();
$count = count($changes);
$requiresBuild = collect($changes)->contains(fn ($change) => data_get($change, 'impact') === 'build');
@endphp
@@ -41,16 +41,63 @@
</div>
<div class="divide-y divide-neutral-300 dark:divide-coolgray-200">
@foreach ($sectionChanges as $change)
@php
$changeKey = (string) data_get($change, 'key');
$expandable = data_get($change, 'expandable', false);
$oldDisplay = (string) data_get($change, 'old_display_value');
$newDisplay = (string) data_get($change, 'new_display_value');
$oldFull = data_get($change, 'old_full_value') ?? $oldDisplay;
$newFull = data_get($change, 'new_full_value') ?? $newDisplay;
$label = (string) data_get($change, 'label');
$labelTruncated = mb_strlen($label) > 20;
$rowExpandable = $expandable || $labelTruncated;
@endphp
<div class="grid grid-cols-[12rem_1fr_1.5rem_1fr] items-start gap-2 px-3 py-1.5 text-neutral-700 dark:text-neutral-300">
<div class="shrink-0 font-medium text-black dark:text-white">
{{ data_get($change, 'label') }}
<div class="min-w-0 shrink-0 font-medium text-black dark:text-white">
@if ($rowExpandable)
<div class="break-words"
:class="expandedRows['{{ $changeKey }}'] ? '' : 'truncate'"
x-text="expandedRows['{{ $changeKey }}'] ? @js($label) : @js((string) str($label)->limit(20))"></div>
@else
{{ $label }}
@endif
</div>
<div class="truncate text-red-700 dark:text-red-400/80" title="{{ data_get($change, 'old_display_value') }}">
{{ data_get($change, 'old_display_value') }}
<div class="min-w-0 text-red-700 dark:text-red-400/80">
@if ($expandable)
<div class="break-words"
:class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
x-text="expandedRows['{{ $changeKey }}'] ? @js($oldFull) : @js($oldDisplay)"></div>
@else
<div class="truncate">{{ $oldDisplay }}</div>
@endif
</div>
<div class="text-center text-neutral-500 dark:text-neutral-400">→</div>
<div class="truncate text-green-700 dark:text-green-500" title="{{ data_get($change, 'new_display_value') }}">
{{ data_get($change, 'new_display_value') }}
<div class="flex min-w-0 items-start gap-1 text-green-700 dark:text-green-500">
<div class="min-w-0 flex-1">
@if ($expandable)
<div class="break-words"
:class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
x-text="expandedRows['{{ $changeKey }}'] ? @js($newFull) : @js($newDisplay)"></div>
@else
<div class="truncate">{{ $newDisplay }}</div>
@endif
</div>
@if ($rowExpandable)
<button type="button"
x-on:click="expandedRows['{{ $changeKey }}'] = ! expandedRows['{{ $changeKey }}']"
:aria-expanded="!! expandedRows['{{ $changeKey }}']"
title="Toggle full value"
class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-neutral-400 transition hover:text-black dark:hover:text-white">
<svg x-show="! expandedRows['{{ $changeKey }}']" class="h-3.5 w-3.5"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M13.28 7.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
</svg>
<svg x-show="expandedRows['{{ $changeKey }}']" x-cloak class="h-3.5 w-3.5"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L5.44 6.5H2.75a.75.75 0 0 0 0 1.5h4.5A.75.75 0 0 0 8 7.25v-4.5a.75.75 0 0 0-1.5 0v2.69L3.28 2.22ZM13.5 2.75a.75.75 0 0 0-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22a.75.75 0 0 0-1.06-1.06L13.5 5.44V2.75ZM3.28 17.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 1 0 1.06 1.06ZM12 12.75c0-.414.336-.75.75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l3.22 3.22a.75.75 0 1 1-1.06 1.06l-3.22-3.22v2.69a.75.75 0 0 1-1.5 0v-4.5Z" clip-rule="evenodd" />
</svg>
</button>
@endif
</div>
</div>
@endforeach