refactor: starter projects templates and components (#4121)

* Update starter flows * Update button with new menu variants * Updated AstraDB icon * Made header be optional on baseModal and added classname to content * Removed old newFlowModal * added a Nav component to show the sidebar categories * Created new templates modal * Updated components and modals to use new Templates modal * Added used icons * added template card * changed templates modal to use modular components * Add template content * Add get started content * added other size for templates * Added size in base modal * Changed menu ring-0 to be important * Added all of the images of get started * Fix hover effect on spirals * Implement clicking get started templates * Fix shiny design * update package lock * update examples * updated card design * Added grid of examples to templates * Implemented card click * Changed hover effect * Added arrows * delete unused * implemented fuse search * Added create blank project * Made tags be read * Added tags to basic prompting * Added types * Added tags to the tabs * remove important from tailwind config * updated setup and model to include icon * added random-gradient npm package * updated colors to remove white * added icons * inserted metadata of icons and etc into starter flows * Removed integrations and added blank project creation * Added gradient to cards * Reset query when changing tab, reset scroll when typing * added mix blend overlay to text * Added id and gradient to templatecard type * made icons for components still work * added important on stroke * formatting * Fixed infinite render * added test id to create blank project * added data test id for templates title * ✨ (navComponent/index.tsx): add data-testid attribute with converted test name for side navigation options to improve testability and accessibility * ✨ (starter-projects.spec.ts): add test to ensure user can interact with starter projects in the frontend application * ✨ (TemplateCardComponent/index.tsx): add data-testid attribute with converted test name for better testability and accessibility * ✨ (TemplateCategoryComponent/index.tsx): import convertTestName function to convert test names for data-testid attributes in TemplateCategoryComponent * fixed currentTab not changing results * Fixed various tests * ✨ (similarity.spec.ts): improve user experience by adding functionality to fit view and scroll using mouse wheel in the test suite * Fix other tests relying on multiple * fix two edges test * Fix hover on test 3 of generalBugs --------- Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-10-14 11:05:45 -03:00 · 2024-10-14 11:05:45 -03:00 · 0964190579
commit 0964190579
parent 39cc38e82b
83 changed files with 2226 additions and 3241 deletions
--- a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
+++ b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
@ -25,6 +25,7 @@ test("select and delete all", async ({ page }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@ -67,6 +68,7 @@ test("select and delete a flow", async ({ page }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@ -108,6 +110,7 @@ test("search flows", async ({ page }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@ -118,6 +121,7 @@ test("search flows", async ({ page }) => {

  await page.getByText("Select All").isVisible();
  await page.getByText("New Project", { exact: true }).click();
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Memory Chatbot" }).click();

  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@ -126,6 +130,7 @@ test("search flows", async ({ page }) => {

  await page.getByTestId("icon-ChevronLeft").first().click();
  await page.getByText("New Project", { exact: true }).click();
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Document QA" }).click();

  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@ -164,6 +169,7 @@ test("search components", async ({ page }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[title="fit view"]', {
--- a/src/frontend/tests/core/features/auto-login-off.spec.ts
+++ b/src/frontend/tests/core/features/auto-login-off.spec.ts
@ -121,6 +121,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[title="fit view"]', {
@ -191,6 +192,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o

  await page.getByText("New Project", { exact: true }).click();

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[title="fit view"]', {
--- a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
+++ b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
@ -33,6 +33,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/core/features/folders.spec.ts
+++ b/src/frontend/tests/core/features/folders.spec.ts
@ -26,6 +26,7 @@ test("CRUD folders", async ({ page }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@ -152,6 +153,7 @@ test("change flow folder", async ({ page }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
--- a/src/frontend/tests/core/features/freeze-path.spec.ts
+++ b/src/frontend/tests/core/features/freeze-path.spec.ts
@ -37,6 +37,7 @@ test("user must be able to freeze a path", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[title="fit view"]', {
--- a/src/frontend/tests/core/features/freeze.spec.ts
+++ b/src/frontend/tests/core/features/freeze.spec.ts
@ -1,6 +1,4 @@
 import { expect, test } from "@playwright/test";
-import * as dotenv from "dotenv";
-import path from "path";

 test("user must be able to freeze a component", async ({ page }) => {
  await page.goto("/");
@ -28,7 +26,7 @@ test("user must be able to freeze a component", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

-  await page.getByRole("heading", { name: "Blank Flow" }).click();
+  await page.getByTestId("blank-flow").click();

  //first component

--- a/src/frontend/tests/core/features/group.spec.ts
+++ b/src/frontend/tests/core/features/group.spec.ts
@ -20,6 +20,7 @@ test.describe("group node test", () => {
      modalCount = await page.getByTestId("modal-title")?.count();
    }

+    await page.getByTestId("side_nav_options_all-templates").click();
    await page
      .getByRole("heading", { name: "Basic Prompting" })
      .first()
--- a/src/frontend/tests/core/features/logs.spec.ts
+++ b/src/frontend/tests/core/features/logs.spec.ts
@ -38,6 +38,7 @@ test("should able to see and interact with logs", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);

--- a/src/frontend/tests/core/features/stop-building.spec.ts
+++ b/src/frontend/tests/core/features/stop-building.spec.ts
@ -20,7 +20,7 @@ test("user must be able to stop a building", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

-  await page.getByRole("heading", { name: "Blank Flow" }).click();
+  await page.getByTestId("blank-flow").click();

  //first component

--- a/src/frontend/tests/core/features/store-shard-2.spec.ts
+++ b/src/frontend/tests/core/features/store-shard-2.spec.ts
@ -101,6 +101,7 @@ test("should share component with share button", async ({ page }) => {

  const randomName = Math.random().toString(36).substring(2);

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);
  const flowName = await page.getByTestId("flow_name").innerText();
--- a/src/frontend/tests/core/features/tweaksTest.spec.ts
+++ b/src/frontend/tests/core/features/tweaksTest.spec.ts
@ -18,6 +18,7 @@ test("curl_api_generation", async ({ page, context }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);
  await page.getByText("API", { exact: true }).click();
--- a/src/frontend/tests/core/integrations/Basic
+++ b/src/frontend/tests/core/integrations/Basic
@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";

@ -37,6 +37,7 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[title="fit view"]', {
--- a/src/frontend/tests/core/integrations/Blog
+++ b/src/frontend/tests/core/integrations/Blog
@ -37,6 +37,7 @@ test("Blog Writer", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Blog Writer" }).click();
  await page.waitForTimeout(1000);

--- a/src/frontend/tests/core/integrations/Document
+++ b/src/frontend/tests/core/integrations/Document
@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";

@ -37,6 +37,7 @@ test("Document QA", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Document QA" }).click();
  await page.waitForTimeout(1000);

--- a/src/frontend/tests/core/integrations/Dynamic
+++ b/src/frontend/tests/core/integrations/Dynamic
@ -42,6 +42,7 @@ test("Dynamic Agent", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Dynamic Agent" }).click();

  await page.waitForSelector('[title="fit view"]', {
--- a/src/frontend/tests/core/integrations/Memory
+++ b/src/frontend/tests/core/integrations/Memory
@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";

@ -37,6 +37,7 @@ test("Memory Chatbot", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Memory Chatbot" }).click();
  await page.waitForTimeout(1000);

--- a/src/frontend/tests/core/integrations/Simple
+++ b/src/frontend/tests/core/integrations/Simple
@ -46,7 +46,8 @@ test("Simple Agent", async ({ page }) => {
    control = "Meta";
  }

-  await page.getByRole("heading", { name: "Simple Agent" }).click();
+  await page.getByTestId("side_nav_options_all-templates").click();
+  await page.getByRole("heading", { name: "Simple Agent" }).first().click();

  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/core/integrations/Travel
+++ b/src/frontend/tests/core/integrations/Travel
@ -42,6 +42,7 @@ test("Travel Planning Agent", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Travel Planning Agents" }).click();

  await page.waitForSelector('[title="fit view"]', {
--- a/src/frontend/tests/core/integrations/Vector
+++ b/src/frontend/tests/core/integrations/Vector
@ -1,4 +1,4 @@
-import { expect, Page, test } from "@playwright/test";
+import { Page, test } from "@playwright/test";
 import path from "path";
 import uaParser from "ua-parser-js";

@ -43,7 +43,8 @@ test("Vector Store RAG", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

-  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.getByTestId("side_nav_options_all-templates").click();
+  await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
  });
--- a/src/frontend/tests/core/integrations/decisionFlow.spec.ts
+++ b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
--- a/src/frontend/tests/core/integrations/similarity.spec.ts
+++ b/src/frontend/tests/core/integrations/similarity.spec.ts
@ -27,7 +27,7 @@ test("user must be able to check similarity between embedding texts", async ({
    modalCount = await page.getByTestId("modal-title")?.count();
  }

-  await page.getByRole("heading", { name: "Blank Flow" }).click();
+  await page.getByTestId("blank-flow").click();

  //first component

@ -46,7 +46,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -63,7 +63,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -85,7 +85,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -102,7 +102,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -124,7 +124,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -146,7 +146,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -168,7 +168,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -188,7 +188,7 @@ test("user must be able to check similarity between embedding texts", async ({
    .hover()
    .then(async () => {
      await page.mouse.down();
-      await page.mouse.move(-800, 300);
+      await page.mouse.move(-50, 50);
    });

  await page.mouse.up();
@ -232,6 +232,8 @@ test("user must be able to check similarity between embedding texts", async ({
    .nth(0)
    .fill("similarity_score");

+  await page.getByTitle("fit view").click();
+  await page.mouse.wheel(0, 500);
  //connection 1
  const openAiEmbeddingOutput_0 = await page
    .getByTestId("handle-openaiembeddings-shownode-embeddings-right")
--- a/src/frontend/tests/core/integrations/starter-projects.spec.ts
+++ b/src/frontend/tests/core/integrations/starter-projects.spec.ts
@ -72,7 +72,8 @@ test("vector store from starter projects should have its connections and nodes o
    modalCount = await page.getByTestId("modal-title")?.count();
  }

-  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.getByTestId("side_nav_options_all-templates").click();
+  await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
  });
--- a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
@ -32,7 +32,8 @@ test("should be able to move flow from folder, rename it and be displayed on cor
    modalCount = await page.getByTestId("modal-title")?.count();
  }

-  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.getByTestId("side_nav_options_all-templates").click();
+  await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
  });
--- a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
@ -32,6 +32,7 @@ test("memory should work as expect", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);

--- a/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
+++ b/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
@ -29,6 +29,7 @@ test("user should be able to download a flow or a component", async ({
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();

  await page.waitForSelector('[title="fit view"]', {
@ -132,6 +133,7 @@ test("user should be able to duplicate a flow or a component", async ({
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/extended/features/curlApiGeneration.spec.ts
+++ b/src/frontend/tests/extended/features/curlApiGeneration.spec.ts
@ -17,6 +17,7 @@ test("curl_api_generation", async ({ page, context }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);
  await page.getByText("API", { exact: true }).click();
--- a/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
+++ b/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
@ -49,6 +49,7 @@ test("user should not be able to upload a file larger than the limit", async ({
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/extended/features/pythonApiGeneration.spec.ts
+++ b/src/frontend/tests/extended/features/pythonApiGeneration.spec.ts
@ -24,6 +24,7 @@ test("python_api_generation", async ({ page, context }) => {
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }
+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);
  await page.getByText("API", { exact: true }).click();
--- a/src/frontend/tests/extended/features/starter-projects.spec.ts
+++ b/src/frontend/tests/extended/features/starter-projects.spec.ts
@ -0,0 +1,84 @@
+import { expect, test } from "@playwright/test";
+
+test("user must be able to interact with starter projects", async ({
+  page,
+  context,
+}) => {
+  await page.goto("/");
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  expect(page.getByText("Start from scratch")).toBeVisible();
+  expect(
+    page.getByRole("button", { name: "Create Blank Project" }),
+  ).toBeVisible();
+
+  await page.getByTestId("side_nav_options_all-templates").click();
+  await page.waitForTimeout(500);
+
+  await page.getByPlaceholder("Search...").fill("Document");
+  await page.waitForTimeout(500);
+
+  expect(
+    page.getByTestId("template_basic-prompting-(hello,-world)"),
+  ).not.toBeVisible();
+
+  expect(page.getByTestId("template_document-qa").first()).toBeVisible();
+  expect(
+    page.getByTestId(`template_sequential-tasks-agent`).first(),
+  ).toBeVisible();
+
+  expect(page.getByTestId("template_vector-store")).not.toBeVisible();
+  expect(page.getByTestId(`template_simple-agent`)).not.toBeVisible();
+  expect(page.getByTestId(`template_dynamic-agent`)).not.toBeVisible();
+  expect(
+    page.getByTestId(`template_hierarchical-tasks-agent`),
+  ).not.toBeVisible();
+
+  await page.waitForTimeout(500);
+
+  await page.getByTestId(`side_nav_options_chatbots`).click();
+  await page.waitForTimeout(500);
+  expect(page.getByTestId(`category_title_chatbots`)).toBeVisible();
+
+  await page.getByTestId(`side_nav_options_rag`).click();
+  await page.waitForTimeout(500);
+
+  expect(page.getByTestId(`category_title_rag`)).toBeVisible();
+  expect(page.getByTestId(`template_vector-store-rag`)).toBeVisible();
+
+  expect(
+    page.getByTestId(`template_basic-prompting-(hello,-world)`),
+  ).not.toBeVisible();
+  expect(page.getByTestId(`template_document-qa`)).not.toBeVisible();
+
+  await page.getByTestId(`side_nav_options_agents`).click();
+  await page.waitForTimeout(500);
+
+  expect(page.getByTestId(`category_title_agents`)).toBeVisible();
+
+  expect(
+    page.getByTestId(`template_basic-prompting-(hello,-world)`),
+  ).not.toBeVisible();
+  expect(page.getByTestId(`template_document-qa`)).not.toBeVisible();
+  expect(page.getByTestId(`template_vector-store-rag`)).not.toBeVisible();
+
+  expect(page.getByTestId(`template_travel-planning-agents`)).toBeVisible();
+  expect(page.getByTestId(`template_sequential-tasks-agent`)).toBeVisible();
+  expect(page.getByTestId(`template_dynamic-agent`)).toBeVisible();
+  expect(page.getByTestId(`template_hierarchical-tasks-agent`)).toBeVisible();
+  expect(page.getByTestId(`template_simple-agent`)).toBeVisible();
+});
--- a/src/frontend/tests/extended/features/twoEdges.spec.ts
+++ b/src/frontend/tests/extended/features/twoEdges.spec.ts
@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";

 test("user should be able to see multiple edges and interact with them", async ({
  page,
@ -29,7 +29,7 @@ test("user should be able to see multiple edges and interact with them", async (
  }
  await page.waitForTimeout(1000);

-  await page.getByText("Vector Store RAG", { exact: true }).last().click();
+  await page.getByText("Vector RAG", { exact: true }).last().click();
  await page.waitForTimeout(3000);
  await page.getByText("Retriever", { exact: true }).first().isVisible();
  await page.getByText("Search Results", { exact: true }).first().isVisible();
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
@ -1,6 +1,5 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
-import { readFileSync } from "fs";
 import path from "path";

 test("user must be able to see output inspection", async ({ page }) => {
@ -33,6 +32,7 @@ test("user must be able to see output inspection", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
@ -32,6 +32,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
@ -34,6 +34,7 @@ test("user must be able to send an image on chat using advanced tool on ChatInpu
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts
@ -54,6 +54,7 @@ test("user must be able to create a new flow clicking on Start Here button", asy

  await page.getByText("Start Here", { exact: true }).click();

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector("text=playground", { timeout: 30000 });
  await page.waitForSelector("text=api", { timeout: 30000 });
--- a/src/frontend/tests/extended/regression/generalBugs-shard-0.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-0.spec.ts
@ -32,6 +32,7 @@ test("erase button should clear the chat messages", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);

--- a/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
@ -35,6 +35,7 @@ test("should delete rows from table message", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector('[title="fit view"]', {
    timeout: 100000,
--- a/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
@ -34,6 +34,7 @@ test("freeze must work correctly", async ({ page }) => {
    modalCount = await page.getByTestId("modal-title")?.count();
  }

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForTimeout(1000);

--- a/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
@ -62,6 +62,7 @@ test("should be able to share a component on the store by clicking on the share

  await page.getByText("New Project", { exact: true }).click();

+  await page.getByTestId("side_nav_options_all-templates").click();
  await page.getByRole("heading", { name: "Basic Prompting" }).click();
  await page.waitForSelector("text=share", { timeout: 10000 });
  await page.waitForSelector("text=playground", { timeout: 10000 });
--- a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
@ -126,6 +126,9 @@ test("should copy code from playground modal", async ({ page }) => {
  }

  // Click and hold on the first element
+  await page.getByTitle("zoom in").click();
+  await page.getByTitle("zoom in").click();
+
  await visibleElementHandle.hover();
  await page.mouse.down();