From 92e0faed0aee392f9669237990c5e4c885f03607 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Tue, 2 Apr 2024 10:36:32 +0800 Subject: [PATCH] UX: Switch to new object when adding object in theme objects setting editor (#26454) Why this change? When adding a new object, we want to switch to the input fields of the new object instead of just appending the new object to the list of objects as we believe this is a better UX flow. --- .../schema-theme-setting/editor.gjs | 7 ++++ .../editor-test.gjs | 37 ++++++++----------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs b/app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs index c0a9ec9dfec..1684ad5cbec 100644 --- a/app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs +++ b/app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs @@ -180,11 +180,18 @@ export default class SchemaThemeSettingNewEditor extends Component { @action addChildItem(propertyName, parentNodeIndex) { this.activeData[parentNodeIndex][propertyName].pushObject({}); + + this.onChildClick( + this.activeData[parentNodeIndex][propertyName].length - 1, + propertyName, + parentNodeIndex + ); } @action addItem() { this.activeData.pushObject({}); + this.activeIndex = this.activeData.length - 1; } @action diff --git a/app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs index 4e8c9fa4fe2..a33f2f824c6 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs +++ b/app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs @@ -1119,13 +1119,13 @@ module( assert.strictEqual(tree.nodes.length, 3); - await click(TOP_LEVEL_ADD_BTN); await click(TOP_LEVEL_ADD_BTN); tree.refresh(); - assert.strictEqual(tree.nodes.length, 5); + assert.strictEqual(tree.nodes.length, 4); + assert.ok(tree.nodes[2].active); assert.dom(tree.nodes[2].textElement).hasText("level1 3"); - assert.dom(tree.nodes[3].textElement).hasText("level1 4"); + assert.dom(TOP_LEVEL_ADD_BTN).hasText("level1"); }); test("adding an object to a child list of objects when an object has multiple objects properties", async function (assert) { @@ -1178,14 +1178,7 @@ module( tree.refresh(); - assert.dom(tree.nodes[0].children[0].textElement).hasText("link 1"); - - await click(tree.nodes[0].addButtons[1]); - tree.refresh(); - - assert.dom(tree.nodes[0].children[1].textElement).hasText("chair 1"); - - await click(tree.nodes[0].children[0].element); + assert.dom(tree.nodes[0].textElement).hasText("link 1"); const inputFields = new InputFieldsFromDOM(); @@ -1201,18 +1194,22 @@ module( const tree = new TreeFromDOM(); - assert.dom(tree.nodes[0].addButtons[0]).hasText("level2"); assert.strictEqual(tree.nodes[0].children.length, 2); + assert.dom(tree.nodes[0].addButtons[0]).hasText("level2"); await click(tree.nodes[0].addButtons[0]); tree.refresh(); - await click(tree.nodes[0].addButtons[0]); + assert.dom(tree.nodes[2].textElement).hasText("level2 3"); + + const inputFields = new InputFieldsFromDOM(); + + assert.dom(inputFields.fields.name.labelElement).hasText("name"); + + await click(TOP_LEVEL_ADD_BTN); tree.refresh(); - assert.strictEqual(tree.nodes[0].children.length, 4); - assert.dom(tree.nodes[0].children[2].textElement).hasText("level2 3"); - assert.dom(tree.nodes[0].children[3].textElement).hasText("level2 4"); + assert.dom(tree.nodes[3].textElement).hasText("level2 4"); }); test("navigating 1 level deep and adding an object to the child list of objects that's displayed as the root list", async function (assert) { @@ -1255,14 +1252,10 @@ module( assert.strictEqual(tree.nodes[0].children.length, 2); await click(tree.nodes[0].addButtons[0]); + tree.refresh(); - await click(tree.nodes[0].addButtons[0]); - tree.refresh(); - - assert.strictEqual(tree.nodes[0].children.length, 4); - assert.dom(tree.nodes[0].children[2].textElement).hasText("level3 3"); - assert.dom(tree.nodes[0].children[3].textElement).hasText("level3 4"); + assert.dom(tree.nodes[2].textElement).hasText("level3 3"); }); test("removing an object from the root list of objects", async function (assert) {