fix error help on collapsed (microsoft#11075)

* fix targetting for error help when block is collapsed

* actually just uncollapse block to show where it's pointing

* forgot to push pxtarget.d.ts

Author: jwunderl

localtypings/pxtarget.d.ts

@@ -1374,6 +1374,7 @@ declare namespace pxt.tour {
         sansQuery?: string; // Use this to exclude an element from the cutout
         sansLocation?: BubbleLocation; // relative location of element to exclude
         onStepBegin?: () => void;
+        onStepEnd?: () => void;
         bubbleStyle?: "yellow"; // Currently just have default (unset) & yellow styles. May add more in the future...
     }
     interface TourConfig {

react-common/components/controls/TeachingBubble.tsx

@@ -72,6 +72,9 @@ export const TeachingBubble = (props: TeachingBubbleProps) => {
         positionBubbleAndCutout();
         window.addEventListener("resize", positionBubbleAndCutout);
         return () => {
+            if (targetContent.onStepEnd) {
+                targetContent.onStepEnd();
+            }
             window.removeEventListener("resize", positionBubbleAndCutout);
         }
     }, [stepNumber, targetContent]);

webapp/src/blocks.tsx

@@ -1200,8 +1200,6 @@ export class Editor extends toolboxeditor.ToolboxEditor {
      * ensuring all provided ids are valid and setting up the corresponding target queries.
      */
     private createTourFromResponse = (response: ErrorHelpTourResponse): pxt.tour.TourConfig => {
-        const validBlockIds = this.parent.getBlocks().map((b) => b.id);
-
         const tourSteps: pxt.tour.BubbleStep[] = [];
         let invalidBlockIdCount = 0;
         for (const step of response.explanationSteps) {
@@ -1213,10 +1211,24 @@ export class Editor extends toolboxeditor.ToolboxEditor {
             } as pxt.tour.BubbleStep;
 
             if (step.elementId) {
-                if (validBlockIds.includes(step.elementId)) {
+                const targetBlock = this.editor?.getBlockById(step.elementId);
+                if (targetBlock) {
+                    const targetBlockRoot = targetBlock.getRootBlock();
+                    const isInsideCollapsedBlock = targetBlockRoot.isCollapsed() && targetBlockRoot.id !== step.elementId;
                     tourStep.targetQuery = `g[data-id="${step.elementId}"]:not(.blocklyFlyout g)`;
                     tourStep.location = pxt.tour.BubbleLocation.Right;
-                    tourStep.onStepBegin = () => this.editor.centerOnBlock(step.elementId, true);
+
+                    tourStep.onStepBegin = () => {
+                        if (isInsideCollapsedBlock) {
+                            targetBlockRoot.setCollapsed(false);
+                            targetBlockRoot.bringToFront();
+                            targetBlockRoot.render();
+                        }
+                        this.editor.centerOnBlock(step.elementId, true);
+                    };
+                    if (isInsideCollapsedBlock) {
+                        tourStep.onStepEnd = () => targetBlockRoot.setCollapsed(true);
+                    }
                 } else {
                     // Do not add the tour target, but keep the step in case it's still helpful.
                     pxt.tickEvent("errorHelp.invalidBlockId");
@@ -1239,6 +1251,15 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         };
     }
 
+    private getVisibleBlockAncestorId(blockId: string): string | undefined {
+        const block = this.editor?.getBlockById(blockId) as Blockly.BlockSvg;
+        const rootBlock = block?.getRootBlock() as Blockly.BlockSvg;
+        if (!block || !rootBlock) {
+            return undefined;
+        }
+        return rootBlock.isCollapsed() ? rootBlock.id : blockId;
+    }
+
     private handleErrorHelpFeedback(positive: boolean, responseData: any) {
         pxt.tickEvent("errorHelp.feedback", { ...responseData, positive: positive + "" });
     }