[6.x] Make actions available in a collection tree view

resources/js/components/actions/ItemActions.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useTemplateRef, watch } from 'vue';
+import { ref, computed, useTemplateRef, watch, onMounted } from 'vue';
 import useActions from './Actions.js';
 import ConfirmableAction from './ConfirmableAction.vue';
 import useSkeletonDelay from '@/composables/skeleton-delay.js';
@@ -11,6 +11,7 @@ const props = defineProps({
     context: { type: Object, default: () => ({}) },
     item: { required: true },
     isDirty: { type: Boolean, default: false },
+    autoLoad: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['started', 'completed']);
@@ -24,6 +25,10 @@ const loading = ref(false);
 const shouldShowSkeleton = useSkeletonDelay(loading);
 let loadActionsRequest = null;
 
+onMounted(() => {
+    if (props.autoLoad) loadActions();
+});
+
 watch(
     () => props.actions,
     () => {

resources/js/components/structures/Branch.vue

@@ -55,18 +55,26 @@
 
                 <slot name="branch-icon" :branch="page" />
 
-	            <template v-if="editable">
-	                <Dropdown placement="left-start" :class="{ invisible: isRoot }">
-	                    <DropdownMenu>
-	                        <slot
-	                            name="branch-options"
-	                            :branch="page"
-	                            :depth="depth"
-	                            :remove-branch="remove"
-	                        />
-	                    </DropdownMenu>
-	                </Dropdown>
-	            </template>
+                <template v-if="editable">
+                    <slot
+                        name="branch-options-dropdown"
+                        :branch="page"
+                        :depth="depth"
+                        :remove-branch="remove"
+                        :is-root="isRoot"
+                    >
+                        <Dropdown placement="left-start" :class="{ invisible: isRoot }">
+                            <DropdownMenu>
+                                <slot
+                                    name="branch-options"
+                                    :branch="page"
+                                    :depth="depth"
+                                    :remove-branch="remove"
+                                />
+                            </DropdownMenu>
+                        </Dropdown>
+                    </slot>
+                </template>
             </div>
         </div>
     </div>

resources/js/components/structures/PageTree.vue

@@ -71,6 +71,10 @@
                             <template #branch-options="props">
                                 <slot name="branch-options" v-bind="{ ...props, stat }" />
                             </template>
+
+                            <template #branch-options-dropdown="props">
+                                <slot name="branch-options-dropdown" v-bind="{ ...props, stat }" />
+                            </template>
                         </tree-branch>
                     </template>
                 </Draggable>
@@ -214,6 +218,12 @@ export default {
             });
         },
 
+        refresh() {
+            return this.getPages().then(() => {
+                this.initialPages = clone(this.pages);
+            });
+        },
+
         treeUpdated() {
             this.pages = this.$refs.tree.getData();
             this.$emit('changed', this.pages);

resources/js/components/ui/Dropdown/Dropdown.vue

@@ -11,6 +11,8 @@ defineOptions({
 const attrs = useAttrs();
 
 const props = defineProps({
+    /** Whether the dropdown should behave as a modal and hide outside content from assistive tech. */
+    modal: { type: Boolean, default: true },
     /** The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end` */
     align: { type: String, default: 'start' },
     /** The distance in pixels from the trigger */
@@ -29,7 +31,7 @@ const dropdownContentClasses = cva({
 </script>
 
 <template>
-    <DropdownMenuRoot>
+    <DropdownMenuRoot :modal="modal">
         <DropdownMenuTrigger as-child data-ui-dropdown-trigger>
             <slot name="trigger">
                 <Button icon="dots" variant="ghost" size="sm" v-bind="attrs" :aria-label="__('Open dropdown menu')" />

resources/js/pages/collections/Show.vue

@@ -135,25 +135,100 @@
                 />
             </template>
 
-            <template #branch-options="{ branch, removeBranch, depth }">
-                <template v-if="depth < structureMaxDepth">
-                    <DropdownLabel :text="__('Create Child Entry')" v-if="blueprints.length > 1" />
-                    <DropdownItem
-                        v-for="blueprint in blueprints"
-                        @click="createEntry(blueprint.handle, branch.id)"
-                        :icon="blueprint.icon || 'add-entry'"
-                        :key="blueprint.handle"
-                        :text="blueprints.length > 1 ? __(blueprint.title) : __('Create Child Entry')"
-                    />
-                </template>
-                <DropdownSeparator v-if="depth < structureMaxDepth && branch.can_delete" />
-                <DropdownItem
-                    v-if="branch.can_delete"
-                    :text="__('Delete')"
-                    icon="trash"
-                    variant="destructive"
-                    @click="deleteTreeBranch(branch, removeBranch)"
-                />
+            <template #branch-options-dropdown="{ branch, removeBranch, depth, isRoot }">
+                <ItemActions
+                    v-if="branch.entry"
+                    :url="entriesActionUrl"
+                    :context="{ view: 'tree' }"
+                    :item="branch.entry"
+                    @started="treeActionStarted"
+                    @completed="treeActionCompleted"
+                    v-slot="{ actions, loadActions, shouldShowSkeleton }"
+                >
+                    <Dropdown
+                        @mouseover="loadActions"
+                        @focus="loadActions"
+                        @click="loadActions"
+                        placement="left-start"
+                        :modal="false"
+                        :class="{ invisible: isRoot }"
+                    >
+                        <DropdownMenu>
+                            <template v-if="depth < structureMaxDepth">
+                                <DropdownLabel :text="__('Create Child Entry')" v-if="blueprints.length > 1" />
+                                <DropdownItem
+                                    v-for="blueprint in blueprints"
+                                    @click="createEntry(blueprint.handle, branch.id)"
+                                    :icon="blueprint.icon || 'add-entry'"
+                                    :key="blueprint.handle"
+                                    :text="blueprints.length > 1 ? __(blueprint.title) : __('Create Child Entry')"
+                                />
+                            </template>
+
+                            <DropdownSeparator v-if="depth < structureMaxDepth && branch.can_delete" />
+
+                            <DropdownItem
+                                v-if="branch.can_delete"
+                                :text="__('Delete')"
+                                icon="trash"
+                                variant="destructive"
+                                @click="deleteTreeBranch(branch, removeBranch)"
+                            />
+
+                            <DropdownSeparator
+                                v-if="
+                                    (depth < structureMaxDepth || branch.can_delete) &&
+                                    (shouldShowSkeleton || branchTreeActions(actions).length)
+                                "
+                            />
+
+                            <template v-if="shouldShowSkeleton">
+                                <div v-for="index in 3" :key="index" class="contents">
+                                    <Skeleton class="m-1 size-5" />
+                                    <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 branchTreeActions(actions)"
+                                    :key="action.handle"
+                                    :text="__(action.title)"
+                                    :icon="action.icon"
+                                    :variant="action.dangerous ? 'destructive' : 'default'"
+                                    @click="action.run"
+                                />
+                            </template>
+                        </DropdownMenu>
+                    </Dropdown>
+                </ItemActions>
+
+                <Dropdown v-else placement="left-start" :modal="false" :class="{ invisible: isRoot }">
+                    <DropdownMenu>
+                        <template v-if="depth < structureMaxDepth">
+                            <DropdownLabel :text="__('Create Child Entry')" v-if="blueprints.length > 1" />
+                            <DropdownItem
+                                v-for="blueprint in blueprints"
+                                @click="createEntry(blueprint.handle, branch.id)"
+                                :icon="blueprint.icon || 'add-entry'"
+                                :key="blueprint.handle"
+                                :text="blueprints.length > 1 ? __(blueprint.title) : __('Create Child Entry')"
+                            />
+                        </template>
+
+                        <DropdownSeparator v-if="depth < structureMaxDepth && branch.can_delete" />
+
+                        <DropdownItem
+                            v-if="branch.can_delete"
+                            :text="__('Delete')"
+                            icon="trash"
+                            variant="destructive"
+                            @click="deleteTreeBranch(branch, removeBranch)"
+                        />
+                    </DropdownMenu>
+                </Dropdown>
             </template>
         </page-tree>
 
@@ -191,7 +266,7 @@ import DeleteLocalizationConfirmation from '@/components/collections/DeleteLocal
 import CollectionCalendar from '@/components/entries/calendar/Calendar.vue';
 import SiteSelector from '@/components/SiteSelector.vue';
 import { defineAsyncComponent } from 'vue';
-import { Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, Header, Button, ToggleGroup, ToggleItem } from '@/components/ui';
+import { Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, Header, Button, Skeleton, ToggleGroup, ToggleItem } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 import Head from '@/pages/layout/Head.vue';
 import { router } from '@inertiajs/vue3';
@@ -207,6 +282,7 @@ export default {
         Dropdown,
         Header,
         Button,
+        Skeleton,
         ToggleGroup,
         ToggleItem,
         PageTree: defineAsyncComponent(() => import('@/components/structures/PageTree.vue')),
@@ -398,6 +474,32 @@ export default {
             return branch.redirect != null;
         },
 
+        branchTreeActions(actions) {
+            // Destructive actions (e.g. Delete, DeleteMultisiteEntry) are excluded, since
+            // deleting from the tree is handled by the tree-aware "Delete" item instead.
+            return (actions || []).filter((action) => !action.dangerous);
+        },
+
+        treeActionStarted() {
+            Statamic.$progress.loading('action', true);
+        },
+
+        treeActionCompleted(successful = null, response = {}) {
+            Statamic.$progress.loading('action', false);
+
+            if (!successful) {
+                Statamic.$toast.error(response.message || __('Action failed'));
+                return;
+            }
+
+            if (response.message !== false) {
+                Statamic.$toast.success(response.message || __('Action completed'));
+            }
+
+            // Reloading the tree would discard any unsaved structure changes.
+            if (!this.treeIsDirty) this.$refs.tree?.refresh();
+        },
+
         createEntry(blueprint, parent) {
             let url = `${this.createUrl}?blueprint=${blueprint}`;
             if (parent) url += '&parent=' + parent;

src/Structures/TreeBuilder.php

@@ -91,22 +91,23 @@ protected function transformTreeForController($tree)
             $page = $item['page'];
             $collection = $page->mountedCollection();
             $referenceExists = $page->referenceExists();
+            $entry = $referenceExists ? $page->entry() : null;
 
             return [
                 'id' => $page->id(),
                 'entry' => $page->reference(),
                 'title' => $page->hasCustomTitle() ? $page->title() : null,
-                'entry_title' => $referenceExists ? $page->entry()->value('title') : null,
-                'entry_blueprint' => $referenceExists ? [
-                    'handle' => $page->entry()->blueprint()->handle(),
-                    'title' => $page->entry()->blueprint()->title(),
+                'entry_title' => $entry ? $entry->value('title') : null,
+                'entry_blueprint' => $entry ? [
+                    'handle' => $entry->blueprint()->handle(),
+                    'title' => $entry->blueprint()->title(),
                 ] : null,
                 'url' => $page->url(),
                 'edit_url' => $page->editUrl(),
-                'can_delete' => $referenceExists ? User::current()->can('delete', $page->entry()) : true,
+                'can_delete' => $entry ? User::current()->can('delete', $entry) : true,
                 'slug' => $page->slug(),
                 'status' => $referenceExists ? $page->status() : null,
-                'redirect' => $referenceExists ? $page->entry()->get('redirect') : null,
+                'redirect' => $entry ? $entry->get('redirect') : null,
                 'collection' => ! $collection ? null : [
                     'handle' => $collection->handle(),
                     'title' => $collection->title(),