Support boolean expected value in in-app tutorial (#6654)

Only show in developer changelog

newIDE/app/src/InAppTutorial/InAppTutorialOrchestrator.js

@@ -501,7 +501,7 @@ const InAppTutorialOrchestrator = React.forwardRef<
       elementWithValueToWatchIfEquals,
       setElementWithValueToWatchIfEquals,
     ] = React.useState<?string>(null);
-    const inputExpectedValueRef = React.useRef<?string>(null);
+    const inputExpectedValueRef = React.useRef<?string | boolean>(null);
     const [
       objectSceneInstancesToWatch,
       setObjectSceneInstancesToWatch,
@@ -857,7 +857,11 @@ const InAppTutorialOrchestrator = React.forwardRef<
       () => {
         if (!currentStep) return;
         const { nextStepTrigger, elementToHighlightId } = currentStep;
-        if (nextStepTrigger && nextStepTrigger.valueEquals) {
+        if (
+          nextStepTrigger &&
+          nextStepTrigger.valueEquals !== undefined &&
+          nextStepTrigger.valueEquals !== null
+        ) {
           if (!elementToHighlightId) return;
           inputExpectedValueRef.current = nextStepTrigger.valueEquals;
           setElementWithValueToWatchIfEquals(elementToHighlightId);
@@ -937,17 +941,29 @@ const InAppTutorialOrchestrator = React.forwardRef<
         const elementToWatch = document.querySelector(
           elementWithValueToWatchIfEquals
         );
+        if (!elementToWatch) return;
         const inputExpectedValue = inputExpectedValueRef.current;
-        if (!inputExpectedValue) return;
+        if (inputExpectedValue === null) return;
 
-        // We trim all spaces to not be picky about the user input inside expressions.
-        // Ex: "1 + 1" === "1+1"
+        const inputValue = getInputValue(elementToWatch);
         if (
-          elementToWatch &&
-          getInputValue(elementToWatch).replace(/\s/g, '') ===
+          typeof inputExpectedValue === 'boolean' &&
+          inputExpectedValue === inputValue
+        ) {
+          goToNextStep();
+          return;
+        }
+
+        if (
+          typeof inputExpectedValue === 'string' &&
+          typeof inputValue === 'string' &&
+          // We trim all spaces to not be picky about the user input inside expressions.
+          // Ex: "1 + 1" === "1+1"
+          inputValue.replace(/\s/g, '') ===
             inputExpectedValue.replace(/\s/g, '')
         ) {
           goToNextStep();
+          return;
         }
       },
       [goToNextStep, elementWithValueToWatchIfEquals]

newIDE/app/src/InAppTutorial/InAppTutorialStepDisplayer.js

@@ -274,7 +274,16 @@ function InAppTutorialStepDisplayer({
 
   const getFillAutomaticallyFunction = React.useCallback(
     () => {
-      if (!nextStepTrigger || !nextStepTrigger.valueEquals) {
+      if (!nextStepTrigger || !('valueEquals' in nextStepTrigger)) {
+        return undefined;
+      }
+      // $FlowIgnore - checked above that valueEquals in in nextStepTrigger.
+      const { valueEquals } = nextStepTrigger;
+      if (
+        valueEquals === null ||
+        valueEquals === undefined ||
+        typeof valueEquals !== 'string'
+      ) {
         return undefined;
       }
 
@@ -293,7 +302,7 @@ function InAppTutorialStepDisplayer({
       const valueSetter = valuePropertyDescriptor.set;
       if (!valueSetter) return undefined;
       return () => {
-        valueSetter.call(elementWithId, nextStepTrigger.valueEquals);
+        valueSetter.call(elementWithId, valueEquals);
         // Trigger blur to make sure the value is taken into account
         // by the React input.
         elementWithId.dispatchEvent(new Event('blur', { bubbles: true }));

newIDE/app/src/Utils/GDevelopServices/InAppTutorial.js

@@ -65,7 +65,7 @@ export type InAppTutorialFlowStepTrigger =
   | InAppTutorialFlowStepDOMChangeTrigger
   | {| editorIsActive: string |}
   | {| valueHasChanged: true |}
-  | {| valueEquals: string |}
+  | {| valueEquals: string | boolean |}
   | {| instanceAddedOnScene: string, instancesCount?: number |}
   | {| objectAddedInLayout: true |}
   | {| previewLaunched: true |}
@@ -75,7 +75,7 @@ export type InAppTutorialFlowStepFormattedTrigger =
   | InAppTutorialFlowStepDOMChangeTrigger
   | {| editorIsActive: string |}
   | {| valueHasChanged: true |}
-  | {| valueEquals: string |}
+  | {| valueEquals: string | boolean |}
   | {| instanceAddedOnScene: string, instancesCount?: number |}
   | {| objectAddedInLayout: true |}
   | {| previewLaunched: true |}