SRVKP-13195: Pipeline builder revamp and added changes for pipeline in pipelines

[anwesha-palit-redhat]

Type of Change

• Bug fix
• New feature
• Refactoring
• Migration
• CVE Fix

Summary

#1278 (comment)

Screen Recordings / Screenshot

General flow

Screen.Recording.2026-08-17.at.09.51.00.mov

Flow for optional task param in pipeline builder UI

Screen.Recording.2026-08-17.at.17.53.07.mov

Appending hash for same names of pipelines in the builder UI

Screen.Recording.2026-08-17.at.18.22.33.mov

QuickSearchDetails version dropdown click event check

Screen.Recording.2026-08-17.at.18.21.37.mov

[qodo-code-review]

PR Reviewer Guide 🔍

Warning

/review is deprecated. Use /agentic_review instead (removal date not yet scheduled).

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 5 🔵🔵🔵🔵🔵

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Invalid Dependencies Nested tasks and finally entries share one combined dependency scope. This allows a regular task's runAfter to reference a finally task, even though finally tasks execute only after regular tasks complete. Build separate scopes and validate each task category according to Tekton semantics. const scopeTasks = [ ...(pipelineSpecValue?.tasks ?? []), ...(pipelineSpecValue?.finally ?? []), ]; return yup.object({ params: yup.array().of( yup.object({ name: yup.string().required(t('Required')), description: yup.string(), default: yup.string(), }), ), workspaces: yup.array().of( yup.object({ name: yup.string().required(t('Required')), }), ), tasks: buildTaskValidationFormSchema(formValues, t, scopeTasks), finally: buildTaskValidationFormSchema(formValues, t, scopeTasks), Default Type Nested pipeline parameter defaults are restricted to strings, while Tekton parameters can have array defaults and the YAML-side schema explicitly supports arrays. A valid nested pipelineSpec containing an array parameter default will therefore fail form validation. params: yup.array().of( yup.object({ name: yup.string().required(t('Required')), description: yup.string(), default: yup.string(), }), Premature Loading tasksLoaded becomes true without waiting for namespacedPipelines. Pipeline references can consequently be resolved or validated while the pipeline list is still unavailable, producing transient missing-resource state and potentially skipping the intended post-load validation depending on watch completion order. if (namespacedPipelineData) { setFieldValue( 'taskResources.namespacedPipelines', namespacedPipelineData, false, ); } const tasksLoaded = !!namespacedTaskData && !!clusterResolverTaskData; setFieldValue('taskResources.tasksLoaded', tasksLoaded, false); if (tasksLoaded) { if (initialLoadRef.current) { initialLoadRef.current = false; } else { setTimeout(() => validateForm(), 0); }

[anwesha-palit-redhat]

/agentic_describe

[qodo-code-review]

PR Summary by Qodo

Revamp Pipeline Builder search and add Pipeline-in-Pipeline support

✨ Enhancement 🧪 Tests ⚙️ Configuration changes 🕐 40+ Minutes

AI Description

• Replace task-only sidebar with resource sidebar supporting Tasks and Pipelines.
• Revamp quick-search modal UX with keyboard navigation and clearer empty/loading states.
• Extend validation and conversion logic for pipelineRef/pipelineSpec (nested tasks) support.

Diagram

graph TD
  PBForm["PipelineBuilderForm"] --> Topology["Topology graph"] --> PQS["PipelineQuickSearch"] --> QSModal["QuickSearchModal"]
  PBForm --> Sidebar["ResourceSidebar"] --> K8s["K8s resources"]
  PBForm --> Validate["Validation utils"]
  PQS --> Flags["feature-flags ConfigMap"] --> PQS
  PQS --> K8s

  subgraph Legend
    direction LR
    _ui["UI component"] ~~~ _ext{{"External/K8s"}} ~~~ _logic(["Validation/logic"])
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Use PatternFly Select/Typeahead instead of a custom quick-search modal

• ➕ Less bespoke modal/layout code to maintain
• ➕ More out-of-the-box accessibility and keyboard behavior
• ➖ Harder to support split list/details view and rich details panel
• ➖ More difficult to integrate ArtifactHub versioning + 'Add' enablement gating

2. Incrementally refactor the old QuickSearchController/Body components

• ➕ Smaller diff and lower immediate regression risk
• ➕ Could preserve existing drag/resize behavior if still desired
• ➖ Continues carrying legacy UI/SCSS and duplicated responsibilities
• ➖ Harder to add Pipeline-kind support cleanly without deeper cleanup

