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/core/integrations/Basic Prompting.spec.ts

@@ -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"]', {

src/frontend/tests/core/integrations/Blog Writer.spec.ts

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

src/frontend/tests/core/integrations/Document QA.spec.ts

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

src/frontend/tests/core/integrations/Dynamic Agent.spec.ts

@@ -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"]', {

src/frontend/tests/core/integrations/Memory Chatbot.spec.ts

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

src/frontend/tests/core/integrations/Simple Agent.spec.ts

@@ -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,

src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts

@@ -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"]', {

src/frontend/tests/core/integrations/Vector Store.spec.ts

@@ -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,
   });

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

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