🪲 Fix stop program being shown indefinitely (#5560)

The problem was that we were trying to use the `theGlobalDebugger` variable while it was undefined. By using the `?` operator of typescript we guarantee that we won't be trying to call a method if the object is null.

Fixes #5555

**How to test**

I added a Cypress test., but also you can try running programs and see if the button works normally again!

static/js/appbundle.js

@@ -103044,15 +103044,16 @@ def note_with_error(value, err):
     }
   }
   function load_variables(variables) {
+    var _a3;
     if (variable_view === true) {
-      const programData = theGlobalDebugger.get_program_data();
+      const programData = (_a3 = theGlobalDebugger) == null ? void 0 : _a3.get_program_data();
       variables = clean_variables(variables);
       const variableList = $("#variable-list");
       variableList.empty();
       for (const i in variables) {
         if (variables[i][1]) {
           const variableName = variables[i][0].replace(/^_/, "");
-          const role = programData.variables[variableName];
+          const role = programData == null ? void 0 : programData.variables[variableName];
           if (showRoles) {
             variableList.append(`<li style=color:${variables[i][2]}>${variableName}: ${variables[i][1]} (${role})</li>`);
           } else {

static/js/debugging.ts

@@ -70,15 +70,15 @@ export function toggleVariableView(){
 
 export function load_variables(variables: any) {
   if (variable_view === true) {
-    const programData = theGlobalDebugger.get_program_data();
+    const programData = theGlobalDebugger?.get_program_data();
     variables = clean_variables(variables);
     const variableList = $('#variable-list');
     variableList.empty();
     for (const i in variables) {
       // Only append if the variable contains any data (and is not undefined)
       if (variables[i][1]) {
         const variableName = variables[i][0].replace(/^_/, '');
-        const role = programData.variables[variableName];
+        const role = programData?.variables[variableName];
         if (showRoles) {
           variableList.append(`<li style=color:${variables[i][2]}>${variableName}: ${variables[i][1]} (${role})</li>`);
         } else {

tests/cypress/e2e/hedy_page/run_code_button.cy.js

@@ -47,18 +47,38 @@ describe('Is able to run code', () => {
       cy.visit('/hedy/14#tic')
 
       const program_1 = "for i in range 1 to 10\n  choice = ask 'What is your choice?'"
+      cy.intercept('/parse').as('parse')
       cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').clear()
-      cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').type(program_1)
-      cy.get('#runit')
+      cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').type(program_1)      
+      cy.get('#runit').click()
+      cy.wait('@parse')
 
       cy.getBySel('quizmaster').click()
       const program_2 = "name = ask 'what is your name?'"
       cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').clear()
       cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').type(program_2)
       cy.get('#runit').click()
+      cy.wait('@parse')
       cy.get('#ask-modal').type('Hedy')
       cy.get('#ask-modal > form').submit()
 
       cy.get('#ask-modal').should('not.be.visible')
     })
+
+    it("After successfully executing a program, the stop program button is hidden", () => {
+      cy.intercept('/parse').as('parse')
+      cy.visit('/hedy/2')
+
+      const program = "var1 is 1\nvar2 is 2\nvar3 is 3\nvar4 is 4\nprint var1 var2 var3 var4"
+      cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').clear()
+      cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').type(program)
+
+      cy.get('#runit').click()
+      cy.wait('@parse')
+      // A hardcoded wait to ensure that the program finishes execution
+      cy.wait(500)
+      cy.get('#stopit').should('not.be.visible')
+      cy.get('#runit').should('be.visible')
+      cy.get('#variable-list').should('be.visible').and('have.text', 'var1: 1var2: 2var3: 3var4: 4')
+    })
   })