From a172be756fb2f73ef28805fb7002ad14669aa58c Mon Sep 17 00:00:00 2001 From: Romain Estievenart Date: Thu, 13 Oct 2022 10:01:26 +0000 Subject: [PATCH] [REF] web,*: dark mode uses service instead of legacy api This commit adapts the codebase to match its enterprise counterpart where calls to legacy cookie api (cf. web.utils.cookies) are replaced by cookie_service ones. closes odoo/odoo#104080 X-original-commit: 724469e19ff83e91a41c6721e334df1ad8d1c02c Related: odoo/enterprise#33189 Signed-off-by: Pierre Paridans (app) --- .../crm/static/tests/forecast_view_tests.js | 2 + .../static/tests/burndown_chart_tests.js | 3 +- .../static/src/views/fields/ace/ace_field.js | 6 +-- .../journal_dashboard_graph_field.js | 23 ++++++++--- addons/web/static/src/views/graph/colors.js | 17 +++++---- .../static/src/views/graph/graph_renderer.js | 34 +++++++++++------ .../web/static/tests/helpers/mock_services.js | 9 +++++ .../views/fields/ace_editor_field_tests.js | 3 ++ .../journal_dashboard_graph_field_tests.js | 3 ++ .../static/tests/views/graph_view_tests.js | 38 ++++++++++--------- .../webclient/actions/window_action_tests.js | 4 +- 11 files changed, 94 insertions(+), 48 deletions(-) diff --git a/addons/crm/static/tests/forecast_view_tests.js b/addons/crm/static/tests/forecast_view_tests.js index 8432849f64f..a139d69428d 100644 --- a/addons/crm/static/tests/forecast_view_tests.js +++ b/addons/crm/static/tests/forecast_view_tests.js @@ -12,6 +12,7 @@ import { makeView, setupViewRegistries } from "@web/../tests/views/helpers"; import { registry } from "@web/core/registry"; import { mock } from "web.test_utils"; import { browser } from "@web/core/browser/browser"; +import { fakeCookieService } from "@web/../tests/helpers/mock_services"; const patchDate = mock.patchDate; @@ -61,6 +62,7 @@ QUnit.module("Views", (hooks) => { }; setupViewRegistries(); serviceRegistry.add("menu", menuService); + serviceRegistry.add("cookie", fakeCookieService); target = getFixture(); }); diff --git a/addons/project/static/tests/burndown_chart_tests.js b/addons/project/static/tests/burndown_chart_tests.js index f95d7f59659..171f27424b1 100644 --- a/addons/project/static/tests/burndown_chart_tests.js +++ b/addons/project/static/tests/burndown_chart_tests.js @@ -6,7 +6,7 @@ import { setupControlPanelServiceRegistry, toggleGroupByMenu, toggleMenuItem, to import { dialogService } from "@web/core/dialog/dialog_service"; import { makeView } from "@web/../tests/views/helpers"; import { registry } from "@web/core/registry"; -import { makeFakeNotificationService } from "@web/../tests/helpers/mock_services"; +import { makeFakeNotificationService, fakeCookieService } from "@web/../tests/helpers/mock_services"; import { getFirstElementForXpath } from './project_test_utils'; const serviceRegistry = registry.category("services"); @@ -75,6 +75,7 @@ QUnit.module("Project", {}, () => { force: true, }); serviceRegistry.add("dialog", dialogService); + serviceRegistry.add("cookie", fakeCookieService); }); QUnit.module("BurndownChart"); diff --git a/addons/web/static/src/views/fields/ace/ace_field.js b/addons/web/static/src/views/fields/ace/ace_field.js index 721d1c77a34..3ebc2a26297 100644 --- a/addons/web/static/src/views/fields/ace/ace_field.js +++ b/addons/web/static/src/views/fields/ace/ace_field.js @@ -4,17 +4,17 @@ import { loadJS } from "@web/core/assets"; import { _lt } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; +import { useService } from '@web/core/utils/hooks'; import { formatText } from "../formatters"; import { standardFieldProps } from "../standard_field_props"; -import { getCookie } from "web.utils.cookies"; const { Component, onWillStart, onWillUpdateProps, useEffect, useRef } = owl; -const colorSchemeCookie = getCookie("color_scheme"); export class AceField extends Component { setup() { this.aceEditor = null; this.editorRef = useRef("editor"); + this.cookies = useService('cookie'); onWillStart(async () => { await loadJS("/web/static/lib/ace/ace.js"); @@ -48,7 +48,7 @@ export class AceField extends Component { this.aceEditor.setOptions({ maxLines: Infinity, showPrintMargin: false, - theme: (colorSchemeCookie && colorSchemeCookie === "dark" ? 'ace/theme/monokai' : ''), + theme: (this.cookies.current.color_scheme === "dark" ? 'ace/theme/monokai' : ''), }); this.aceEditor.$blockScrolling = true; diff --git a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js index 7a93f8bae6e..6af376aeaf7 100644 --- a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js +++ b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js @@ -4,12 +4,14 @@ import { loadJS } from "@web/core/assets"; import { registry } from "@web/core/registry"; import { getColor, hexToRGBA } from "@web/views/graph/colors"; import { standardFieldProps } from "../standard_field_props"; +import { useService } from "@web/core/utils/hooks"; const { Component, onWillStart, useEffect, useRef } = owl; export class JournalDashboardGraphField extends Component { setup() { this.chart = null; + this.cookies = useService("cookie"); this.canvasRef = useRef("canvas"); this.data = JSON.parse(this.props.value); @@ -50,8 +52,11 @@ export class JournalDashboardGraphField extends Component { const labels = this.data[0].values.map(function (pt) { return pt.x; }); - const borderColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.1) : getColor(10); - const backgroundColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.05) : hexToRGBA(getColor(10), 0.2); + const color10 = getColor(10, this.cookies.current.color_scheme); + const borderColor = this.data[0].is_sample_data ? hexToRGBA(color10, 0.1) : color10; + const backgroundColor = this.data[0].is_sample_data + ? hexToRGBA(color10, 0.05) + : hexToRGBA(color10, 0.2); return { type: "line", data: { @@ -93,12 +98,18 @@ export class JournalDashboardGraphField extends Component { const labels = []; const backgroundColor = []; - this.data[0].values.forEach(function (pt) { + const color13 = getColor(13, this.cookies.current.color_scheme); + const color19 = getColor(19, this.cookies.current.color_scheme); + this.data[0].values.forEach((pt) => { data.push(pt.value); labels.push(pt.label); - const color = - pt.type === "past" ? getColor(13) : pt.type === "future" ? getColor(19) : "#ebebeb"; - backgroundColor.push(color); + if (pt.type === "past") { + backgroundColor.push(color13); + } else if (pt.type === "future") { + backgroundColor.push(color19); + } else { + backgroundColor.push("#ebebeb"); + } }); return { type: "bar", diff --git a/addons/web/static/src/views/graph/colors.js b/addons/web/static/src/views/graph/colors.js index 5f05014dc37..c0313a30769 100644 --- a/addons/web/static/src/views/graph/colors.js +++ b/addons/web/static/src/views/graph/colors.js @@ -1,7 +1,5 @@ /** @odoo-module **/ -import { getCookie } from "web.utils.cookies"; - const COLORS_BRIGHT = [ "#1f77b4", "#ff7f0e", @@ -48,20 +46,25 @@ const COLORS_DARK = [ "#10efed", // Dashboards Secondary ]; -export const COLORS = getCookie("color_scheme") === "dark" ? COLORS_DARK : COLORS_BRIGHT; +export function getColors(colorScheme) { + return colorScheme === "dark" ? COLORS_DARK : COLORS_BRIGHT; +} /** * @param {number} index + * @param {string} colorScheme * @returns {string} */ -export function getColor(index) { - return COLORS[index % COLORS.length]; +export function getColor(index, colorScheme) { + const colors = getColors(colorScheme); + return colors[index % colors.length]; } export const DEFAULT_BG = "#d3d3d3"; -export const BORDER_WHITE = - getCookie("color_scheme") === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(255,255,255,0.6)"; +export function getBorderWhite(colorScheme) { + return colorScheme === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(255,255,255,0.6)"; +} const RGB_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i; diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js index 56375d367ff..ac544df3ad9 100644 --- a/addons/web/static/src/views/graph/graph_renderer.js +++ b/addons/web/static/src/views/graph/graph_renderer.js @@ -1,12 +1,13 @@ /** @odoo-module **/ import { _lt } from "@web/core/l10n/translation"; -import { BORDER_WHITE, DEFAULT_BG, getColor, hexToRGBA } from "./colors"; +import { getBorderWhite, DEFAULT_BG, getColor, hexToRGBA } from "./colors"; import { formatFloat } from "@web/views/fields/formatters"; import { SEP } from "./graph_model"; import { sortBy } from "@web/core/utils/arrays"; import { loadJS } from "@web/core/assets"; import { renderToString } from "@web/core/utils/render"; +import { useService } from "@web/core/utils/hooks"; const { Component, onWillUnmount, useEffect, useRef, onWillStart } = owl; @@ -47,6 +48,7 @@ export class GraphRenderer extends Component { this.rootRef = useRef("root"); this.canvasRef = useRef("canvas"); this.containerRef = useRef("container"); + this.cookies = useService("cookie"); this.chart = null; this.tooltip = null; @@ -211,7 +213,7 @@ export class GraphRenderer extends Component { dataset.stack = domains[dataset.originIndex].description || ""; } // set dataset color - dataset.backgroundColor = getColor(index); + dataset.backgroundColor = getColor(index, this.cookies.current.color_scheme); } return data; @@ -281,7 +283,10 @@ export class GraphRenderer extends Component { const hidden = metaData.some((data) => data[index] && data[index].hidden); const fullText = label; const text = shortenLabel(fullText); - const fillStyle = label === NO_DATA ? DEFAULT_BG : getColor(index); + const fillStyle = + label === NO_DATA + ? DEFAULT_BG + : getColor(index, this.cookies.current.color_scheme); return { text, fullText, fillStyle, hidden, index }; }); return labels; @@ -322,20 +327,22 @@ export class GraphRenderer extends Component { getLineChartData() { const { groupBy, domains, stacked, cumulated } = this.model.metaData; const data = this.model.data; + const color0 = getColor(0, this.cookies.current.color_scheme); + const color1 = getColor(1, this.cookies.current.color_scheme); for (let index = 0; index < data.datasets.length; ++index) { const dataset = data.datasets[index]; if (groupBy.length <= 1 && domains.length > 1) { if (dataset.originIndex === 0) { dataset.fill = "origin"; - dataset.backgroundColor = hexToRGBA(getColor(0), LINE_FILL_TRANSPARENCY); - dataset.borderColor = getColor(0); + dataset.backgroundColor = hexToRGBA(color0, LINE_FILL_TRANSPARENCY); + dataset.borderColor = color0; } else if (dataset.originIndex === 1) { - dataset.borderColor = getColor(1); + dataset.borderColor = color1; } else { - dataset.borderColor = getColor(index); + dataset.borderColor = getColor(index, this.cookies.current.color_scheme); } } else { - dataset.borderColor = getColor(index); + dataset.borderColor = getColor(index, this.cookies.current.color_scheme); } if (data.labels.length === 1) { // shift of the real value to right. This is done to @@ -361,7 +368,7 @@ export class GraphRenderer extends Component { if (data.datasets.length === 1 && data.datasets[0].originIndex === 0) { const dataset = data.datasets[0]; dataset.fill = "origin"; - dataset.backgroundColor = hexToRGBA(getColor(0), LINE_FILL_TRANSPARENCY); + dataset.backgroundColor = hexToRGBA(color0, LINE_FILL_TRANSPARENCY); } // center the points in the chart (without that code they are put // on the left and the graph seems empty) @@ -379,10 +386,13 @@ export class GraphRenderer extends Component { const data = this.model.data; // style/complete data // give same color to same groups from different origins - const colors = data.labels.map((_, index) => getColor(index)); + const colors = data.labels.map((_, index) => + getColor(index, this.cookies.current.color_scheme) + ); + const borderColor = getBorderWhite(this.cookies.current.color_scheme); for (const dataset of data.datasets) { dataset.backgroundColor = colors; - dataset.borderColor = BORDER_WHITE; + dataset.borderColor = borderColor; } // make sure there is a zone associated with every origin const representedOriginIndexes = new Set( @@ -400,7 +410,7 @@ export class GraphRenderer extends Component { data: fakeData, trueLabels: fakeTrueLabels, backgroundColor: [...colors, DEFAULT_BG], - borderColor: BORDER_WHITE, + borderColor, }); addNoDataToLegend = true; } diff --git a/addons/web/static/tests/helpers/mock_services.js b/addons/web/static/tests/helpers/mock_services.js index 1fa499ecc6c..4719c32b011 100644 --- a/addons/web/static/tests/helpers/mock_services.js +++ b/addons/web/static/tests/helpers/mock_services.js @@ -233,6 +233,14 @@ export const fakeTitleService = { }, }; +export const fakeColorSchemeService = { + start() { + return { + switchToColorScheme() {}, + }; + }, +}; + export function makeFakeNotificationService(mock) { return { start() { @@ -306,6 +314,7 @@ export function makeFakeHTTPService(getResponse, postResponse) { } export const mocks = { + color_scheme: () => fakeColorSchemeService, company: () => fakeCompanyService, command: () => fakeCommandService, cookie: () => fakeCookieService, diff --git a/addons/web/static/tests/views/fields/ace_editor_field_tests.js b/addons/web/static/tests/views/fields/ace_editor_field_tests.js index d028d922f38..f4c57c6a533 100644 --- a/addons/web/static/tests/views/fields/ace_editor_field_tests.js +++ b/addons/web/static/tests/views/fields/ace_editor_field_tests.js @@ -1,8 +1,10 @@ /** @odoo-module **/ +import { registry } from "@web/core/registry"; import { getFixture, triggerEvents } from "@web/../tests/helpers/utils"; import { pagerNext } from "@web/../tests/search/helpers"; import { makeView, setupViewRegistries } from "@web/../tests/views/helpers"; +import { fakeCookieService } from "@web/../tests/helpers/mock_services"; let serverData; let target; @@ -31,6 +33,7 @@ QUnit.module("Fields", (hooks) => { }; setupViewRegistries(); + registry.category("services").add("cookie", fakeCookieService); }); QUnit.module("AceEditorField"); diff --git a/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js b/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js index 264fa5c3ebc..e85e7ea2e5e 100644 --- a/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js +++ b/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js @@ -1,5 +1,7 @@ /** @odoo-module **/ +import { registry } from "@web/core/registry"; +import { fakeCookieService } from "@web/../tests/helpers/mock_services"; import { click, getFixture, nextTick, triggerEvent } from "@web/../tests/helpers/utils"; import { makeView, setupViewRegistries } from "@web/../tests/views/helpers"; @@ -83,6 +85,7 @@ QUnit.module("Fields", (hooks) => { }; setupViewRegistries(); + registry.category("services").add("cookie", fakeCookieService); }); async function reloadKanbanView(target) { diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js index ae3b847d5d7..acc55e423d8 100644 --- a/addons/web/static/tests/views/graph_view_tests.js +++ b/addons/web/static/tests/views/graph_view_tests.js @@ -26,9 +26,10 @@ import { makeView, setupViewRegistries } from "@web/../tests/views/helpers"; import { createWebClient, doAction } from "@web/../tests/webclient/helpers"; import { browser } from "@web/core/browser/browser"; import { registry } from "@web/core/registry"; -import { BORDER_WHITE, DEFAULT_BG, COLORS, hexToRGBA } from "@web/views/graph/colors"; +import { getBorderWhite, DEFAULT_BG, getColors, hexToRGBA } from "@web/views/graph/colors"; import { GraphArchParser } from "@web/views/graph/graph_arch_parser"; import { patchWithCleanup } from "../helpers/utils"; +import { fakeCookieService } from "@web/../tests/helpers/mock_services"; const serviceRegistry = registry.category("services"); @@ -312,6 +313,7 @@ QUnit.module("Views", (hooks) => { patchWithCleanup(browser, { setTimeout: (fn) => fn() }); target = getFixture(); + registry.category("services").add("cookie", fakeCookieService); }); QUnit.module("GraphView"); @@ -1148,9 +1150,9 @@ QUnit.module("Views", (hooks) => { "pointBackgroundColor", ]; const datasets = getChart(graph).data.datasets; - + const colors = getColors(); for (let i = 0; i < datasets.length; i++) { - const expectedColor = COLORS[i]; + const expectedColor = colors[i]; expectedDatasets.push({ backgroundColor: hexToRGBA(expectedColor, 0.4), borderColor: expectedColor, @@ -1610,7 +1612,7 @@ QUnit.module("Views", (hooks) => { checkLabels(assert, graph, ["Total"]); checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label", "stack"], { backgroundColor: ["#1f77b4"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [8], label: "", stack: undefined, @@ -1635,7 +1637,7 @@ QUnit.module("Views", (hooks) => { checkLabels(assert, graph, ["false", "true"]); checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data"], { backgroundColor: ["#1f77b4", "#ff7f0e"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [5, 3], }); checkLegend(assert, graph, ["false", "true"]); @@ -1660,7 +1662,7 @@ QUnit.module("Views", (hooks) => { checkLabels(assert, graph, ["Undefined", "black", "red"]); checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data"], { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [8, 10, 13], }); checkLegend(assert, graph, ["Undefined", "black", "red"]); @@ -1701,7 +1703,7 @@ QUnit.module("Views", (hooks) => { checkLabels(assert, graph, ["false / xphone", "false / xpad", "true / xphone"]); checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label"], { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [1, 4, 3], label: "", }); @@ -1747,13 +1749,13 @@ QUnit.module("Views", (hooks) => { [ { backgroundColor: ["#1f77b4"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [6], label: "True group", }, { backgroundColor: ["#1f77b4"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [17], label: "False group", }, @@ -1817,13 +1819,13 @@ QUnit.module("Views", (hooks) => { [ { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [14, 0, 0], label: "True group", }, { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [12, 5, 2], label: "False group", }, @@ -1927,13 +1929,13 @@ QUnit.module("Views", (hooks) => { [ { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8", "#ffbb78"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [1, 1, 0, 0], label: "February 2021", }, { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8", "#ffbb78"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [1, 1, 1, 1], label: "January 2021", }, @@ -2052,13 +2054,13 @@ QUnit.module("Views", (hooks) => { [ { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [14, 0, 0], label: "February 2021", }, { backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [0, 12, 5], label: "January 2021", }, @@ -2115,7 +2117,7 @@ QUnit.module("Views", (hooks) => { [ { backgroundColor: [DEFAULT_BG], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [1], label: null, }, @@ -2152,13 +2154,13 @@ QUnit.module("Views", (hooks) => { [ { backgroundColor: ["#1f77b4"], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [1], label: "True group", }, { backgroundColor: ["#1f77b4", DEFAULT_BG], - borderColor: BORDER_WHITE, + borderColor: getBorderWhite(), data: [undefined, 1], label: "False group", }, diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js index 9e4616885e0..0f6dd5fe5a6 100644 --- a/addons/web/static/tests/webclient/actions/window_action_tests.js +++ b/addons/web/static/tests/webclient/actions/window_action_tests.js @@ -24,7 +24,7 @@ import { errorService } from "../../../src/core/errors/error_service"; import { RPCError } from "@web/core/network/rpc_service"; import { registerCleanup } from "../../helpers/cleanup"; import { WarningDialog } from "@web/core/errors/error_dialogs"; -import { makeFakeUserService } from "@web/../tests/helpers/mock_services"; +import { makeFakeUserService, fakeCookieService } from "@web/../tests/helpers/mock_services"; import * as cpHelpers from "@web/../tests/search/helpers"; const { onMounted } = owl; @@ -1171,6 +1171,7 @@ QUnit.module("ActionManager", (hooks) => { QUnit.test("restore previous view state when switching back", async function (assert) { assert.expect(5); + registry.category("services").add("cookie", fakeCookieService); serverData.actions[3].views.unshift([false, "graph"]); serverData.views["partner,false,graph"] = ""; const webClient = await createWebClient({ serverData }); @@ -1231,6 +1232,7 @@ QUnit.module("ActionManager", (hooks) => { QUnit.test("view switcher is properly highlighted in graph view", async function (assert) { assert.expect(4); + registry.category("services").add("cookie", fakeCookieService); serverData.actions[3].views.splice(1, 1, [false, "graph"]); serverData.views["partner,false,graph"] = ""; const webClient = await createWebClient({ serverData });