github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 22:21:55 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Switch to new object when adding object in theme objects setting editor (#26454)

Browse Source 
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.
This commit is contained in:
Alan Guo Xiang Tan 2024-04-02 10:36:32 +08:00 committed by GitHub
parent 397a1b7366
commit 92e0faed0a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs
View File

@ -180,11 +180,18 @@ export default class SchemaThemeSettingNewEditor extends Component {
@action @action
addChildItem(propertyName, parentNodeIndex) { addChildItem(propertyName, parentNodeIndex) {
this.activeData[parentNodeIndex][propertyName].pushObject({}); this.activeData[parentNodeIndex][propertyName].pushObject({});
this.onChildClick(
this.activeData[parentNodeIndex][propertyName].length - 1,
propertyName,
parentNodeIndex
);
} }
@action @action
addItem() { addItem() {
this.activeData.pushObject({}); this.activeData.pushObject({});
this.activeIndex = this.activeData.length - 1;
} }
@action @action

37
app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs
View File

@ -1119,13 +1119,13 @@ module(
assert.strictEqual(tree.nodes.length, 3); assert.strictEqual(tree.nodes.length, 3);
await click(TOP_LEVEL_ADD_BTN);
await click(TOP_LEVEL_ADD_BTN); await click(TOP_LEVEL_ADD_BTN);
tree.refresh(); 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[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) { 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(); 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(); const inputFields = new InputFieldsFromDOM();
@ -1201,18 +1194,22 @@ module(
const tree = new TreeFromDOM(); const tree = new TreeFromDOM();
assert.dom(tree.nodes[0].addButtons[0]).hasText("level2");
assert.strictEqual(tree.nodes[0].children.length, 2); assert.strictEqual(tree.nodes[0].children.length, 2);
assert.dom(tree.nodes[0].addButtons[0]).hasText("level2");
await click(tree.nodes[0].addButtons[0]); await click(tree.nodes[0].addButtons[0]);
tree.refresh(); 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(); 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) { 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); assert.strictEqual(tree.nodes[0].children.length, 2);
await click(tree.nodes[0].addButtons[0]); await click(tree.nodes[0].addButtons[0]);
tree.refresh(); 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) { test("removing an object from the root list of objects", async function (assert) {