Merge branch 'main' into ipython-support

.env.example

@@ -1,10 +1,9 @@
 REACT_APP_AUTHENTICATION_CLIENT_ID='editor-dev'
-REACT_APP_AUTHENTICATION_URL='http://localhost:9001'
 REACT_APP_SENTRY_DSN=''
 REACT_APP_SENTRY_ENV='local'
 PUBLIC_URL='http://localhost:3011'
 ASSETS_URL='http://localhost:3011'
-REACT_APP_API_ENDPOINT='http://localhost:3009'
 REACT_APP_GOOGLE_TAG_MANAGER_ID=''
+REACT_APP_API_ENDPOINT='http://localhost:3009'
 REACT_APP_PLAUSIBLE_DATA_DOMAIN=''
 REACT_APP_PLAUSIBLE_SOURCE=''

.github/workflows/ci-cd.yml

@@ -61,7 +61,7 @@ jobs:
         run: yarn run test --coverage --maxWorkers=4 --workerThreads=true --reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
         env:
           JEST_JUNIT_OUTPUT_DIR: ./coverage/
-
+          REACT_APP_API_ENDPOINT: http://localhost:3009
       - name: Record coverage
         run: ./.github/workflows/record_coverage
         env:
@@ -95,6 +95,8 @@ jobs:
             yarn start
           wait-on: "http://localhost:3011"
           quiet: true
+          config-file: cypress.config.mjs
+          browser: chrome
         env:
           REACT_APP_API_ENDPOINT: "https://test-editor-api.raspberrypi.org"
           PUBLIC_URL: "http://localhost:3011"

CHANGELOG.md

