Enable all fundamental state, actions and reducers in web component

.env.webcomponent.example

@@ -1,4 +1,5 @@
-# NB This is the URL of react-ui, rather than the web component
+REACT_APP_AUTHENTICATION_URL='http://localhost:9001'
 REACT_APP_SENTRY_DSN=''
 REACT_APP_SENTRY_ENV='local'
+# NB This is the URL of react-ui, rather than the web component
 PUBLIC_URL=http://localhost:3000

.github/workflows/ci-cd.yml

@@ -55,7 +55,7 @@ jobs:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Run tests
-      run: yarn run test --coverage --maxWorkers=4 --reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
+      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/
 

CHANGELOG.md

@@ -30,6 +30,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Web component tests (#709, #710)
 - `instructions` attribute for the web component (#712)
 - Instructions slice to store data passed from the Projects site (#712)
+- Adding auth to the web component (#728)
+- Allow web component to load, save and remix projects (#728)
 
 ### Changed
 

src/app/WebComponentStore.js

@@ -0,0 +1,24 @@
+import { configureStore } from "@reduxjs/toolkit";
+import EditorReducer from "../redux/EditorSlice";
+import InstructionsReducer from "../redux/InstructionsSlice";
+import WebComponentAuthReducer from "../redux/WebComponentAuthSlice";
+
+const store = configureStore({
+  reducer: {
+    editor: EditorReducer,
+    instructions: InstructionsReducer,
+    auth: WebComponentAuthReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [
+          "redux-oidc/USER_FOUND",
+          "redux-odic/SILENT_RENEW_ERROR",
+        ],
+        ignoredPaths: ["auth.user"],
+      },
+    }),
+});
+
+export default store;

src/components/EmbeddedViewer/EmbeddedViewer.jsx

@@ -6,7 +6,7 @@ import { useSelector } from "react-redux";
 import { useProject } from "../../hooks/useProject";
 import { useEmbeddedMode } from "../../hooks/useEmbeddedMode";
 import Output from "../Editor/Output/Output";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import NotFoundModalEmbedded from "../Modals/NotFoundModalEmbedded";
 import AccessDeniedNoAuthModalEmbedded from "../Modals/AccessDeniedNoAuthModalEmbedded";
 
@@ -20,11 +20,14 @@ const EmbeddedViewer = () => {
   );
   const { identifier } = useParams();
   const user = useSelector((state) => state.auth.user) || {};
+  const [searchParams] = useSearchParams();
+  const isBrowserPreview = searchParams.get("browserPreview") === "true";
 
   useProject({
     projectIdentifier: identifier,
     accessToken: user.access_token,
     isEmbedded: true,
+    isBrowserPreview,
   });
 
   useEmbeddedMode(true);

src/components/EmbeddedViewer/EmbeddedViewer.test.js

@@ -6,11 +6,18 @@ import configureStore from "redux-mock-store";
 import { render, screen } from "@testing-library/react";
 import { useProject } from "../../hooks/useProject";
 
+let mockBrowserPreview = false;
+
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useParams: () => ({
     identifier: "my-amazing-project",
   }),
+  useSearchParams: () => [
+    {
+      get: (key) => (key === "browserPreview" ? mockBrowserPreview : null),
+    },
+  ],
 }));
 
 jest.mock("../../hooks/useProject", () => ({
@@ -86,6 +93,33 @@ test("Loads project with correct params", () => {
     projectIdentifier: "my-amazing-project",
     accessToken: "my_token",
     isEmbedded: true,
+    isBrowserPreview: false,
+  });
+});
+
+test("Loads project with correct params if browser preview", () => {
+  initialState = {
+    ...initialState,
+    editor: {
+      ...initialState.editor,
+      loading: "success",
+    },
+  };
+
+  const mockStore = configureStore([]);
+  store = mockStore(initialState);
+  mockBrowserPreview = "true";
+
+  render(
+    <Provider store={store}>
+      <EmbeddedViewer />
+    </Provider>,
+  );
+  expect(useProject).toHaveBeenCalledWith({
+    projectIdentifier: "my-amazing-project",
+    accessToken: "my_token",
+    isEmbedded: true,
+    isBrowserPreview: true,
   });
 });
 

src/components/SaveButton/SaveButton.jsx

@@ -1,36 +1,19 @@
+import React from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
 import SaveIcon from "../../assets/icons/save.svg";
-import { syncProject, showLoginToSaveModal } from "../../redux/EditorSlice";
-import { isOwner } from "../../utils/projectHelpers";
+import { triggerSave } from "../../redux/EditorSlice";
 
 const SaveButton = ({ className, type = "secondary" }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
-  const user = useSelector((state) => state.auth.user);
-  const project = useSelector((state) => state.editor.project);
   const loading = useSelector((state) => state.editor.loading);
 
   const onClickSave = async () => {
     window.plausible("Save button");
-
-    if (isOwner(user, project)) {
-      dispatch(
-        syncProject("save")({
-          project,
-          accessToken: user.access_token,
-          autosave: false,
-        }),
-      );
-    } else if (user && project.identifier) {
-      dispatch(
-        syncProject("remix")({ project, accessToken: user.access_token }),
-      );
-    } else {
-      dispatch(showLoginToSaveModal());
-    }
+    dispatch(triggerSave());
   };
 
   return (