Recommendation: The PR’s approach (consolidating search into a new QuickSearchModal and unifying the sidebar into ResourceSidebar) is the most maintainable direction given the new requirement of Pipeline-in-Pipeline support. It removes legacy quick-search components, centralizes keyboard handling and selection state, and cleanly gates Pipeline-kind functionality behind a feature flag. The main follow-up to consider is ensuring accessibility coverage (focus management, aria labels) since the custom modal now owns keybindings and navigation.

Files changed (40) +1518 / -522

Enhancement (21) +1386 / -445

plugin__pipelines-console-plugin.jsonRefresh Pipeline Builder/Quick Search strings +11/-8

Refresh Pipeline Builder/Quick Search strings

• Renames "Add finally task" to "Add finally node" and adds new quick-search modal labels (Clear, Loading, Find by name, Select Task, etc.). Removes legacy quick-search strings that matched deleted components.

locales/en/plugin__pipelines-console-plugin.json

useAlphaApiFields.tsAdd feature-flag hook for alpha API fields +21/-0

Add feature-flag hook for alpha API fields

• Introduces a hook that reads the feature-flags ConfigMap and returns whether enable-api-fields is set to "alpha". Used to gate Pipeline-kind selection in quick search.

src/components/hooks/useAlphaApiFields.ts

PipelineBuilderForm.tsxSwitch task sidebar to unified resource sidebar +3/-4

Switch task sidebar to unified resource sidebar

• Replaces TaskSidebar with ResourceSidebar in the drawer panel. Broadens selection callback typing to accept either TaskKind or PipelineKind resources.

src/components/pipeline-builder/PipelineBuilderForm.tsx

PipelineBuilderPage.tsxTrack namespaced pipelines in builder task resources +7/-4

Track namespaced pipelines in builder task resources

• Extends initial taskResources state to include namespacedPipelines. Minor formatting cleanup for DocumentTitle import and rendering.

src/components/pipeline-builder/PipelineBuilderPage.tsx

hooks.tsWatch Pipelines alongside Tasks and reduce initial revalidation churn +45/-20

Watch Pipelines alongside Tasks and reduce initial revalidation churn

• Extends resource watches to include namespaced Pipelines and stores them in formik taskResources. Adds an initial-load guard to avoid triggering validation immediately on first task load; aggregates pipeline watch load errors.

src/components/pipeline-builder/hooks.ts

ResourceSidebar.tsxIntroduce ResourceSidebar supporting Tasks and Pipelines +96/-47

Introduce ResourceSidebar supporting Tasks and Pipelines

• Replaces the task-only sidebar with a resource-aware implementation that handles TaskKind vs PipelineKind. Pipelines show a "Pipeline tasks" link section; task-only sections (when expressions, resources, workspaces) are conditionally hidden for pipelines.

src/components/pipeline-builder/resource-sidebar/ResourceSidebar.tsx

switch-to-form-validation-utils.tsExtend YAML-side schema for pipelineRef/pipelineSpec and scoped runAfter +92/-12

Extend YAML-side schema for pipelineRef/pipelineSpec and scoped runAfter

• Adds pipelineRef and pipelineSpec support, and accepts tasks whose pipelineSpec defines nested tasks/finally. Introduces scoped runAfter validation for nested pipelines and updates the task-definition error message.

src/components/pipeline-builder/switch-to-form-validation-utils.ts

types.tsBroaden builder resource types to include Pipelines +6/-4

Broaden builder resource types to include Pipelines

• Extends taskResources and callback/update operation types to accept TaskKind or PipelineKind. Adds namespacedPipelines to the task resource container type.

src/components/pipeline-builder/types.ts

utils.tsSupport converting and resolving pipelineRef nodes +55/-24

Support converting and resolving pipelineRef nodes

• Updates findTask and conversion helpers to resolve Pipeline resources and produce pipelineRef tasks when the selected resource is a Pipeline. Generalizes parameter extraction to work on TaskKind or PipelineKind.

src/components/pipeline-builder/utils.ts

validation-utils.tsExtend form-side schema for pipelineRef/pipelineSpec and nested runAfter +215/-116

Extend form-side schema for pipelineRef/pipelineSpec and nested runAfter

• Adds pipelineSpec and pipelineRef validation and a shared task-definition test. Introduces runAfterMatchesInScope/validRunAfterInScope to validate nested pipelineSpec task dependencies; adjusts editorType conditional logic.

src/components/pipeline-builder/validation-utils.ts

BuilderFinallyNode.tsxUpdate finally-node add label +2/-2

Update finally-node add label

• Renames tooltip and text from "Add finally task" to "Add finally node" to match new terminology.

src/components/pipeline-topology/BuilderFinallyNode.tsx

PipelineTopologyGraph.tsxAlways show topology control bar in builder +1/-0

Always show topology control bar in builder

