Improve Add and Edit Page Flows (#380)

Update stream scope selection in the Add Page and Edit Page flows. The stream scope filters are now sourced from an account's content so only valid filters can be selected from curated dropdowns. The account is identified based on the API key present as the `YEXT_STUDIO_API_KEY` environment variable.

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
 );