slice-machine-ui 1.25.1-beta.1 → 1.25.1-beta.3

package/src/modules/simulator/index.ts

@@ -1,56 +1,18 @@
+import { fork, put, takeLeading, race, take, delay } from "redux-saga/effects";
 import { Reducer } from "redux";
-import { SliceMachineStoreType } from "@src/redux/type";
 import { ActionType, createAsyncAction, getType } from "typesafe-actions";
-import { SimulatorStoreType } from "./types";
-import {
-  call,
-  fork,
-  put,
-  select,
-  takeLeading,
-  race,
-  take,
-  delay,
-} from "redux-saga/effects";
-import { checkSimulatorSetup, getSimulatorSetupSteps } from "@src/apiClient";
-import {
-  selectIsSimulatorAvailableForFramework,
-  updateManifestCreator,
-} from "@src/modules/environment";
-import { withLoader } from "@src/modules/loading";
+
 import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { SimulatorCheckResponse } from "@models/common/Simulator";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { withLoader } from "@src/modules/loading";
 
-import { modalOpenCreator } from "../modal";
-import { ModalKeysEnum } from "../modal/types";
+import { SimulatorStoreType } from "./types";
 
 export const initialState: SimulatorStoreType = {
-  setupSteps: null,
   iframeStatus: null,
-  setupStatus: {
-    manifest: null,
-  },
   isWaitingForIframeCheck: false,
 };
 
-export const checkSimulatorSetupCreator = createAsyncAction(
-  "SIMULATOR/CHECK_SETUP.REQUEST",
-  "SIMULATOR/CHECK_SETUP.SUCCESS",
-  "SIMULATOR/CHECK_SETUP.FAILURE",
-)<
-  {
-    callback?: () => void;
-  },
-  {
-    setupSteps: NonNullable<SimulatorStoreType["setupSteps"]>;
-    setupStatus: SimulatorStoreType["setupStatus"];
-  },
-  {
-    setupSteps?: NonNullable<SimulatorStoreType["setupSteps"]>;
-    error: Error;
-  }
->();
-
 export const connectToSimulatorIframeCreator = createAsyncAction(
   "SIMULATOR/CONNECT_TO_SIMULATOR_IFRAME.REQUEST",
   "SIMULATOR/CONNECT_TO_SIMULATOR_IFRAME.SUCCESS",
@@ -61,16 +23,10 @@ type SimulatorActions = ActionType<
   | typeof connectToSimulatorIframeCreator.success
   | typeof connectToSimulatorIframeCreator.request
   | typeof connectToSimulatorIframeCreator.failure
-  | typeof checkSimulatorSetupCreator.success
-  | typeof checkSimulatorSetupCreator.failure
 >;
 
 // Selectors
 
-export const selectSetupStatus = (
-  state: SliceMachineStoreType,
-): SimulatorStoreType["setupStatus"] => state.simulator.setupStatus;
-
 export const selectIsWaitingForIFrameCheck = (
   state: SliceMachineStoreType,
 ): boolean => state.simulator.isWaitingForIframeCheck;
@@ -79,10 +35,6 @@ export const selectIframeStatus = (
   state: SliceMachineStoreType,
 ): string | null => state.simulator.iframeStatus;
 
-export const selectSetupSteps = (
-  state: SliceMachineStoreType,
-): SimulatorStoreType["setupSteps"] => state.simulator.setupSteps;
-
 // Reducer
 export const simulatorReducer: Reducer<SimulatorStoreType, SimulatorActions> = (
   state = initialState,
@@ -107,62 +59,11 @@ export const simulatorReducer: Reducer<SimulatorStoreType, SimulatorActions> = (
         iframeStatus: "ko",
         isWaitingForIframeCheck: false,
       };
-    case getType(checkSimulatorSetupCreator.failure):
-      return {
-        ...state,
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        setupSteps: action.payload.setupSteps || null,
-        setupStatus: {
-          ...state.setupStatus,
-          manifest: "ko",
-        },
-      };
-    case getType(checkSimulatorSetupCreator.success):
-      return {
-        ...state,
-        setupSteps: action.payload.setupSteps,
-        setupStatus: {
-          ...state.setupStatus,
-          manifest: "ok",
-        },
-      };
     default:
       return state;
   }
 };
 