• Enables the topology control bar (zoom/fit controls) when rendering the builder graph.

src/components/pipeline-topology/PipelineTopologyGraph.tsx

PlusNodeDecorator.tsxAdjust plus icon sizing and centering +2/-2

Adjust plus icon sizing and centering

• Tweaks the icon transform and sets explicit PlusIcon size relative to the node radius for more consistent rendering.

src/components/pipeline-topology/PlusNodeDecorator.tsx

TaskList.tsxChange default add label to generic "Add" +6/-3

Change default add label to generic "Add"

• Updates the unselected dropdown label from "Add task" to "Add" to align with resource-agnostic selection.

src/components/pipeline-topology/TaskList.tsx

QuickSearchDetails.tsxAllow details panel to hide CTA and report readiness +22/-16

Allow details panel to hide CTA and report readiness

• Adds optional props to hide the CTA button and to propagate selected version / readiness state to parent containers. Updates rendering to conditionally show the CTA.

src/components/quick-search/QuickSearchDetails.tsx

QuickSearchModal.scssRestyle quick search modal for new layout +40/-9

Restyle quick search modal for new layout

• Replaces legacy modal styling with new split-pane, nav item, and search input styles aligned to the rewritten modal implementation.

src/components/quick-search/QuickSearchModal.scss

QuickSearchModal.tsxRewrite quick search modal as a split list/details selector +378/-43

Rewrite quick search modal as a split list/details selector

• Replaces the legacy draggable/resizable quick search body with a new PatternFly-based modal featuring kind toggles, debounced search input, keyboard navigation, and explicit Add/Cancel actions. Adds support for Task vs Pipeline selection UI (driven by props).

src/components/quick-search/QuickSearchModal.tsx

PipelineQuickSearch.tsxMove search orchestration into PipelineQuickSearch with Pipeline-kind support +327/-101

Move search orchestration into PipelineQuickSearch with Pipeline-kind support

• Reworks pipeline builder quick search to drive the new QuickSearchModal directly, including debounced searching and query-param syncing. Adds feature-flagged Pipeline-kind search by watching Pipelines and normalizing them into CatalogItems.

src/components/task-quicksearch/PipelineQuickSearch.tsx

PipelineQuickSearchDetails.scssTweak details description typography +1/-1

Tweak details description typography

• Reduces description font size for the quick search details panel.

src/components/task-quicksearch/PipelineQuickSearchDetails.scss

PipelineQuickSearchDetails.tsxIntegrate details readiness + selected version callbacks +55/-29

Integrate details readiness + selected version callbacks

• Adds hooks to inform parent modal when details are ready (enables Add) and when selected version changes. Supports hideCta rendering for modal-managed Add action.

src/components/task-quicksearch/PipelineQuickSearchDetails.tsx

pipeline.tsAdd pipelineSpec to PipelineTask type +1/-0

Add pipelineSpec to PipelineTask type

• Extends PipelineTask typing to allow an embedded pipelineSpec, enabling nested pipeline definitions in tasks.

src/types/pipeline.ts

Bug fix (1) +2 / -2

PipelineVisualizationSurface.tsxForce model update behavior when reloading graph model +2/-2

Force model update behavior when reloading graph model

• Updates visualization.fromModel calls to pass the additional boolean flag, ensuring the graph reflects model updates consistently before layout.

src/components/pipeline-topology/PipelineVisualizationSurface.tsx

Refactor (14) +50 / -49

PipelineBuilderVisualization.tsxMinor typing/format cleanup for visualization component +1/-3

Minor typing/format cleanup for visualization component

• Flattens the FC type declaration for readability without functional changes.

src/components/pipeline-builder/PipelineBuilderVisualization.tsx

ResourceSidebar.scssAdd ResourceSidebar styling entrypoint +0/-0

Add ResourceSidebar styling entrypoint

• Introduces SCSS file for the new ResourceSidebar components (styling details live here).

src/components/pipeline-builder/resource-sidebar/ResourceSidebar.scss

ResourceSidebarHeader.scssAdd ResourceSidebarHeader styling +0/-0

Add ResourceSidebarHeader styling

• Introduces SCSS for the new sidebar header component.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarHeader.scss

ResourceSidebarHeader.tsxGeneralize sidebar header to any K8s resource +13/-13

Generalize sidebar header to any K8s resource

• Renames and refactors the header to accept a generic K8sResourceCommon, not just TaskKind. Keeps shortcuts and resource reference rendering, now driven by resource.kind/name.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarHeader.tsx

ResourceSidebarName.tsxRename TaskSidebarName to ResourceSidebarName +4/-6

Rename TaskSidebarName to ResourceSidebarName

