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

package/components/Simulator/components/FailedConnect/index.tsx

@@ -41,7 +41,7 @@ const FailedConnect = ({ onRetrigger }: { onRetrigger: () => void }) => (
       <br /> If that doesn't work, see the&nbsp;
       <Link
         target="_blank"
-        href="https://prismic.io/docs/slice-machine"
+        href="https://prismic.io/docs/slice-machine#simulate-slices"
         sx={{
           color: "link",
         }}

package/components/Simulator/index.tsx

@@ -39,20 +39,16 @@ import IframeRenderer from "./components/IframeRenderer";
 import {
   selectIframeStatus,
   selectIsWaitingForIFrameCheck,
-  selectSetupStatus,
 } from "@src/modules/simulator";
 import { ErrorBoundary } from "@src/ErrorBoundary";
 
 import FullPage from "./components/FullPage";
 import FailedConnect from "./components/FailedConnect";
-import SetupModal from "./components/SetupModal";
 import { Slices, VariationSM } from "@lib/models/common/Slice";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 
 export enum UiState {
-  LOADING_SETUP = "LOADING_SETUP",
   LOADING_IFRAME = "LOADING_IFRAME",
-  FAILED_SETUP = "FAILED_SETUP",
   FAILED_CONNECT = "FAILED_CONNECT",
   SUCCESS = "SUCCESS",
 }
@@ -63,24 +59,15 @@ type SimulatorProps = {
 };
 
 const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
-  const {
-    checkSimulatorSetup,
-    connectToSimulatorIframe,
-    updateSliceMockSuccess,
-  } = useSliceMachineActions();
-  const {
-    simulatorUrl,
-    iframeStatus,
-    manifestStatus,
-    isWaitingForIFrameCheck,
-    endpoints,
-  } = useSelector((state: SliceMachineStoreType) => ({
-    simulatorUrl: selectSimulatorUrl(state),
-    iframeStatus: selectIframeStatus(state),
-    manifestStatus: selectSetupStatus(state).manifest,
-    isWaitingForIFrameCheck: selectIsWaitingForIFrameCheck(state),
-    endpoints: selectEndpoints(state),
-  }));
+  const { connectToSimulatorIframe, updateSliceMockSuccess } =
+    useSliceMachineActions();
+  const { simulatorUrl, iframeStatus, isWaitingForIFrameCheck, endpoints } =
+    useSelector((state: SliceMachineStoreType) => ({
+      simulatorUrl: selectSimulatorUrl(state),
+      iframeStatus: selectIframeStatus(state),
+      isWaitingForIFrameCheck: selectIsWaitingForIFrameCheck(state),
+      endpoints: selectEndpoints(state),
+    }));
 
   const editorConfig: EditorConfig = useMemo(
     () => ({
@@ -91,12 +78,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
     [endpoints.PrismicOembed, endpoints.PrismicUnsplash],
   );
 
-  const setupIntervalId = useRef<NodeJS.Timeout | null>(null);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const checkSimulatorSetupCb = useCallback(() => checkSimulatorSetup(), []);
-
   useEffect(() => {
-    checkSimulatorSetup();
     void telemetry.track({ event: "slice-simulator:open" });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -114,41 +96,20 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
   };
 
   const currentState: UiState = (() => {
-    if (manifestStatus === "ko") {
-      return UiState.FAILED_SETUP;
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    if (isWaitingForIFrameCheck || !iframeStatus) {
+      return UiState.LOADING_IFRAME;
     }
-    if (manifestStatus === "ok") {
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      if (isWaitingForIFrameCheck || !iframeStatus) {
-        return UiState.LOADING_IFRAME;
-      }
-      if (iframeStatus !== "ok") {
-        return UiState.FAILED_CONNECT;
-      }
-      return UiState.SUCCESS;
+    if (iframeStatus !== "ok") {
+      return UiState.FAILED_CONNECT;
     }
-    return UiState.LOADING_SETUP;
+    return UiState.SUCCESS;
   })();
 
   useEffect(() => {
-    if (currentState === UiState.FAILED_SETUP && !setupIntervalId.current) {
-      const id = setInterval(() => {
-        checkSimulatorSetupCb();
-      }, 3000);
-      setupIntervalId.current = id;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentState]);
-
-  useEffect(() => {
-    if (manifestStatus === "ok") {
-      if (setupIntervalId.current) {
-        clearInterval(setupIntervalId.current);
-      }
-      connectToSimulatorIframe();
-    }
+    connectToSimulatorIframe();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [manifestStatus]);
+  }, []);
 
   useEffect(() => {
     if (currentState === UiState.FAILED_CONNECT) {
@@ -255,7 +216,6 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
 
   return (
     <Flex sx={{ flexDirection: "column", height: "100vh" }}>
-      <SetupModal isOpen={currentState === UiState.FAILED_SETUP} />
       <Header
         slice={slice}
         variation={variation}

package/lib/builders/SliceBuilder/SimulatorButton/index.tsx

@@ -1,6 +1,5 @@
 import { Button, tokens } from "@prismicio/editor-ui";
 import React, { PropsWithChildren, useEffect, useRef } from "react";
-import { Text } from "theme-ui";
 
 import { SIMULATOR_WINDOW_ID, VIDEO_SIMULATOR_TOOLTIP } from "@lib/consts";
 import { useRouter } from "next/router";
@@ -13,7 +12,6 @@ import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { telemetry } from "@src/apiClient";
 
-import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
 import {
   HoverCard,
   HoverCardCloseButton,
@@ -22,21 +20,6 @@ import {
   HoverCardTitle,
 } from "@src/components/HoverCard";
 
-const SimulatorNotSupportedTooltip: React.FC = () => (
-  <ReactTooltipPortal>
-    <ReactTooltip
-      clickable
-      place="bottom"
-      effect="solid"
-      delayHide={500}
-      id="simulator-button-tooltip"
-    >
-      <Text as="b">Framework not supported</Text>
-      <Text as="p">Slice Simulator does not support your framework yet.</Text>
-    </ReactTooltip>
-  </ReactTooltipPortal>
-);
-
 const SimulatorOnboardingTooltip: React.FC<
   PropsWithChildren<{
     open: boolean;
@@ -71,9 +54,8 @@ const SimulatorOnboardingTooltip: React.FC<
 };
 
 const SimulatorButton: React.FC<{
-  isSimulatorAvailableForFramework: boolean;
   disabled: boolean;
-}> = ({ isSimulatorAvailableForFramework, disabled }) => {
+}> = ({ disabled }) => {
   const router = useRouter();
 
   const ref = useRef<HTMLButtonElement | null>(null);
@@ -88,10 +70,10 @@ const SimulatorButton: React.FC<{
 
   useEffect(() => {
     const node = ref.current;
-    if (node && isSimulatorAvailableForFramework && !hasSeenSimulatorTooltip) {
+    if (node && !hasSeenSimulatorTooltip) {
       setTimeout(() => ReactTooltip.show(node), 5000);
     }
-  }, [isSimulatorAvailableForFramework, hasSeenSimulatorTooltip]);
+  }, [hasSeenSimulatorTooltip]);
 
   const onCloseToolTip = () => {
     setSeenSimulatorToolTip();
@@ -101,8 +83,7 @@ const SimulatorButton: React.FC<{
     }
   };
 
-  const shouldShowSimulatorTooltip =
-    isSimulatorAvailableForFramework && !hasSeenSimulatorTooltip;
+  const shouldShowSimulatorTooltip = !hasSeenSimulatorTooltip;
 
   return (
     <span
@@ -138,9 +119,6 @@ const SimulatorButton: React.FC<{
           Simulate
         </Button>
       </SimulatorOnboardingTooltip>
-      {isSimulatorAvailableForFramework === false ? (
-        <SimulatorNotSupportedTooltip />
-      ) : undefined}
     </span>
   );
 };

package/lib/builders/SliceBuilder/index.tsx

@@ -4,8 +4,6 @@ import { type FC } from "react";
 import FieldZones from "./FieldZones";
 import { Sidebar } from "./Sidebar";
 
-import { useSelector } from "react-redux";
-
 import SimulatorButton from "@builders/SliceBuilder/SimulatorButton";
 import {
   AppLayout,
@@ -16,17 +14,12 @@ import {
   AppLayoutHeader,
 } from "@components/AppLayout";
 import { FloatingBackButton } from "@src/features/slices/sliceBuilder/FloatingBackButton";
-import { selectIsSimulatorAvailableForFramework } from "@src/modules/environment";
 import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
 import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
 
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
 
-  const isSimulatorAvailableForFramework = useSelector(
-    selectIsSimulatorAvailableForFramework,
-  );
-
   return (
     <AppLayout>
       <AppLayoutHeader>
@@ -34,10 +27,7 @@ export const SliceBuilder: FC = () => {
         <AppLayoutBreadcrumb folder="Slices" page={slice.model.name} />
         <AppLayoutActions>
           <AutoSaveStatusIndicator status={actionQueueStatus} />
-          <SimulatorButton
-            isSimulatorAvailableForFramework={isSimulatorAvailableForFramework}
-            disabled={actionQueueStatus !== "done"}
-          />
+          <SimulatorButton disabled={actionQueueStatus !== "done"} />
         </AppLayoutActions>
       </AppLayoutHeader>
       <AppLayoutContent>

package/lib/models/common/Environment.ts

@@ -17,6 +17,5 @@ export interface FrontEndEnvironment {
   manifest: Manifest;
   repo: string;
   packageManager: PackageManager;
-  supportsSliceSimulator: boolean;
   endpoints: APIEndpoints;
 }

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/4f1e84c70ef0e169.css" as="style"/><link rel="stylesheet" href="/_next/static/css/4f1e84c70ef0e169.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-e32e7f8142e6cde0.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/PAJQyEuW0rRHPSn18wYrk/_buildManifest.js" defer=""></script><script src="/_next/static/PAJQyEuW0rRHPSn18wYrk/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"PAJQyEuW0rRHPSn18wYrk","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/4f1e84c70ef0e169.css" as="style"/><link rel="stylesheet" href="/_next/static/css/4f1e84c70ef0e169.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-c0d8973a13d54a4c.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/re4cxnEJmZdCTdRZZUIWc/_buildManifest.js" defer=""></script><script src="/_next/static/re4cxnEJmZdCTdRZZUIWc/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"re4cxnEJmZdCTdRZZUIWc","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>