-// Sagas
-export function* checkSetupSaga(
-  action: ReturnType<typeof checkSimulatorSetupCreator.request>,
-) {
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const setupStatus: SimulatorCheckResponse = yield call(checkSimulatorSetup);
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const setupSteps: Awaited<ReturnType<typeof getSimulatorSetupSteps>> =
-      yield call(getSimulatorSetupSteps);
-
-    if (setupStatus.manifest === "ok") {
-      yield put(
-        checkSimulatorSetupCreator.success({
-          setupSteps: setupSteps.steps,
-          setupStatus,
-        }),
-      );
-      yield put(updateManifestCreator({ value: setupStatus.value }));
-      if (action.payload.callback) {
-        action.payload.callback();
-      }
-      return;
-    }
-    yield call(failCheckSetupSaga, { setupSteps: setupSteps.steps });
-  } catch (error) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    yield put(checkSimulatorSetupCreator.failure({ error: error as Error }));
-  }
-}
-
 function* connectToSimulatorIframe() {
   yield put(connectToSimulatorIframeCreator.request());
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -185,34 +86,6 @@ function* connectToSimulatorIframe() {
   yield put(connectToSimulatorIframeCreator.failure());
 }
 
-export function* failCheckSetupSaga({
-  setupSteps,
-}: { setupSteps?: NonNullable<SimulatorStoreType["setupSteps"]> } = {}) {
-  const isPreviewAvailableForFramework = (yield select(
-    selectIsSimulatorAvailableForFramework,
-  )) as ReturnType<typeof selectIsSimulatorAvailableForFramework>;
-
-  if (!isPreviewAvailableForFramework) {
-    return;
-  }
-
-  yield put(
-    checkSimulatorSetupCreator.failure({
-      setupSteps,
-      error: new Error(),
-    }),
-  );
-  yield put(modalOpenCreator({ modalKey: ModalKeysEnum.SIMULATOR_SETUP }));
-}
-
-// Saga watchers
-function* watchCheckSetup() {
-  yield takeLeading(
-    getType(checkSimulatorSetupCreator.request),
-    withLoader(checkSetupSaga, LoadingKeysEnum.CHECK_SIMULATOR),
-  );
-}
-
 function* watchIframeCheck() {
   yield takeLeading(
     getType(connectToSimulatorIframeCreator.request),
@@ -225,6 +98,5 @@ function* watchIframeCheck() {
 
 // Saga Exports
 export function* watchSimulatorSagas() {
-  yield fork(watchCheckSetup);
   yield fork(watchIframeCheck);
 }

package/src/modules/simulator/types.ts

@@ -1,11 +1,5 @@
-import { SimulatorManagerReadSliceSimulatorSetupStep } from "@slicemachine/manager/client";
-
 export type SimulatorStoreType = {
-  setupSteps: SimulatorManagerReadSliceSimulatorSetupStep[] | null;
   // we use strings to check if key is defined
   iframeStatus: "ok" | "ko" | null;
-  setupStatus: {
-    manifest: "ok" | "ko" | null;
-  };
   isWaitingForIframeCheck: boolean;
 };

package/src/modules/useSliceMachineActions.ts

@@ -12,10 +12,7 @@ import {
   changesPushSuccess,
 } from "./userContext";
 import { refreshStateCreator } from "./environment";
-import {
-  checkSimulatorSetupCreator,
-  connectToSimulatorIframeCreator,
-} from "./simulator";
+import { connectToSimulatorIframeCreator } from "./simulator";
 import ServerState from "@models/server/ServerState";
 import {
   customTypeCreateSuccess,
@@ -42,9 +39,6 @@ import { SaveSliceMockRequest } from "@src/apiClient";
 const useSliceMachineActions = () => {
   const dispatch = useDispatch();
 
-  const checkSimulatorSetup = (callback?: () => void) =>
-    dispatch(checkSimulatorSetupCreator.request({ callback }));
-
   const connectToSimulatorIframe = () =>
     dispatch(connectToSimulatorIframeCreator.request());
   const connectToSimulatorFailure = () =>
@@ -62,8 +56,6 @@ const useSliceMachineActions = () => {
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SCREENSHOTS }));
   const openScreenshotPreviewModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SCREENSHOT_PREVIEW }));
-  const openSimulatorSetupModal = () =>
-    dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SIMULATOR_SETUP }));
 
   // Loading module
   const startLoadingReview = () =>
