Skip to content

feat: [FE] Add tabbed Runs/Pipelines/Components list to homepage #1963

@Mbeaulne

Description

@Mbeaulne

Description

Replace the current two-tab layout ("All Runs" / "My Pipelines") with three tabs: Runs, Pipelines, Components.

Runs tab

Existing RunSection with PipelineRunFiltersBar — re-parent into new tab structure. No functional changes needed.

Stat card integration: When a stat card is clicked, switch to this tab and apply the status filter via URL search params.

Show "Showing X of Y results" when a filter is active (Y from stats endpoint or total_count if available).

Pipelines tab

Existing PipelineSection — re-parent into new tab structure. No functional changes needed.

Components tab (new)

  • Search bar with filter checkboxes:
    • Name, Input Name, Input Type, Output Name, Output Type, Exact Match
  • Results displayed as a table with columns:
    • Component name
    • Description (truncated)
    • Publisher
    • Input count / Output count
    • Deprecation status badge
  • Click a component to open the existing ComponentDetailsDialog
  • Browse by folder hierarchy when no search is active
  • Show favorite components at the top of the list
  • Pagination for large result sets (can use client-side pagination as fallback until backend pagination is available)

Reusable existing code

  • src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsxsearchComponentLibrary() function
  • src/providers/ComponentLibraryProvider/ForcedSearchProvider.tsx — search state management
  • src/components/shared/ReactFlow/FlowSidebar/components/SearchFilter.tsx — filter checkbox UI
  • src/components/shared/ReactFlow/FlowSidebar/components/SearchInput.tsx — search input component
  • src/components/shared/ReactFlow/FlowSidebar/components/FolderItem.tsx — folder tree browsing
  • src/components/shared/Dialogs/ComponentDetailsDialog.tsx — component detail view
  • src/components/shared/FavoriteComponentToggle.tsx — favorite toggle
  • src/providers/ComponentLibraryProvider/libraries/publishedComponentsLibrary.ts — backend API client

Relevant files to modify

  • src/routes/Home/Home.tsx — replace tab structure
  • New component: src/components/Home/ComponentSection/ComponentSection.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions