Add runCode, stopCode & rerunCode to web component

Based on [1] & #899.

The motivation for this change is to support the Block-to-Text app [2].

This mainly adds the `runCode`, `stopCode`, & `rerunCode` methods to the
web component, but it also adds a check on the `webComponent` boolean
state in `Output` to determine whether or not to render the `RunBar`. I
don't really understand why this is needed, but having chatted to
@loiswells97 we've got a nagging feeling there's a use case that does
need it, so I'm going to leave it in plae for now. I've added a unit
test to illustate the behaviour.

I plan to add an e2e spec in a subsequent commit which will test the new
methods on the web component.

[1]: f9086a8
[2]: https://github.com/RaspberryPiFoundation/block-to-text-alpha/

Author: loiswells97

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Add `output_only` attribute to web component (#1014 & originally #782)
 - Add `assets_identifier` attribute to web component (#1014 & originally #901)
 - Enhance `code` attribute on web component to override project main component content (#1014 & originally #901)
+- Add `runCode`, `stopCode` & `rerunCode` methods to web component (#1014 & originally #899)
 
 ### Changed
 

src/components/Editor/Output/Output.jsx

@@ -12,6 +12,7 @@ const Output = ({ embedded = false, browserPreview = false }) => {
   const isBrowserPreview =
     searchParams.get("browserPreview") === "true" || browserPreview;
   const usePyodide = searchParams.get("pyodide") === "true";
+  const webComponent = useSelector((state) => state.editor.webComponent);
 
   return (
     <>
@@ -21,7 +22,9 @@ const Output = ({ embedded = false, browserPreview = false }) => {
           projectType={project.project_type}
           usePyodide={usePyodide}
         />
-        {isEmbedded && !isBrowserPreview && <RunBar embedded />}
+        {!webComponent && isEmbedded && !isBrowserPreview && (
+          <RunBar embedded />
+        )}
       </div>
     </>
   );

src/components/Editor/Output/Output.test.js

@@ -62,6 +62,24 @@ describe("Output component", () => {
       expect(screen.queryByText("runButton.run")).toBeInTheDocument();
     });
 
+    describe("when webComponent state is true", () => {
+      beforeEach(() => {
+        initialState.editor.webComponent = true;
+        store = mockStore(initialState);
+      });
+
+      test("does not show run bar", () => {
+        render(
+          <Provider store={store}>
+            <MemoryRouter>
+              <Output />
+            </MemoryRouter>
+          </Provider>,
+        );
+        expect(screen.queryByText("runButton.run")).not.toBeInTheDocument();
+      });
+    });
+
     describe("when browserPreview property is true", () => {
       test("does not show run bar", () => {
         render(

src/components/WebComponentProject/WebComponentProject.jsx

@@ -44,10 +44,8 @@ const WebComponentProject = ({
   const [codeHasRun, setCodeHasRun] = useState(codeHasBeenRun);
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(setIsSplitView(false));
-    dispatch(setWebComponent(true));
-  }, [dispatch]);
+  dispatch(setIsSplitView(false));
+  dispatch(setWebComponent(true));
 
   useEffect(() => {
     setCodeHasRun(false);

src/web-component.js

@@ -8,6 +8,7 @@ import store from "./redux/stores/WebComponentStore";
 import { Provider } from "react-redux";
 import "./utils/i18n";
 import camelCase from "camelcase";
+import { stopCodeRun, stopDraw, triggerCodeRun } from "./redux/EditorSlice";
 
 Sentry.init({
   dsn: process.env.REACT_APP_SENTRY_DSN,
@@ -101,6 +102,34 @@ class WebComponent extends HTMLElement {
     this.mountReactApp();
   }
 
+  stopCode() {
+    const state = store.getState();
+    if (state.editor.codeRunTriggered || state.editor.drawTriggered) {
+      store.dispatch(stopCodeRun());
+      store.dispatch(stopDraw());
+    }
+  }
+
+  runCode() {
+    store.dispatch(triggerCodeRun());
+  }
+
+  rerunCode() {
+    this.stopCode();
+
+    new Promise((resolve) => {
+      let checkInterval = setInterval(() => {
+        let state = store.getState();
+        if (!state.codeRunTriggered && !state.drawTriggered) {
+          clearInterval(checkInterval);
+          resolve();
+        }
+      }, 50);
+    }).then(() => {
+      this.runCode();
+    });
+  }
+
   reactProps() {
     return {
       ...this.componentAttributes,