Add more help buttons in newIDE and various minor fixes

newIDE/app/src/BehaviorsEditor/BehaviorsHelpPagePaths.js

@@ -0,0 +1,18 @@
+/**
+ * Return the help page for the given behavior
+ * @param {*} behavior
+ */
+export const getBehaviorHelpPagePath = behavior => {
+  if (!behavior) return null;
+
+  switch (behavior.getTypeName()) {
+    case 'DraggableBehavior::Draggable':
+      return '/behaviors/draggable';
+    case 'PlatformBehavior::PlatformerObjectBehavior':
+      return '/behaviors/platformer';
+    case 'PlatformBehavior::PlatformBehavior':
+      return '/behaviors/platformer';
+    default:
+      return '';
+  }
+};

newIDE/app/src/BehaviorsEditor/NewBehaviorDialog.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Dialog from '../UI/Dialog';
+import HelpButton from '../UI/HelpButton';
 import FlatButton from 'material-ui/FlatButton';
 import Avatar from 'material-ui/Avatar';
 import { List, ListItem } from 'material-ui/List';
@@ -64,13 +65,14 @@ export default class NewBehaviorDialog extends Component {
     if (!open || !project) return null;
 
     const actions = [
-      <FlatButton label="Close" primary={false} onClick={onClose} />,
+      <FlatButton key="close" label="Close" primary={false} onClick={onClose} />,
     ];
 
     return (
       <Dialog
         title="Add a new behavior to the object"
         actions={actions}
+        secondaryActions={<HelpButton helpPagePath="/behaviors" />}
         open={open}
         noMargin
         autoScrollBodyContent

newIDE/app/src/BehaviorsEditor/index.js

@@ -5,10 +5,12 @@ import Delete from 'material-ui/svg-icons/action/delete';
 import IconButton from 'material-ui/IconButton';
 import EmptyMessage from '../UI/EmptyMessage';
 import MiniToolbar from '../UI/MiniToolbar';
+import HelpIcon from '../UI/HelpIcon';
 import PropertiesEditor from '../PropertiesEditor';
 import propertiesMapToSchema from '../PropertiesEditor/PropertiesMapToSchema';
 import newNameGenerator from '../Utils/NewNameGenerator';
 import NewBehaviorDialog from './NewBehaviorDialog';
+import { getBehaviorHelpPagePath } from './BehaviorsHelpPagePaths';
 
 const styles = {
   addBehaviorLine: {
@@ -169,6 +171,9 @@ export default class BehaviorsEditor extends Component {
                     >
                       <Delete />
                     </IconButton>
+                    <HelpIcon
+                      helpPagePath={getBehaviorHelpPagePath(behavior)}
+                    />
                   </span>
                 </MiniToolbar>
                 <div style={styles.propertiesContainer}>

newIDE/app/src/EventsSheet/InstructionEditor/InstructionParametersEditor.js

@@ -49,7 +49,7 @@ export default class InstructionParametersEditor extends Component {
         <EmptyMessage>
           {this.props.isCondition
             ? 'Choose a condition on the left'
-            : 'Choose a condition on the right'}
+            : 'Choose an action on the left'}
         </EmptyMessage>
       </div>
     );

newIDE/app/src/ObjectEditor/ObjectEditorDialog.js

@@ -31,8 +31,9 @@ export class ObjectEditorDialog extends Component<*, StateType> {
 
   render() {
     const actions = [
-      <FlatButton label="Cancel" onTouchTap={this.props.onCancel} />,
+      <FlatButton key="cancel" label="Cancel" onTouchTap={this.props.onCancel} />,
       <FlatButton
+        key="apply"
         label="Apply"
         primary
         keyboardFocused

newIDE/app/src/UI/Dialog/index.js

@@ -23,7 +23,10 @@ const styles = {
 export default props => {
   const { secondaryActions, actions, noMargin, ...otherProps } = props;
   const dialogActions = secondaryActions
-    ? [<div>{secondaryActions}</div>, <div>{actions}</div>]
+    ? [
+        <div key="secondary-actions">{secondaryActions}</div>,
+        <div key="actions">{actions}</div>,
+      ]
     : actions;
 
   return (

newIDE/app/src/UI/HelpButton/index.js

@@ -5,6 +5,7 @@ import HelpOutline from 'material-ui/svg-icons/action/help-outline';
 
 type PropsType = {
   helpPagePath: ?string,
+  label?: string,
 };
 
 /**

newIDE/app/src/UI/HelpIcon/HelpIcon.spec.js

@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+import renderer from 'react-test-renderer';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import HelpIcon from '.';
+
+describe('HelpIcon', () => {
+  it('renders the icon linking to a help page', () => {
+    const tree = renderer
+      .create(
+        <MuiThemeProvider>
+          <HelpIcon helpPagePath="/objects/tiled_sprite" />
+        </MuiThemeProvider>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders nothing if the helpPagePath is empty', () => {
+    const tree = renderer
+      .create(
+        <MuiThemeProvider>
+          <HelpIcon helpPagePath="" />
+        </MuiThemeProvider>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

newIDE/app/src/UI/HelpIcon/__snapshots__/HelpIcon.spec.js.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HelpIcon renders nothing if the helpPagePath is empty 1`] = `null`;
+
+exports[`HelpIcon renders the icon linking to a help page 1`] = `
+<button
+  disabled={false}
+  href={undefined}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOut={[Function]}
+  onTouchStart={[Function]}
+  onTouchTap={[Function]}
+  style={
+    Object {
+      "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
+      "background": "none",
+      "border": 10,
+      "boxSizing": "border-box",
+      "cursor": "pointer",
+      "display": "inline-block",
+      "fontFamily": "Roboto, sans-serif",
+      "fontSize": 0,
+      "fontWeight": "inherit",
+      "height": 48,
+      "margin": 0,
+      "muiPrepared": true,
+      "outline": "none",
+      "overflow": "visible",
+      "padding": 12,
+      "position": "relative",
+      "textDecoration": "none",
+      "transition": "all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms",
+      "verticalAlign": null,
+      "width": 48,
+      "zIndex": 1,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <div
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <svg
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "color": "rgba(0, 0, 0, 0.87)",
+          "display": "inline-block",
+          "fill": "currentColor",
+          "height": 24,
+          "muiPrepared": true,
+          "transition": "all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms",
+          "userSelect": "none",
+          "width": 24,
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+      />
+    </svg>
+  </div>
+</button>
+`;

newIDE/app/src/UI/HelpIcon/index.js

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import HelpOutline from 'material-ui/svg-icons/action/help-outline';
+import IconButton from 'material-ui/IconButton';
+
+type PropsType = {
+  helpPagePath: ?string,
+};
+
+/**
+ * The icon that can be used in any dialog to open a help page
+ */
+export default (props: PropsType) => {
+  if (!props.helpPagePath) return null;
+
+  return (
+    <IconButton
+      onClick={() => window.open(`http://wiki.compilgames.net/doku.php/gdevelop5${props.helpPagePath}`, 'blank') }
+    >
+      <HelpOutline />
+    </IconButton>
+  );
+};

newIDE/app/src/stories/index.js

@@ -106,7 +106,7 @@ storiesOf('Tabs', module)
 storiesOf('HelpButton', module)
   .addDecorator(muiDecorator)
   .add('default', () => (
-    <HelpButton />
+    <HelpButton helpPagePath="/test" />
   ));
 
 storiesOf('LocalExport', module)