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

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

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

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,

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

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

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