set REACT_APP _API_ENDPOINT and _AUTHENTICATION_URL as props

.env.example

@@ -1,10 +1,8 @@
 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=''

.github/workflows/ci-cd.yml

@@ -96,7 +96,6 @@ jobs:
           wait-on: "http://localhost:3011"
           quiet: true
         env:
-          REACT_APP_API_ENDPOINT: "https://test-editor-api.raspberrypi.org"
           PUBLIC_URL: "http://localhost:3011"
           ASSETS_URL: "http://localhost:3011"
           REACT_APP_PLAUSIBLE_SOURCE: ""
@@ -117,7 +116,6 @@ jobs:
       assets_url: https://editor-static.raspberrypi.org
       environment: production
       prefix: releases
-      react_app_api_endpoint: https://editor-api.raspberrypi.org
       react_app_authentication_url: https://auth-v1.raspberrypi.org
       react_app_base_url: ""
       react_app_google_tag_manager_id: GTM-5FWFWFJ

.github/workflows/deploy.yml

@@ -18,10 +18,6 @@ on:
         required: false
         default: "https://staging-editor-static.raspberrypi.org"
         type: string
-      react_app_api_endpoint:
-        required: false
-        default: "https://staging-editor-api.raspberrypi.org"
-        type: string
       react_app_authentication_client_id:
         required: false
         default: editor-api
@@ -132,7 +128,6 @@ jobs:
         env:
           PUBLIC_URL: ${{ needs.setup-environment.outputs.public_url }}
           ASSETS_URL: ${{ needs.setup-environment.outputs.assets_url }}
-          REACT_APP_API_ENDPOINT: ${{ inputs.react_app_api_endpoint }}
           REACT_APP_AUTHENTICATION_CLIENT_ID: ${{ inputs.react_app_authentication_client_id }}
           REACT_APP_AUTHENTICATION_URL: ${{ inputs.react_app_authentication_url }}
           REACT_APP_BASE_URL: ${{ needs.setup-environment.outputs.react_app_base_url }}

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+## [0.28.6] - 2024-10-31
+
+### Removed
+
+- Remove REACT_APP_API_ENDPOINT and REACT_APP_AUTHENTICATION_URL env vars in place of params (#1124)
+
 ## [0.28.5] - 2024-10-25
 
 ### Fixed

cypress.config.mjs

@@ -23,7 +23,4 @@ export default defineConfig({
       openMode: 0,
     },
   },
-  env: {
-    REACT_APP_API_ENDPOINT: process.env.REACT_APP_API_ENDPOINT,
-  },
 });

cypress/e2e/spec-html.cy.js

@@ -35,9 +35,7 @@ beforeEach(() => {
   // intercept request to editor api
   cy.intercept(
     "GET",
-    `${Cypress.env(
-      "REACT_APP_API_ENDPOINT",
-    )}/api/projects/blank-html-starter?locale=en`,
+    "https://test-editor-api.raspberrypi.org/api/projects/blank-html-starter?locale=en",
     defaultHtmlProject,
   );
 });

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}` : ""
       }`;