Better 404

web/playground/package.json

@@ -2,7 +2,7 @@
   "name": "playground",
   "version": "0.1.0",
   "private": true,
-  "homepage": "./web",
+  "homepage": "/web",
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
     "@testing-library/jest-dom": "^5.17.0",

web/playground/src/App.js

@@ -1,4 +1,4 @@
-import logo from "./logo.png";
+import logo from "./images/logo.png";
 import "./App.scss";
 import  TemplateDialog from "./components/templateDialog/TemplateDialog";
 import { useNavigate } from "react-router-dom";

web/playground/src/components/errorBoundary/ErrorBoundary.js

@@ -0,0 +1,8 @@
+// ErrorBoundary component can't be created as a function, but since
+// we're using this component only to display a navigation error in
+// react router it's fine as it is
+function ErrorBoundary({ fallback }) {
+  return fallback;
+}
+
+export default ErrorBoundary;

web/playground/src/components/placeholder/Placeholder.js

@@ -0,0 +1,37 @@
+import "./Placeholder.scss";
+import seeNoEvilImg from "../../images/see-no-evil-monkey.png";
+import Button from "react-bootstrap/Button";
+
+/**
+ *
+ * @param {Object} props
+ * @param {"page"} props.type
+ * @param {String} props.title
+ * @param {String} props.description
+ */
+function Placeholder({ type, title, description }) {
+  const goBack = () => {
+    window.history.go(-1);
+  };
+
+  return (
+    <div className={type === "page" ? "page-placeholder" : ""}>
+      <div className="d-flex">
+        <img src={seeNoEvilImg} className="placeholder-image me-3" alt="logo"/>
+        <div className="flex-column">
+          <h1 className="display-3 ml-xl-3">{title}</h1>
+          <p className="text-center">{description}</p>
+        </div>
+      </div>
+      <div className="d-flex">
+        <Button
+          onClick={() => goBack()}
+          data-testid="playground-from-scratch">
+            Take me back
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default Placeholder;

web/playground/src/components/placeholder/Placeholder.scss

@@ -0,0 +1,13 @@
+.page-placeholder {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.placeholder-image {
+    height: 20vmin;
+    pointer-events: none;
+}

web/playground/src/components/placeholder/Placeholder.test.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Placeholder from "./Placeholder";
+
+const mockedHandleEditorChange = jest.fn();
+
+describe("Placeholder", () => {
+  it("Renders Placeholder component", async () => {
+    render(<Placeholder type="page" title="Lorem" description="Ipsum" />);
+
+    // ensure monaco editor loads correctly
+    expect(await screen.findByText("Lorem")).toBeInTheDocument();
+    expect(await screen.findByText("Ipsum")).toBeInTheDocument();
+  });
+});

web/playground/src/index.js

@@ -8,17 +8,34 @@ import "./index.scss";
 import App from "./App";
 import Playground from "./screens/playground/Playground";
 import { Configuration } from "./Configuration.js";
+import ErrorBoundary from "./components/errorBoundary/ErrorBoundary";
+import Placeholder from "./components/placeholder/Placeholder";
 
 const url = Configuration.path;
 
+const getErrorElement = () => {
+  return (
+    <ErrorBoundary
+      fallback={
+        <Placeholder
+          type="page"
+          title="Ops! 404 Not found"
+          description="The page you're looking for doesn't exist." />
+      }
+    />
+  );
+};
+
 const router = createBrowserRouter([
   {
     path: `${url}`,
     element: <App />,
+    errorElement: getErrorElement()
   },
   {
     path: `${url}:playgroundId`,
-    element: <Playground />
+    element: <Playground />,
+    errorElement: getErrorElement()
   }
 ]);
 

web/playground/src/screens/playground/Playground.js

@@ -1,5 +1,6 @@
 import Editor from "../../components/editor/Editor";
 import Shell from "../../components/shell/Shell";
+import Placeholder from "../../components/placeholder/Placeholder";
 import { useState, useMemo, useEffect } from "react";
 import { useParams, useLocation } from "react-router-dom";
 import { getPlaygroundHistory } from "../../services/PlaygroundService";
@@ -14,6 +15,7 @@ function Playground() {
   const [program, setProgram] = useState("");
   const [history, setHistory] = useState([]);
   const [playgroundNotFound, setPlaygroundNotFound] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const { sendMessage, lastMessage } = useWebSocket(WEBSOCKET_URL);
 
@@ -32,6 +34,7 @@ function Playground() {
   useEffect(() => {
     (async () => {
       if (state?.skipFetchHistory) {
+        setIsLoading(false);
         return;
       }
 
@@ -42,6 +45,8 @@ function Playground() {
       } catch (error) {
         setPlaygroundNotFound(true);
         return;
+      } finally {
+        setIsLoading(false);
       }
     })();
     return () => {
@@ -78,31 +83,37 @@ function Playground() {
     }
   };
 
-  if (playgroundNotFound) {
-    // todo: improve this screen
-    return (
-      <p>404 playground wasn't found</p>
-    );
+  if (isLoading) {
+    return (<></>);
   }
+
   return (
     <>
-      <div className="playground-alert">
-        <Alert key="primary" variant="primary" dismissible>
-          <span>{getAlertString()}</span>
-        </Alert>
-      </div>
-      <div className="playground" data-testid="playground-screen">
-        <div className="playground-editor">
-          <Editor
-            onEditorChanged={handleEditorChanged}
-            initialValue={program}
-          />
-        </div>
-        <div className="playground-shell">
-          <Shell
-            evalResults={history}
-          />
+      {playgroundNotFound ?
+        <></> :
+        <div className="playground-alert">
+          <Alert key="primary" variant="primary" dismissible>
+            <span>{getAlertString()}</span>
+          </Alert>
         </div>
+      }
+      <div className="playground" data-testid="playground-screen">
+        {playgroundNotFound ?
+          <Placeholder type="page" title="Ops! Playground not found" description="The playground you are looking for has been deleted or it doesn't exist." /> : 
+          <>
+            <div className="playground-editor">
+              <Editor
+                onEditorChanged={handleEditorChanged}
+                initialValue={program}
+              />
+            </div>
+            <div className="playground-shell">
+              <Shell
+                evalResults={history}
+              />
+            </div>
+          </>
+        }
       </div>
     </>
   );

web/playground/src/screens/playground/Playground.test.js

@@ -13,15 +13,23 @@ jest.mock("platform-detect", () => {
     macos: true,
   };
 });
+jest.mock('../../services/PlaygroundService.js', () => {
+  const originalModule = jest.requireActual('../../services/PlaygroundService.js');
+  return {
+    __esModule: true,
+    ...originalModule,
+    getPlaygroundHistory: () => jest.fn(() => [{ program: '', history: [] }])
+  };
+});
 describe("Playground", () => {
-  it("renders Playground component", () => {
+  it("renders Playground component", async () => {
     render(
       <BrowserRouter>
         <Playground />
       </BrowserRouter>
     );
 
     // ensure playground is in the document and enabled
-    expect(screen.getByTestId("playground-screen")).toBeEnabled();
+    expect(await screen.findByTestId("playground-screen")).toBeEnabled();
   });
 });