Add help buttons in the expression editor and the extension details dialog (#4337)

GDevelop.js/Bindings/Bindings.idl

@@ -1218,6 +1218,7 @@ interface ExpressionMetadata {
     [Const, Ref] DOMString GetDescription();
     [Const, Ref] DOMString GetGroup();
     [Const, Ref] DOMString GetSmallIconFilename();
+    [Const, Ref] DOMString GetHelpPath();
     boolean IsShown();
     boolean IsPrivate();
     [Ref] ParameterMetadata GetParameter(unsigned long id);

GDevelop.js/types/gdexpressionmetadata.js

@@ -6,6 +6,7 @@ declare class gdExpressionMetadata {
   getDescription(): string;
   getGroup(): string;
   getSmallIconFilename(): string;
+  getHelpPath(): string;
   isShown(): boolean;
   isPrivate(): boolean;
   getParameter(id: number): gdParameterMetadata;

newIDE/app/src/AssetStore/ExtensionStore/ExtensionInstallDialog.js

@@ -23,6 +23,7 @@ import { IconContainer } from '../../UI/IconContainer';
 import { UserPublicProfileChip } from '../../UI/User/UserPublicProfileChip';
 import Window from '../../Utils/Window';
 import { useExtensionUpdate } from './UseExtensionUpdates';
+import HelpButton from '../../UI/HelpButton';
 
 const getTransformedDescription = (extensionHeader: ExtensionHeader) => {
   if (
@@ -142,17 +143,25 @@ const ExtensionInstallDialog = ({
           />
         </LeftLoader>,
       ]}
-      secondaryActions={
-        onEdit
-          ? [
-              <FlatButton
-                key="edit-extension"
-                label={<Trans>Open in editor</Trans>}
-                onClick={onEdit}
-              />,
-            ]
-          : undefined
-      }
+      secondaryActions={[
+        onEdit ? (
+          <FlatButton
+            key="edit-extension"
+            label={<Trans>Open in editor</Trans>}
+            onClick={onEdit}
+          />
+        ) : (
+          undefined
+        ),
+        extensionHeader && extensionHeader.helpPath ? (
+          <HelpButton
+            key="help-button"
+            helpPagePath={extensionHeader.helpPath}
+          />
+        ) : (
+          undefined
+        ),
+      ].filter(Boolean)}
       open
       cannotBeDismissed={isInstalling}
       onRequestClose={onClose}

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

@@ -276,9 +276,11 @@ const InstructionParametersEditor = React.forwardRef<
                       : undefined,
                   }}
                 />
-                <Text style={styles.description}>
-                  {instructionMetadata.getDescription()}
-                </Text>
+                <Column expand>
+                  <Text style={styles.description}>
+                    {instructionMetadata.getDescription()}
+                  </Text>
+                </Column>
                 {isAnEventFunctionMetadata(instructionMetadata) && (
                   <IconButton
                     onClick={() => {

newIDE/app/src/EventsSheet/ParameterFields/GenericExpressionField/ExpressionParametersEditorDialog.js

@@ -5,7 +5,8 @@ import { type EventsScope } from '../../../InstructionOrExpression/EventsScope.f
 import ExpressionParametersEditor from './ExpressionParametersEditor';
 import Dialog, { DialogPrimaryButton } from '../../../UI/Dialog';
 import Text from '../../../UI/Text';
-import { Column } from '../../../UI/Grid';
+import { Column, Line } from '../../../UI/Grid';
+import HelpButton from '../../../UI/HelpButton';
 
 export type ParameterValues = Array<string>;
 
@@ -59,6 +60,16 @@ const ExpressionParametersEditorDialog = ({
           onClick={() => onDone(parameterValues)}
         />,
       ]}
+      secondaryActions={
+        expressionMetadata.getHelpPath()
+          ? [
+              <HelpButton
+                key="help-button"
+                helpPagePath={expressionMetadata.getHelpPath()}
+              />,
+            ]
+          : []
+      }
       noMargin
       onRequestClose={onRequestClose}
       onApply={() => onDone(parameterValues)}