From 3f086af2fd7f796c4e14ff6d720c2b76433503b2 Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Wed, 2 Mar 2022 09:06:20 +0000 Subject: [PATCH] [REF] web: Layout: simpler and more generic API With owl2, the `el` of components if no longer available. One must use a t-ref instead. However, higher order components don't have their own html element. This was the case of the View component. However, it makes sense for this component to be the owner of the view root element, which was previously owned by the Layout. This commit refactors the View/Layout architecture s.t. the root element is now owned by the View, and simplifies/generalizes the Layout in the process. The Layout is no longer tied to the notion of views, and can thus be used in client actions as well. closes odoo/odoo#85639 Related: odoo/enterprise#24903 Signed-off-by: Aaron Bohy (aab) Co-authored-by: Michael (mcm) Co-authored-by: Samuel Degueldre --- .../static/src/{views => search}/layout.js | 13 ------ addons/web/static/src/search/layout.xml | 13 ++++++ .../src/search/with_search/with_search.js | 2 - .../web/static/src/views/graph/graph_view.js | 2 +- .../web/static/src/views/graph/graph_view.xml | 2 +- .../src/views/helpers/standard_view_props.js | 1 - addons/web/static/src/views/layout.xml | 17 ------- .../web/static/src/views/pivot/pivot_view.js | 2 +- .../web/static/src/views/pivot/pivot_view.xml | 2 +- addons/web/static/src/views/view.js | 3 +- addons/web/static/src/views/view.xml | 4 +- .../static/tests/views/graph_view_tests.js | 7 ++- addons/web/static/tests/views/layout_tests.js | 36 ++++----------- .../static/tests/views/pivot_view_tests.js | 7 ++- addons/web/static/tests/views/view_tests.js | 45 +++++++++---------- 15 files changed, 61 insertions(+), 95 deletions(-) rename addons/web/static/src/{views => search}/layout.js (68%) create mode 100644 addons/web/static/src/search/layout.xml delete mode 100644 addons/web/static/src/views/layout.xml diff --git a/addons/web/static/src/views/layout.js b/addons/web/static/src/search/layout.js similarity index 68% rename from addons/web/static/src/views/layout.js rename to addons/web/static/src/search/layout.js index 896d1ef9468..85ba5c3caf1 100644 --- a/addons/web/static/src/views/layout.js +++ b/addons/web/static/src/search/layout.js @@ -22,16 +22,6 @@ export class Layout extends LegacyComponent { this.components = extractLayoutComponents(this.env.config); this.display = display; } - get className() { - const classes = this.props.className.split(" "); - if (this.props.useSampleModel) { - classes.push("o_view_sample_data"); - } - if (this.props.viewType) { - classes.push(`o_${this.props.viewType}_view`); - } - return classes.join(" "); - } get controlPanelSlots() { const slots = { ...this.props.slots }; delete slots.default; @@ -40,10 +30,7 @@ export class Layout extends LegacyComponent { } Layout.template = "web.Layout"; -Layout.defaultProps = { className: "" }; Layout.props = { className: { type: String, optional: true }, slots: { type: Object, optional: true }, - viewType: { type: String, optional: true }, - useSampleModel: { type: Boolean, optional: true }, }; diff --git a/addons/web/static/src/search/layout.xml b/addons/web/static/src/search/layout.xml new file mode 100644 index 00000000000..23a246b4201 --- /dev/null +++ b/addons/web/static/src/search/layout.xml @@ -0,0 +1,13 @@ + + + + + +
+ + + +
+ + + diff --git a/addons/web/static/src/search/with_search/with_search.js b/addons/web/static/src/search/with_search/with_search.js index 0d6f4dc7e39..4e53f6c8b9e 100644 --- a/addons/web/static/src/search/with_search/with_search.js +++ b/addons/web/static/src/search/with_search/with_search.js @@ -106,7 +106,5 @@ WithSearch.props = { activateFavorite: { type: Boolean, optional: true }, dynamicFilters: { type: Array, element: Object, optional: true }, searchMenuTypes: { type: Array, element: String, optional: true }, - - class: { type: String, optional: true }, }; WithSearch.template = "web.WithSearch"; diff --git a/addons/web/static/src/views/graph/graph_view.js b/addons/web/static/src/views/graph/graph_view.js index b345b2c8150..bd229973b76 100644 --- a/addons/web/static/src/views/graph/graph_view.js +++ b/addons/web/static/src/views/graph/graph_view.js @@ -5,10 +5,10 @@ import { DropdownItem } from "@web/core/dropdown/dropdown_item"; import { _lt } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; import { useService } from "@web/core/utils/hooks"; +import { Layout } from "@web/search/layout"; import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu"; import { standardViewProps } from "@web/views/helpers/standard_view_props"; import { useSetupView } from "@web/views/helpers/view_hook"; -import { Layout } from "@web/views/layout"; import { useModel } from "../helpers/model"; import { GraphArchParser } from "./graph_arch_parser"; import { GraphModel } from "./graph_model"; diff --git a/addons/web/static/src/views/graph/graph_view.xml b/addons/web/static/src/views/graph/graph_view.xml index 04ec625a420..26132bf647d 100644 --- a/addons/web/static/src/views/graph/graph_view.xml +++ b/addons/web/static/src/views/graph/graph_view.xml @@ -46,7 +46,7 @@ - + diff --git a/addons/web/static/src/views/helpers/standard_view_props.js b/addons/web/static/src/views/helpers/standard_view_props.js index a6cf7f1944d..7017a572b33 100644 --- a/addons/web/static/src/views/helpers/standard_view_props.js +++ b/addons/web/static/src/views/helpers/standard_view_props.js @@ -19,7 +19,6 @@ export const standardViewProps = { }, resModel: String, arch: { type: String }, - className: { type: String, optional: 1 }, comparison: { validate: () => true }, // fix problem with validation with type: [Object, null] // Issue OWL: https://github.com/odoo/owl/issues/910 context: { type: Object }, diff --git a/addons/web/static/src/views/layout.xml b/addons/web/static/src/views/layout.xml deleted file mode 100644 index bf25dda0161..00000000000 --- a/addons/web/static/src/views/layout.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - -
- - - -
- - - -
-
- - - diff --git a/addons/web/static/src/views/pivot/pivot_view.js b/addons/web/static/src/views/pivot/pivot_view.js index 1ba40c972a3..e4bc27f509c 100644 --- a/addons/web/static/src/views/pivot/pivot_view.js +++ b/addons/web/static/src/views/pivot/pivot_view.js @@ -6,10 +6,10 @@ import { _lt } from "@web/core/l10n/translation"; import { download } from "@web/core/network/download"; import { registry } from "@web/core/registry"; import { useService } from "@web/core/utils/hooks"; +import { Layout } from "@web/search/layout"; import { useModel } from "@web/views/helpers/model"; import { standardViewProps } from "@web/views/helpers/standard_view_props"; import { useSetupView } from "@web/views/helpers/view_hook"; -import { Layout } from "@web/views/layout"; import { PivotArchParser } from "@web/views/pivot/pivot_arch_parser"; import { PivotModel } from "@web/views/pivot/pivot_model"; import { PivotRenderer } from "@web/views/pivot/pivot_renderer"; diff --git a/addons/web/static/src/views/pivot/pivot_view.xml b/addons/web/static/src/views/pivot/pivot_view.xml index 4fe993bf5b4..884ea411d5d 100644 --- a/addons/web/static/src/views/pivot/pivot_view.xml +++ b/addons/web/static/src/views/pivot/pivot_view.xml @@ -17,7 +17,7 @@ - + diff --git a/addons/web/static/src/views/view.js b/addons/web/static/src/views/view.js index 43c5b22e1ff..b9badd7a5ee 100644 --- a/addons/web/static/src/views/view.js +++ b/addons/web/static/src/views/view.js @@ -5,9 +5,9 @@ import { registry } from "@web/core/registry"; import { KeepLast } from "@web/core/utils/concurrency"; import { useService } from "@web/core/utils/hooks"; import { deepCopy } from "@web/core/utils/objects"; +import { extractLayoutComponents } from "@web/search/layout"; import { WithSearch } from "@web/search/with_search/with_search"; import { useActionLinks } from "@web/views/helpers/view_hook"; -import { extractLayoutComponents } from "@web/views/layout"; import { LegacyComponent } from "@web/legacy/legacy_component"; const { onWillUpdateProps, onWillStart, toRaw, useSubEnv } = owl; @@ -255,7 +255,6 @@ export class View extends LegacyComponent { const viewProps = { info: { actionMenus, mode: this.props.display.mode }, arch, - className: "o_action o_view_controller", fields, resModel, useSampleModel: false, diff --git a/addons/web/static/src/views/view.xml b/addons/web/static/src/views/view.xml index 05f163ce586..bef241bd4cd 100644 --- a/addons/web/static/src/views/view.xml +++ b/addons/web/static/src/views/view.xml @@ -2,7 +2,9 @@ - +
+ +
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js index f5e90d70a9b..ab68a9ad0c6 100644 --- a/addons/web/static/tests/views/graph_view_tests.js +++ b/addons/web/static/tests/views/graph_view_tests.js @@ -3244,14 +3244,17 @@ QUnit.module("Views", (hooks) => { noContentHelp: '

click to add a foo

', }); - assert.hasClass(target.querySelector(".o_graph_view"), "o_view_sample_data"); + assert.hasClass(target.querySelector(".o_graph_view .o_content"), "o_view_sample_data"); assert.containsOnce(target, ".o_view_nocontent"); assert.containsOnce(target, ".o_graph_canvas_container canvas"); assert.hasClass(target.querySelector(".o_graph_renderer"), "o_sample_data_disabled"); await toggleFilterMenu(target); await toggleMenuItem(target, "False Domain"); - assert.doesNotHaveClass(target, "o_view_sample_data"); + assert.doesNotHaveClass( + target.querySelector(".o_graph_view .o_content"), + "o_view_sample_data" + ); assert.containsNone(target, ".o_view_nocontent"); assert.containsOnce(target, ".o_graph_canvas_container canvas"); assert.doesNotHaveClass( diff --git a/addons/web/static/tests/views/layout_tests.js b/addons/web/static/tests/views/layout_tests.js index 144cabc548e..19ef6455c8a 100644 --- a/addons/web/static/tests/views/layout_tests.js +++ b/addons/web/static/tests/views/layout_tests.js @@ -4,7 +4,7 @@ import { getFixture, mount } from "@web/../tests/helpers/utils"; import { makeWithSearch, setupControlPanelServiceRegistry } from "@web/../tests/search/helpers"; import { dialogService } from "@web/core/dialog/dialog_service"; import { registry } from "@web/core/registry"; -import { Layout } from "@web/views/layout"; +import { Layout } from "@web/search/layout"; import { getDefaultConfig } from "@web/views/view"; import { makeTestEnv } from "@web/../tests/helpers/mock_env"; @@ -51,11 +51,9 @@ QUnit.module("Views", (hooks) => { QUnit.module("Layout"); QUnit.test("Simple rendering", async (assert) => { - assert.expect(5); - class ToyComponent extends Component {} ToyComponent.template = xml` - +
`; ToyComponent.components = { Layout }; @@ -63,7 +61,7 @@ QUnit.module("Views", (hooks) => { const env = await makeTestEnv({ config: {} }); await mount(ToyComponent, getFixture(), { env }); - assert.containsOnce(target, ".o_toy_view.o_view_sample_data"); + assert.containsOnce(target, ".o_view_sample_data"); assert.containsNone(target, ".o_control_panel"); assert.containsNone(target, ".o_component_with_search_panel"); assert.containsNone(target, ".o_search_panel"); @@ -71,11 +69,9 @@ QUnit.module("Views", (hooks) => { }); QUnit.test("Simple rendering: with search", async (assert) => { - assert.expect(6); - class ToyComponent extends Component {} ToyComponent.template = xml` - +
@@ -90,8 +86,6 @@ QUnit.module("Views", (hooks) => { searchViewId: false, }); - assert.containsOnce(target, ".o_toy_view"); - assert.containsNone(target, ".o_view_sample_data"); assert.containsOnce(target, ".o_control_panel .o_cp_top_right .toy_search_bar"); assert.containsOnce(target, ".o_component_with_search_panel .o_search_panel"); assert.containsNone(target, ".o_cp_searchview"); @@ -99,10 +93,7 @@ QUnit.module("Views", (hooks) => { }); QUnit.test("Nested layouts", async (assert) => { - assert.expect(10); - // Component C: bottom (no control panel) - class ToyC extends Component { setup() { useChildSubEnv({ @@ -116,13 +107,12 @@ QUnit.module("Views", (hooks) => { } } ToyC.template = xml` - +
`; ToyC.components = { Layout }; // Component B: center (with custom search panel) - class SearchPanel extends Component {} SearchPanel.template = xml`
`; @@ -137,7 +127,7 @@ QUnit.module("Views", (hooks) => { } } ToyB.template = xml` - +
@@ -149,7 +139,7 @@ QUnit.module("Views", (hooks) => { class ToyA extends Component {} ToyA.template = xml` - +
@@ -164,9 +154,7 @@ QUnit.module("Views", (hooks) => { searchViewId: false, }); - assert.containsOnce(target, ".o_toy_a_view"); - assert.containsNone(target, ".o_view_sample_data"); - assert.containsOnce(target, ".o_content .o_toy_b_view .o_content .o_toy_c_view .o_content"); // Full chain of contents + assert.containsOnce(target, ".o_content.toy_a .o_content.toy_b .o_content.toy_c"); // Full chain of contents assert.containsN(target, ".o_control_panel", 2); // Component C has hidden its control panel assert.containsN(target, ".o_content.o_component_with_search_panel", 3); assert.containsOnce(target, ".o_search_panel"); // Standard search panel @@ -177,8 +165,6 @@ QUnit.module("Views", (hooks) => { }); QUnit.test("Custom control panel", async (assert) => { - assert.expect(3); - class ToyComponent extends Component {} ToyComponent.template = xml` @@ -203,8 +189,6 @@ QUnit.module("Views", (hooks) => { }); QUnit.test("Custom search panel", async (assert) => { - assert.expect(3); - class ToyComponent extends Component {} ToyComponent.template = xml` @@ -229,8 +213,6 @@ QUnit.module("Views", (hooks) => { }); QUnit.test("Custom banner: no bannerRoute in env", async (assert) => { - assert.expect(2); - class ToyComponent extends Component {} ToyComponent.template = xml` @@ -254,8 +236,6 @@ QUnit.module("Views", (hooks) => { }); QUnit.test("Custom banner: with bannerRoute in env", async (assert) => { - assert.expect(2); - class ToyComponent extends Component {} ToyComponent.template = xml` diff --git a/addons/web/static/tests/views/pivot_view_tests.js b/addons/web/static/tests/views/pivot_view_tests.js index 3cd27365abd..cbdba929c80 100644 --- a/addons/web/static/tests/views/pivot_view_tests.js +++ b/addons/web/static/tests/views/pivot_view_tests.js @@ -4702,13 +4702,16 @@ QUnit.module("Views", (hooks) => { }, }); - assert.hasClass(target.querySelector(".o_pivot_view"), "o_view_sample_data"); + assert.hasClass(target.querySelector(".o_pivot_view .o_content"), "o_view_sample_data"); assert.containsOnce(target, ".o_view_nocontent .abc"); assert.containsOnce(target, "table.o_sample_data_disabled"); await removeFacet(target); - assert.doesNotHaveClass(target, "o_view_sample_data"); + assert.doesNotHaveClass( + target.querySelector(".o_pivot_view .o_content"), + "o_view_sample_data" + ); assert.containsNone(target, ".o_view_nocontent .abc"); assert.containsOnce(target, "table"); assert.doesNotHaveClass(target.querySelector("table"), "o_sample_data_disabled"); diff --git a/addons/web/static/tests/views/view_tests.js b/addons/web/static/tests/views/view_tests.js index 440db8d071e..3ca99b18046 100644 --- a/addons/web/static/tests/views/view_tests.js +++ b/addons/web/static/tests/views/view_tests.js @@ -74,7 +74,7 @@ QUnit.module("Views", (hooks) => { class ToyView extends Component { setup() { - this.class = "o_toy_view"; + this.class = "toy"; this.template = xml`${this.props.arch}`; } } @@ -85,7 +85,7 @@ QUnit.module("Views", (hooks) => { class ToyViewImp extends ToyView { setup() { super.setup(); - this.class = "o_toy_view_imp"; + this.class = "toy_imp"; } } @@ -114,15 +114,14 @@ QUnit.module("Views", (hooks) => { //////////////////////////////////////////////////////////////////////////// QUnit.test("simple rendering", async function (assert) { - assert.expect(11); + assert.expect(10); const ToyView = viewRegistry.get("toy"); patchWithCleanup(ToyView.prototype, { setup() { this._super(); - const { arch, fields, info, className } = this.props; + const { arch, fields, info } = this.props; assert.strictEqual(arch, serverData.views["animal,false,toy"]); - assert.strictEqual(className, "o_action o_view_controller"); assert.deepEqual(fields, serverData.models.animal.fields); assert.strictEqual(info.actionMenus, undefined); assert.strictEqual(this.env.config.viewId, false); @@ -144,9 +143,9 @@ QUnit.module("Views", (hooks) => { resModel: "animal", type: "toy", }); - assert.containsOnce(target, ".o_toy_view"); + assert.containsOnce(target, ".o_toy_view.o_action.o_view_controller"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, serverData.views["animal,false,toy"] ); }); @@ -182,7 +181,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, serverData.views["animal,1,toy"] ); }); @@ -221,7 +220,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, serverData.views["animal,1,toy"] ); }); @@ -264,7 +263,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, serverData.views["animal,false,toy"] ); } @@ -310,7 +309,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, serverData.views["animal,1,toy"] ); }); @@ -342,7 +341,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, `Specific arch content` ); }); @@ -379,7 +378,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, serverData.views["animal,false,toy"] ); }); @@ -420,7 +419,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, `Specific arch content` ); } @@ -459,7 +458,7 @@ QUnit.module("Views", (hooks) => { }); assert.containsOnce(target, ".o_toy_view"); assert.strictEqual( - target.querySelector(".o_toy_view").innerHTML, + target.querySelector(".o_toy_view .toy").innerHTML, `Specific arch content` ); } @@ -1205,9 +1204,9 @@ QUnit.module("Views", (hooks) => { resModel: "animal", type: "toy_imp", }); - assert.containsOnce(target, ".o_toy_view_imp"); + assert.containsOnce(target, ".o_toy_view .toy_imp"); assert.strictEqual( - target.querySelector(".o_toy_view_imp").innerText, + target.querySelector(".o_toy_view .toy_imp").innerText, "Arch content (id=false)" ); }); @@ -1228,9 +1227,9 @@ QUnit.module("Views", (hooks) => { type: "toy", viewId: 2, }); - assert.containsOnce(target, ".o_toy_view_imp"); + assert.containsOnce(target, ".o_toy_view .toy_imp"); assert.strictEqual( - target.querySelector(".o_toy_view_imp").innerText, + target.querySelector(".o_toy_view .toy_imp").innerText, "Arch content (id=2)" ); }); @@ -1247,9 +1246,9 @@ QUnit.module("Views", (hooks) => { arch: `Specific arch content for specific class`, fields: {}, }); - assert.containsOnce(target, ".o_toy_view_imp"); + assert.containsOnce(target, ".o_toy_view .toy_imp"); assert.strictEqual( - target.querySelector(".o_toy_view_imp").innerText, + target.querySelector(".o_toy_view .toy_imp").innerText, "Specific arch content for specific class" ); }); @@ -1278,7 +1277,7 @@ QUnit.module("Views", (hooks) => { type: "toy_2", viewId: 2, }); - assert.containsOnce(target, ".o_toy_view_imp", "jsClass from arch prefered"); + assert.containsOnce(target, ".o_toy_view .toy_imp", "jsClass from arch prefered"); } ); @@ -1302,7 +1301,7 @@ QUnit.module("Views", (hooks) => { arch: ``, fields: {}, }); - assert.containsOnce(target, ".o_toy_view_imp", "jsClass from arch prefered"); + assert.containsOnce(target, ".o_toy_view .toy_imp", "jsClass from arch prefered"); } );