fix(server): keep resources nav active and show tab loading

Use $activeMenu for Resources so Livewire updates do not clear
the sidebar highlight, and disable managed/unmanaged tabs with
spinners while containers load.
This commit is contained in:
Andras Bacsai
2026-08-07 15:24:41 +02:00
parent 8f7eb2d790
commit 28f57aafb8
4 changed files with 25 additions and 5 deletions
@@ -76,7 +76,7 @@
[
'label' => 'Resources',
'route' => 'server.resources',
'active' => request()->routeIs('server.resources'),
'active' => $activeMenu === 'resources',
'icon' => 'projects',
'group' => 'Platform',
],
@@ -13,12 +13,14 @@
flush>
<x-slot:actions>
<div class="inline-flex w-fit rounded-[10px] bg-neutral-100 p-1 dark:bg-white/[0.05]">
<button type="button" wire:click="loadManagedContainers"
class="rounded-md px-3 py-1 text-xs font-medium transition-colors {{ $activeTab === 'managed' ? 'bg-white text-neutral-950 shadow-sm dark:bg-warning/15 dark:text-warning' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
<button type="button" wire:click="loadManagedContainers" wire:loading.attr="disabled" wire:target="loadManagedContainers,loadUnmanagedContainers"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors disabled:cursor-wait {{ $activeTab === 'managed' ? 'bg-white text-neutral-950 shadow-sm dark:bg-warning/15 dark:text-warning' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
<x-loading-on-button wire:loading wire:target="loadManagedContainers" />
Managed
</button>
<button type="button" wire:click="loadUnmanagedContainers"
class="rounded-md px-3 py-1 text-xs font-medium transition-colors {{ $activeTab === 'unmanaged' ? 'bg-white text-neutral-950 shadow-sm dark:bg-warning/15 dark:text-warning' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
<button type="button" wire:click="loadUnmanagedContainers" wire:loading.attr="disabled" wire:target="loadManagedContainers,loadUnmanagedContainers"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors disabled:cursor-wait {{ $activeTab === 'unmanaged' ? 'bg-white text-neutral-950 shadow-sm dark:bg-warning/15 dark:text-warning' : 'text-neutral-500 hover:text-neutral-900 dark:text-fg-dim dark:hover:text-fg' }}">
<x-loading-on-button wire:loading wire:target="loadUnmanagedContainers" />
Unmanaged
</button>
</div>
@@ -55,3 +55,13 @@ test('unmanaged container names use the same typeface as managed resource names'
->toContain('min-w-0 truncate text-[12px] font-medium text-neutral-950 dark:text-fg')
->not->toContain('truncate font-mono text-[12px] text-neutral-950 dark:text-fg');
});
test('server resource tabs show a loading state while switching', function () {
$view = file_get_contents(resource_path('views/livewire/server/resources.blade.php'));
expect(substr_count($view, 'wire:loading.attr="disabled" wire:target="loadManagedContainers,loadUnmanagedContainers"'))
->toBe(2)
->and($view)
->toContain('<x-loading-on-button wire:loading wire:target="loadManagedContainers" />')
->toContain('<x-loading-on-button wire:loading wire:target="loadUnmanagedContainers" />');
});
@@ -15,6 +15,14 @@ it('keeps server submenu state independent from the Livewire update route', func
->and($proxyLogs)->toContain('activeSubMenu="logs"');
});
it('keeps the server resources menu active during Livewire updates', function () {
$sidebar = file_get_contents(resource_path('views/components/server/sidebar.blade.php'));
expect($sidebar)
->toContain("'label' => 'Resources',\n 'route' => 'server.resources',\n 'active' => \$activeMenu === 'resources'")
->not->toContain("'active' => request()->routeIs('server.resources')");
});
it('initializes persisted sidebar state before enabling layout transitions', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));