Added sponsor label toggle to CTA Card #1420
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsxOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct. The config "react-app" was referenced from the config file in "/packages/koenig-lexical/.eslintrc.cjs". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe pull request introduces enhancements to the Call To Action (CTA) card, focusing on the implementation of a toggle for a sponsor label. Changes include the addition of Changes
Sequence DiagramsequenceDiagram
participant User
participant CtaCard
participant CallToActionNode
User->>CtaCard: Click sponsor label toggle
CtaCard->>CallToActionNode: updateHasSponsorLabel()
CallToActionNode-->>CtaCard: Toggle hasSponsorLabel
CtaCard-->>User: Update sponsor label visibility
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx (1)
66-72: Remove redundant comment.The comment on line 69 is unnecessary as the code is self-explanatory. Consider removing it for cleaner code.
const handleHasSponsorLabelChange = (val) => { editor.update(() => { const node = $getNodeByKey(nodeKey); - // get the current value and toggle it node.hasSponsorLabel = !node.hasSponsorLabel; }); };packages/koenig-lexical/test/e2e/cards/cta-card.test.js (1)
178-186: Consider a more descriptive test name.While the test implementation is good, consider making the test name more descriptive to better indicate what's being tested.
- test('can toggle has sponsor label', async function () { + test('toggles sponsor label visibility when clicking the toggle button', async function () {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx(2 hunks)packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx(2 hunks)packages/koenig-lexical/test/e2e/cards/cta-card.test.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Node 20.11.1
🔇 Additional comments (2)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx (1)
97-97: LGTM!The handler is properly connected to the CtaCard component.
packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx (1)
128-128: LGTM!Test IDs are consistently named and properly placed on both the toggle control and the label display.
Also applies to: 228-228
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx (2)
65-69: Clean up the implementation ofhandleHasSponsorLabelChange.The function has a few minor issues:
- The
valparameter is unused- The comment is redundant
- There appears to be a missing closing brace
Apply this diff to clean up the implementation:
- const handleHasSponsorLabelChange = (val) => { + const handleHasSponsorLabelChange = () => { editor.update(() => { const node = $getNodeByKey(nodeKey); - // get the current value and toggle it node.hasSponsorLabel = !node.hasSponsorLabel; + }); + };
Line range hint
11-29: Consider migrating to TypeScript for better type safety.Adding TypeScript or at least PropTypes would help catch issues like unused parameters and provide better documentation of the component's interface. This would be especially helpful for props like
hasSponsorLabelthat have specific boolean behaviors.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx(2 hunks)packages/koenig-lexical/test/e2e/cards/cta-card.test.js(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/koenig-lexical/test/e2e/cards/cta-card.test.js
🔇 Additional comments (1)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx (1)
100-100: LGTM!The
updateHasSponsorLabelprop is correctly connected to the new handler function, enabling the sponsor label toggle functionality as intended.
ref https://linear.app/ghost/issue/PLG-314/add-sponsor-label-toggle-on-cta-card
Summary by CodeRabbit
New Features
Tests