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

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-dd7fea6283b73c4e.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/UH_nSG8k25NO9SYLlVW9n/_buildManifest.js" defer=""></script><script src="/_next/static/UH_nSG8k25NO9SYLlVW9n/_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":"UH_nSG8k25NO9SYLlVW9n","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/out/_next/static/UH_nSG8k25NO9SYLlVW9n/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,d,n,f,u,h,l,k,j,p,g,o,r){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[a,j,p,"static/chunks/pages/index-cf93d16e9c63b6db.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":[s,e,"static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-57289ca6bc99702b.js"],"/changes":[s,t,"static/chunks/8eec4907-b712959d9f984b68.js",i,"static/chunks/918-5bb55fb464e34768.js",c,d,"static/css/838fd8bb5a7c32b0.css","static/chunks/pages/changes-23829ddb11cac992.js"],"/custom-types":[a,j,p,"static/chunks/pages/custom-types-3c8e721ec6802127.js"],"/custom-types/[customTypeId]":[s,n,f,u,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/custom-types/[customTypeId]-d1a4a07e6b600fa6.js"],"/labs":["static/chunks/pages/labs-49bed0a08da3772c.js"],"/page-types/[pageTypeId]":[s,n,f,u,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/page-types/[pageTypeId]-a724ff12ef322020.js"],"/settings":["static/css/ca32882a5d2d8d88.css","static/chunks/pages/settings-12f209f1d5d42b1c.js"],"/slices":[s,t,b,c,d,"static/css/f8eb526e10bc2441.css","static/chunks/pages/slices-c33645b1828857c4.js"],"/slices/[lib]/[sliceName]/[variation]":[s,t,n,f,u,h,e,b,i,l,c,k,d,"static/css/b22c0750c14cc089.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-ba6c3e2624f32fcd.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[t,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-a5a5d48f20a7b261.js","static/chunks/46-d22d7a121254e31d.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-3eb0fdce3228d389.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/settings","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/59b4e022-7a3b5554b806349f.js","static/chunks/25-792af14760d9df34.js","static/chunks/799-9bea9069969f5fe0.js","static/chunks/183-4feb6bb3eddbc768.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/543-f8766685f7f451e2.js","static/chunks/50-cfc2514205b86001.js","static/chunks/286-e0950c3083c672e8.js","static/chunks/f36c6662-03bb5e9d9aa0b0aa.js","static/chunks/4c744e84-e3161d754618373f.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-2c5b6c0367fcde86.js","static/chunks/696-b992b9e1ce75777e.js","static/chunks/318-2426f74a0d6c3b89.js","static/chunks/727-df23c133f7cbf952.js","static/css/be1f49e49a5aa7eb.css","static/chunks/210-aee6116139329803.js","static/chunks/904-1a755ebb0f5ee4ac.js","static/css/72465cc1225f28a2.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();