From 7daaa8ea8b8da0adf337cd867982754e3a54ece1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Vivet?= Date: Tue, 1 Sep 2026 15:18:46 +0200 Subject: [PATCH] Show the gameplay test run button at the center of the toolbar The button now takes the place of the preview button of the other editors, and is the only way to run or stop a test: the duplicated button of the properties panel is removed, so that a test can still be run when the panel is closed. --- .../src/GameplayTests/GameplayTestEditor.js | 7 -- .../GameplayTestEditorToolbar.js | 74 ++++++++++--------- .../GameplayTests/GameplayTestProperties.js | 38 ++-------- .../GameplayTestEditorContainer.js | 2 - newIDE/app/src/MainFrame/Toolbar/index.js | 6 +- .../GameplayTestProperties.stories.js | 2 - 6 files changed, 50 insertions(+), 79 deletions(-) diff --git a/newIDE/app/src/GameplayTests/GameplayTestEditor.js b/newIDE/app/src/GameplayTests/GameplayTestEditor.js index 1a375ea46c4a..ae2f89d945c2 100644 --- a/newIDE/app/src/GameplayTests/GameplayTestEditor.js +++ b/newIDE/app/src/GameplayTests/GameplayTestEditor.js @@ -22,7 +22,6 @@ import { type GameplayTestScope, } from './GameplayTestRunner'; import { GameplayTestProperties } from './GameplayTestProperties'; -import { type GameplayTestRunSpeedOptions } from './GameplayTestEditorToolbar'; export type GameplayTestEditorInterface = {| forceUpdate: () => void, @@ -44,8 +43,6 @@ type Props = {| isRunning: boolean, runningFrame: number | null, lastResult: GameplayTestResult | null, - onRunTest: (options: GameplayTestRunSpeedOptions) => void | Promise, - onStopTest: () => void, onEditWithAi: () => void, onTestModified: () => void, onOpenedEditorsChanged: () => void, @@ -66,8 +63,6 @@ const GameplayTestEditor: React.ComponentType<{ isRunning, runningFrame, lastResult, - onRunTest, - onStopTest, onEditWithAi, onTestModified, } = props; @@ -115,8 +110,6 @@ const GameplayTestEditor: React.ComponentType<{ isRunning={isRunning} runningFrame={runningFrame} lastResult={lastResult} - onRunTest={onRunTest} - onStopTest={onStopTest} onEditWithAi={onEditWithAi} onTestModified={onTestModified} /> diff --git a/newIDE/app/src/GameplayTests/GameplayTestEditorToolbar.js b/newIDE/app/src/GameplayTests/GameplayTestEditorToolbar.js index 8386e0391d76..f44c1008f277 100644 --- a/newIDE/app/src/GameplayTests/GameplayTestEditorToolbar.js +++ b/newIDE/app/src/GameplayTests/GameplayTestEditorToolbar.js @@ -4,6 +4,7 @@ import * as React from 'react'; import { type I18n as I18nType } from '@lingui/core'; import { type MenuItemTemplate } from '../UI/Menu/Menu.flow'; import { ToolbarGroup } from '../UI/Toolbar'; +import { Spacer } from '../UI/Grid'; import RaisedButtonWithSplitMenu from '../UI/RaisedButtonWithSplitMenu'; import FlatButton from '../UI/FlatButton'; import IconButton from '../UI/IconButton'; @@ -56,40 +57,47 @@ export const Toolbar = ({ isPropertiesShown, }: Props): React.Node => { return ( - - - - - {isRunning ? ( - } - label={Stop the test} - /> - ) : ( - onRunTest({ speedFactor: null })} - icon={} - label={Run the test} - disabled={!canRun} - buildMenuTemplate={(i18n: I18nType) => - buildRunTestSpeedMenuTemplate(i18n, onRunTest) + <> + {/* Centered in the toolbar, like the preview button of the other editors. */} + + + {isRunning ? ( + } + label={Stop the test} + /> + ) : ( + onRunTest({ speedFactor: null })} + icon={} + label={Run the test} + disabled={!canRun} + buildMenuTemplate={(i18n: I18nType) => + buildRunTestSpeedMenuTemplate(i18n, onRunTest) + } + /> + )} + + + + - )} - + > + + + + ); }; diff --git a/newIDE/app/src/GameplayTests/GameplayTestProperties.js b/newIDE/app/src/GameplayTests/GameplayTestProperties.js index 66195429757d..8bc5597efdd6 100644 --- a/newIDE/app/src/GameplayTests/GameplayTestProperties.js +++ b/newIDE/app/src/GameplayTests/GameplayTestProperties.js @@ -1,10 +1,5 @@ // @flow import { Trans, t } from '@lingui/macro'; -import { - buildRunTestSpeedMenuTemplate, - type GameplayTestRunSpeedOptions, -} from './GameplayTestEditorToolbar'; -import RaisedButtonWithSplitMenu from '../UI/RaisedButtonWithSplitMenu'; import { I18n } from '@lingui/react'; import * as React from 'react'; import { Column, Line, Spacer, marginsSize } from '../UI/Grid'; @@ -21,7 +16,6 @@ import { textEllipsisStyle } from '../UI/TextEllipsis'; import useForceUpdate from '../Utils/UseForceUpdate'; import { getRelativeOrAbsoluteDisplayDate } from '../Utils/DateDisplay'; import PreviewIcon from '../UI/CustomSvgIcons/Preview'; -import StopIcon from '../UI/CustomSvgIcons/Stop'; import CheckIcon from '../UI/CustomSvgIcons/Check'; import CrossIcon from '../UI/CustomSvgIcons/Cross'; import RobotIcon from '../ProjectCreation/RobotIcon'; @@ -122,16 +116,14 @@ type Props = {| /** The frame currently reached by the running test, if known. */ runningFrame?: number | null, lastResult: GameplayTestResult | null, - onRunTest: (options: GameplayTestRunSpeedOptions) => void | Promise, - onStopTest: () => void, onEditWithAi: () => void, onTestModified: () => void, |}; /** - * The properties panel of a gameplay test: its name/description, the button to - * run it and everything showing the outcome of the last run (status, - * assertions, errors, console logs and screenshots). + * The properties panel of a gameplay test: its name/description and everything + * showing the outcome of the last run (status, assertions, errors, console + * logs and screenshots). The test itself is run from the toolbar button. */ export const GameplayTestProperties = ({ test, @@ -139,8 +131,6 @@ export const GameplayTestProperties = ({ isRunning, runningFrame, lastResult, - onRunTest, - onStopTest, onEditWithAi, onTestModified, }: Props): React.Node => { @@ -224,15 +214,10 @@ export const GameplayTestProperties = ({ Test of the extension {scope.extensionName} )} - {isRunning ? ( + {/* The test is run and stopped from the toolbar button, which stays + visible even when this panel is closed. */} + {isRunning && ( - } - label={Stop the test} - onClick={onStopTest} - /> @@ -244,17 +229,6 @@ export const GameplayTestProperties = ({ )} - ) : ( - } - label={Run the test} - onClick={() => onRunTest({ speedFactor: null })} - buildMenuTemplate={i18n => - buildRunTestSpeedMenuTemplate(i18n, onRunTest) - } - /> )} this.updateToolbar()} diff --git a/newIDE/app/src/MainFrame/Toolbar/index.js b/newIDE/app/src/MainFrame/Toolbar/index.js index fa5991a9ba4a..c68df1aa5f0d 100644 --- a/newIDE/app/src/MainFrame/Toolbar/index.js +++ b/newIDE/app/src/MainFrame/Toolbar/index.js @@ -150,7 +150,9 @@ export default (React.forwardRef( projectPath={props.projectPath} triggerNpmScript={props.triggerNpmScript} /> - {props.showPreviewAndShareButtons ? ( + {/* When there is no preview button (a gameplay test), the editor + toolbar provides its own centered group taking its place. */} + {props.showPreviewAndShareButtons && ( ( /> - ) : ( - )} ) : null} diff --git a/newIDE/app/src/stories/componentStories/GameplayTests/GameplayTestProperties.stories.js b/newIDE/app/src/stories/componentStories/GameplayTests/GameplayTestProperties.stories.js index bc7b239e6586..769d0fabc7be 100644 --- a/newIDE/app/src/stories/componentStories/GameplayTests/GameplayTestProperties.stories.js +++ b/newIDE/app/src/stories/componentStories/GameplayTests/GameplayTestProperties.stories.js @@ -137,8 +137,6 @@ const PropertiesPanelStory = ({ isRunning={!!isRunning} runningFrame={runningFrame || null} lastResult={lastResult || null} - onRunTest={action('run test')} - onStopTest={action('stop test')} onEditWithAi={action('edit with AI')} onTestModified={action('test modified')} />