feat(apollo-react): add mocked chip to stage node tasks - #994
feat(apollo-react): add mocked chip to stage node tasks#994jevinkosasih wants to merge 1 commit into
Conversation
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Adds an isMocked?: boolean flag to stage node tasks in apollo-react so StageTaskItem can render a “Mocked” indicator chip (with localized tooltip + accessibility labeling), matching the existing mocked-output affordance used elsewhere in the canvas.
Changes:
- Extended
StageTaskItemwith an optionalisMockedsemantic flag. - Render a warning-style mocked chip (flask icon) in
TaskContentahead of the execution status icon, wrapped inCanvasTooltip. - Added unit tests for mocked chip rendering/accessibility and updated the “Maximum Task Adornments” story to showcase it.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx | Renders a “Mocked” chip with tooltip + ARIA labeling when task.isMocked is set. |
| packages/apollo-react/src/canvas/components/StageNode/TaskContent.test.tsx | Adds coverage ensuring the mocked chip appears/doesn’t appear appropriately and is accessible. |
| packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts | Adds isMocked?: boolean to StageTaskItem. |
| packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx | Demonstrates the mocked chip in the maximum-adornments example. |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
f1a728f to
24baf15
Compare
24baf15 to
86a6e20
Compare
86a6e20 to
42fedbb
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.
Suppressed comments (1)
packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx:119
- The new mocked chip tooltip/id don’t match the existing StageNode badge i18n pattern and appear to conflict with the PR description. In this file, other badge tooltips use ids under
stage-node.task-badge.*(e.g.stage-node.task-badge.ran-n-times,stage-node.task-badge.rework-time), but the new one usesstage-node.task-mocked. Also, the tooltip copy here is "This node's outputs are mocked" while the PR description calls for tooltip content "Mocked" (and the chip is task-scoped, not node-output-scoped). Consider renaming the message id to align with the badge namespace and adjusting the tooltip copy accordingly, then updating the locale catalogs and tests that assert the exact string.
const runsTooltip =
taskExecution?.status === 'InProgress'
? _({ id: 'stage-node.task-badge.running-again', message: 'Running again' })
: _({
id: 'stage-node.task-badge.ran-n-times',
message: '{count, plural, one {Ran # time} other {Ran # times}}',
values: { count: totalRuns },
});
const hasRework = !!taskExecution?.retryDuration;
const reworkTooltip = _({
id: 'stage-node.task-badge.rework-time',
message: 'Reworked (+{duration})',
values: { duration: taskExecution?.retryDuration ?? '' },
});
const mockedTooltip = _({ id: 'stage-node.task-mocked', message: "This node's outputs are mocked" });
const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.
Suppressed comments (4)
packages/apollo-react/src/canvas/components/StageNode/TaskContent.test.tsx:220
- This test's expected accessible name should be kept in sync with the mocked chip tooltip/label text (proposed to be "Mocked").
expect(screen.getByRole('img', { name: "This node's outputs are mocked" })).toBeInTheDocument();
packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx:118
- The tooltip/aria-label text for
isMockedsays "This node's outputs are mocked", but the chip is rendered per task (StageTaskItem.isMocked) and the PR description says the tooltip content should be "Mocked". Consider using a short, task-scoped label for both tooltip and screen readers.
const mockedTooltip = _({ id: 'stage-node.task-mocked', message: "This node's outputs are mocked" });
packages/apollo-react/src/canvas/locales/en.json:151
- The new i18n entry for
stage-node.task-mockedrefers to "node" and "outputs", but this indicator is shown per task. Also, the PR description states the tooltip should read "Mocked". Align the English string with the intended, task-level chip label.
"stage-node.task-mocked": "This node's outputs are mocked"
packages/apollo-react/src/canvas/components/StageNode/TaskContent.test.tsx:216
- This assertion can pass even if the tooltip isn't actually wrapping the mocked chip (it only checks that some tooltip with that content exists). It would be more robust to assert on the chip's nearest tooltip wrapper, consistent with the other chip tests in this file. Also update the expected tooltip text to match the updated copy ("Mocked").
This issue also appears on line 220 of the same file.
const chip = screen.getByTestId(`stage-task-mocked-${baseTask.id}`);
expect(screen.getByTestId(`stage-task-actions-${baseTask.id}`)).toContainElement(chip);
expect(
container.querySelector(`[data-tooltip-content="This node's outputs are mocked"]`)
).not.toBeNull();
42fedbb to
240c87a
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.
Suppressed comments (3)
packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx:118
- The PR description says the tooltip content should be "Mocked", but the implementation/localized string uses "This task's outputs are mocked". Please align the copy with the intended UX (either update the description or change the string and related test expectations) to avoid confusion and inconsistent localization keys.
const mockedTooltip = _({ id: 'stage-node.task-mocked', message: "This task's outputs are mocked" });
packages/apollo-react/src/canvas/components/StageNode/TaskContent.test.tsx:215
- This test asserts tooltip presence via a broad
container.querySelector(...), which doesn’t guarantee the tooltip is associated with the mocked chip. It’s more robust to assert the mocked chip is wrapped by the CanvasTooltip mock and that wrapper contains the expecteddata-tooltip-content.
it('shows the mocked chip in the trailing actions group with an outputs-mocked tooltip when the task is mocked', () => {
const { container } = renderTaskContent({ task: { isMocked: true } });
const chip = screen.getByTestId(`stage-task-mocked-${baseTask.id}`);
expect(screen.getByTestId(`stage-task-actions-${baseTask.id}`)).toContainElement(chip);
expect(
packages/apollo-react/src/canvas/locales/en.json:36
- New i18n message id
stage-node.task-mockedwas added only toen.json, but the canvas locales include many other language catalogs. As-is, non-English locales will fall back to the default message (or display a missing translation), which is inconsistent with otherstage-node.*strings that exist across all locale JSON files.
"stage-node.task-mocked": "This task's outputs are mocked",
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Aug 05, 2026, 11:20:06 PM |
240c87a to
e12d704
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.
Suppressed comments (1)
packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx:118
- PR description says the tooltip content should be "Mocked", but the implementation/localized string uses "This task's outputs are mocked". This is a mismatch that will affect the UI copy, a11y label, and the new tests that assert the tooltip string.
const mockedTooltip = _({ id: 'stage-node.task-mocked', message: "This task's outputs are mocked" });
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.
Suppressed comments (2)
packages/apollo-react/src/canvas/locales/en.json:36
- New i18n key
stage-node.task-mockedwas added only toen.json, but the other locale catalogs inpackages/apollo-react/src/canvas/locales/*.jsonappear to keep stage-node keys in sync (e.g.stage-node.task-badge.running-againexists in every locale). As-is, non-English locales will likely show fallback English/missing translation for this tooltip.
"stage-node.task-mocked": "This task's outputs are mocked",
packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx:121
- PR description says the tooltip content should be "Mocked", but the localized string used for
stage-node.task-mockedis currently "This task's outputs are mocked". If the shorter tooltip is the intended UX (and matches the chip label), consider updating the message/id value and adjusting the corresponding locale entry/tests, or update the PR description to match the implemented copy.
const mockedTooltip = _({
id: 'stage-node.task-mocked',
message: "This task's outputs are mocked",
});
2634816 to
94c7f59
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.
Suppressed comments (2)
packages/apollo-react/src/canvas/components/StageNode/DraggableTask.tsx:103
- The PR description says the mocked indicator should render in the trailing actions group (before the execution-status icon). This implementation renders it as an absolute-positioned corner marker (and the new DraggableTask tests explicitly enforce that), so either the PR description needs updating or the chip should be moved into TaskContent’s actions row to match the stated design/ordering.
taskId={task.id}
active={!!taskExecution?.breakpoint}
onToggle={onToggleBreakpoint}
/>
<TaskMockedChip taskId={task.id} mocked={!!task.isMocked} />
packages/apollo-react/src/canvas/locales/en.json:36
- A new lingui id is added only to en.json, but the other canvas locale catalogs (e.g. fr.json/ja.json/etc.) don’t include "stage-node.task-mocked". The existing locale files appear to be kept in sync for other keys, so this will leave non-English locales without a translation entry (and may surface missing-translation warnings). Consider adding the key to all locale JSONs (even as an English placeholder) or running the project’s catalog update step so every locale includes it.
"stage-node.task-mocked": "This task's outputs are mocked",
94c7f59 to
2979349
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.
Suppressed comments (2)
packages/apollo-react/src/canvas/locales/en.json:37
- New locale key
stage-node.task-mockedwas added only toen.json, but thestage-node.*key set appears to be kept in sync across all canvas locale catalogs (e.g.,stage-node.task-badge.running-againexists in every locale file). This will cause non-English locales to fall back to the default English message for this tooltip. Please addstage-node.task-mockedto the other locale JSON files (with appropriate translations or at least a placeholder) to keep catalogs aligned.
"stage-node.status.warning": "Warning",
"stage-node.task-badge.ran-n-times": "{count, plural, one {Ran # time} other {Ran # times}}",
"stage-node.task-badge.running-again": "Running again",
"stage-node.task-mocked": "This task's outputs are mocked",
"stage-node.ungroup-parallel-tasks": "Ungroup parallel tasks",
packages/apollo-react/src/canvas/components/StageNode/TaskMockedChip.tsx:29
- PR description says the mocked indicator should be rendered in
TaskContent’s trailing actions group (before the execution-status icon) with tooltip copy "Mocked". The current implementation is a top-right corner marker (absolute positioned) and the copy is "This task's outputs are mocked" (and tests codify that). Please align the implementation with the intended UX, or update the PR description/acceptance criteria to match this corner-marker approach and tooltip copy.
const label = _({ id: 'stage-node.task-mocked', message: "This task's outputs are mocked" });
return (
<CanvasTooltip content={label} placement="top">
<Badge
variant="warning"
role="img"
aria-label={label}
className="absolute -top-1.5 -right-1.5 z-10 h-4 w-4 justify-center rounded-full border-warning bg-chip-warning-background p-0 hover:bg-chip-warning-background [&>svg]:size-2.5"
2979349 to
3ebad32
Compare
github-actions
Bot
added
size:L
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.
Suppressed comments (1)
packages/apollo-react/src/canvas/components/StageNode/tasks/TaskMockedChip.tsx:34
- CanvasTooltip renders a Radix , which requires its direct child to be a ref-forwarding component or a DOM element. apollo-wind's Badge is a plain function component (no forwardRef), so passing directly can break tooltip positioning/triggering and produces the "Function components cannot be given refs" warning. Wrap the Badge in a DOM element (or switch to a DOM element for the trigger) so TooltipTrigger can attach its ref/handlers reliably.
<CanvasTooltip content={label} placement="top">
<Badge
variant="warning"
role="img"
aria-label={label}
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3ebad32 to
0fea243
Compare
Summary
Adds an
isMockedflag toStageTaskItemso a stage-node task can render a "Mocked" chip, mirroring the existing mocked-output indicator on BPMN activity nodes.Testing
pnpm typecheckpasses (apollo-react)pnpm testpasses — StageNode suite 219/219, TaskContent 35/35pnpm lint(Biome) clean on changed filesas any/ type suppressions added)