-
Notifications
You must be signed in to change notification settings - Fork 800
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
My Jetpack: add slider for recommendations section in My Jetpack #39850
Conversation
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available. Follow this PR Review Process:
Still unsure? Reach out in #jetpack-developers for guidance! Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Backup plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Boost plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Search plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Social plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Starter Plugin plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Protect plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Videopress plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Migration plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I love the attention to detail - animation of buttons is 🔥
I left couple of remarks, some of them might not be bugs, but features - feel free to treat them as opinions.
When there are only 2 cards, the first one gets stretched:
I think I would expect cards to be displayed fully, or not at all. In this case, I would not expect the 4th card to be visible partially - instead, only 3 cards, and then on the scroll/arrow right, the 4th card would enter the viewport, and 1st card would leave. It's just my thought though - understand if the intentions were different. Maybe we could bring that up for design to check on? cc @ilonagl
...s/packages/my-jetpack/_inc/data/evaluation-recommendations/use-evaluation-recommendations.ts
Show resolved
Hide resolved
// We filter out owned modules, and return top 3 recommendations | ||
return recommendedModules?.filter( module => ! ownedProducts.includes( module ) ).slice( 0, 3 ); | ||
// We filter out owned modules, and return the top recommendations | ||
return recommendedModules |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably we will want to change the backend behavior to return only recommendations we actually want to show.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be addressed in a follow-up IMO.
Thanks for the feedback. |
Yes, we discussed this with @IanRamosC and thought it would help users understand that there are more cards available. |
b57e9e9
to
2b9479c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks pretty good! I had a few comments in the code and an issue I found with mobile views. After those are addressed I think we should be good to ship
On mobile views, the slider can get into a weird state, see below:
scrolling-issue.mov
I think the easiest fix for this would be to make the maximum width of the cards the width of the screen minus padding/margin. Looking at the My Jetpack cards, they seem to have this:
projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx
Outdated
Show resolved
Hide resolved
const { recordEvent } = useAnalytics(); | ||
const { recommendedModules, redoEvaluation, removeEvaluationResult } = | ||
useEvaluationRecommendations(); | ||
const [ isAtStart, setIsAtStart ] = useState( true ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure it's necessary to extract it in this PR, but I think it would be nice if all this scroll stuff was in a component called something like <ScrollContainer />
. Not sure how easy/realistic it is to make it reusable like that but I think that would be best case scenario 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's a good idea to make that reusable, but I don't think that should be the case for now, since we are not really using it anywhere else (and I can't imagine another use of it in the foreseeable future).
projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested functionality. It works and looks great! 🙌
Other than the weird state it can get into, mentioned by Dylan above (although which I did not notice during my testing), everything worked great and looks great from a functionality point of view. 👍
And same with the code, other than the comments by Dylan, the code looks all good to me!
LGTM! 👍 But I'll defer the final approval to @CodeyGuyDylan since he's requested some small changes. 🙂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool, the weird scrolling state that was occurring in mobile view is fixed and works great now! 💪
Everything LGTM! 👍
Proposed changes:
Container
component to acceptref
as a propScreen.Recording.2024-10-23.at.16.49.11.mov
Other information:
Jetpack product discussion
pbNhbs-bvL-p2#comment-23588
Does this pull request change what data or activity we track or use?
It adds two tracks events, one to each arrow button.
Testing instructions: