Merge branch 'main' into bugfix/1116-Editor_sidebar_doesn_t_fill_whol…

…e_height

.env.example

@@ -1,10 +1,10 @@
 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_PLAUSIBLE_DATA_DOMAIN=''
 REACT_APP_PLAUSIBLE_SOURCE=''
-REACT_APP_SENTRY_DSN=''
-REACT_APP_SENTRY_ENV='local'
-PUBLIC_URL='http://localhost:3011'
-ASSETS_URL='http://localhost:3010'

.github/workflows/ci-cd.yml

@@ -92,7 +92,7 @@ jobs:
         with:
           install: false
           start: |
-            yarn start:wc
+            yarn start
           wait-on: "http://localhost:3011"
           quiet: true
         env:
@@ -113,7 +113,7 @@ jobs:
     if: github.ref_type == 'tag'
     uses: ./.github/workflows/deploy.yml
     with:
-      base_url: https://editor.raspberrypi.org/
+      base_url: https://editor-static.raspberrypi.org
       assets_url: https://editor-static.raspberrypi.org
       environment: production
       prefix: releases

.github/workflows/deploy.yml

@@ -128,7 +128,7 @@ jobs:
           if [[ "${{ inputs.environment }}" != "production" ]]; then
             yarn build:dev
           fi
-          yarn build:wc
+          yarn build
         env:
           PUBLIC_URL: ${{ needs.setup-environment.outputs.public_url }}
           ASSETS_URL: ${{ needs.setup-environment.outputs.assets_url }}

CHANGELOG.md

