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.

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

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");
+      assert.dom(tree.nodes[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);
 
       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[3].textElement).hasText("level2 4");
-      assert.dom(tree.nodes[0].children[2].textElement).hasText("level2 3");
-      assert.dom(tree.nodes[0].children[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]);
+      assert.dom(tree.nodes[2].textElement).hasText("level3 3");
-      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");
     });
 
     test("removing an object from the root list of objects", async function (assert) {