set REACT_APP _API_ENDPOINT and _AUTHENTICATION_URL as props (#1124)

## Issue
Closes
https://github.com/RaspberryPiFoundation/learner-experience-integration-tests/issues/5

## Description

* Changed how both utils function:
  * `src/utils/apiCallHandler.js`
  * `src/utils/userManager.js`
* I've considered how best to adapt these helpers - I could have gone
with classes or functions, and while I considered changing these to be
classes, this would require more verbose invocation throughout the
codebase which ended up making code harder to read, whereas the
function-based approach means most calls can be left as-is.
* `public/index.html` added which provides a handy link to the
web-component.html rather than just a directory listing
* Removed a load of code that isn't used any more

---------

Co-authored-by: Scott Adams <[email protected]>
Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: Lois Wells <[email protected]>
Co-authored-by: Lois Wells <[email protected]>

Author: 4 people

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

CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+## [0.28.8] - 2024-11-04
+
+### Changed
+- REACT_APP_API_ENDPOINT env var is now only a default for the editor-wc prop, which can be overridden (#1124)
+  
+### Removed 
+- REACT_APP_AUTHENTICATION_URL env var no longer used and is instead a editor-wc prop (#1124)
+
 
 ## [0.28.5] - 2024-11-01
 

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/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/components/DownloadButton/DownloadButton.jsx

@@ -4,11 +4,10 @@ import { toSnakeCase } from "js-convert-case";
 import JSZip from "jszip";
 import JSZipUtils from "jszip-utils";
 import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 
 import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
-import { closeLoginToSaveModal } from "../../redux/EditorSlice";
 
 const DownloadButton = (props) => {
   const {
@@ -20,10 +19,6 @@ const DownloadButton = (props) => {
   } = props;
   const { t } = useTranslation();
   const project = useSelector((state) => state.editor.project);
-  const loginToSaveModalShowing = useSelector(
-    (state) => state.editor.loginToSaveModalShowing,
-  );
-  const dispatch = useDispatch();
 
   const urlToPromise = (url) => {
     return new Promise(function (resolve, reject) {
@@ -42,9 +37,6 @@ const DownloadButton = (props) => {
       window.plausible("Download");
     }
 
-    if (loginToSaveModalShowing) {
-      dispatch(closeLoginToSaveModal());
-    }
     const zip = new JSZip();
 
     project.components.forEach((file) => {

src/components/DownloadButton/DownloadButton.test.js

@@ -6,7 +6,6 @@ import DownloadButton from "./DownloadButton";
 import FileSaver from "file-saver";
 import JSZip from "jszip";
 import JSZipUtils from "jszip-utils";
-import { closeLoginToSaveModal } from "../../redux/EditorSlice";
 
 jest.mock("file-saver");
 jest.mock("jszip");
@@ -124,27 +123,3 @@ describe("Downloading project with no name set", () => {
     );
   });
 });
-
-test("If login to save modal open, closes it when download clicked", () => {
-  JSZip.mockClear();
-  const middlewares = [];
-  const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {
-        components: [],
-        image_list: [],
-      },
-      loginToSaveModalShowing: true,
-    },
-  };
-  const store = mockStore(initialState);
-  render(
-    <Provider store={store}>
-      <DownloadButton buttonText="Download" Icon={() => {}} />
-    </Provider>,
-  );
-  const downloadButton = screen.queryByText("Download").parentElement;
-  fireEvent.click(downloadButton);
-  expect(store.getActions()).toEqual([closeLoginToSaveModal()]);
-});

src/components/Editor/ImageUploadButton/ImageUploadButton.jsx

@@ -9,7 +9,7 @@ import { updateImages, setNameError } from "../../../redux/EditorSlice";
 import Button from "../../Button/Button";
 import NameErrorMessage from "../ErrorMessage/NameErrorMessage";
 import store from "../../../app/store";
-import { uploadImages } from "../../../utils/apiCallHandler";
+import ApiCallHandler from "../../../utils/apiCallHandler";
 
 const allowedExtensions = {
   python: ["jpg", "jpeg", "png", "gif"],
@@ -30,7 +30,7 @@ const allowedExtensionsString = (projectType) => {
   }
 };
 
-const ImageUploadButton = () => {
+const ImageUploadButton = ({ reactAppApiEndpoint }) => {
   const [modalIsOpen, setIsOpen] = useState(false);
   const [files, setFiles] = useState([]);
   const dispatch = useDispatch();
@@ -51,6 +51,10 @@ const ImageUploadButton = () => {
     setIsOpen(true);
   };
   const saveImages = async () => {
+    const { uploadImages } = ApiCallHandler({
+      reactAppApiEndpoint,
+    });
+
     files.every((file) => {
       const fileName = file.name;
       const extension = fileName.split(".").slice(1).join(".").toLowerCase();

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx

@@ -12,7 +12,7 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useMediaQuery } from "react-responsive";
 import { MOBILE_MEDIA_QUERY } from "../../../../../utils/mediaQueryBreakpoints";
 import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
-import { createError } from "../../../../../utils/apiCallHandler";
+import ApiCallHandler from "../../../../../utils/apiCallHandler";
 import VisualOutputPane from "./VisualOutputPane";
 import OutputViewToggle from "../OutputViewToggle";
 import { SettingsContext } from "../../../../../utils/settings";
@@ -47,6 +47,7 @@ const PyodideRunner = (props) => {
   const userId = user?.profile?.user;
   const isSplitView = useSelector((s) => s.editor.isSplitView);
   const isEmbedded = useSelector((s) => s.editor.isEmbedded);
+  const reactAppApiEndpoint = useSelector((s) => s.editor.reactAppApiEndpoint);
   const codeRunTriggered = useSelector((s) => s.editor.codeRunTriggered);
   const codeRunStopped = useSelector((s) => s.editor.codeRunStopped);
   const output = useRef();
@@ -180,6 +181,9 @@ const PyodideRunner = (props) => {
         errorMessage += `:\n${mistake}`;
       }
 
+      const { createError } = ApiCallHandler({
+        reactAppApiEndpoint,
+      });
       createError(projectIdentifier, userId, { errorType: type, errorMessage });
     }
 

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -15,7 +15,7 @@ import {
   triggerDraw,
 } from "../../../../../redux/EditorSlice";
 import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
-import { createError } from "../../../../../utils/apiCallHandler";
+import ApiCallHandler from "../../../../../utils/apiCallHandler";
 import store from "../../../../../redux/stores/WebComponentStore";
 import VisualOutputPane from "../VisualOutputPane";
 import OutputViewToggle from "../OutputViewToggle";
@@ -71,6 +71,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   );
   const codeRunStopped = useSelector((state) => state.editor.codeRunStopped);
   const drawTriggered = useSelector((state) => state.editor.drawTriggered);
+  const reactAppApiEndpoint = useSelector((s) => s.editor.reactAppApiEndpoint);
   const output = useRef();
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -314,6 +315,8 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
         userId = user.profile?.user;
       }
 
+      const { createError } = ApiCallHandler({ reactAppApiEndpoint });
+
       errorMessage = `${errorType}: ${errorDescription} on line ${lineNumber} of ${fileName}${
         explanation ? `. ${explanation}` : ""
       }`;