@@ -6,10 +6,38 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
-### Changed
+## [0.28.5] - 2024-10-25
+
+### Fixed
+
+- Image sizing and wrapping in the sidebar (#1126)
+
+## [0.28.4] - 2024-10-23
+
+### Added
+
+- py-enigma support (#1109)
+
+## [0.28.3] - 2024-10-22
+
+### Fixed
 
-- Updated the ImportErrors message
-- In ErrorMessage component added the way to display html elements in string
+- `seaborn` document patch (#1122)
+- Clearing `matplotlib` and `seaborn` plots at the end of each code run (#1122)
+
+## [0.28.2] - 2024-10-22
+
+### Fixed
+
+- BASE_URL in build pipeline (#1121)
+
+## [0.28.1] - 2024-10-22
+
+### Fixed
+
+- PUBLIC_URL in build pipeline (#1120)
+
+## [0.28.0] - 2024-10-22
 
 ### Added
 
@@ -18,17 +46,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Pyodide` `matplotlib` support (#1087)
 - Tests for running simple programs in `pyodide` and `skulpt` (#1100)
 - Fall back to `skulpt` if the host is not `crossOriginIsolated` (#1107)
+- `Pyodide` `seaborn` support (#1106)
+- `Pyodide` module caching (#1113)
 
 ### Changed
 
 - Upgrade to `webpack 5` (#1096)
 - Bump `pyodide` to `v0.26.2` (#1098)
+- Updated the ImportErrors message (#1105)
+- In ErrorMessage component added the way to display html elements in string (#1105)
 
 ### Fixed
 
-- Build to include public files (#1112)
 - Dynamic runner switching with more than one `python` file (#1097)
 - Pyodide running the correct file (`main.py`) when there are multiple `python` files (#1097)
+- Build to include public files (#1112)
 - Persisting choice of tabbed/split view when running `python` code (#1114)
 
 ## [0.27.1] - 2024-10-01
@@ -37,6 +69,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Enabling web component to find the `turtle` canvas (#1082)
 - Ability to stop code in the web component (#1083)
+- Remove redundant code (#1103)
 
 ## [0.27.0] - 2024-09-26
 
@@ -915,7 +948,13 @@ 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.27.1...HEAD
+[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.28.5...HEAD
+[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
+[0.28.2]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.2
+[0.28.1]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.1
+[0.28.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.0
 [0.27.1]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.27.1
 [0.27.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.27.0
 [0.26.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.26.0

Dockerfile

@@ -18,6 +18,6 @@ RUN corepack enable \
 
 RUN yarn
 
-EXPOSE 3010
+EXPOSE 3011
 
 CMD ["yarn", "start"]

README.md

@@ -9,12 +9,9 @@ Copy the example files into the correct place:
 
 ```
 cp .env.example .env
-
-cp .env.webcomponent.example .env.webcomponent
 ```
 
-Variables for the web application need to go into the `.env` file.
-Variables for the web component can be placed in `.env.webcomponent`.
+Variables for the web component can be placed in `.env`.
 
 ## Private repo setup (.npmrc)
 
@@ -32,7 +29,7 @@ In the project directory, you can run:
 ### `yarn start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3010](http://localhost:3010) to view it in the browser.
+Open [http://localhost:3011](http://localhost:3011) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
@@ -57,8 +54,9 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 Automated unit tests can be run via the `yarn test` command. These unit tests are written using the JavaScript testing framework `Jest` and make use of the tools provided by the [React Testing Library](https://testing-library.com/docs/). Automated accessibility testing for components is available via the `jest-axe` library. This can be achieved using the `haveNoViolations` matcher provided by `jest-axe`, although this does not guarantee that the tested components have no accessibility issues.
 
 Integration testing is carried out via `cypress` and can be run using:
-* `yarn exec cypress run` to run in the CLI
-* `yarn exec cypress open` to run in the GUI
+
+- `yarn exec cypress run` to run in the CLI
+- `yarn exec cypress open` to run in the GUI
 
 Currently, there are basic `cypress` tests for the standalone editor site, the web component and Mission Zero-related functionality. These can be found in the `cypress/e2e` directory. Screenshots and videos related to the most recent `cypress` test run can be found in `cypress/screenshots` and `cypress/videos` respectively.
 
@@ -80,12 +78,6 @@ The web component can be included in a page by using the `<editor-wc>` HTML elem
 - `embedded`: Enable embedded mode which hides some functionality (defaults to `false`)
 - `output_split_view`: Start with split view in output panel (defaults to `false`, i.e. tabbed view)
 
-### `yarn start:wc`
-
-Runs the web component in development mode. Open [http://localhost:3011](http://localhost:3011) to view it in the browser.
-
-**NB** You need to have the main `yarn start` process running too.
-
 It is possible to add query strings to control how the web component is configured. Any HTML attribute can be set on the query string, including `class`, `style` etc.
 
 For example, to load the page with the Sense Hat always showing, add [`?sense_hat_always_enabled` to the URL](http://localhost:3011?sense_hat_always_enabled)

config/env.js

@@ -1,16 +1,14 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
 
 // Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
+delete require.cache[require.resolve("./paths")];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
+    "The NODE_ENV environment variable is required but was not specified.",
   );
 }
 
@@ -20,7 +18,7 @@ const dotenvFiles = [
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  NODE_ENV !== "test" && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   paths.dotenv,
 ].filter(Boolean);
@@ -30,12 +28,12 @@ const dotenvFiles = [
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
+dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
+    require("dotenv-expand")(
+      require("dotenv").config({
         path: dotenvFile,
-      })
+      }),
     );
   }
 });
@@ -50,10 +48,10 @@ dotenvFiles.forEach(dotenvFile => {
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
+process.env.NODE_PATH = (process.env.NODE_PATH || "")
   .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
+  .filter((folder) => folder && !path.isAbsolute(folder))
+  .map((folder) => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@@ -62,7 +60,7 @@ const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
+    .filter((key) => REACT_APP.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];
@@ -71,7 +69,7 @@ function getClientEnvironment(publicUrl) {
       {
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
+        NODE_ENV: process.env.NODE_ENV || "development",
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
@@ -90,12 +88,12 @@ function getClientEnvironment(publicUrl) {
         // react-refresh is not 100% stable at this time,
         // which is why it's disabled by default.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      }
+        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
+      },
     );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
+    "process.env": Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
     }, {}),

config/paths.js

@@ -54,8 +54,8 @@ module.exports = {
   appPath: resolveApp("."),
   appBuild: resolveApp(buildPath),
   appPublic: resolveApp("public"),
-  appHtml: resolveApp("src/index.html"),
-  appIndexJs: resolveModule(resolveApp, "src/index"),
+  appHtml: resolveApp("src/web-component.html"),
+  appIndexJs: resolveModule(resolveApp, "src/web-component"),
   appPackageJson: resolveApp("package.json"),
   appSrc: resolveApp("src"),
   appTsConfig: resolveApp("tsconfig.json"),

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

@@ -100,6 +100,29 @@ describe("Running the code with pyodide", () => {
       .should("be.visible");
   });
 
+  it("runs a simple seaborn program", () => {
+    runCode("import seaborn as sns\ndata = [50, 30, 100]\nsns.displot(data)");
+    cy.wait(12000);
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pyodiderunner")
+      .find("img")
+      .should("be.visible");
+  });
+
+  it("runs a simple urllib program", () => {
+    cy.intercept("GET", "https://www.my-amazing-website.com", {
+      statusCode: 200,
+    });
+    runCode(
+      "import urllib.request\nresponse = urllib.request.urlopen('https://www.my-amazing-website.com')\nprint(response.getcode())",
+    );
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "200");
+  });
+
   it("runs a simple program with a module from PyPI", () => {
     runCode(
       "from strsimpy.levenshtein import Levenshtein\nlevenshtein = Levenshtein()\nprint(levenshtein.distance('hello', 'world'))",
@@ -120,4 +143,43 @@ describe("Running the code with pyodide", () => {
         "ModuleNotFoundError: No module named 'i_do_not_exist' on line 1 of main.py",
       );
   });
+
+  it("clears user-defined variables between code runs", () => {
+    runCode("a = 1\nprint(a)");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "1");
+    runCode("print(a)");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".error-message__content")
+      .should("contain", "NameError: name 'a' is not defined");
+  });
+
+  it("clears user-defined functions between code runs", () => {
+    runCode("def my_function():\n\treturn 1\nprint(my_function())");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "1");
+    runCode("print(my_function())");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".error-message__content")
+      .should("contain", "NameError: name 'my_function' is not defined");
+  });
+
+  it("clears user-imported modules between code runs", () => {
+    runCode("import math\nprint(math.floor(math.pi))");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "3");
+    runCode("print(math.floor(math.pi))");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".error-message__content")
+      .should("contain", "NameError: name 'math' is not defined");
+  });
 });

cypress/e2e/spec-wc.cy.js

@@ -54,7 +54,7 @@ describe("when load_remix_disabled is true, e.g. in editor-standalone", () => {
     });
   });
 
-  it("loads the original project in preference to the remixed version", () => {
+  it.skip("loads the original project in preference to the remixed version", () => {
     // View the original project
     cy.visit(urlFor(originalIdentifier));
     cy.get("#project-identifier").should("have.text", originalIdentifier);

docker-compose.yml

@@ -14,7 +14,7 @@ x-app: &x-app
 services:
   react-ui-wc:
     <<: *x-app
-    command: yarn start:wc
+    command: yarn start
     ports:
       - "3011:3011"
     container_name: react-ui-wc