Redundant editor code tidy up (#1103)

closes #1088

---------

Co-authored-by: Scott <[email protected]>

Author: MagdalenaJadach

.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'

.env.webcomponent.example

@@ -92,7 +92,7 @@ jobs:
         with:
           install: false
           start: |
-            yarn start:wc
+            yarn start
           wait-on: "http://localhost:3011"
           quiet: true
         env:

.github/workflows/ci-cd.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 }}

.github/workflows/deploy.yml

@@ -57,6 +57,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
 

CHANGELOG.md

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

Dockerfile

@@ -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)

README.md

@@ -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/env.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"),

config/paths.js

@@ -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