Hide live preview button in storm (#348)

This PR hides the Live preview button and stops pages dev from running when in CBD.  This PR also resizes some of the icons in the action bar (info and viewport) since their height made the action bar stretch too tall.

Tests were updated by adding `isWithinCBD` to the `virtual_yext-studio` mock. Also `isWithinCBD` was moved from `GitData` into `StudioData`, and was also updated in tests.

See [this test site](https://www.yext.com/s/3350634/sitesgit/82218/b/hide-live-preview-button).

**Live preview button does not appear in CBD and pages dev does not spawn**
![image](https://github.com/yext/studio/assets/59857107/572b3daa-9eaa-4c6d-b184-7f87ccdde3bf)
![image](https://github.com/yext/studio/assets/59857107/24519a86-5328-4dbd-89b1-f1354e885f8c)

**Live preview button does appear locally and pages dev does spawn**
![image](https://github.com/yext/studio/assets/59857107/ae2ade1d-e2d5-492d-99ac-9c13f4151943)
<img width="958" alt="image" src="https://github.com/yext/studio/assets/59857107/8b494cc8-f489-4023-bb9f-5d2f204a001d">

J=SLAP-2891
TEST=manual

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()
-    : null;
+  const shouldSpawnPagesDevServer =
+    !process.env.YEXT_CBD_BRANCH && studioConfig.isPagesJSRepo;
+  const pagesDevPortPromise =
+    shouldSpawnPagesDevServer && createDevServer(false, false, 5173);
+
   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),
       };
     })
   )