Feedback.

yext · Sep 25, 2023 · 16d6106 · 16d6106
1 parent dec0eeb
commit 16d6106
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 34 deletions.
diff --git a/packages/studio-ui/src/components/OpenLivePreviewButton.tsx b/packages/studio-ui/src/components/OpenLivePreviewButton.tsx
@@ -1,4 +1,4 @@
-import { PagesJsState } from "@yext/studio-plugin";
+import { PageState, PagesJsState } from "@yext/studio-plugin";
 import useStudioStore from "../store/useStudioStore";
 import classNames from "classnames";
 import { Result } from "true-myth";
@@ -12,9 +12,6 @@ export const PAGES_JS_LANDING_PAGE = "http://localhost:5173";
  * If the Page is an Entity Template, the Preview will use the currently selected Entity Data.
  */
 export default function OpenLivePreviewButton(): JSX.Element {
-  let previewDisabled;
-  let livePreviewUrl;
-
   const [activePageName, activePageState, activeEntityData] = useStudioStore(
     (store) => [
       store.pages.activePageName as string,
@@ -23,37 +20,30 @@ export default function OpenLivePreviewButton(): JSX.Element {
     ]
   );
 
-  const isActivePagesJSPage = !!activePageState?.pagesJS;
-  if (isActivePagesJSPage) {
-    const pagesJSState = activePageState.pagesJS as PagesJsState;
-    const livePreviewUrlResult = getLivePreviewUrl(
-      pagesJSState,
-      activePageName,
-      activeEntityData
-    );
-    previewDisabled = livePreviewUrlResult.isErr;
-    livePreviewUrl = livePreviewUrlResult.isOk && livePreviewUrlResult.value;
-  } else {
-    previewDisabled = true;
-  }
+  const livePreviewUrlResult = getLivePreviewUrl(
+    activePageState,
+    activePageName,
+    activeEntityData
+  );
 
   const onClick = useCallback(() => {
-    livePreviewUrl && window.open(livePreviewUrl, "_blank");
-  }, [livePreviewUrl]);
+    livePreviewUrlResult.map((url) => window.open(url, "_blank"));
+  }, [livePreviewUrlResult]);
+
   const buttonClasses = classNames(
     "rounded-md px-2 py-1 flex items-center gap-x-2 text-white",
     {
-      "bg-gray-400": previewDisabled,
+      "bg-gray-400": livePreviewUrlResult.isErr,
       "bg-blue-600 shadow-md hover:bg-blue-700 hover:shadow-lg":
-        !previewDisabled,
+        livePreviewUrlResult.isOk,
     }
   );
 
   return (
     <div className="relative inline-block">
       <button
         className={buttonClasses}
-        disabled={previewDisabled}
+        disabled={livePreviewUrlResult.isErr}
         onClick={onClick}
       >
         Live Preview
@@ -63,19 +53,26 @@ export default function OpenLivePreviewButton(): JSX.Element {
 }
 
 function getLivePreviewUrl(
-  pagesJSState: PagesJsState,
+  activePageState: PageState | undefined,
   pageName: string,
   entityData?: Record<string, unknown>
 ): Result<string, Error> {
-  const isEntityPage = !!pagesJSState.streamScope;
-  if (isEntityPage) {
-    return entityData?.id
-      ? Result.ok(`${PAGES_JS_LANDING_PAGE}/${pageName}/${entityData.id}`)
-      : Result.err(new Error("Cannot create Preview URL for Entity Page"));
-  }
+  const isActivePagesJSPage = !!activePageState?.pagesJS;
+
+  if (isActivePagesJSPage) {
+    const pagesJSState = activePageState.pagesJS as PagesJsState;
+    const isEntityPage = !!pagesJSState.streamScope;
+    if (isEntityPage) {
+      return entityData?.id
+        ? Result.ok(`${PAGES_JS_LANDING_PAGE}/${pageName}/${entityData.id}`)
+        : Result.err(new Error("Cannot create Preview URL for Entity Page"));
+    }
 
-  const getPathVal = pagesJSState.getPathValue;
-  return !!getPathVal
-    ? Result.ok(`${PAGES_JS_LANDING_PAGE}/${getPathVal.value}`)
-    : Result.err(new Error("Cannot create Preview URL for Static Page"));
+    const getPathVal = pagesJSState.getPathValue;
+    return !!getPathVal
+      ? Result.ok(`${PAGES_JS_LANDING_PAGE}/${getPathVal.value}`)
+      : Result.err(new Error("Cannot create Preview URL for Static Page"));
+  } else {
+    return Result.err(new Error("There is no active PagesJS Template"));
+  }
 }
diff --git a/packages/studio-ui/tests/components/OpenLivePreviewButton.test.tsx b/packages/studio-ui/tests/components/OpenLivePreviewButton.test.tsx
@@ -18,7 +18,20 @@ const ensureButtonAppearance = (
 };
 
 describe("button is disabled properly", () => {
-  it("disables the button when not a PagesJS page", () => {
+  it("disables the button when there is no active page", () => {
+    mockStore({
+      pages: {
+        getActivePageState: () => undefined,
+        getActiveEntityData: () => undefined
+      }
+    });
+
+    render(<OpenLivePreviewButton />);
+    const button = screen.getByRole("button");
+    ensureButtonAppearance(button, false);
+  });
+
+  it("disables the button when active page is not a PagesJS Template", () => {
     const pageState: PageState = {
       componentTree: [],
       cssImports: [],