fix(web): keep for-each dive-in clickable for running items by vigneshwarKV · Pull Request #273 · microsoft/conductor · GitHub
Skip to content

fix(web): keep for-each dive-in clickable for running items#273

Merged
jrob5756 merged 2 commits into
microsoft:mainfrom
vigneshwarKV:fix/foreach-running-item-dive-in
Jul 1, 2026
Merged

fix(web): keep for-each dive-in clickable for running items#273
jrob5756 merged 2 commits into
microsoft:mainfrom
vigneshwarKV:fix/foreach-running-item-dive-in

Conversation

@vigneshwarKV

@vigneshwarKV vigneshwarKV commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Problem

In the web dashboard's for-each group detail panel, each row under ITEMS has a stacked-layers "Dive into subworkflow" control. Clicking it navigates into the iteration's nested workflow — but only when the item is COMPLETED or FAILED. While an item is RUNNING, clicking the icon does nothing.

Root cause

The dive-in control was a <span role="button"> nested inside the row's expand/collapse <button>:

<button onClick={...toggle...} disabled={!hasDetails}>
  ...chevron / key / metrics / status badge...
  {canDiveIn && (
    <span role="button" onClick={(e) => { e.stopPropagation(); navigateIntoSubworkflow(...) }}>
      <Layers />
    </span>
  )}
</button>

The outer toggle is disabled={!hasDetails}, where hasDetails = prompt || output != null || activity?.length || error_type. A running workflow-type iteration hasn't produced any of those yet (its prompt/output/activity live on the child SubworkflowContext, not on the for-each item), so hasDetails is false and the outer button is disabled.

A disabled <button> suppresses click events across its entire subtree, so the nested dive-in span never received the click. Once the item failed (the for_each_item_failed event carries an error_type) or completed, hasDetails flipped to true, the button was enabled, and dive-in worked — exactly matching the "only navigates when FAILED" symptom.

The store's navigateIntoSubworkflow and the SubworkflowContext for the running iteration were both fine (the context exists as soon as subworkflow_started fires, so the icon correctly renders for running items) — the click simply never reached the handler.

Fix

Restructure the header row so the expand/collapse toggle and the dive-in control are siblings inside a plain flex <div>, instead of nesting an interactive element inside a (sometimes disabled) button. The dive-in is now a real <button>, so it:

  • stays clickable regardless of the toggle's disabled state,
  • gets native keyboard/focus behavior (dropping the manual role/tabIndex/onKeyDown/stopPropagation shim), and
  • no longer produces invalid nested-interactive-element markup.

Only GroupDetail.tsx changed behaviorally; the static/ bundle is the rebuilt frontend (make build-frontend).

Verification

Reproduced against a real for-each fan-out (two concurrent workflow-type iterations): before the change, the dive-in icon was inert on the RUNNING row and worked on the FAILED row; after the change it navigates into the nested workflow in both states. tsc -b (via make build-frontend) passes.

vigneshwarKV pushed a commit to vigneshwarKV/conductor that referenced this pull request Jul 1, 2026
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vigneshwarKV

Copy link
Copy Markdown
Contributor Author

Vignesh and others added 2 commits July 1, 2026 16:35
The per-item "Dive into subworkflow" control in the for-each group detail
panel was a `<span role="button">` nested inside the row's expand/collapse
`<button>`. That outer button is `disabled` whenever the item has no
expandable details (`hasDetails` false) — the case for a running
workflow-type iteration that has not yet produced a prompt/output/activity/
error. A disabled `<button>` suppresses click events across its entire
subtree, so the nested dive-in never fired while the item was RUNNING. Once
the item FAILED (carrying an `error_type`) or COMPLETED, `hasDetails` became
true, the button was enabled, and dive-in worked — matching the reported
"only navigates when FAILED" behavior.

Restructure the header row so the expand/collapse toggle and the dive-in
control are siblings inside a plain flex `<div>` rather than nesting an
interactive element inside a (sometimes disabled) button. The dive-in is now
a real `<button>`, so it stays clickable regardless of the toggle's disabled
state and no longer relies on `stopPropagation`/manual keydown handling. This
also removes the invalid nested-interactive-element markup.

Rebuilds the bundled dashboard (`make build-frontend`); the static/ changes
are the regenerated Vite bundle (content-hashed filenames) with index.html
pointing at the new hashes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vigneshwarKV vigneshwarKV force-pushed the fix/foreach-running-item-dive-in branch from a1ee1cf to 6e03d33 Compare July 1, 2026 11:06
@codecov-commenter

Copy link
Copy Markdown

@jrob5756 jrob5756 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving. Validated the root cause and fix end-to-end, plus a multi-agent review (code quality, tests, comments, dead code, simplification): the dive-in is correctly un-nested from the disabled toggle so it stays clickable for running for-each items. Improves a11y (native button), removes invalid nested-interactive markup and the manual keydown/stopPropagation shim, passes tsc -b, and the rebuilt bundle is byte-identical. Only optional nits remain (aria-label, type="button" on the toggle, a frontend test-harness follow-up).

@jrob5756 jrob5756 merged commit 6418466 into microsoft:main Jul 1, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants