fix(ui): configuration changes modal values, colors and spacing

app/Models/Application.php

@@ -1188,17 +1188,20 @@ class Application extends BaseModel
         $currentSnapshot = $this->deploymentConfigurationSnapshot();
         $lastDeployment = $this->get_last_successful_deployment();
 
-        if ($lastDeployment?->configuration_snapshot) {
-            return app(ConfigurationDiffer::class)->diff($lastDeployment->configuration_snapshot, $currentSnapshot);
+        $previousSnapshot = $lastDeployment?->configuration_snapshot;
+
+        if (! $previousSnapshot) {
+            $oldConfigHash = data_get($this, 'config_hash');
+            $hasLegacyChange = $oldConfigHash === null || $oldConfigHash !== $this->legacyConfigurationHash();
+
+            if (! $hasLegacyChange) {
+                return ConfigurationDiff::unchanged();
+            }
+
+            $previousSnapshot = [];
         }
 
-        $oldConfigHash = data_get($this, 'config_hash');
-
-        if ($oldConfigHash === null) {
-            return ConfigurationDiff::legacy(true);
-        }
-
-        return ConfigurationDiff::legacy($oldConfigHash !== $this->legacyConfigurationHash());
+        return app(ConfigurationDiffer::class)->diff($previousSnapshot, $currentSnapshot);
     }
 
     public function hasPendingDeploymentConfigurationChanges(): bool

app/Services/DeploymentConfiguration/ApplicationConfigurationSnapshot.php

@@ -306,7 +306,7 @@ class ApplicationConfigurationSnapshot
     private function displayValue(mixed $value): string
     {
         if ($value === null) {
-            return 'Not set';
+            return '-';
         }
 
         if (is_bool($value)) {
@@ -323,7 +323,7 @@ class ApplicationConfigurationSnapshot
     private function summarizeText(?string $value): string
     {
         if (blank($value)) {
-            return 'Not set';
+            return '-';
         }
 
         $value = trim((string) $value);

app/Services/DeploymentConfiguration/ConfigurationDiffer.php

@@ -37,8 +37,8 @@ class ConfigurationDiffer
                 'impact' => data_get($item, 'impact', 'redeploy'),
                 'sensitive' => $sensitive,
                 'display_summary' => $displaySummary,
-                'old_display_value' => $sensitive ? ($previous === null ? 'Not set' : 'Set') : data_get($previous, 'display_value', 'Not set'),
-                'new_display_value' => $sensitive ? ($current === null ? 'Removed' : 'Set') : data_get($current, 'display_value', 'Not set'),
+                'old_display_value' => $sensitive ? ($previous === null ? '-' : '••••••••') : data_get($previous, 'display_value', '-'),
+                'new_display_value' => $sensitive ? ($current === null ? '-' : '••••••••') : data_get($current, 'display_value', '-'),
             ];
         }
 

resources/views/components/deployment/configuration-diff.blade.php

@@ -4,9 +4,9 @@
 ])
 
 @php
-    $changes = data_get($diff, 'changes', []);
-    $count = data_get($diff, 'count', count($changes));
-    $requiresBuild = data_get($diff, 'requires_build', false);
+    $changes = collect(data_get($diff, 'changes', []))->filter(fn ($change) => data_get($change, 'key') !== 'domains.custom_labels')->values()->all();
+    $count = count($changes);
+    $requiresBuild = collect($changes)->contains(fn ($change) => data_get($change, 'impact') === 'build');
 @endphp
 
 @if ($count > 0)
@@ -21,45 +21,39 @@
                 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300' => $requiresBuild,
                 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' => ! $requiresBuild,
             ])>
-                {{ $requiresBuild ? 'Rebuild' : 'Redeploy' }}
+                {{ $requiresBuild ? 'Rebuild required' : 'Redeploy required' }}
             </span>
         </div>
 
         @unless ($compact)
-            <div class="space-y-2">
+            <div class="space-y-4">
                 @foreach (collect($changes)->groupBy('section_label') as $sectionLabel => $sectionChanges)
                     <div>
                         <div class="mb-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400">
                             {{ $sectionLabel }}
                         </div>
