[6.x] Lazy-load actions for collections, submissions & terms (#14097)

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: duncanmcclean

resources/js/components/collections/Listing.vue

@@ -24,28 +24,43 @@
                     <aside class="flex items-center gap-2">
                         <ItemActions
                             :url="collection.actions_url"
-                            :actions="collection.actions"
                             :item="collection.id"
                             @started="actionStarted"
                             @completed="actionCompleted"
-                            v-slot="{ actions }"
+                            v-slot="{ actions, loadActions, shouldShowSkeleton }"
                         >
-                            <Dropdown placement="left-start">
+                            <Dropdown
+                                placement="left-start"
+                                @mouseover="loadActions"
+                                @focus="loadActions"
+                                @click="loadActions"
+                            >
                                 <DropdownMenu>
                                     <DropdownItem v-if="collection.available_in_selected_site" :text="__('View')" icon="eye" :href="collection.entries_url" />
                                     <DropdownItem v-if="collection.available_in_selected_site && collection.url" :text="__('Visit URL')" icon="external-link" target="_blank" :href="collection.url" />
                                     <DropdownItem v-if="collection.editable" :text="__('Configure')" icon="cog" :href="collection.edit_url" />
                                     <DropdownItem v-if="collection.blueprint_editable" :text="__('Edit Blueprints')" icon="blueprint-edit" :href="collection.blueprints_url" />
                                     <DropdownItem v-if="collection.editable" :text="__('Scaffold Views')" icon="scaffold" :href="collection.scaffold_url" />
-                                    <DropdownSeparator v-if="actions.length" />
-                                    <DropdownItem
-                                        v-for="action in actions"
-                                        :key="action.handle"
-                                        :text="__(action.title)"
-                                        :icon="action.icon"
-                                        :variant="action.dangerous ? 'destructive' : 'default'"
-                                        @click="action.run"
-                                    />
+                                    <DropdownSeparator v-if="shouldShowSkeleton || actions.length" />
+                                    <template v-if="shouldShowSkeleton">
+                                        <div v-for="index in 3" :key="index" class="contents">
+                                            <ui-skeleton class="m-1 size-5" />
+                                            <ui-skeleton
+                                                class="mx-2 my-1.5 h-5"
+                                                :class="index === 1 ? 'w-28' : index === 2 ? 'w-36' : 'w-24'"
+                                            />
+                                        </div>
+                                    </template>
+                                    <template v-else>
+                                        <DropdownItem
+                                            v-for="action in actions"
+                                            :key="action.handle"
+                                            :text="__(action.title)"
+                                            :icon="action.icon"
+                                            :variant="action.dangerous ? 'destructive' : 'default'"
+                                            @click="action.run"
+                                        />
+                                    </template>
                                 </DropdownMenu>
                             </Dropdown>
                         </ItemActions>

src/Http/Controllers/CP/Collections/CollectionsController.php

@@ -94,7 +94,6 @@ private function collections()
                 'editable' => User::current()->can('edit', $collection),
                 'blueprint_editable' => User::current()->can('configure fields'),
                 'available_in_selected_site' => $collection->sites()->contains(Site::selected()->handle()),
-                'actions' => Action::for($collection),
                 'actions_url' => cp_route('collections.actions.run'),
                 'icon' => $collection->icon(),
                 'create_label' => $collection->createLabel(),

src/Http/Resources/CP/Submissions/ListedSubmission.php

@@ -3,7 +3,6 @@
 namespace Statamic\Http\Resources\CP\Submissions;
 
 use Illuminate\Http\Resources\Json\JsonResource;
-use Statamic\Facades\Action;
 use Statamic\Facades\User;
 
 class ListedSubmission extends JsonResource
@@ -36,7 +35,6 @@ public function toArray($request)
             ])),
             'url' => cp_route('forms.submissions.show', [$form->handle(), $this->resource->id()]),
             'deleteable' => User::current()->can('delete', $this->resource),
-            'actions' => Action::for($this->resource),
         ];
     }
 

src/Http/Resources/CP/Taxonomies/ListedTerm.php

@@ -3,7 +3,6 @@
 namespace Statamic\Http\Resources\CP\Taxonomies;
 
 use Illuminate\Http\Resources\Json\JsonResource;
-use Statamic\Facades\Action;
 use Statamic\Facades\User;
 
 class ListedTerm extends JsonResource
@@ -28,7 +27,6 @@ public function columns($columns)
     public function toArray($request)
     {
         $term = $this->resource;
-        $taxonomy = $term->taxonomy();
 
         return [
             'id' => $term->id(),
@@ -45,7 +43,6 @@ public function toArray($request)
             'taxonomy' => $term->taxonomy()->toArray(),
             'viewable' => User::current()->can('view', $term),
             'editable' => User::current()->can('edit', $term),
-            'actions' => Action::for($term, ['taxonomy' => $taxonomy->handle()]),
         ];
     }
 

tests/Feature/Collections/ViewCollectionListingTest.php

@@ -109,6 +109,23 @@ public function it_shows_a_list_of_collections()
         */
     }
 
+    #[Test]
+    public function it_does_not_eager_load_actions_in_listing()
+    {
+        $this->createCollection('bar');
+
+        $user = tap(User::make()->makeSuper())->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('collections.index'))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->component('collections/Index')
+                ->has('collections', 1)
+                ->missing('collections.0.actions'));
+    }
+
     #[Test]
     public function it_shows_no_results_when_there_are_no_collections()
     {

tests/Feature/Forms/ViewSubmissionsListingTest.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Tests\Feature\Forms;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Facades\FormSubmission;
+use Statamic\Facades\User;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class ViewSubmissionsListingTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    protected function resolveApplicationConfiguration($app)
+    {
+        parent::resolveApplicationConfiguration($app);
+
+        $app['config']['statamic.forms.forms'] = $this->fakeStacheDirectory.'/forms';
+    }
+
+    #[Test]
+    public function it_does_not_eager_load_actions_in_submissions_listing()
+    {
+        $user = tap(User::make()->makeSuper())->save();
+        $form = tap(Form::make('test'))->save();
+        FormSubmission::make()->form($form)->data(['foo' => 'bar'])->save();
+
+        $this
+            ->actingAs($user)
+            ->getJson(cp_route('forms.submissions.index', $form->handle()))
+            ->assertSuccessful()
+            ->assertJsonCount(1, 'data')
+            ->assertJsonMissingPath('data.0.actions');
+    }
+}

tests/Feature/Taxonomies/ViewTermsListingTest.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Tests\Feature\Taxonomies;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Taxonomy;
+use Statamic\Facades\Term;
+use Statamic\Facades\User;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class ViewTermsListingTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    #[Test]
+    public function it_does_not_eager_load_actions_in_listing()
+    {
+        $user = tap(User::make()->makeSuper())->save();
+
+        $taxonomy = tap(Taxonomy::make('tags'))->save();
+        tap(Term::make()->taxonomy('tags')->inDefaultLocale()->slug('alfa')->data(['title' => 'alfa']))->save();
+
+        $this
+            ->actingAs($user)
+            ->getJson(cp_route('taxonomies.terms.index', $taxonomy->handle()))
+            ->assertSuccessful()
+            ->assertJsonCount(1, 'data')
+            ->assertJsonMissingPath('data.0.actions');
+    }
+}