[FIX] Actions: ensure the sequence is applied on action children

Currently, the helper 'createActions' pre-sorts a list of menuRegistry
entries but this sort is not applied to the children (which can be
generated dynamically). It never showed up as we rarely add children
entries from different sources and their sequence often matches the
order of insertion in the registry.

closes #7827

Task: 5452669
X-original-commit: d29e94e
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
Signed-off-by: Rémi Rahir (rar) <[email protected]>
Signed-off-by: Pierre Rousseau (pro) <[email protected]>

Author: rrahir

src/actions/action.ts

@@ -121,7 +121,8 @@ export function createAction(item: ActionSpec): Action {
           return children
             .map((child) => (typeof child === "function" ? child(env) : child))
             .flat()
-            .map(createAction);
+            .map(createAction)
+            .sort((a, b) => a.sequence - b.sequence);
         }
       : () => [],
     isReadonlyAllowed: item.isReadonlyAllowed || false,

tests/menus/menu_items_registry.test.ts

@@ -45,7 +45,7 @@ import {
 
 import { Currency, Model } from "../../src";
 
-import { ActionSpec, createAction } from "../../src/actions/action";
+import { ActionSpec, createAction, createActions } from "../../src/actions/action";
 import { CellComposerStore } from "../../src/components/composer/composer/cell_composer_store";
 import { FONT_SIZES } from "../../src/constants";
 import { functionRegistry } from "../../src/functions";
@@ -118,6 +118,7 @@ describe("Top Bar MenuPopover Item Registry", () => {
         id: name,
         name: name,
         execute: () => {},
+        sequence: 1,
       }));
     });
     const env = makeTestEnv();
@@ -2049,3 +2050,32 @@ describe("Menu Item actions", () => {
     expect(executeMock).not.toHaveBeenCalled();
   });
 });
+
+test("Menu children are sorted by sequence", async () => {
+  const env = makeTestEnv();
+  const menuItems = createActions([
+    {
+      id: "menu_1",
+      name: "Menu 1",
+      sequence: 20,
+      children: [
+        {
+          id: "secondItem",
+          name: "bigger sequence Item",
+          sequence: 30,
+          execute: () => {},
+        },
+        {
+          id: "firstItem",
+          name: "lower sequence Item",
+          sequence: 10,
+          execute: () => {},
+        },
+      ],
+    },
+  ]);
+
+  const children = menuItems[0].children(env);
+  expect(children[0].id).toBe("firstItem");
+  expect(children[1].id).toBe("secondItem");
+});