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

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

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,

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

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

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
 

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

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

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
 

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

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