fix: add data-testid to new project button in EmptyFolder component (#9222)

.github/changes-filter.yaml

@@ -84,3 +84,6 @@ database:
   - "src/frontend/src/controllers/**"
   - "src/frontend/tests/core/features/**"
   - "src/frontend/tests/extended/features/**"
+
+mainpage:
+  - "src/frontend/src/pages/MainPage/**"

.github/workflows/typescript_test.yml

@@ -127,6 +127,11 @@ jobs:
                 TAGS+=("@database")
                 echo "Added database suite"
               fi
+              if [[ "${{ steps.filter.outputs.mainpage }}" == "true" ]]; then
+                SUITES=$(echo $SUITES | jq -c '. += ["mainpage"]')
+                TAGS+=("@mainpage")
+                echo "Added mainpage suite"
+              fi
               if [[ "${{ steps.filter.outputs.development }}" == "true" ]]; then
                 SUITES=$(echo $SUITES | jq -c '. += ["development"]')
                 TAGS+=("@development")

src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx

@@ -25,6 +25,7 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {
           variant="default"
           onClick={() => setOpenModal(true)}
           id="new-project-btn"
+          data-testid="new_project_btn_empty_page"
         >
           <ForwardedIconComponent
             name="plus"

src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts

@@ -3,7 +3,7 @@ import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "select and delete a flow",
-  { tag: ["@release", "@api"] },
+  { tag: ["@release", "@mainpage"] },
   async ({ page }) => {
     await awaitBootstrapTest(page);
 
@@ -37,7 +37,7 @@ test(
   },
 );
 
-test("search flows", { tag: ["@release"] }, async ({ page }) => {
+test("search flows", { tag: ["@release", "@mainpage"] }, async ({ page }) => {
   await awaitBootstrapTest(page);
 
   await page.getByTestId("side_nav_options_all-templates").click();
@@ -74,67 +74,71 @@ test("search flows", { tag: ["@release"] }, async ({ page }) => {
   await page.getByText("Basic Prompting", { exact: true }).isHidden();
 });
 
-test("search components", { tag: ["@release"] }, async ({ page }) => {
-  await awaitBootstrapTest(page);
+test(
+  "search components",
+  { tag: ["@release", "@mainpage"] },
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
 
-  if (await page.getByTestId("components-btn").isVisible()) {
-    await page.getByTestId("side_nav_options_all-templates").click();
-    await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    if (await page.getByTestId("components-btn").isVisible()) {
+      await page.getByTestId("side_nav_options_all-templates").click();
+      await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-    await page.waitForSelector('[data-testid="fit_view"]', {
-      timeout: 100000,
-    });
+      await page.waitForSelector('[data-testid="fit_view"]', {
+        timeout: 100000,
+      });
 
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+      await page.getByTestId("fit_view").click();
+      await page.getByTestId("zoom_out").click();
+      await page.getByTestId("zoom_out").click();
 
-    await page.getByText("Chat Input").first().click();
-    await page.waitForSelector('[data-testid="more-options-modal"]', {
-      timeout: 1000,
-    });
-    await page.getByTestId("more-options-modal").click();
+      await page.getByText("Chat Input").first().click();
+      await page.waitForSelector('[data-testid="more-options-modal"]', {
+        timeout: 1000,
+      });
+      await page.getByTestId("more-options-modal").click();
 
-    await page.getByTestId("icon-SaveAll").first().click();
-    await page.keyboard.press("Escape");
-    await page
-      .getByText("Prompt", {
-        exact: true,
-      })
-      .first()
-      .click();
-    await page.getByTestId("more-options-modal").click();
+      await page.getByTestId("icon-SaveAll").first().click();
+      await page.keyboard.press("Escape");
+      await page
+        .getByText("Prompt", {
+          exact: true,
+        })
+        .first()
+        .click();
+      await page.getByTestId("more-options-modal").click();
 
-    await page.getByTestId("icon-SaveAll").first().click();
-    await page.keyboard.press("Escape");
+      await page.getByTestId("icon-SaveAll").first().click();
+      await page.keyboard.press("Escape");
 
-    await page
-      .getByText("OpenAI", {
-        exact: true,
-      })
-      .first()
-      .click();
-    await page.getByTestId("more-options-modal").click();
+      await page
+        .getByText("OpenAI", {
+          exact: true,
+        })
+        .first()
+        .click();
+      await page.getByTestId("more-options-modal").click();
 
-    await page.getByTestId("icon-SaveAll").first().click();
-    await page.keyboard.press("Escape");
+      await page.getByTestId("icon-SaveAll").first().click();
+      await page.keyboard.press("Escape");
 
-    await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
-      timeout: 100000,
-    });
+      await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+        timeout: 100000,
+      });
 
-    await page.getByTestId("icon-ChevronLeft").first().click();
+      await page.getByTestId("icon-ChevronLeft").first().click();
 
-    const exitButton = await page.getByText("Exit", { exact: true }).count();
+      const exitButton = await page.getByText("Exit", { exact: true }).count();
 
-    if (exitButton > 0) {
-      await page.getByText("Exit", { exact: true }).click();
+      if (exitButton > 0) {
+        await page.getByText("Exit", { exact: true }).click();
+      }
+
+      await page.getByTestId("components-btn").click();
+      await page.getByPlaceholder("Search components").fill("Chat Input");
+      await page.getByText("Chat Input", { exact: true }).isVisible();
+      await page.getByText("Prompt", { exact: true }).isHidden();
+      await page.getByText("OpenAI", { exact: true }).isHidden();
     }
-
-    await page.getByTestId("components-btn").click();
-    await page.getByPlaceholder("Search components").fill("Chat Input");
-    await page.getByText("Chat Input", { exact: true }).isVisible();
-    await page.getByText("Prompt", { exact: true }).isHidden();
-    await page.getByText("OpenAI", { exact: true }).isHidden();
-  }
-});
+  },
+);

src/frontend/tests/core/features/auto-login-off.spec.ts

@@ -4,7 +4,7 @@ import { renameFlow } from "../../utils/rename-flow";
 
 test(
   "when auto_login is false, admin can CRUD user's and should see just your own flows",
-  { tag: ["@release", "@api", "@database"] },
+  { tag: ["@release", "@api", "@database", "@mainpage"] },
   async ({ page }) => {
     await page.route("**/api/v1/auto_login", (route) => {
       route.fulfill({

src/frontend/tests/core/integrations/starter-projects.spec.ts

@@ -21,7 +21,7 @@ async function getAuthToken(request: any) {
 
 test(
   "vector store from starter projects should have its connections and nodes on the flow",
-  { tag: ["@release", "@starter-projects"] },
+  { tag: ["@release", "@starter-projects", "@mainpage"] },
   async ({ page, request }) => {
     // Get authentication token
     const authToken = await getAuthToken(request);

src/frontend/tests/extended/features/autoLogin.spec.ts

@@ -3,7 +3,7 @@ import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test.describe(
   "Auto_login tests",
-  { tag: ["@release", "@api", "@database"] },
+  { tag: ["@release", "@api", "@database", "@mainpage"] },
 
   () => {
     test(

src/frontend/tests/extended/features/bulk-actions.spec.ts

@@ -4,7 +4,7 @@ import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user should be able to select flows with different methods and perform bulk actions",
-  { tag: ["@release", "@workspace"] },
+  { tag: ["@release", "@workspace", "@mainpage"] },
   async ({ page }) => {
     await awaitBootstrapTest(page);
 

src/frontend/tests/extended/features/dragAndDrop.spec.ts

@@ -5,7 +5,7 @@ import { simulateDragAndDrop } from "../../utils/simulate-drag-and-drop";
 
 test(
   "user should be able to drag and drop an old collection without crashing the application",
-  { tag: ["@release"] },
+  { tag: ["@release", "@mainpage"] },
   async ({ page }) => {
     await awaitBootstrapTest(page);
 

src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts

@@ -5,7 +5,7 @@ import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user must be able to create a new flow clicking on New Flow button",
-  { tag: ["@release"] },
+  { tag: ["@release", "@mainpage"] },
   async ({ page }) => {
     test.skip(
       !process?.env?.OPENAI_API_KEY,
@@ -34,7 +34,14 @@ test(
       ).isVisible(),
     );
 
-    await page.getByTestId("new-project-btn").click();
+    expect(
+      await page.waitForSelector("data-testid=new_project_btn_empty_page", {
+        timeout: 5000,
+        state: "visible",
+      }),
+    );
+
+    await page.getByTestId("new_project_btn_empty_page").click();
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();