fix(service): warn before removing required ports

resources/views/livewire/project/service/domains.blade.php

@@ -283,4 +283,46 @@ class="application-settings-form application-settings-section relative flex max-
 
     <x-domain-conflict-modal :conflicts="$domainConflicts" :showModal="$showDomainConflictModal"
         confirmAction="confirmDomainUsage" />
+
+    @if ($showPortWarningModal)
+        <div x-data="{ modalOpen: true }"
+            @keydown.escape.window="modalOpen = false; $wire.call('cancelRemovePort')"
+            :class="{ 'z-40': modalOpen }" class="relative">
+            <template x-teleport="body">
+                <div x-show="modalOpen"
+                    class="fixed inset-0 z-99 flex min-h-full items-center justify-center overflow-y-auto p-4" x-cloak>
+                    <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]"></div>
+                    <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
+                        class="application-settings-form application-settings-section relative w-full lg:min-w-[36rem] lg:max-w-2xl"
+                        style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal)">
+                        <header>
+                            <h3>Remove required port?</h3>
+                            <button type="button"
+                                @click="modalOpen = false; $wire.call('cancelRemovePort')"
+                                class="icon-button" aria-label="Close">
+                                <x-reicon name="x" class="size-4" />
+                            </button>
+                        </header>
+                        <div class="application-settings-section-body">
+                            <x-callout type="warning" title="Port requirement" class="mb-4">
+                                This service requires port <strong>{{ $requiredPort }}</strong> to function correctly.
+                                One or more of your domains are missing a port number.
+                            </x-callout>
+
+                            <div class="mt-4 flex flex-wrap justify-end gap-2 border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
+                                <x-forms.button type="button"
+                                    @click="modalOpen = false; $wire.call('cancelRemovePort')">
+                                    Keep port
+                                </x-forms.button>
+                                <x-forms.button type="button" wire:click="confirmRemovePort"
+                                    @click="modalOpen = false" isError>
+                                    Remove port anyway
+                                </x-forms.button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    @endif
 </div>

tests/Feature/ServiceDomainsTest.php

@@ -525,7 +525,10 @@
         ->call('confirmDomainUsage')
         ->assertSet('showDomainConflictModal', false)
         ->assertSet('showPortWarningModal', true)
-        ->assertSet('forceSaveDomains', true);
+        ->assertSet('forceSaveDomains', true)
+        ->assertSee('Remove required port?')
+        ->assertSee('Keep port')
+        ->assertSee('Remove port anyway');
 
     $component
         ->call('confirmRemovePort')