Fix modal button pointer and replication action click#1789
Conversation
📝 WalkthroughWalkthroughDialog button rendering logic in DialogV2.vue is refactored from dynamic component switching to explicit rendering paths for button and anchor elements with unified click handling. The store's dialog close flow is modified to handle href navigation via a new openButtonHref utility. An action button styling update adds cursor-pointer to the toast service. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/DialogV2.vue (1)
118-121: Redundant and conflicting cursor classes when disabled.When
button.disabledis true:
cursor-not-allowedis applied twice (lines 119 and 120)pointer-events-nonemakes the cursor style invisible anyway since the element won't receive pointer eventsConsider simplifying:
♻️ Suggested simplification
:class="{ 'd-btn d-btn-primary': button.role === 'primary', 'd-btn d-btn-secondary': button.role === 'secondary', 'd-btn d-btn-warning': button.role === 'danger', 'd-btn d-btn-outline': button.role === 'cancel', 'd-btn': !button.role, - '!cursor-pointer': !button.disabled, - 'cursor-not-allowed': button.disabled, - 'opacity-70 cursor-not-allowed pointer-events-none': button.disabled, + 'cursor-pointer': !button.disabled, + 'opacity-70 pointer-events-none': button.disabled, }"The same applies to the anchor element at lines 139-141.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DialogV2.vue` around lines 118 - 121, The class binding on the button and the anchor in DialogV2.vue applies redundant/conflicting classes when button.disabled is true (the object containing '!cursor-pointer', 'cursor-not-allowed', 'opacity-70 cursor-not-allowed pointer-events-none'); remove the duplicate 'cursor-not-allowed' and drop 'pointer-events-none' (since it prevents cursor behavior) and instead conditionally apply a single disabled set like 'cursor-not-allowed opacity-70' when button.disabled is true and '!cursor-pointer' when false; update both the button and the anchor class binding objects to use these simplified keys so the disabled styling is unambiguous.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/DialogV2.vue`:
- Around line 118-121: The class binding on the button and the anchor in
DialogV2.vue applies redundant/conflicting classes when button.disabled is true
(the object containing '!cursor-pointer', 'cursor-not-allowed', 'opacity-70
cursor-not-allowed pointer-events-none'); remove the duplicate
'cursor-not-allowed' and drop 'pointer-events-none' (since it prevents cursor
behavior) and instead conditionally apply a single disabled set like
'cursor-not-allowed opacity-70' when button.disabled is true and
'!cursor-pointer' when false; update both the button and the anchor class
binding objects to use these simplified keys so the disabled styling is
unambiguous.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6ed5cd93-dbc9-4e99-9678-8e21e2bc633d
📒 Files selected for processing (3)
src/components/DialogV2.vuesrc/services/updateReplicationToast.tssrc/stores/dialogv2.ts
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 01be4b647b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // Modal dismissed without a button action (overlay, escape, close icon) | ||
| showDialog.value = false |
There was a problem hiding this comment.
When the dialog is closed without a button (closeDialog() called with no argument), this path now only hides the modal and leaves dialogCanceled as false. That flips the meaning of onDialogDismiss() for backdrop/Escape/X closes, so those dismissals are treated as confirmations in existing callers that use !await dialogStore.onDialogDismiss() (for example the bundle delete confirmation flow in src/components/tables/BundleTable.vue), which can trigger destructive actions after a user dismisses the modal.
Useful? React with 👍 / 👎.
|
1 participant
Summary (AI generated)
Motivation (AI generated)
The replication bottom-toast action had a “no pointer” affordance and could appear unclickable, reducing discoverability during active replication updates.
Business Impact (AI generated)
This reduces friction for users trying to navigate from replication notifications, improving responsiveness in operational workflows.
Test Plan (AI generated)
bun lintSummary by CodeRabbit