Changing the "addButton" signature to allow an object.

This way, in the future, we can add easily more parameters.

Author: moufmouf

docs/maps/api-ui.md

@@ -378,15 +378,20 @@ If the user is in mobile definition, the modal will open in full screen:
 ### Add a button in the action bar
 
 ```ts
-WA.ui.actionBar.addButton(id: string, label: string, clickCallback: (buttonActionBar: AddButtonActionBar) => void): void
+WA.ui.actionBar.addButton(descriptor: {
+    id: string, 
+    label: string,
+    clickCallback: (buttonActionBar: AddButtonActionBar) => void
+}): void
 ```
+
 - id: the id of the button action bar defined.
-- label: the label to display in button action bar.
-- clickCallback: the callback when user click on the button. The callback have `AddButtonActionBar` class in parameter.
+- label: the label to display in the button.
+- clickCallback: function called when the user clicks on the button. The callback is passed a `AddButtonActionBar` instance in parameter.
 
-The `ButtonActionBar` is defined:
+With `AddButtonActionBar` defined as:
 ```ts
-interface AddButtonActionBar{
+interface AddButtonActionBar {
     /* 
     *   the id of the button action bar defined.
     */
@@ -403,15 +408,19 @@ interface AddButtonActionBar{
 ```ts
     WA.ui.actionBar.removeButton(id: string);
 ```
-- id: the id of the button action bar previously defined.
+- id: the id of the action bar button previously defined.
 
-### Example of action bar button
+### Example of an action bar button
 ```ts
     // Add action bar button 'Register'.
-    WA.ui.actionBar.addButton('register-btn', 'Regsiter', (event) => {
-        console.log('Button registered triggered', event);
-        // When user click on the action bar button 'Register', we remove it.
-        WA.ui.actionBar.removeButton('register-btn');
+    WA.ui.actionBar.addButton({
+        id: 'register-btn',
+        label: 'Register', 
+        callback: (event) => {
+            console.log('Button clicked', event);
+            // When a user clicks on the action bar button 'Register', we remove it.
+            WA.ui.actionBar.removeButton('register-btn');
+        }
     });
 ```
 

maps/tests/MenuActionBar/addButtonActionBar.js

@@ -1,13 +1,8 @@
-console.info('In ten seconds, the tuto modal will be launched')
-
-function launchTuto(){
-    console.info('Lunch tuto');
-    WA.ui.actionBar.addButton('register-btn', 'Register', (event) => {
+WA.ui.actionBar.addButton({
+    id: 'register-btn',
+    label: 'Register',
+    callback: (event) => {
         console.log('Button registered triggered', event);
         WA.ui.actionBar.removeButton('register-btn');
-    });
-}
-
-setTimeout(() => {
-    launchTuto();
-}, 2000)
+    }
+});

maps/tests/index.html

@@ -291,6 +291,14 @@ <h2>Iframe API</h2>
                         <a href="#" class="testLink" data-testmap="AlterActionMenuApi/map.json" target="_blank">Test Alter ActionMenu API</a>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-add-action-bar-button"> Success <input type="radio" name="test-add-action-bar-button"> Failure <input type="radio" name="test-add-action-bar-button" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="MenuActionBar/addButtonActionBar.json" target="_blank">Test Add a button in ActionBar <i>(already automated in E2E tests)</i></a>
+                    </td>
+                </tr>
                 <tr>
                     <td>
                         <input type="radio" name="test-player-movement-api"> Success <input type="radio" name="test-player-movement-api"> Failure <input type="radio" name="test-player-movement-api" checked> Pending

play/src/front/Api/Iframe/Ui/ButtonActionBar.ts

@@ -4,6 +4,12 @@ import { apiCallback } from "../registeredCallbacks";
 
 export type ButtonActionBarClickedCallback = (buttonActionBar: AddButtonActionBarEvent) => void;
 
+export type ActionBarButtonDescriptor = {
+    id: string;
+    label: string;
+    callback?: ButtonActionBarClickedCallback;
+};
+
 export class WorkAdventureButtonActionBarCommands extends IframeApiContribution<WorkAdventureButtonActionBarCommands> {
     private _callbacks: Map<string, ButtonActionBarClickedCallback> = new Map<string, ButtonActionBarClickedCallback>();
 
@@ -21,24 +27,20 @@ export class WorkAdventureButtonActionBarCommands extends IframeApiContribution<
     /**
      * Add action bar button
      * {@link http://workadventure.localhost/map-building/api-ui.md#add-action-bar | Website documentation}
-     *
-     * @param id
-     * @param label
-     * @param callback
      */
-    addButton(id: string, label: string, callback?: ButtonActionBarClickedCallback) {
-        if (callback != undefined) this._callbacks.set(id, callback);
+    addButton(descriptor: ActionBarButtonDescriptor) {
+        if (descriptor.callback != undefined) {
+            this._callbacks.set(descriptor.id, descriptor.callback);
+        }
         sendToWorkadventure({
             type: "addButtonActionBar",
-            data: { id, label },
+            data: { id: descriptor.id, label: descriptor.label },
         });
     }
 
     /**
      * Remove action bar button
      * {@link http://workadventure.localhost/map-building/api-ui.md#remove-action-bar | Website documentation}
-     *
-     * @param id
      */
     removeButton(id: string) {
         this._callbacks.delete(id);

tests/tests/buttonactionbar_script.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import {expect, test} from '@playwright/test';
 import { login } from './utils/roles';
 import {evaluateScript} from "./utils/scripting";
 
@@ -14,15 +14,19 @@ test.describe('Button action bar', () => {
 
         // Use script to add new button
         await evaluateScript(page, async () => {
-            return WA.ui.actionBar.addButton('register-btn', 'Register', () => {
-                WA.ui.actionBar.removeButton('register-btn');
+            return WA.ui.actionBar.addButton({
+                id: 'register-btn',
+                label: 'Register',
+                callback: () => {
+                    WA.ui.actionBar.removeButton('register-btn');
+                }
             });
         });
 
         // Click on the register button
-        await page.locator("#register-btn").click();
+        await page.getByText('Register').click();
 
         // Check if the register button is hidden
-        await page.locator("#register-btn").isHidden();
+        await expect(page.getByText('Register')).toHaveCount(0);
     });
 });