-
+
+
diff --git a/addons/web/static/src/webclient/commands/command_service.js b/addons/web/static/src/webclient/commands/command_service.js
index c15ceab6522..28e602b0da2 100644
--- a/addons/web/static/src/webclient/commands/command_service.js
+++ b/addons/web/static/src/webclient/commands/command_service.js
@@ -3,10 +3,14 @@
import { registry } from "@web/core/registry";
import { CommandPaletteDialog } from "./command_palette_dialog";
+/**
+ * @typedef {import("./command_palette").NextProvider} NextProvider
+ */
+
/**
* @typedef {{
* name: string,
- * action: ()=>void,
+ * action: ()=>(void | NextProvider),
* category?: string,
* hotkey?: string,
* hotkeyOptions?: any,
@@ -114,6 +118,10 @@ export const commandService = {
unregisterCommand(token);
};
},
+ /**
+ * @param {HTMLElement} activeElement
+ * @returns {Command[]}
+ */
getCommands(activeElement) {
return [...registeredCommands.values()].filter(
(command) => command.activeElement === activeElement
diff --git a/addons/web/static/src/webclient/commands/default_providers.js b/addons/web/static/src/webclient/commands/default_providers.js
index ab2b942aa8e..615992da6eb 100644
--- a/addons/web/static/src/webclient/commands/default_providers.js
+++ b/addons/web/static/src/webclient/commands/default_providers.js
@@ -9,14 +9,11 @@ import { DefaultCommandItem } from "./command_palette";
const { Component } = owl;
-class HotkeyCommandItem extends Component {
+export class HotkeyCommandItem extends Component {
setup() {
- if (this.props.hotkey) {
- useHotkey(this.props.hotkey, () => {
- this.props.action();
- this.trigger("close");
- });
- }
+ useHotkey(this.props.hotkey, () => {
+ this.trigger("execute-command");
+ });
}
getKeysToPress(command) {
@@ -30,15 +27,21 @@ class HotkeyCommandItem extends Component {
return result.map((key) => key.toUpperCase());
}
}
-HotkeyCommandItem.template = "web.hotkeyCommandItem";
+HotkeyCommandItem.template = "web.HotkeyCommandItem";
const commandProviderRegistry = registry.category("command_provider");
commandProviderRegistry.add("command", {
provide: (env, options = {}) => {
const commands = env.services.command.getCommands(options.activeElement);
return commands.map((command) => ({
- ...command,
Component: command.hotkey ? HotkeyCommandItem : DefaultCommandItem,
+ action: command.action,
+ category: command.category,
+ name: command.name,
+ props: {
+ hotkey: command.hotkey,
+ hotkeyOptions: command.hotkeyOptions,
+ },
}));
},
});
@@ -63,19 +66,19 @@ commandProviderRegistry.add("data-hotkeys", {
`${el.innerText.slice(0, 50)}${el.innerText.length > 50 ? "..." : ""}`) ||
"no description provided";
commands.push({
- name: capitalize(description.trim().toLowerCase()),
- hotkey: `${overlayModifier}+${el.dataset.hotkey}`,
+ Component: HotkeyCommandItem,
action: () => {
// AAB: not sure it is enough, we might need to trigger all events that occur when you actually click
el.focus();
el.click();
},
category,
+ name: capitalize(description.trim().toLowerCase()),
+ props: {
+ hotkey: `${overlayModifier}+${el.dataset.hotkey}`,
+ },
});
}
- return commands.map((command) => ({
- ...command,
- Component: HotkeyCommandItem,
- }));
+ return commands;
},
});
diff --git a/addons/web/static/tests/webclient/commands/command_service_tests.js b/addons/web/static/tests/webclient/commands/command_service_tests.js
index 34ec8b9483d..d2cc07474d8 100644
--- a/addons/web/static/tests/webclient/commands/command_service_tests.js
+++ b/addons/web/static/tests/webclient/commands/command_service_tests.js
@@ -2,14 +2,14 @@
import { browser } from "@web/core/browser/browser";
import { dialogService } from "@web/core/dialog/dialog_service";
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
import { registry } from "@web/core/registry";
import { uiService, useActiveElement } from "@web/core/ui/ui_service";
import { useCommand } from "@web/webclient/commands/command_hook";
import { commandService } from "@web/webclient/commands/command_service";
-import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
-import { makeTestEnv } from "../../helpers/mock_env";
+import { HotkeyCommandItem } from "@web/webclient/commands/default_providers";
+import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
import { click, getFixture, nextTick, patchWithCleanup, triggerHotkey } from "../../helpers/utils";
-import { clearRegistryWithCleanup } from "../../helpers/mock_env";
const { Component, mount, tags } = owl;
const { xml } = tags;
@@ -358,8 +358,8 @@ QUnit.test("defined multiple providers with the same nameSpace", async (assert)
nameSpace: "__default__",
provide: () =>
defaultNames.map((name) => ({
- name,
action,
+ name,
})),
});
@@ -367,8 +367,8 @@ QUnit.test("defined multiple providers with the same nameSpace", async (assert)
commandProviderRegistry.add("other", {
provide: () =>
otherNames.map((name) => ({
- name,
action,
+ name,
})),
});
@@ -408,8 +408,8 @@ QUnit.test("can switch between command providers", async (assert) => {
commandProviderRegistry.add("default", {
provide: () =>
defaultNames.map((name) => ({
- name,
action,
+ name,
})),
});
@@ -418,8 +418,8 @@ QUnit.test("can switch between command providers", async (assert) => {
nameSpace: "@",
provide: () =>
otherNames.map((name) => ({
- name,
action,
+ name,
})),
});
@@ -483,16 +483,16 @@ QUnit.test("multi level commands", async (assert) => {
placeHolder: "Who is the next King ?",
provide: () =>
otherNames.map((name) => ({
- name,
action: () => {},
+ name,
})),
});
commandProviderRegistry.add("default", {
provide: () =>
defaultNames.map((name) => ({
- name,
action,
+ name,
})),
});
@@ -536,6 +536,83 @@ QUnit.test("multi level commands", async (assert) => {
);
});
+QUnit.test("multi level commands with hotkey", async (assert) => {
+ assert.expect(5);
+
+ patchWithCleanup(browser, {
+ clearTimeout: () => {},
+ setTimeout: (later, wait) => {
+ later();
+ },
+ });
+
+ clearRegistryWithCleanup(commandProviderRegistry);
+
+ const otherNames = ["Cersei", "Lannister"];
+ const action = () => ({
+ placeHolder: "Who is the next King ?",
+ provide: () =>
+ otherNames.map((name) => ({
+ action: () => {},
+ name,
+ })),
+ });
+
+ const hotkey = "a";
+ const name = "John";
+ commandProviderRegistry.add("default", {
+ provide: () => [
+ {
+ Component: HotkeyCommandItem,
+ action,
+ name,
+ props: {
+ hotkey,
+ },
+ },
+ ],
+ });
+
+ testComponent = await mount(TestComponent, { env, target });
+
+ // Open palette
+ triggerHotkey("control+k");
+ await nextTick();
+
+ assert.deepEqual(
+ target.querySelector(".o_command_palette_search input").value,
+ "",
+ "search input is empty"
+ );
+
+ assert.deepEqual(
+ target.querySelector(".o_command_palette_search input").placeholder,
+ "Search for an action...",
+ "the default placeholder is correctly displayed"
+ );
+
+ assert.deepEqual(
+ [...target.querySelectorAll(".o_command")].map((el) => el.textContent.toLowerCase()),
+ [(name + hotkey).toLowerCase()],
+ "all default commands are present"
+ );
+
+ triggerHotkey("a");
+ await nextTick();
+
+ assert.deepEqual(
+ target.querySelector(".o_command_palette_search input").placeholder,
+ "Who is the next King ?",
+ "the new placeholder is correctly displayed"
+ );
+
+ assert.deepEqual(
+ [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
+ otherNames,
+ "all default commands are present"
+ );
+});
+
QUnit.test("navigate in the command palette with the arrows", async (assert) => {
assert.expect(6);