Hide live preview button in storm

packages/studio-plugin/src/ParsingOrchestrator.ts

@@ -168,6 +168,7 @@ export default class ParsingOrchestrator {
       UUIDToFileMetadata: this.getUUIDToFileMetadata(),
       siteSettings,
       studioConfig: this.studioConfig,
+      isWithinCBD: !!process.env.YEXT_CBD_BRANCH,
     };
   }
 

packages/studio-plugin/src/createStudioPlugin.ts

@@ -14,10 +14,9 @@ import { readdirSync, existsSync, lstatSync } from "fs";
 import upath from "upath";
 import lodash from "lodash";
 import { STUDIO_PROCESS_ARGS_OBJ } from "./constants";
-import { startPagesDevelopmentServer } from "./startPagesDevelopmentServer";
 import LocalDataMappingManager from "./LocalDataMappingManager";
-import { execSync } from "node:child_process";
 import getStudioViteOptions from "./viteconfig/getStudioViteOptions";
+import { createDevServer } from "@yext/pages";
 
 /**
  * Handles server-client communication.
@@ -33,9 +32,11 @@ export default async function createStudioPlugin(
   );
   const pathToUserProjectRoot = getProjectRoot(cliArgs);
   const studioConfig = await getStudioConfig(pathToUserProjectRoot, cliArgs);
-  const pagesDevPortPromise = studioConfig.isPagesJSRepo
-    ? startPagesDevelopmentServer()
+  const shouldSpawnPagesDevServer = !process.env.YEXT_CBD_BRANCH && studioConfig.isPagesJSRepo;
+  const pagesDevPortPromise = shouldSpawnPagesDevServer 
+    ? createDevServer(false, false, 5173)
     : null;
+
   const gitWrapper = new GitWrapper(
     simpleGit({
       baseDir: pathToUserProjectRoot,
@@ -62,16 +63,7 @@ export default async function createStudioPlugin(
     new FileSystemWriter(orchestrator, tsMorphProject)
   );
 
-  await pagesDevPortPromise?.then((port) => {
-    if (!port) {
-      throw new Error("No port found for PagesJS.");
-    }
-    console.log("PagesJS running on port:", port);
-    process.on("exit", () => {
-      execSync(`npx kill-port ${port}`);
-    });
-  });
-
+  await pagesDevPortPromise;
   return {
     name: "yext-studio-vite-plugin",
     buildStart() {
@@ -99,7 +91,8 @@ export default async function createStudioPlugin(
       const studioViteOptions = getStudioViteOptions(
         args,
         studioConfig,
-        pathToUserProjectRoot
+        pathToUserProjectRoot,
+        orchestrator.getStudioData().isWithinCBD
       );
       return lodash.merge({}, config, studioViteOptions);
     },

packages/studio-plugin/src/git/GitWrapper.ts

@@ -78,7 +78,6 @@ export default class GitWrapper {
     const canPush = await this.canPush();
     this.gitData = {
       canPush,
-      isWithinCBD: !!process.env.YEXT_CBD_BRANCH,
     };
   }
 }

packages/studio-plugin/src/types/GitData.ts

@@ -3,5 +3,4 @@ export interface GitData {
     status: boolean;
     reason?: string;
   };
-  isWithinCBD: boolean;
 }

packages/studio-plugin/src/types/StudioData.ts

@@ -9,4 +9,5 @@ export interface StudioData {
   UUIDToFileMetadata: Record<string, FileMetadata>;
   siteSettings?: SiteSettings;
   studioConfig: StudioConfigWithDefaulting;
+  isWithinCBD: boolean;
 }

packages/studio-plugin/src/viteconfig/getStudioViteOptions.ts

@@ -4,14 +4,15 @@ import { StudioConfigWithDefaulting } from "../types";
 export default function getStudioViteOptions(
   args: ConfigEnv,
   studioConfig: StudioConfigWithDefaulting,
-  pathToUserProjectRoot: string
+  pathToUserProjectRoot: string,
+  isWithinCBD: boolean
 ): UserConfig {
   const serverOptions: ServerOptions = {
     port: studioConfig.port,
     open:
       args.mode === "development" &&
       args.command === "serve" &&
-      !process.env.YEXT_CBD_BRANCH &&
+      !isWithinCBD &&
       studioConfig.openBrowser,
     watch: {
       ignored: pathToUserProjectRoot,

packages/studio-plugin/tests/git/GitWrapper.test.ts

@@ -61,7 +61,6 @@ describe("verifying canPush calculation", () => {
         status: false,
         reason: "No remotes found.",
       },
-      isWithinCBD: false,
     };
     expect(gitWrapper.getStoredData()).toEqual(expectedData);
   });
@@ -86,7 +85,6 @@ describe("verifying canPush calculation", () => {
         status: false,
         reason: "Multiple remotes found.",
       },
-      isWithinCBD: false,
     };
     expect(gitWrapper.getStoredData()).toEqual(expectedData);
   });
@@ -101,7 +99,6 @@ describe("verifying canPush calculation", () => {
         status: false,
         reason: "No upstream branch found",
       },
-      isWithinCBD: false,
     };
     expect(gitWrapper.getStoredData()).toEqual(expectedData);
   });
@@ -117,7 +114,6 @@ describe("verifying canPush calculation", () => {
         status: false,
         reason: "No changes to push.",
       },
-      isWithinCBD: false,
     };
     expect(gitWrapper.getStoredData()).toEqual(expectedData);
   });
@@ -132,7 +128,6 @@ describe("verifying canPush calculation", () => {
       canPush: {
         status: true,
       },
-      isWithinCBD: false,
     };
     expect(gitWrapper.getStoredData()).toEqual(expectedData);
   });

packages/studio/__mocks__/virtual_yext-studio.ts

@@ -18,5 +18,6 @@ const mockStudioData: StudioData = {
     isPagesJSRepo: false,
     port: 8080,
   },
+  isWithinCBD: false,
 };
 export default mockStudioData;

packages/studio/src/components/ActionsBar.tsx

@@ -2,32 +2,37 @@ import AddElementButton from "./AddElementButton";
 import UndoRedo from "./UndoRedo";
 import SaveButton from "./SaveButton";
 import DeployButton from "./DeployButton";
-import gitData from "virtual_yext-studio-git-data";
 import OpenLivePreviewButton from "./OpenLivePreviewButton";
 import ViewportButton from "./Viewport/ViewportButton";
 import InfoButton from "./InfoButton";
+import useStudioStore from "../store/useStudioStore";
 
 /**
  * Renders the top bar of Studio, which includes buttons for performing undo
  * and redo actions, and adding elements.
  */
 export default function ActionsBar(): JSX.Element {
+  const studioInCBD = useStudioStore(
+    (store) => store.studioEnvData.isWithinCBD
+  );
   return (
     <div className="flex bg-gray-100 py-3 items-center px-4">
       <AddElementButton />
-      <div className="ml-auto">
+      <div className="ml-auto h-7">
         <InfoButton />
       </div>
-      <div className="ml-4">
-        <OpenLivePreviewButton />
-      </div>
+      {!studioInCBD && (
+        <div className="ml-4">
+          <OpenLivePreviewButton />
+        </div>
+      )}
       <div className="ml-2 flex items-center">
         <div className="mr-2">
           <ViewportButton />
         </div>
         <UndoRedo />
       </div>
-      {!gitData.isWithinCBD && <SaveButton />}
+      {!studioInCBD && <SaveButton />}
       <DeployButton />
     </div>
   );

packages/studio/src/components/InfoButton.tsx

@@ -26,11 +26,5 @@ const renderModal: renderModalFunction = (isOpen, handleClose) => {
  * Renders an info modal including the current Studio version
  */
 export default function InfoButton() {
-  return (
-    <ButtonWithModal
-      buttonContent={infoSVG}
-      buttonClassName="pt-2"
-      renderModal={renderModal}
-    />
-  );
+  return <ButtonWithModal buttonContent={infoSVG} renderModal={renderModal} />;
 }

packages/studio/src/store/models/StudioStore.ts

@@ -5,6 +5,7 @@ import PageSlice from "./slices/PageSlice";
 import PreviousSaveSlice from "./slices/PreviousSaveSlice";
 import SiteSettingSlice from "./slices/SiteSettingsSlice";
 import StudioConfigSlice from "./slices/StudioConfigSlice";
+import StudioEnvDataSlice from "./slices/StudioEnvDataSlice";
 
 /**
  * The overall shape of the Zustand store as the state manager for Studio.
@@ -20,4 +21,5 @@ export type StudioStore = {
   createModule: (modulePath: string) => void;
   actions: StudioActions;
   studioConfig: StudioConfigSlice;
+  studioEnvData: StudioEnvDataSlice;
 };

packages/studio/src/store/models/slices/StudioEnvDataSlice.ts

@@ -0,0 +1,6 @@
+/**
+ * A slice for containing environment data.
+ */
+export default interface StudioEnvDataSlice {
+  isWithinCBD: boolean;
+}

packages/studio/src/store/slices/createStudioEnvDataSlice.ts

@@ -0,0 +1,9 @@
+import StudioEnvDataSlice from "../models/slices/StudioEnvDataSlice";
+import { SliceCreator } from "../models/utils";
+import initialStudioData from "virtual_yext-studio";
+
+const createStudioEnvDataSlice: SliceCreator<StudioEnvDataSlice> = () => ({
+  isWithinCBD: initialStudioData.isWithinCBD,
+});
+
+export default createStudioEnvDataSlice;

packages/studio/src/store/useStudioStore.ts

@@ -13,6 +13,7 @@ import StudioActions from "./StudioActions";
 import createStudioConfigSlice from "./slices/createStudioConfigSlice";
 import createPreviousSaveSlice from "./slices/createPreviousSaveSlice";
 import { addZundoMiddleware } from "./zundoMiddleware";
+import createStudioEnvDataSlice from "./slices/createStudioEnvDataSlice";
 
 enableMapSet();
 
@@ -46,6 +47,7 @@ const useStudioStore = create<StudioStore>()(
           () => get().studioConfig
         ),
         studioConfig: lens(createStudioConfigSlice),
+        studioEnvData: lens(createStudioEnvDataSlice),
       };
     })
   )