Update traffic boost footer UI #3329
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (2)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 WalkthroughWalkthroughThe updates introduce a "Regenerate" button with a new icon to the PreviewFooter, adjust button icons and labels for consistency, and move the regenerate action handler from the header to the footer. CSS changes enable footer action buttons to wrap and center. Notification messages and icons are simplified and standardized. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PreviewFooter
participant AppLogic
User->>PreviewFooter: Click "Regenerate" button
PreviewFooter->>AppLogic: onRegeneratePressed()
AppLogic-->>PreviewFooter: (Triggers regeneration logic)
sequenceDiagram
participant User
participant PreviewFooter
participant NotificationSystem
User->>PreviewFooter: Perform link action (plant, remove, update)
PreviewFooter->>NotificationSystem: Show success message ("Link planted", "Link removed", "Link updated")
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-footer.tsx (1)
77-84: Well-implemented regenerate button component.Created a reusable button component for the regenerate functionality that can be inserted in multiple locations. The button includes appropriate labeling, icon, and variant styling.
However, consider adding a JSDoc comment for this variable to improve code documentation.
+/** + * Reusable regenerate button component. + * + * @since 3.19.0 + */ const regenerateButton = <Button variant="tertiary" icon={ reusableBlock } iconSize={ 24 } onClick={ onRegeneratePressed } label={ __( 'Regenerate Suggested Link', 'wp-parsely' ) } >{ __( 'Regenerate', 'wp-parsely' ) }</Button>;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
⛔ Files ignored due to path filters (4)
build/content-helper/dashboard-page-rtl.cssis excluded by!build/**build/content-helper/dashboard-page.asset.phpis excluded by!build/**build/content-helper/dashboard-page.cssis excluded by!build/**build/content-helper/dashboard-page.jsis excluded by!build/**
📒 Files selected for processing (6)
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-footer.tsx(7 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-header.tsx(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.scss(1 hunks)src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx(4 hunks)src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/tabs/suggestions-tab.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
`**/*.{html,php}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the HTML and PHP code to ensure it is well-structured and adheres ...
**/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards and is well-documented.
- Confirm the code is secure and free from vulnerabilities.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php
`**/*.{js,ts,tsx,jsx}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the code to ensure it is well-structured and adheres to best ...
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/tabs/suggestions-tab.tsxsrc/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-header.tsxsrc/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsxsrc/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-footer.tsx
`**/*.{css,scss}`: "Perform a detailed review of the provided code with following key aspects in mind: - Review the SCSS code to ensure it is well-structured and adheres to best ...
**/*.{css,scss}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the SCSS code to ensure it is well-structured and adheres to best practices.
- Convert dimensions greater than or equal to 3px to rem units using the to_rem function.
- Utilize variables for sizes and colors defined in src/content-helper/common/css/variables.scss instead of hardcoding values."
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.scss
🧬 Code Graph Analysis (1)
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-footer.tsx (2)
src/content-helper/dashboard-page/pages/traffic-boost/store.ts (2)
isAccepting(809-811)isRemoving(812-814)src/content-helper/common/components/vertical-divider/component.tsx (1)
VerticalDivider(26-32)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: E2E against WordPress latest
🔇 Additional comments (21)
src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.scss (1)
216-217: Good improvement to the footer layout's responsiveness!Adding
flex-wrap: wrapandjustify-content: centerimproves the user experience by allowing buttons to flow to a new line when needed and remain visually balanced. This supports the relocated regenerate button and other action buttons, ensuring they display correctly on smaller screens.src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php (1)
17-22: Good defensive coding practice!Using conditional checks before defining the constants prevents potential PHP notices when these constants might already be defined elsewhere. The PHPCS ignore comments are correctly applied for the non-prefixed constants.
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/tabs/suggestions-tab.tsx (3)
7-7: Icon import updated correctly.The change from
updatetoreusableBlockicon aligns with the UI consistency improvements in the PR.
83-83: Button icon updated for consistency.The GenerateButton component now uses the
reusableBlockicon, maintaining visual consistency with other regenerate buttons in the interface.
246-246: Success notification icon updated for consistency.The success notification now displays the
reusableBlockicon, which matches the icon used in the related action buttons throughout the UI.src/content-helper/dashboard-page/pages/traffic-boost/preview/preview.tsx (4)
304-304: Simplified notification message.Removing the post title from the success message makes the notification cleaner and less verbose, improving the user experience.
394-394: Simplified notification message.Removing the post title from the link removal success message makes the notification cleaner and less verbose.
459-459: Simplified notification message.Removing the post title from the link update success message makes the notification cleaner and less verbose.
627-627: Properly relocated regenerate functionality.The regenerate action handler has been moved from the header to the footer, which aligns with the UI changes described in the PR objectives. This improves the location of related actions by grouping them together in the footer.
src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-header.tsx (1)
7-7: Icon import update looks good.The removal of the
updateicon from imports aligns with relocating the regenerate action from the header to the footer component, as mentioned in the PR objectives.src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-footer.tsx (11)
8-8: Properly updated icon imports.Added the necessary icons for the updated UI components:
check,close,reusableBlock, andundo. This follows WordPress coding standards by importing only the icons that are actually used in the component.
27-27: Interface prop addition is correct.Added the
onRegeneratePressedcallback to thePreviewFooterPropsinterface, which is necessary for the relocated regenerate functionality.
56-56: Component prop destructuring updated correctly.The
onRegeneratePressedcallback is properly destructured from the component props, matching the interface update.
110-111: Improved Accept button with icon.Added the check icon to the Accept button when not in the busy state, which improves visual communication. The conditional icon display correctly handles the busy state.
115-117: Button improvements and Regenerate placement.Renamed "Discard" to "Reject" which is more intuitive, added the close icon for clarity, and properly placed the regenerate button. This improves the UI by providing clearer action labeling and consistent iconography.
124-127: Enhanced Clear changes button with undo icon.Added the undo icon to the Clear changes button, which visually communicates the purpose of the action. This is a good UI improvement that follows WordPress design patterns.
142-143: Improved Update Link button.Added the check icon to the Update Link button when not in busy state, providing consistent visual feedback across action buttons. The conditional icon display correctly handles the busy state.
154-154: Proper placement of regenerate button for link update scenario.Added the regenerate button in the appropriate location for the link update workflow. This provides a consistent user experience across different states of the component.
159-162: Enhanced Clear changes button with undo icon.Added the undo icon to another instance of the Clear changes button, maintaining consistent UI patterns across the component.
167-173: Improved Remove Link button with dynamic styling.Enhanced the Remove Link button with these improvements:
- Dynamic variant switching between primary (when busy) and tertiary (when idle)
- Conditional icon display that shows the close icon only when not busy
- Renamed from "Remove" to "Remove Link" for clarity
This implements the PR objective of showing a busy background animation while processing.
174-174: Proper placement of regenerate button for link removal scenario.Added the regenerate button in the appropriate location for the link removal workflow, ensuring consistency across different states of the component.
Description
The traffic boost footer bar was updated with these changes:
The regenerate action and icon has been moved from the toolbar into the footer, by the accept/reject buttons:
Icons were added to the "Accept", "Reject", "Regenerate", "Remove Link", "Update Link", and "Clear Changes" buttons.
The "Remove Link" button has a busy background while processing:
A handful of snackbar notices were changed in this commit to be less wordy, with one example in the GIF above.
The preview footer toolbar resizes responsively:
Other minor icon changes.
How has this been tested?
I've tested locally, see screenshots above.
Summary by CodeRabbit
New Features
Improvements
Bug Fixes