-                        <div class="overflow-x-auto rounded-sm border border-neutral-300 dark:border-coolgray-200">
-                            <div class="min-w-[44rem]">
-                                <div class="grid grid-cols-[minmax(12rem,1.4fr)_7rem_minmax(8rem,1fr)_1.5rem_minmax(8rem,1fr)] items-center gap-2 bg-neutral-100 px-3 py-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-500 dark:bg-coolgray-200 dark:text-neutral-400">
-                                    <div>Field</div>
-                                    <div>Type</div>
-                                    <div>From</div>
-                                    <div></div>
-                                    <div>To</div>
-                                </div>
-                                <div class="divide-y divide-neutral-300 dark:divide-coolgray-200">
-                                    @foreach ($sectionChanges as $change)
-                                        <div class="grid grid-cols-[minmax(12rem,1.4fr)_7rem_minmax(8rem,1fr)_1.5rem_minmax(8rem,1fr)] items-center gap-2 px-3 py-1.5 text-neutral-700 dark:text-neutral-300">
-                                            <div class="truncate font-medium text-black dark:text-white" title="{{ data_get($change, 'label') }}">
-                                                {{ data_get($change, 'label') }}
-                                            </div>
-                                            <div class="text-neutral-500 dark:text-neutral-400">
-                                                {{ data_get($change, 'type') }}
-                                            </div>
-                                            <div class="truncate" title="{{ data_get($change, 'old_display_value') }}">
-                                                {{ data_get($change, 'old_display_value') }}
-                                            </div>
-                                            <div class="text-center text-neutral-500 dark:text-neutral-400">→</div>
-                                            <div class="truncate" title="{{ data_get($change, 'new_display_value') }}">
-                                                {{ data_get($change, 'new_display_value') }}
-                                            </div>
+                        <div class="rounded-sm border border-neutral-300 dark:border-coolgray-200">
+                            <div class="grid grid-cols-[12rem_1fr_1.5rem_1fr] items-center gap-2 bg-neutral-100 px-3 py-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-500 dark:bg-coolgray-200 dark:text-neutral-400">
+                                <div>Field</div>
+                                <div>From</div>
+                                <div></div>
+                                <div>To</div>
+                            </div>
+                            <div class="divide-y divide-neutral-300 dark:divide-coolgray-200">
+                                @foreach ($sectionChanges as $change)
+                                    <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>
-                                    @endforeach
-                                </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>
+                                        <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>
+                                    </div>
+                                @endforeach
                             </div>
                         </div>
                     </div>

tests/Feature/ApplicationConfigurationChangedTest.php

@@ -80,11 +80,11 @@ it('checks legacy preview deployment configuration hash using preview environmen
 
     $diff = $application->pendingDeploymentConfigurationDiff();
 
-    expect($diff->isLegacyFallback())->toBeTrue()
-        ->and($diff->isChanged())->toBeTrue();
+    expect($diff->isChanged())->toBeTrue()
+        ->and($diff->count())->toBeGreaterThan(0);
 });
 
-it('falls back to legacy configuration hash when no deployment snapshot exists', function () {
+it('falls back to real diff against empty snapshot when no deployment snapshot exists', function () {
     $application = configurationChangedTestApplication();
     $application->isConfigurationChanged(save: true);
 
@@ -92,6 +92,10 @@ it('falls back to legacy configuration hash when no deployment snapshot exists',
 
     $application->update(['build_command' => 'pnpm build']);
 
-    expect($application->refresh()->pendingDeploymentConfigurationDiff()->isLegacyFallback())->toBeTrue()
-        ->and($application->pendingDeploymentConfigurationDiff()->isChanged())->toBeTrue();
+    $diff = $application->refresh()->pendingDeploymentConfigurationDiff();
+
+    expect($diff->isChanged())->toBeTrue()
+        ->and($diff->isLegacyFallback())->toBeFalse()
+        ->and($diff->count())->toBeGreaterThan(0)
+        ->and(collect($diff->changes())->pluck('label')->toArray())->toContain('Build command');
 });

tests/Feature/Livewire/ConfigurationCheckerTest.php

@@ -126,8 +126,7 @@ it('does not render environment variable secret values', function () {
 
     Livewire::test(ConfigurationChecker::class, ['resource' => $application->refresh()])
         ->assertSee('API_TOKEN')
-        ->assertSee('changed')
-        ->assertSee('Set')
+        ->assertSee('••••••••')
         ->assertDontSee('Hidden')
         ->assertDontSee('old-secret')
         ->assertDontSee('new-secret');
@@ -150,9 +149,9 @@ it('renders added environment variables as set without exposing secret values',
     Livewire::test(ConfigurationChecker::class, ['resource' => $application->refresh()])
         ->assertSee('API_TOKEN')
         ->assertSee('From')
-        ->assertSee('Not set')
+        ->assertSee('-')
         ->assertSee('To')
-        ->assertSee('Set')
+        ->assertSee('••••••••')
         ->assertDontSee('Hidden')
         ->assertDontSee('new-secret');
 });

tests/Unit/DeploymentConfiguration/ApplicationConfigurationSnapshotTest.php

@@ -93,8 +93,8 @@ it('detects environment variable value changes without exposing secret values',
 
     expect($change)->not->toBeNull()
         ->and($change['display_summary'])->toBe('Changed')
-        ->and($change['old_display_value'])->toBe('Set')
-        ->and($change['new_display_value'])->toBe('Set')
+        ->and($change['old_display_value'])->toBe('••••••••')
+        ->and($change['new_display_value'])->toBe('••••••••')
         ->and(json_encode($diff->toArray()))->not->toContain('old-secret')->not->toContain('new-secret');
 });
 
@@ -117,7 +117,7 @@ it('describes added environment variables as set without exposing secret values'
 
     expect($change)->not->toBeNull()
         ->and($change['display_summary'])->toBeNull()
-        ->and($change['old_display_value'])->toBe('Not set')
-        ->and($change['new_display_value'])->toBe('Set')
+        ->and($change['old_display_value'])->toBe('-')
+        ->and($change['new_display_value'])->toBe('••••••••')
         ->and(json_encode($diff->toArray()))->not->toContain('new-secret');
 });