feat: Add cancel button to active job card in grid view #8264
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosubot
bot
added
the
size:S
Contributor
📝 WalkthroughWalkthroughThe changes add hover state detection and a cancel button overlay to the ActiveMediaAssetCard component. The component now integrates with the useJobActions composable to determine cancelability and execute job cancellation. Test files are updated with appropriate mocks for the new cancellation behavior and module reset logic. Changes
Possibly related PRs
Suggested reviewers
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
coderabbitai
bot
requested review from
DrJKL,
KarryCharon,
benceruleanlu and
shinshin86
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/sidebar/tabs/assets/ActiveJobCard.vue`:
- Around line 88-92: The computed passed into useJobActions toggles between job
and null on hover which is unnecessary given the template already guards with
v-if="hovered && canCancelJob"; simplify by passing the job directly into
useJobActions (e.g., provide job via computed(() => job) or a getter) instead of
computed(() => (hovered.value ? job : null)) so the hook receives a stable
reference and avoids churn; update the call that defines const { cancelAction,
canCancelJob, runCancelJob } = useJobActions(...) accordingly and keep the
existing template guard.
viva-jinyi
force-pushed
the
feature/clear-single-job
branch
from
6ad61a0 to
5213666
Compare
dosubot
bot
added
size:S
🎭 Playwright Tests:
|
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/28/2026, 02:59:57 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 23.6 kB (baseline 23.6 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 961 kB (baseline 961 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 470 kB (baseline 470 kB) • 🟢 -8 BConfiguration panels, inspectors, and settings screens
Status: 12 added / 12 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.9 kB (baseline 2.9 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 33.7 kB (baseline 33.7 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 2.71 MB (baseline 2.71 MB) • 🔴 +916 BStores, services, APIs, and repositories
Status: 9 added / 9 removed Utilities & Hooks — 25.5 kB (baseline 25.5 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 7 added / 7 removed Vendor & Third-Party — 10.7 MB (baseline 10.7 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.04 MB (baseline 7.04 MB) • 🟢 -319 BBundles that do not match a named category
Status: 39 added / 39 removed |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/platform/assets/components/ActiveMediaAssetCard.vue`:
- Around line 40-49: Replace the icon-only Button used in
ActiveMediaAssetCard.vue with the shared IconButton component: where Button with
props (:variant="cancelAction.variant", size="icon",
:aria-label="cancelAction.label", class, `@click.stop`="runCancelJob()") is
rendered (also the similar usage at lines 80-81), import and use IconButton from
src/components/button and map the props to IconButton’s API (pass the
aria-label, variant if supported, the click handler runCancelJob, and the icon
via its slot or icon prop per IconButton contract) so the component matches the
design system and preserves the hovered && canCancelJob conditional and stop
propagation on click.
- Around line 6-7: The cancel button is only shown on mouse hover (using the
hovered reactive), which prevents keyboard users from accessing it; add keyboard
focus support by making the card container focusable (add tabindex) and tracking
focus with a new focused reactive state, attach `@focus`="focused = true" and
`@blur`="focused = false" handlers on the same container where
`@mouseenter/`@mouseleave are defined, and update the cancel button render
condition from relying solely on hovered to use (hovered || focused) so the
button appears for keyboard focus as well; update references to the hovered
reactive and the cancel button conditional in ActiveMediaAssetCard.vue to
implement these changes.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/platform/assets/components/ActiveMediaAssetCard.test.ts (1)
42-58: Consider using function declarations for test helpers.Per coding guidelines, prefer pure function declarations over function expressions for better hoisting clarity and consistency.
♻️ Suggested refactor
-const createJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({ - id: 'test-job-1', - title: 'Running...', - meta: 'Step 5/10', - state: 'running', - progressTotalPercent: 50, - progressCurrentPercent: 75, - ...overrides -}) +function createJob(overrides: Partial<JobListItem> = {}): JobListItem { + return { + id: 'test-job-1', + title: 'Running...', + meta: 'Step 5/10', + state: 'running', + progressTotalPercent: 50, + progressCurrentPercent: 75, + ...overrides + } +} -const mountComponent = (job: JobListItem) => - mount(ActiveJobCard, { - props: { job }, - global: { - plugins: [i18n] - } - }) +function mountComponent(job: JobListItem) { + return mount(ActiveJobCard, { + props: { job }, + global: { + plugins: [i18n] + } + }) +}
🤖 Fix all issues with AI agents
In `@src/platform/assets/components/ActiveMediaAssetCard.test.ts`:
- Around line 10-20: The mock always returning false for canCancelJob prevents
testing the cancel button; replace the static mock with a hoisted mutable mock
(use vi.hoisted) named e.g. mockJobActions and have useJobActions return
cancelAction and canCancelJob: computed(() => mockJobActions.canCancelJob.value)
and runCancelJob: mockJobActions.runCancelJob so tests can toggle
mockJobActions.canCancelJob.value = true to assert the cancel button (aria-label
"Cancel") appears on hover/focus and verify runCancelJob is called on click;
update/add tests that set mockJobActions.canCancelJob.value before mounting,
trigger mouseenter/focus, assert existence of the cancel button, and simulate
click to expect mockJobActions.runCancelJob to have been called.
In `@src/platform/assets/components/ActiveMediaAssetCard.vue`:
- Line 80: The import list includes an unused symbol `computed`; update the Vue
import in ActiveMediaAssetCard.vue to remove `computed` and import only `ref`
(i.e., change the import to use `{ ref }`), and verify there are no remaining
references to `computed` in the component (run the linter/tests to confirm).
- Around line 42-52: Add a unit test for ActiveMediaAssetCard.vue that sets
canCancelJob to true (instead of the current mocked false), simulates the
hovered state so the Cancel Button is rendered, asserts the Button with
aria-label matching cancelAction.label is visible, and simulates a click to
verify runCancelJob is called and that the click event is stopped from
propagating; target the component's canCancelJob prop/computed, the hovered
state, the cancelAction properties, and the runCancelJob method when writing the
test.
Member
|
@codex review |
|
To use Codex here, create a Codex account and connect to github. |
Member
|
benceruleanlu
previously approved these changes
Jan 23, 2026
Member
benceruleanlu
left a comment
benceruleanlu
left a comment
There was a problem hiding this comment.
Can we make it match the designs next?
Member
Author
|
@benceruleanlu I modified the code for matching the design, can you review it again? |
benceruleanlu
approved these changes
Jan 28, 2026
This was referenced Jan 30, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Add a cancel (x) button overlay to active job cards in grid view, matching the existing list view behavior.
Changes
ActiveJobCard.vueusing the existinguseJobActionscomposable┆Issue is synchronized with this Notion page by Unito