refactor: starter projects templates and components (langflow-ai#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 <[email protected]>

src/backend/base/langflow/initial_setup/setup.py

@@ -14,7 +14,11 @@
 from loguru import logger
 from sqlmodel import select
 
-from langflow.base.constants import FIELD_FORMAT_ATTRIBUTES, NODE_FORMAT_ATTRIBUTES, ORJSON_OPTIONS
+from langflow.base.constants import (
+    FIELD_FORMAT_ATTRIBUTES,
+    NODE_FORMAT_ATTRIBUTES,
+    ORJSON_OPTIONS,
+)
 from langflow.graph.graph.base import Graph
 from langflow.services.auth.utils import create_super_user
 from langflow.services.database.models.flow.model import Flow, FlowCreate
@@ -24,7 +28,12 @@
     get_default_folder_id,
 )
 from langflow.services.database.models.user.crud import get_user_by_username
-from langflow.services.deps import get_settings_service, get_storage_service, get_variable_service, session_scope
+from langflow.services.deps import (
+    get_settings_service,
+    get_storage_service,
+    get_variable_service,
+    session_scope,
+)
 from langflow.template.field.prompt import DEFAULT_PROMPT_INTUT_TYPES
 from langflow.utils.util import escape_json_dump
 
@@ -237,10 +246,12 @@ def update_edges_with_latest_component_versions(project_data):
         target_handle = scape_json_parse(target_handle)
         # Now find the source and target nodes in the nodes list
         source_node = next(
-            (node for node in project_data.get("nodes", []) if node.get("id") == edge.get("source")), None
+            (node for node in project_data.get("nodes", []) if node.get("id") == edge.get("source")),
+            None,
         )
         target_node = next(
-            (node for node in project_data.get("nodes", []) if node.get("id") == edge.get("target")), None
+            (node for node in project_data.get("nodes", []) if node.get("id") == edge.get("target")),
+            None,
         )
         if source_node and target_node:
             source_node_data = source_node.get("data").get("node")
@@ -397,8 +408,10 @@ def get_project_data(project):
         updated_at_datetime = datetime.fromisoformat(project_updated_at)
     project_data = project.get("data")
     project_icon = project.get("icon")
-    project_icon = demojize(project_icon) if project_icon and purely_emoji(project_icon) else ""
+    project_icon = demojize(project_icon) if project_icon and purely_emoji(project_icon) else project_icon
     project_icon_bg_color = project.get("icon_bg_color")
+    project_gradient = project.get("gradient")
+    project_tags = project.get("tags")
     return (
         project_name,
         project_description,
@@ -407,6 +420,8 @@ def get_project_data(project):
         project_data,
         project_icon,
         project_icon_bg_color,
+        project_gradient,
+        project_tags,
     )
 
 
@@ -444,6 +459,8 @@ def create_new_project(
     project_is_component,
     updated_at_datetime,
     project_data,
+    project_gradient,
+    project_tags,
     project_icon,
     project_icon_bg_color,
     new_folder_id,
@@ -458,6 +475,8 @@ def create_new_project(
         is_component=project_is_component,
         updated_at=updated_at_datetime,
         folder_id=new_folder_id,
+        gradient=project_gradient,
+        tags=project_tags,
     )
     db_flow = Flow.model_validate(new_project, from_attributes=True)
     session.add(db_flow)
@@ -595,6 +614,8 @@ async def create_or_update_starter_projects(get_all_components_coro: Awaitable[d
                 project_data,
                 project_icon,
                 project_icon_bg_color,
+                project_gradient,
+                project_tags,
             ) = get_project_data(project)
             updated_project_data = update_projects_components_with_latest_component_versions(
                 project_data.copy(), all_types_dict
@@ -614,15 +635,17 @@ async def create_or_update_starter_projects(get_all_components_coro: Awaitable[d
                     session.delete(existing_project)
 
                 create_new_project(
-                    session,
-                    project_name,
-                    project_description,
-                    project_is_component,
-                    updated_at_datetime,
-                    project_data,
-                    project_icon,
-                    project_icon_bg_color,
-                    new_folder.id,
+                    session=session,
+                    project_name=project_name,
+                    project_description=project_description,
+                    project_is_component=project_is_component,
+                    updated_at_datetime=updated_at_datetime,
+                    project_data=project_data,
+                    project_icon=project_icon,
+                    project_icon_bg_color=project_icon_bg_color,
+                    project_gradient=project_gradient,
+                    project_tags=project_tags,
+                    new_folder_id=new_folder.id,
                 )