• Renames the component and applies small formatting simplifications. Maintains name validation and reserved-name logic for builder tasks.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarName.tsx

ResourceSidebarParam.scssAdd ResourceSidebarParam styling +0/-0

Add ResourceSidebarParam styling

• Introduces SCSS for the parameter editor row in the resource sidebar.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarParam.scss

ResourceSidebarParam.tsxRename TaskSidebarParam to ResourceSidebarParam +5/-8

Rename TaskSidebarParam to ResourceSidebarParam

• Renames the parameter component and performs minor type/formatting cleanup. Continues to support autocomplete and required-param behavior.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarParam.tsx

ResourceSidebarResource.tsxRename TaskSidebarResource to ResourceSidebarResource +3/-3

Rename TaskSidebarResource to ResourceSidebarResource

• Renames the task resource selector component with no functional changes beyond naming consistency.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarResource.tsx

ResourceSidebarShortcuts.tsxRename shortcuts popover component for ResourceSidebar +10/-4

Rename shortcuts popover component for ResourceSidebar

• Renames TaskSidebarShortcuts to ResourceSidebarShortcuts and reformats the button JSX for readability.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarShortcuts.tsx

ResourceSidebarWorkspace.tsxRename TaskSidebarWorkspace to ResourceSidebarWorkspace +3/-3

Rename TaskSidebarWorkspace to ResourceSidebarWorkspace

• Renames the workspace selector component for consistent naming with the new ResourceSidebar.

src/components/pipeline-builder/resource-sidebar/ResourceSidebarWorkspace.tsx

TaskSidebarWhenExpression.scssPreserve when-expression styling under resource-sidebar +0/-0

Preserve when-expression styling under resource-sidebar

• Retains SCSS for when-expression controls in the new sidebar folder structure.

src/components/pipeline-builder/resource-sidebar/TaskSidebarWhenExpression.scss

TaskSidebarWhenExpression.tsxJSX formatting cleanup for when-expression remove button +10/-7

JSX formatting cleanup for when-expression remove button

• Refactors the remove button icon JSX into a clearer multi-line form without changing behavior.

src/components/pipeline-builder/resource-sidebar/TaskSidebarWhenExpression.tsx

index.tsRemove QuickSearchController export +0/-1

Remove QuickSearchController export

• Stops exporting the deleted QuickSearchController, leaving only quick-search types and utility exports.

src/components/quick-search/index.ts

task.tsBroaden SelectedBuilderTask.resource type +1/-1

Broaden SelectedBuilderTask.resource type

• Updates SelectedBuilderTask to allow generic K8s resources (needed for pipeline resources in the builder sidebar).

src/types/task.ts

Tests (3) +71 / -17

switch-to-form-validation-utils.spec.tsAdd tests for nested pipelineSpec tasks in YAML validation +28/-1

Add tests for nested pipelineSpec tasks in YAML validation

• Adds a passing test case ensuring tasks with pipelineSpec (containing nested tasks) validate correctly. Updates expected error message to include pipelineRef/pipelineSpec.

src/components/pipeline-builder/tests/switch-to-form-validation-utils.spec.ts

validation-utils.spec.tsAdd tests for nested pipelineSpec tasks in form validation +28/-1

Add tests for nested pipelineSpec tasks in form validation

• Adds coverage for pipelineSpec-with-tasks validation passing. Updates expected error messaging to the new task-definition requirement string.

src/components/pipeline-builder/tests/validation-utils.spec.ts

TaskSidebar.spec.tsxUpdate sidebar tests to use ResourceSidebar +15/-15

Update sidebar tests to use ResourceSidebar

• Migrates unit tests from TaskSidebar to ResourceSidebar and updates jest mocks accordingly. Keeps existing parameter visibility behaviors under test.

src/components/pipeline-builder/resource-sidebar/tests/TaskSidebar.spec.tsx

Other (1) +9 / -9

yarn.lockBump transitive dependencies for CVE fixes +9/-9

Bump transitive dependencies for CVE fixes

• Updates baseline-browser-mapping, cjs-module-lexer, and electron-to-chromium patch versions, consistent with CVE remediation.

yarn.lock

[arvindk-softwaredev]

/lgtm

[openshift-ci-robot]

@anwesha-palit-redhat: This pull request references SRVKP-13195 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "5.1.0" version, but no target version was set.

Details

In response to this:

Type of Change

• Bug fix
• New feature
• Refactoring
• Migration
• CVE Fix

Summary

#1278 (comment)

Screen Recordings / Screenshot

Screen.Recording.2026-08-17.at.09.51.00.mov

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[arvindk-softwaredev]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: anwesha-palit-redhat, arvindk-softwaredev

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [anwesha-palit-redhat,arvindk-softwaredev]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment