feat(dexie-cloud): Add copy-to-clipboard button for whitelist command#2261
Merged
dfahlander merged 2 commits intomasterfrom Mar 17, 2026
Merged
feat(dexie-cloud): Add copy-to-clipboard button for whitelist command#2261dfahlander merged 2 commits intomasterfrom
dfahlander merged 2 commits intomasterfrom
Conversation
… in auth error dialog When authentication fails due to an unwhitelisted origin, the error dialog now shows a clickable copy button with the full CLI command: npx dexie-cloud whitelist <origin> This saves developers from having to manually type or construct the command. Changes: - DXCAlert: Added optional 'copyText' field to all alert types - authenticate.ts: Passes the full whitelist command as copyText - LoginDialog.tsx: CopyButton component with clipboard API + fallback - Styles.ts: Copy button styling with visual feedback on copy Requested by: Jesper
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughAdds clipboard copy support for authentication alerts: alert types gain an optional Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.Add a configuration file to your project to customize how CodeRabbit runs |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
addons/dexie-cloud/src/default-ui/Styles.ts (1)
211-241: Reduce duplication betweenCopyButtonstyle variants.
CopyButtonandCopyButtonCopiedrepeat many identical declarations; extracting a shared base style will reduce drift risk.♻️ Proposed refactor
+const CopyButtonBase = { + display: "inline-flex", + alignItems: "center", + gap: "4px", + padding: "4px 10px", + marginTop: "8px", + borderRadius: "4px", + fontSize: "12px", + fontWeight: "500", + fontFamily: "monospace" +}; + export const Styles: { [styleAlias: string]: Partial<CSSStyleDeclaration> | any} = { ... CopyButton: { - display: "inline-flex", - alignItems: "center", - gap: "4px", - padding: "4px 10px", - marginTop: "8px", + ...CopyButtonBase, border: "1px solid `#d1d5db`", - borderRadius: "4px", backgroundColor: "#f9fafb", cursor: "pointer", - fontSize: "12px", - fontWeight: "500", color: "#374151", - transition: "all 0.15s ease", - fontFamily: "monospace" + transition: "all 0.15s ease" }, CopyButtonCopied: { - display: "inline-flex", - alignItems: "center", - gap: "4px", - padding: "4px 10px", - marginTop: "8px", + ...CopyButtonBase, border: "1px solid `#22c55e`", - borderRadius: "4px", backgroundColor: "#f0fdf4", cursor: "default", - fontSize: "12px", - fontWeight: "500", - color: "#16a34a", - fontFamily: "monospace" + color: "#16a34a" },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@addons/dexie-cloud/src/default-ui/Styles.ts` around lines 211 - 241, Extract the duplicated declarations between CopyButton and CopyButtonCopied into a shared base style object (e.g., CopyButtonBase or CopyButtonCommon) and have CopyButton and CopyButtonCopied spread/extend that base, keeping only the differing properties (border, backgroundColor, cursor, color, transition if different) in each variant; update references to CopyButton and CopyButtonCopied to preserve behavior while reducing duplication and drift risk.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@addons/dexie-cloud/src/authentication/authenticate.ts`:
- Around line 254-264: Guard use of location.origin in the Dexie.debug branch:
before building whitelistCommand and message (the code that sets
whitelistCommand, message and calls alertUser), check typeof location !==
'undefined' (and optionally location.origin) and only reference location.origin
when present; otherwise use a safe fallback string (e.g. '<origin unavailable>')
or omit copyText. Update the logic around whitelistCommand, message and the
alertUser call (the block that constructs whitelistCommand and calls alertUser)
to avoid direct access to location.origin when running in environments without
window/location.
In `@addons/dexie-cloud/src/default-ui/LoginDialog.tsx`:
- Around line 208-220: The handleClick handler currently assumes
navigator.clipboard exists and always calls scheduleCopiedReset after the DOM
fallback; update handleClick to first guard clipboard access (check
navigator.clipboard and navigator.clipboard.writeText) and call it inside a
try/catch, and for the fallback create-and-copy path check the boolean result of
document.execCommand('copy') (and also guard document before DOM ops); only call
scheduleCopiedReset when either navigator.clipboard.writeText resolves
successfully or document.execCommand('copy') returns true, otherwise handle the
failure (e.g., show/error state or no-op) so the "Copied!" indicator is not
shown on failure.
---
Nitpick comments:
In `@addons/dexie-cloud/src/default-ui/Styles.ts`:
- Around line 211-241: Extract the duplicated declarations between CopyButton
and CopyButtonCopied into a shared base style object (e.g., CopyButtonBase or
CopyButtonCommon) and have CopyButton and CopyButtonCopied spread/extend that
base, keeping only the differing properties (border, backgroundColor, cursor,
color, transition if different) in each variant; update references to CopyButton
and CopyButtonCopied to preserve behavior while reducing duplication and drift
risk.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 92330fe6-9b36-4a51-8040-bd92d51a2908
📒 Files selected for processing (4)
addons/dexie-cloud/src/authentication/authenticate.tsaddons/dexie-cloud/src/default-ui/LoginDialog.tsxaddons/dexie-cloud/src/default-ui/Styles.tsaddons/dexie-cloud/src/types/DXCAlert.ts
- Move typeof location check before Dexie.debug to prevent ReferenceError
in non-browser environments (Node/SSR)
- Guard navigator.clipboard access with existence check
- Check execCommand('copy') return value - only show 'Copied!' on success
- Extract fallback copy logic into separate function
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 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.
What
When authentication fails because the origin isn't whitelisted, the error dialog now shows a copy-to-clipboard button with the full CLI command:
One click copies the complete command — no need to manually type it.
Changes
DXCAlert: Added optionalcopyTextfield to all alert types (extensible for future use)authenticate.ts: Passes the full whitelist command ascopyTextLoginDialog.tsx: NewCopyButtoncomponent with Clipboard API + execCommand fallbackStyles.ts: Button styling with visual ✓ feedback on copyQoL improvement
Requested by @jesperforss 🙏
Summary by CodeRabbit