[6.x] Use the nav item's current tree depth in the page editor

resources/js/components/structures/PageEditor.vue

@@ -93,6 +93,7 @@ export default {
         blueprint: Object,
         handle: String,
         editEntryUrl: String,
+        depth: Number,
         creating: Boolean,
         readOnly: Boolean,
     },
@@ -284,7 +285,7 @@ export default {
             this.originValues = info.originValues;
             this.meta = info.meta;
             this.originMeta = info.originMeta;
-            this.extraValues = info.extraValues;
+            this.extraValues = { ...info.extraValues, depth: this.depth };
             this.localizedFields = info.localizedFields;
         },
 

resources/js/components/structures/PageTree.vue

@@ -347,6 +347,10 @@ export default {
             this.$emit('changed', this.pages);
         },
 
+        depthOf(page) {
+            return this.$refs.tree.getStat(page).level;
+        },
+
         expandAll() {
             this.$refs.tree.openAll();
             this.collapsedState = [];

resources/js/pages/navigation/Show.vue

@@ -117,6 +117,10 @@ export default {
 
             return;
         },
+
+        newPageDepth() {
+            return this.targetParent ? this.targetParent.level + 1 : 1;
+        },
     },
 
     watch: {
@@ -186,7 +190,7 @@ export default {
         },
 
         editPage(page) {
-            this.editingPage = { page };
+            this.editingPage = { page, depth: this.$refs.tree.depthOf(page) };
         },
 
         updatePage(values) {
@@ -550,6 +554,7 @@ export default {
             :site="site"
             :id="editingPage.page.id"
             :entry="editingPage.page.entry"
+            :depth="editingPage.depth"
             :editEntryUrl="editingPage.page.entry ? editingPage.page.edit_url : null"
             :publish-info="publishInfo[editingPage.page.id]"
             :blueprint="blueprint"
@@ -565,6 +570,7 @@ export default {
             v-if="creatingPage"
             creating
             :site="site"
+            :depth="newPageDepth"
             :blueprint="blueprint"
             :handle="handle"
             :read-only="!canEdit"

resources/js/tests/components/structures/PageTree.test.js

@@ -86,3 +86,31 @@ test('an editable tree takes the save shortcut and gives it back', async () => {
     expect(save).toHaveBeenCalledTimes(1);
     expect(outerSaves).toBe(1);
 });
+
+test('a page reports the depth it currently sits at, not the depth it was loaded with', async () => {
+    const child = { id: 'child', title: 'Child', depth: 2, children: [] };
+    const parent = { id: 'parent', title: 'Parent', depth: 1, children: [child] };
+
+    const wrapper = mount(PageTree, {
+        props: {
+            pagesUrl: '/test/pages',
+            editable: false,
+        },
+        global: {
+            stubs: { TreeBranch: true, PanelHeader: true, Panel: true, Icon: true },
+            mocks: {
+                $keys: keys,
+                $config: { get: (key, fallback) => fallback },
+                $axios: { get: () => Promise.resolve({ data: { pages: [parent] } }) },
+            },
+        },
+    });
+    await flushPromises();
+
+    expect(wrapper.vm.depthOf(child)).toBe(2);
+
+    const tree = wrapper.vm.$refs.tree;
+    tree.move(tree.getStat(child), null, 1);
+
+    expect(wrapper.vm.depthOf(child)).toBe(1);
+});