Show the gameplay test run button at the center of the toolbar

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<void>,
-  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}
         />

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 (
-    <ToolbarGroup lastChild>
-      <IconButton
-        size="small"
-        color="default"
-        onClick={onToggleProperties}
-        selected={isPropertiesShown}
-        tooltip={
-          isPropertiesShown
-            ? t`Close Properties Panel`
-            : t`Open Properties Panel`
-        }
-      >
-        <PropertiesPanelIcon />
-      </IconButton>
-      {isRunning ? (
-        <FlatButton
-          primary
-          onClick={onStopTest}
-          leftIcon={<StopIcon />}
-          label={<Trans>Stop the test</Trans>}
-        />
-      ) : (
-        <RaisedButtonWithSplitMenu
-          primary
-          onClick={() => onRunTest({ speedFactor: null })}
-          icon={<PlayIcon />}
-          label={<Trans>Run the test</Trans>}
-          disabled={!canRun}
-          buildMenuTemplate={(i18n: I18nType) =>
-            buildRunTestSpeedMenuTemplate(i18n, onRunTest)
+    <>
+      {/* Centered in the toolbar, like the preview button of the other editors. */}
+      <ToolbarGroup>
+        <Spacer />
+        {isRunning ? (
+          <FlatButton
+            primary
+            onClick={onStopTest}
+            leftIcon={<StopIcon />}
+            label={<Trans>Stop the test</Trans>}
+          />
+        ) : (
+          <RaisedButtonWithSplitMenu
+            primary
+            onClick={() => onRunTest({ speedFactor: null })}
+            icon={<PlayIcon />}
+            label={<Trans>Run the test</Trans>}
+            disabled={!canRun}
+            buildMenuTemplate={(i18n: I18nType) =>
+              buildRunTestSpeedMenuTemplate(i18n, onRunTest)
+            }
+          />
+        )}
+        <Spacer />
+      </ToolbarGroup>
+      <ToolbarGroup lastChild>
+        <IconButton
+          size="small"
+          color="default"
+          onClick={onToggleProperties}
+          selected={isPropertiesShown}
+          tooltip={
+            isPropertiesShown
+              ? t`Close Properties Panel`
+              : t`Open Properties Panel`
           }
-        />
-      )}
-    </ToolbarGroup>
+        >
+          <PropertiesPanelIcon />
+        </IconButton>
+      </ToolbarGroup>
+    </>
   );
 };
 

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,25 +116,21 @@ type Props = {|
   /** The frame currently reached by the running test, if known. */
   runningFrame?: number | null,
   lastResult: GameplayTestResult | null,
-  onRunTest: (options: GameplayTestRunSpeedOptions) => void | Promise<void>,
-  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,
   scope,
   isRunning,
   runningFrame,
   lastResult,
-  onRunTest,
-  onStopTest,
   onEditWithAi,
   onTestModified,
 }: Props): React.Node => {
@@ -224,15 +214,10 @@ export const GameplayTestProperties = ({
                 <Trans>Test of the extension {scope.extensionName}</Trans>
               )}
             </Text>
-            {isRunning ? (
+            {/* The test is run and stopped from the toolbar button, which stays
+                visible even when this panel is closed. */}
+            {isRunning && (
               <ColumnStackLayout noMargin>
-                <FlatButton
-                  fullWidth
-                  primary
-                  leftIcon={<StopIcon />}
-                  label={<Trans>Stop the test</Trans>}
-                  onClick={onStopTest}
-                />
                 <Line noMargin alignItems="center">
                   <LinearProgress variant="indeterminate" />
                 </Line>
@@ -244,17 +229,6 @@ export const GameplayTestProperties = ({
                   )}
                 </Text>
               </ColumnStackLayout>
-            ) : (
-              <RaisedButtonWithSplitMenu
-                primary
-                fullWidth
-                icon={<PreviewIcon />}
-                label={<Trans>Run the test</Trans>}
-                onClick={() => onRunTest({ speedFactor: null })}
-                buildMenuTemplate={i18n =>
-                  buildRunTestSpeedMenuTemplate(i18n, onRunTest)
-                }
-              />
             )}
             <FlatButton
               fullWidth

newIDE/app/src/MainFrame/EditorContainers/GameplayTestEditorContainer.js

@@ -260,8 +260,6 @@ export class GameplayTestEditorContainer extends React.Component<
           isRunning={this.state.isRunning}
           runningFrame={this.state.runningFrame}
           lastResult={this.state.lastResult}
-          onRunTest={this.runTest}
-          onStopTest={this.stopTest}
           onEditWithAi={this.editWithAi}
           onTestModified={this.onTestModified}
           onOpenedEditorsChanged={() => this.updateToolbar()}

newIDE/app/src/MainFrame/Toolbar/index.js

@@ -150,7 +150,9 @@ export default (React.forwardRef<MainFrameToolbarProps, ToolbarInterface>(
               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 && (
               <ToolbarGroup>
                 <Spacer />
                 <PreviewAndShareButtons
@@ -171,8 +173,6 @@ export default (React.forwardRef<MainFrameToolbarProps, ToolbarInterface>(
                 />
                 <Spacer />
               </ToolbarGroup>
-            ) : (
-              <ToolbarGroup />
             )}
           </>
         ) : null}

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')}
         />