@@ -190,7 +182,6 @@ const useSliceMachineActions = () => {
   const pushChangesSuccess = () => dispatch(changesPushSuccess());
 
   return {
-    checkSimulatorSetup,
     connectToSimulatorFailure,
     connectToSimulatorSuccess,
     connectToSimulatorIframe,
@@ -215,7 +206,6 @@ const useSliceMachineActions = () => {
     setSeenSimulatorToolTip,
     setSeenChangesToolTip,
     openScreenshotPreviewModal,
-    openSimulatorSetupModal,
     closeModals,
     pushChangesSuccess,
     createCustomTypeSuccess,

package/test/__testutils__/createTestPlugin.ts

@@ -30,7 +30,6 @@ const REQUIRED_ADAPTER_HOOKS: SliceMachineHookTypes[] = [
   "custom-type:asset:read",
   "custom-type:asset:delete",
   "custom-type-library:read",
-  "slice-simulator:setup:read",
 ];
 
 type CreateTestPluginArgs<TPluginOptions extends SliceMachinePluginOptions> =

package/test/src/modules/__fixtures__/serverState.ts

@@ -26,7 +26,6 @@ export const dummyServerState: Pick<
       SliceMachineV1: "https://sm-api.prismic.io/v1/",
     },
     shortId: "shortId",
-    supportsSliceSimulator: true,
   },
   customTypes: [
     {

package/test/src/modules/simulator.test.ts

@@ -6,23 +6,9 @@ import {
   initialState,
   simulatorReducer,
   connectToSimulatorIframeCreator,
-  checkSimulatorSetupCreator,
-  failCheckSetupSaga,
 } from "@src/modules/simulator";
-import { select } from "redux-saga/effects";
-import { testSaga, expectSaga } from "redux-saga-test-plan";
-import { checkSetupSaga } from "@src/modules/simulator";
 import { SimulatorStoreType } from "@src/modules/simulator/types";
 
-import {
-  selectIsSimulatorAvailableForFramework,
-  updateManifestCreator,
-} from "@src/modules/environment";
-
-import { modalOpenCreator } from "@src/modules/modal";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { checkSimulatorSetup, getSimulatorSetupSteps } from "@src/apiClient";
-
 const dummySimulatorState: SimulatorStoreType = initialState;
 
 describe("[Simulator module]", () => {
@@ -41,38 +27,6 @@ describe("[Simulator module]", () => {
       ).toEqual(dummySimulatorState);
     });
 
-    it("should update the state when given checkSimulatorSetupCreator.success action", () => {
-      const initialState: SimulatorStoreType = dummySimulatorState;
-      const setupStatusResponse: SimulatorStoreType["setupStatus"] = {
-        manifest: "ok",
-      };
-      const setupStepsResponse = [
-        {
-          title: "foo",
-          body: "bar",
-          description: "baz",
-          isComplete: true,
-          validationMessages: [],
-        },
-      ];
-
-      const action = checkSimulatorSetupCreator.success({
-        setupStatus: setupStatusResponse,
-        setupSteps: setupStepsResponse,
-      });
-
-      const expectedState: SimulatorStoreType = {
-        ...dummySimulatorState,
-        setupStatus: {
-          ...dummySimulatorState.setupStatus,
-          ...setupStatusResponse,
-        },
-        setupSteps: setupStepsResponse,
-      };
-
-      expect(simulatorReducer(initialState, action)).toEqual(expectedState);
-    });
-
     it("should update the state when given connectToSimulatorIframeCreator.success action", () => {
       const initialState: SimulatorStoreType = dummySimulatorState;
 
@@ -85,155 +39,5 @@ describe("[Simulator module]", () => {
 
       expect(simulatorReducer(initialState, action)).toEqual(expectedState);
     });
-
-    it("should set manifest status to ko if checkSimulatorSetupCreator.failure action", () => {
-      const initialState: SimulatorStoreType = dummySimulatorState;
-      // @ts-expect-error TS(2345) FIXME: Argument of type 'Error' is not assignable to para... Remove this comment to see the full error message
-      const action = checkSimulatorSetupCreator.failure(new Error("Error"));
-
-      const expectedState: SimulatorStoreType = {
-        ...dummySimulatorState,
-        setupStatus: {
-          manifest: "ko",
-        },
-      };
-
-      expect(simulatorReducer(initialState, action)).toEqual(expectedState);
-    });
-    it("should call the api and dispatch the success action", () => {
-      const setupSimulatorAction: ReturnType<
-        typeof checkSimulatorSetupCreator.request
-      > = {
-        payload: {},
-        type: "SIMULATOR/CHECK_SETUP.REQUEST",
-      };
-      const saga = testSaga(checkSetupSaga, setupSimulatorAction);
-      saga.next().call(checkSimulatorSetup);
-      const response = { manifest: "ok" } as const;
-      saga.next(response).call(getSimulatorSetupSteps);
-      const response2 = {
-        steps: [
-          {
-            title: "foo",
-            body: "bar",
-            description: "baz",
-            isComplete: true,
-            validationMessages: [],
-          },
-        ],
-        errors: [],
-      };
-      saga.next(response2).put(
-        checkSimulatorSetupCreator.success({
-          setupStatus: response,
-          setupSteps: response2.steps,
-        }),
-      );
-      saga.next().put(updateManifestCreator({ value: undefined }));
-      saga.next().isDone();
-    });
-    it("should call the api and dispatch the failure action", () => {
-      const setupSimulatorAction: ReturnType<
-        typeof checkSimulatorSetupCreator.request
-      > = {
-        payload: {},
-        type: "SIMULATOR/CHECK_SETUP.REQUEST",
-      };
-      const saga = testSaga(checkSetupSaga, setupSimulatorAction);
-      saga.next().call(checkSimulatorSetup);
-      const response = { manifest: "ko" } as const;
-      saga.next(response).call(getSimulatorSetupSteps);
-      const response2 = {
-        steps: [
-          {
-            title: "foo",
-            body: "bar",
-            description: "baz",
-            isComplete: true,
-            validationMessages: [],
-          },
-        ],
-        errors: [],
-      };
-      saga
-        .next(response2)
-        .call(failCheckSetupSaga, { setupSteps: response2.steps });
-      saga.next().isDone();
-    });
-    it("should open setup modal if checkSimulatorSetupCreator.failure action", () => {
-      const payload = {
-        setupSteps: [
-          {
-            title: "foo",
-            body: "bar",
-            description: "baz",
-            isComplete: true,
-            validationMessages: [],
-          },
-        ],
-      };
-
-      const saga = testSaga(failCheckSetupSaga, payload);
-
-      saga.next().select(selectIsSimulatorAvailableForFramework);
-      saga.next(true).put(
-        checkSimulatorSetupCreator.failure({
-          setupSteps: payload.setupSteps,
-          error: new Error(),
-        }),
-      );
-      saga
-        .next()
-        .put(modalOpenCreator({ modalKey: ModalKeysEnum.SIMULATOR_SETUP }));
-    });
-  });
-
-  describe("[failCheckSetupSaga]", () => {
-    it("stores setup steps even on failure", async () => {
-      const payload = {
-        setupSteps: [
-          {
-            title: "foo",
-            body: "bar",
-            description: "baz",
-            isComplete: true,
-            validationMessages: [],
-          },
-        ],
-      };
-
-      await expectSaga(failCheckSetupSaga, payload)
-        .provide([[select(selectIsSimulatorAvailableForFramework), true]])
-        .put(
-          checkSimulatorSetupCreator.failure({
-            setupSteps: payload.setupSteps,
-            error: new Error(),
-          }),
-        )
-        .put(
-          modalOpenCreator({
-            modalKey: ModalKeysEnum.SIMULATOR_SETUP,
-          }),
-        )
-        .run();
-    });
-    it("should early return if the framework doesn't support the simulator feature", () => {
-      const payload = {
-        setupSteps: [
-          {
-            title: "foo",
-            body: "bar",
-            description: "baz",
-            isComplete: true,
-            validationMessages: [],
-          },
-        ],
-      };
-
-      const saga = testSaga(failCheckSetupSaga, payload);
-
-      saga.next().select(selectIsSimulatorAvailableForFramework);
-      saga.next(false).isDone();
-    });
   });
 });

package/components/CodeSpan/index.tsx

@@ -1,23 +0,0 @@
-import { Box } from "theme-ui";
-
-type CodeSpanProps = {
-  // TODO: Can `string` be removed?
-  children?: React.ReactElement | string;
-};
-
-export const CodeSpan = ({ children }: CodeSpanProps) => {
-  return (
-    <Box
-      as="code"
-      sx={{
-        bg: "rgba(0, 0, 0, 0.05)",
-        borderRadius: 3,
-        padding: "2px 4px",
-      }}
-    >
-      {children}
-    </Box>
-  );
-};
-
-export default CodeSpan;

package/components/HTMLRenderer/index.tsx

@@ -1,137 +0,0 @@
-import { useState, useRef } from "react";
-import { Box, Flex, Button, useThemeUI } from "theme-ui";
-import parse, {
-  domToReact,
-  Element,
-  HTMLReactParserOptions,
-} from "html-react-parser";
-import { MdCheck, MdContentCopy } from "react-icons/md";
-
-import CodeSpan from "@components/CodeSpan";
-
-const Pre = ({ children, ...props }: { children?: React.ReactNode }) => {
-  const { theme } = useThemeUI();
-
-  const [isCopied, setIsCopied] = useState(false);
-  const preRef = useRef<HTMLPreElement>(null);
-
-  const copy = (): void => {
-    if (preRef.current) {
-      navigator.clipboard
-        .writeText(preRef.current.innerText)
-        .then(() => {
-          setIsCopied(true);
-          setTimeout(() => {
-            setIsCopied(false);
-          }, 1200);
-        })
-        .catch(() => {
-          // ignored
-        });
-    }
-  };
-
-  return (
-    <Box
-      {...props}
-      sx={{
-        backgroundColor: "codeBlockBackground",
-        borderRadius: 8,
-      }}
-    >
-      <Flex
-        sx={{
-          px: "26px",
-          py: "22px",
-          color: "#FFF",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-          borderBottom: "1px solid rgba(111, 110, 119, 0.2)",
-        }}
-      >
-        <Flex sx={{ alignItems: "center" }}>
-          {/*
-                <FileIcon size={14} style={{ marginRight: "12px" }} />
-                  {fileName}
-         */}
-        </Flex>
-        <Button
-          onClick={copy}
-          variant="transparent"
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            p: 0,
-            fontSize: "12px",
-            color: "#FFF",
-          }}
-        >
-          Copy&nbsp;
-          {isCopied ? (
-            <MdCheck size={16} color={String(theme?.colors?.success)} />
-          ) : (
-            <MdContentCopy size={16} style={{ marginLeft: "8px" }} />
-          )}
-        </Button>
-      </Flex>
-      <Box
-        ref={preRef}
-        as="pre"
-        sx={{
-          color: "#c9d1d9",
-          padding: "16px 20px",
-          overflow: "auto",
-        }}
-      >
-        {children}
-      </Box>
-    </Box>
-  );
-};
-
-const defaultComponents: NonNullable<HTMLRendererProps["components"]> = {
-  code: ({ children }) => {
-    return <CodeSpan>{children}</CodeSpan>;
-  },
-  pre: ({ children, ...props }) => {
-    return <Pre {...props}>{children}</Pre>;
-  },
-};
-
-type HTMLRendererProps = {
-  html: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  components?: Record<string, React.ComponentType<any>>;
-};
-
-const HTMLRenderer = ({
-  html,
-  components = {},
-}: HTMLRendererProps): JSX.Element => {
-  const parserOptions: HTMLReactParserOptions = {
-    replace: (domNode) => {
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      if (domNode instanceof Element && domNode.attribs) {
-        const children = domToReact(domNode.children, parserOptions);
-
-        const resolvedComponents = { ...components, ...defaultComponents };
-        const Comp = resolvedComponents[domNode.name];
-
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        if (Comp) {
-          return (
-            <Comp name={domNode.name} {...domNode.attribs}>
-              {children}
-            </Comp>
-          );
-        }
-      }
-    },
-  };
-
-  return <>{parse(html, parserOptions)}</>;
-};
-
-export default HTMLRenderer;

package/components/Simulator/components/SetupModal/TextWithInlineCode.tsx

@@ -1,21 +0,0 @@
-import CodeSpan from "@components/CodeSpan";
-
-type TextWithInlineCodeProps = {
-  children: string;
-};
-
-const TextWithInlineCode = ({
-  children,
-}: TextWithInlineCodeProps): JSX.Element => {
-  const res = children.split("`").map((part, i) => {
-    if (i % 2 === 1) {
-      return <CodeSpan>{part}</CodeSpan>;
-    } else {
-      return part;
-    }
-  });
-
-  return <>{res}</>;
-};
-
-export default TextWithInlineCode;