fix: SPA mode resource create page back button cache (#20297)

* fix: SPA mode resource create page back button cache

* simplify

Author: danharrin

packages/panels/dist/index.js

@@ -3,6 +3,7 @@ import sidebar from './stores/sidebar.js'
 import './dark-mode.js'
 import './error-notifications.js'
 import './history-state.js'
+import './reset-restored-resource-create-record-pages.js'
 import './scroll-sidebar.js'
 import './unsaved-changes-alert.js'
 

packages/panels/resources/js/index.js

@@ -0,0 +1,25 @@
+document.addEventListener('livewire:init', () => {
+    // In SPA mode, navigating back to a create page restores it from Livewire's
+    // history cache, including an `isCreating` state of `true` from before the
+    // post-creation redirect, which blocks the form from being submitted again.
+    // A fresh page load always renders `isCreating` as `false`, so a create
+    // page component can only initialize with `isCreating` as `true` if it was
+    // restored from the cache. Outside of SPA mode, this cannot happen, since
+    // Livewire's `DisableBackButtonCacheMiddleware` sends a `no-store` header
+    // that excludes its pages from the browser's back/forward cache. Assigning
+    // to `$wire` only mutates the client-side state, which is synced with the
+    // server during the next request, such as the next creation attempt.
+    window.Livewire.hook('component.init', ({ component }) => {
+        if (
+            !component.el?.classList?.contains('fi-resource-create-record-page')
+        ) {
+            return
+        }
+
+        if (component.snapshot?.data?.isCreating !== true) {
+            return
+        }
+
+        component.$wire.isCreating = false
+    })
+})

packages/panels/resources/js/reset-restored-resource-create-record-pages.js

@@ -22,7 +22,6 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Js;
-use Livewire\Attributes\Locked;
 use Throwable;
 
 /**
@@ -47,7 +46,14 @@ class CreateRecord extends Page
 
     protected static bool $canCreateAnother = true;
 
-    #[Locked]
+    /**
+     * After a successful creation, this stays `true` while the user is redirected, to prevent duplicate
+     * records from additional clicks of the submit button. In SPA mode, if the user then navigates back,
+     * the page is restored from Livewire's history cache with this still `true`, which would block the
+     * form from ever being submitted again. JavaScript detects the restoration and resets this property
+     * in Livewire's client-side state, which is synced with the server during the next request. It is
+     * deliberately not `#[Locked]`, since that would prevent the client-side reset from being synced.
+     */
     public bool $isCreating = false;
 
     public function getBreadcrumb(): string

packages/panels/src/Resources/Pages/CreateRecord.php

@@ -55,7 +55,7 @@ protected function casts(): array
 
     public function canAccessPanel(Panel $panel): bool
     {
-        return in_array($panel->getId(), ['admin', 'slugs', 'app-authentication', 'email-authentication', 'required-multi-factor-authentication']);
+        return in_array($panel->getId(), ['admin', 'slugs', 'spa', 'app-authentication', 'email-authentication', 'required-multi-factor-authentication']);
     }
 
     public function posts(): HasMany

tests/src/Fixtures/Models/User.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace Filament\Tests\Fixtures\Providers;
+
+use Filament\Http\Middleware\Authenticate;
+use Filament\Http\Middleware\AuthenticateSession;
+use Filament\Http\Middleware\DisableBladeIconComponents;
+use Filament\Http\Middleware\DispatchServingFilamentEvent;
+use Filament\Panel;
+use Filament\PanelProvider;
+use Filament\Tests\Fixtures\Resources\Tickets\TicketResource;
+use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
+use Illuminate\Cookie\Middleware\EncryptCookies;
+use Illuminate\Foundation\Http\Middleware\PreventRequestForgery;
+use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken;
+use Illuminate\Routing\Middleware\SubstituteBindings;
+use Illuminate\Session\Middleware\StartSession;
+use Illuminate\View\Middleware\ShareErrorsFromSession;
+
+class SpaPanelProvider extends PanelProvider
+{
+    public function panel(Panel $panel): Panel
+    {
+        return $panel
+            ->id('spa')
+            ->path('spa')
+            ->login()
+            ->spa()
+            ->resources([
+                TicketResource::class,
+            ])
+            ->middleware([
+                EncryptCookies::class,
+                AddQueuedCookiesToResponse::class,
+                StartSession::class,
+                AuthenticateSession::class,
+                ShareErrorsFromSession::class,
+                class_exists(PreventRequestForgery::class) ? PreventRequestForgery::class : VerifyCsrfToken::class,
+                SubstituteBindings::class,
+                DisableBladeIconComponents::class,
+                DispatchServingFilamentEvent::class,
+            ])
+            ->authMiddleware([
+                Authenticate::class,
+            ]);
+    }
+}

tests/src/Fixtures/Providers/SpaPanelProvider.php

@@ -5,6 +5,8 @@
 use Filament\Resources\Events\RecordCreated;
 use Filament\Resources\Events\RecordSaved;
 use Filament\Tests\Fixtures\Models\Post;
+use Filament\Tests\Fixtures\Models\Ticket;
+use Filament\Tests\Fixtures\Models\User;
 use Filament\Tests\Fixtures\Policies\TicketPolicy;
 use Filament\Tests\Fixtures\Resources\Posts\Pages\CreateAnotherPreservingDataPost;
 use Filament\Tests\Fixtures\Resources\Posts\Pages\CreateAnotherPreservingRepeaterPost;
@@ -16,6 +18,7 @@
 use Filament\Tests\Fixtures\Resources\Tickets\TicketResource;
 use Filament\Tests\Panels\Resources\TestCase;
 use Illuminate\Auth\Access\Response;
+use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Event;
 
 use function Filament\Tests\livewire;
@@ -409,6 +412,58 @@
     app()->bind(TicketPolicy::class . '::create', fn (): bool => true);
 });
 
