Improve Add and Edit Page Flows

e2e-tests/src/components/CustomTailwindButton.tsx

@@ -4,6 +4,8 @@ interface Props {
   className?: TailwindClass;
 }
 
+export const initialProps: Props = { className: "" };
+
 export default function CustomTailwindButton(props: Props) {
   return <button className={props.className}>PachiPachiPachi</button>;
 }

e2e-tests/tests/__fixtures__/add-entity-page-expected-page.tsx

@@ -4,10 +4,7 @@ export const config: TemplateConfig = {
   stream: {
     $id: "studio-stream-id-EntityPage",
     localization: { locales: ["en"] },
-    filter: {
-      entityTypes: ["entity1"],
-      savedFilterIds: ["entity2", "entity3"],
-    },
+    filter: {},
     fields: [],
   },
 };

e2e-tests/tests/add-entity-page.spec.ts

@@ -1,6 +1,5 @@
 import { expect } from "@playwright/test";
 import { studioTest } from "./infra/studioTest.js";
-import { StreamScopeForm } from "./infra/StudioPlaywrightPage.js";
 import fs from "fs";
 
 const expectedPage = fs.readFileSync(
@@ -12,11 +11,9 @@ studioTest("can add an entity page", async ({ page, studioPage }) => {
   const pageInTree = page.getByText("EntityPage");
   await expect(pageInTree).toHaveCount(0);
 
-  const streamScopeForm: StreamScopeForm = {
-    entityTypes: "entity1",
-    savedFilterIds: "entity2,entity3",
-  };
-  await studioPage.addEntityPage("EntityPage", streamScopeForm, "entity-page");
+  // TODO: Specify a stream scope once we can supply an API key for populating
+  // the store with account content
+  await studioPage.addEntityPage("EntityPage", {}, "entity-page");
   await expect(pageInTree).toHaveCount(1);
   await studioPage.takePageScreenshotAfterImgRender();
   await studioPage.saveButton.click();

e2e-tests/tests/custom-tailwind.spec.ts

@@ -33,7 +33,7 @@ studioTest("TailwindClass prop editor", async ({ studioPage, page }) => {
   const editorSidebar = page.getByTestId("EditorSidebar");
   await expect(editorSidebar).toHaveScreenshot();
   const classPicker = editorSidebar.getByRole("button", {
-    name: "Toggle tailwind class picker",
+    name: "Toggle pill picker",
   });
   await classPicker.click();
   await expect(editorSidebar).toHaveScreenshot();

packages/studio-plugin/src/createStudioPlugin.ts

@@ -16,6 +16,7 @@ import { STUDIO_PROCESS_ARGS_OBJ } from "./constants";
 import LocalDataMappingManager from "./LocalDataMappingManager";
 import getStudioViteOptions from "./viteconfig/getStudioViteOptions";
 import { createDevServer } from "@yext/pages";
+import ManagementApiService from "./http/ManagementApiService";
 
 /**
  * Handles server-client communication.
@@ -65,6 +66,12 @@ export default async function createStudioPlugin(
   );
 
   await pagesDevPortPromise;
+
+  const managementAPIService =
+    studioConfig.isPagesJSRepo && process.env.YEXT_STUDIO_API_KEY
+      ? new ManagementApiService(process.env.YEXT_STUDIO_API_KEY)
+      : undefined;
+
   return {
     name: "yext-studio-vite-plugin",
     config(config) {
@@ -94,7 +101,8 @@ export default async function createStudioPlugin(
       orchestrator,
       localDataMappingManager,
       pathToUserProjectRoot,
-      studioConfig.paths
+      studioConfig.paths,
+      managementAPIService
     ),
   };
 }

packages/studio-plugin/src/http/types/index.ts

@@ -0,0 +1,2 @@
+export { EntitiesResponse } from "./Entities";
+export { SavedFilterData } from "./SavedFilters";

packages/studio-plugin/src/index.ts

@@ -5,3 +5,4 @@ export {
   STREAM_LOCALIZATION,
   STUDIO_PROCESS_ARGS_OBJ,
 } from "./constants";
+export * from "./http/types";

packages/studio-ui/.size-limit.cjs

@@ -1,7 +1,7 @@
 module.exports = [
   {
     path: "lib/src/index.js",
-    limit: "700 kB",
+    limit: "850 kB",
     gzip: false,
   },
 ];

packages/studio-ui/package.json

@@ -38,6 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "3.16.1",
+    "react-select": "^5.7.4",
     "react-toastify": "^9.1.1",
     "react-tooltip": "^5.18.0",
     "tailwind-merge": "^1.8.1",

packages/studio-ui/src/components/ActivePagePanel.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren, useMemo } from "react";
 import RemovePageButton from "./RemovePageButton";
 import { Tooltip } from "react-tooltip";
 import PageSettingsButton from "./PageSettingsButton/PageSettingsButton";
+import EditStreamScopeButton from "./EditStreamScopeButton";
 
 /**
  * ActivePagePanel displays the available pages and allows the user to switch
@@ -55,6 +56,10 @@ function PageItem({ pageName }: { pageName: string }) {
     void updateActivePage(pageName);
   }
 
+  const isEntityPage = useStudioStore(
+    (store) => !!store.pages.pages[pageName].pagesJS?.streamScope
+  );
+
   return (
     <ListItem>
       <div className="flex items-center overflow-auto">
@@ -68,6 +73,7 @@ function PageItem({ pageName }: { pageName: string }) {
         </button>
       </div>
       <div className="flex items-center space-x-3">
+        {isEntityPage && <EditStreamScopeButton pageName={pageName} />}
         {isPagesJSRepo && <PageSettingsButton pageName={pageName} />}
         <RemovePageButton pageName={pageName} />
       </div>

packages/studio-ui/src/components/AddPageButton/AddPageContext.ts

@@ -1,5 +1,5 @@
 import { StreamScope } from "@yext/studio-plugin";
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 
 export interface AddPageData {
   isStatic: boolean;
@@ -17,6 +17,13 @@ export interface AddPageContextValue {
   actions: AddPageActions;
 }
 
+export function useStreamScope() {
+  const { state, actions } = useContext(AddPageContext);
+  const { streamScope } = state;
+  const { setStreamScope } = actions;
+  return [streamScope, setStreamScope] as const;
+}
+
 const AddPageContext = createContext<AddPageContextValue>(
   {} as AddPageContextValue
 );