From 6f8fab8b99ba8582b90722e8955ea275847e7a73 Mon Sep 17 00:00:00 2001
From: Richard Knoll <riknoll@users.noreply.github.com>
Date: Mon, 24 Feb 2025 11:30:21 -0800
Subject: [PATCH] refresh variable flyout when a new variable is created
 (#10396)

---
 webapp/src/blocks.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
index 4fac6af0c376..f21308294338 100644
--- a/webapp/src/blocks.tsx
+++ b/webapp/src/blocks.tsx
@@ -61,6 +61,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     showCategories: boolean = true;
     breakpointsByBlock: pxt.Map<number>; // Map block id --> breakpoint ID
     breakpointsSet: number[]; // the IDs of the breakpoints set.
+    currentFlyoutKey: string;
 
     private errorChangesListeners: pxt.Map<(errors: pxtblockly.BlockDiagnostic[]) => void> = {};
     protected intersectionObserver: IntersectionObserver;
@@ -667,6 +668,13 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                 this.hideFlyout();
             }
 
+            if (ev.type === "var_create") {
+                if (this.currentFlyoutKey === "variables" && this.editor.getFlyout()?.isVisible()) {
+                    // refresh the flyout when a new variable is created
+                    this.showVariablesFlyout();
+                }
+            }
+
             if ((ignoredChanges.indexOf(ev.type) === -1)
                 || this.markIncomplete) {
                 this.changeCallback();
@@ -1696,6 +1704,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     }
 
     private showFlyoutInternal_(xmlList: Element[], flyoutName: string = "default") {
+        this.currentFlyoutKey = flyoutName;
         const flyout = this.editor.getFlyout() as pxtblockly.VerticalFlyout;
         flyout.show(xmlList, flyoutName);
         flyout.scrollToStart();