+it('blocks duplicate creation attempts while `$isCreating` after a successful creation', function (): void {
+    $component = livewire(CreateTicket::class)
+        ->call('create')
+        ->assertRedirect();
+
+    expect(Ticket::count())->toBe(1);
+
+    $component->call('create');
+
+    expect(Ticket::count())->toBe(1);
+});
+
+it('can reset `$isCreating` from the client to release the duplicate creation guard when the page is restored from the browser history cache', function (): void {
+    $component = livewire(CreateTicket::class)
+        ->call('create')
+        ->assertRedirect();
+
+    expect(Ticket::count())->toBe(1);
+
+    $component
+        ->set('isCreating', false)
+        ->call('create')
+        ->assertRedirect();
+
+    expect(Ticket::count())->toBe(2);
+});
+
+it('can create a record again in the browser after navigating back to a create page restored from the history cache', function (): void {
+    retry(10, function (): void {
+        Artisan::call('filament:assets');
+
+        Ticket::query()->delete();
+
+        $this->actingAs(User::factory()->create());
+
+        visit(TicketResource::getUrl('create', panel: 'spa'))
+            ->assertSee('Create Ticket')
+            ->click('.fi-sc-form button[type="submit"]')
+            ->waitForText('View Ticket')
+            ->assertPathIs('/spa/tickets/*')
+            ->back()
+            ->waitForText('Create Ticket')
+            ->assertPathIs('/spa/tickets/create')
+            ->wait(1)
+            ->click('.fi-sc-form button[type="submit"]')
+            ->waitForText('View Ticket')
+            ->assertPathIs('/spa/tickets/*');
+
+        expect(Ticket::count())->toBe(2);
+    });
+});
+
 it('re-authorizes viewAny on Livewire updates after the initial mount of a create page', function (): void {
     app()->bind(TicketPolicy::class . '::viewAny', fn (): bool => true);
 

tests/src/Panels/Resources/Pages/CreateRecordTest.php

@@ -30,6 +30,7 @@
 use Filament\Tests\Fixtures\Providers\RequiredMultiFactorAuthenticationPanelProvider;
 use Filament\Tests\Fixtures\Providers\SlugsPanelProvider;
 use Filament\Tests\Fixtures\Providers\SlugTenancyPanelProvider;
+use Filament\Tests\Fixtures\Providers\SpaPanelProvider;
 use Filament\Tests\Fixtures\Providers\TenancyPanelProvider;
 use Filament\Tests\Fixtures\Providers\TenantMenuFlatPanelProvider;
 use Filament\Tests\Fixtures\Providers\TenantMenuGroupingPanelProvider;
@@ -88,6 +89,7 @@ protected function getPackageProviders($app): array
             SingleDomainPanel::class,
             SlugsPanelProvider::class,
             SlugTenancyPanelProvider::class,
+            SpaPanelProvider::class,
             TenancyPanelProvider::class,
             TenantMenuFlatPanelProvider::class,
             TenantMenuGroupingPanelProvider::class,