forked from Cloud-Pipelines/pipeline-editor
-
Notifications
You must be signed in to change notification settings - Fork 5
feat: [FE] Add tabbed Runs/Pipelines/Components list to homepage #1963
Copy link
Copy link
Open
Labels
enhancementNew feature or requestNew feature or request
Description
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.tsx—searchComponentLibrary()functionsrc/providers/ComponentLibraryProvider/ForcedSearchProvider.tsx— search state managementsrc/components/shared/ReactFlow/FlowSidebar/components/SearchFilter.tsx— filter checkbox UIsrc/components/shared/ReactFlow/FlowSidebar/components/SearchInput.tsx— search input componentsrc/components/shared/ReactFlow/FlowSidebar/components/FolderItem.tsx— folder tree browsingsrc/components/shared/Dialogs/ComponentDetailsDialog.tsx— component detail viewsrc/components/shared/FavoriteComponentToggle.tsx— favorite togglesrc/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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request