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>

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,

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

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,

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

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();
+});

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