@@ -6,10 +6,34 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+## [0.28.7] - 2024-11-08
+
+### Fixed
+
+- Bug causing py-enigma code to disable stop button
+
+## [0.28.6] - 2024-11-08
+
+### Fixed
+
+- Bug with saving remix caused by not passing prop
+- stopped autoscrolling to top on project content change (#1132)
+- Hight of the sidebar for mobile (#1117)
+
+### Changed
+
+- REACT_APP_API_ENDPOINT env var is now only a default for the editor-wc prop, which can be overridden (#1124)
+- added "Help" link to the information panel in the sidebar as the first link
+
+### Removed
+
+- REACT_APP_AUTHENTICATION_URL env var no longer used and is instead a editor-wc prop (#1124)
+
 ## [0.28.5] - 2024-10-25
 
 ### Fixed
 
+- Fixed pyodide input test and cypress config to enable further pyodide tests (#1125)
 - Image sizing and wrapping in the sidebar (#1126)
 
 ## [0.28.4] - 2024-10-23
@@ -948,7 +972,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Events in Web Component indicating whether Mission Zero criteria have been met (#113)
 
-[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.28.5...HEAD
+[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.28.7...HEAD
+[0.28.7]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.7
+[0.28.6]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.6
 [0.28.5]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.5
 [0.28.4]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.4
 [0.28.3]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.3

cypress.config.mjs

@@ -17,6 +17,14 @@ export default defineConfig({
           return null;
         },
       });
+      on("before:browser:launch", (browser = {}, launchOptions) => {
+        if (browser.name === "chrome") {
+          console.log("Applying Chrome launch options");
+          launchOptions.args.push("--enable-features=SharedArrayBuffer");
+          launchOptions.args.push("--disable-site-isolation-trials");
+        }
+        return launchOptions;
+      });
     },
     retries: {
       runMode: 3,

cypress/e2e/missionZero-wc.cy.js

@@ -137,20 +137,23 @@ it("picks up calls to input()", () => {
   cy.get("editor-wc")
     .shadow()
     .find("div[class=cm-content]")
-    .invoke("text", "input()");
+    .invoke("text", "name = input('What is your name?')\nprint('Hello', name)");
   cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc").shadow().find(".btn--stop").should("be.visible");
   cy.get("editor-wc")
     .shadow()
-    .find(
-      "div[class='pythonrunner-container skulptrunner skulptrunner--active']",
-    )
-    .contains("Text output")
+    .find("div.pythonrunner-container.skulptrunner.skulptrunner--active")
+    .contains(".react-tabs__tab-text", "Text output")
     .click();
   cy.get("editor-wc")
     .shadow()
     .find("span[contenteditable=true]")
-    .type("{enter}");
+    .type("Scott{enter}");
   cy.get("#results").should("contain", '"noInputEvents":false');
+  cy.get("editor-wc")
+    .shadow()
+    .find(".pythonrunner-console-output-line")
+    .should("contain", "Hello Scott");
 });
 
 it("picks up calls to wait for motion", () => {
@@ -208,7 +211,12 @@ it("returns duration of null if focus is lost", () => {
       "text",
       'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
-  cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(".btn--run")
+    .should("not.be.disabled")
+    .click();
+  cy.get("editor-wc").shadow().find(".btn--stop").should("be.visible");
   cy.window().blur();
   cy.window().focus();
   cy.get("#results").should("contain", '"duration":null');

cypress/e2e/spec-wc-pyodide.cy.js

@@ -3,7 +3,6 @@ const origin = "http://localhost:3011/web-component.html";
 beforeEach(() => {
   cy.intercept("*", (req) => {
     req.headers["Origin"] = origin;
-    req.continue();
   });
 });
 
@@ -13,12 +12,22 @@ const runCode = (code) => {
     .shadow()
     .find("div[class=cm-content]")
     .invoke("text", `${code}\n`);
-  cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(".btn--run")
+    .should("not.be.disabled")
+    .click();
 };
 
 describe("Running the code with pyodide", () => {
   beforeEach(() => {
-    cy.visit(origin);
+    cy.visit({
+      url: origin,
+      headers: {
+        "Cross-Origin-Opener-Policy": "same-origin",
+        "Cross-Origin-Embedder-Policy": "require-corp",
+      },
+    });
     cy.window().then((win) => {
       Object.defineProperty(win, "crossOriginIsolated", {
         value: true,
@@ -29,6 +38,16 @@ describe("Running the code with pyodide", () => {
 
   it("runs a simple program", () => {
     runCode('print("Hello world")');
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pyodiderunner")
+      .contains(".react-tabs__tab", "Visual output")
+      .should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pyodiderunner")
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Text output");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
@@ -39,21 +58,33 @@ describe("Running the code with pyodide", () => {
     runCode(
       "from time import sleep\nfor i in range(100):\n\tprint(i)\n\tsleep(1)",
     );
-    cy.get("editor-wc").shadow().find(".btn--stop").click();
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "3");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".btn--stop")
+      .should("be.visible")
+      .click();
     cy.get("editor-wc")
       .shadow()
       .find(".error-message__content")
       .should("contain", "Execution interrupted");
   });
 
-  // skip this test for now until we get the headers set up
-  it.skip("runs a simple program with an input", () => {
+  it("runs a simple program with an input", () => {
     runCode('name = input("What is your name?")\nprint("Hello", name)');
+    cy.get("editor-wc").shadow().find(".btn--stop").should("be.visible");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
       .should("contain", "What is your name?");
-    cy.get("editor-wc").shadow().find("#input").invoke("text", "Lois{enter}");
+    cy.get("editor-wc")
+      .shadow()
+      .find("#input")
+      .should("be.visible")
+      .type("Lois{enter}");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
@@ -133,6 +164,34 @@ describe("Running the code with pyodide", () => {
       .should("contain", "4");
   });
 
+  it("runs a simple program with the py-enigma library", () => {
+    runCode(
+      `
+from enigma.machine import EnigmaMachine
+# Sheet settings
+ROTORS = "IV I V"
+RINGS = "20 5 10"
+PLUGBOARD = "KT AJ IV US NY HL GD XF PB CQ"
+def use_enigma_machine(msg, rotor_start):
+  # Set up the Enigma machine
+  machine = EnigmaMachine.from_key_sheet(rotors=ROTORS, reflector="B", ring_settings=RINGS, plugboard_settings=PLUGBOARD)
+  # Set the initial position of the rotors
+  machine.set_display(rotor_start)
+  # Encrypt or decrypt the message
+  transformed_msg = machine.process_text(msg)
+  return(transformed_msg)
+text_in = "This is a test message"
+rotor_start = "FNZ"
+text_out = use_enigma_machine(text_in, rotor_start)
+print(text_out)
+      `,
+    );
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "ULRYQJMVHLFQKBEFUGEOFL");
+  });
+
   it("errors when importing a non-existent module", () => {
     runCode("import i_do_not_exist");
     cy.get("editor-wc")

cypress/e2e/spec-wc-skulpt.cy.js

@@ -14,7 +14,11 @@ const runCode = (code) => {
     .find("div[class=cm-content]")
     .invoke("text", `${code}\n`);
   cy.wait(200);
-  cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(".btn--run")
+    .should("not.be.disabled")
+    .click();
 };
 
 describe("Running the code with skulpt", () => {
@@ -28,10 +32,38 @@ describe("Running the code with skulpt", () => {
     });
   });
 
+  it("runs a simple program", () => {
+    runCode("print('Hello world')");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .contains(".react-tabs__tab", "Visual output")
+      .should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Text output");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "Hello world");
+  });
+
   it("runs a simple p5 program", () => {
     runCode(
       "from p5 import *\n\ndef setup():\n\tsize(400, 400)\ndef draw():\n\tfill('cyan')\n\trect(0, 0, 400, 250)\nrun(frame_rate=2)",
     );
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .contains(".react-tabs__tab", "Text output")
+      .should("exist");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Visual output");
     cy.get("editor-wc").shadow().find(".p5Canvas").should("exist");
   });
 

cypress/e2e/spec-wc.cy.js

@@ -113,11 +113,18 @@ describe("when embedded, output_only & output_split_view are true", () => {
 
     // Check text output panel is visible and has a run button
     // Important to wait for this before making the negative assertions that follow
-    cy.get("editor-wc").shadow().contains("Text output").should("be.visible");
+    const runnerContainer = cy
+      .get("editor-wc")
+      .shadow()
+      .find(".proj-runner-container");
+    runnerContainer
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Text output");
     cy.get("editor-wc")
       .shadow()
       .find("button")
       .contains("Run")
+      .should("not.be.disabled")
       .should("be.visible");
 
     // Check that the side bar is not displayed
@@ -160,6 +167,7 @@ describe("when embedded, output_only & output_split_view are true", () => {
       .shadow()
       .find("button")
       .contains("Run")
+      .should("not.be.disabled")
       .should("be.visible");
 
     // Check that the code has automatically run i.e. the HTML has been rendered

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/editor-ui",
-  "version": "0.28.5",
+  "version": "0.28.7",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.8",

public/index.html

@@ -0,0 +1,4 @@
+<h1>You may be looking for...</h1>
+<ul>
+  <li>Web Component test page <a href="http://localhost:3011/web-component.html">http://localhost:3011/web-component.html</a></li>
+</ul>

src/PyodideWorker.js

@@ -165,6 +165,7 @@ const PyodideWorker = () => {
           `${process.env.ASSETS_URL}/pyodide/packages/py_enigma-0.1-py3-none-any.whl`,
         );
       },
+      after: () => {},
     },
     turtle: {
       before: async () => {

src/app/store.js

@@ -2,8 +2,11 @@ import { configureStore } from "@reduxjs/toolkit";
 import EditorReducer from "../redux/EditorSlice";
 import InstructionsReducer from "../redux/InstructionsSlice";
 import { reducer, loadUser } from "redux-oidc";
-import userManager from "../utils/userManager";
+import UserManager from "../utils/userManager";
 
+// TODO - not used but keeping this in preparation for using
+// src/components/Editor/ImageUploadButton/ImageUploadButton.jsx
+const userManager = UserManager({ reactAppAuthenticationUrl: "TODO" });
 const store = configureStore({
   reducer: {
     editor: EditorReducer,

src/assets/stylesheets/PythonRunner.scss

@@ -53,6 +53,22 @@
   position: relative;
 }
 
+.pyodiderunner {
+  display: none;
+
+  &--active {
+    display: flex;
+  }
+}
+
+.skulptrunner {
+  display: none;
+
+  &--active {
+    display: flex;
+  }
+}
+
 .visual-output {
   flex: 1;
   display: flex;