Protect: Add FreeList and PaidList pagination #39058

dkmyta · 2024-08-23T20:36:33Z

Description

Add pagination to the current FreeList and PaidList components

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

https://github.com/Automattic/jetpack-scan-team/issues/1369

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Checkout this branch using the beta tester on JN site with many threats (over 10)
Let the initial Protect report generate the results
Verify the the list is paginated when over 10 threats exist
Upgrade and allow the first scan to detect the threats as well
Verify that the list is paginated when over 10 threats exist
Fixed or ignore all threats and proceed to the History tab
Verify that the list is paginated when over 10 threats exist
Ensure no regressions are introduced

Screenshots

Desktop:

Mobile:

github-actions · 2024-08-23T20:37:38Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

Protect plugin:

Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

nateweller · 2024-08-29T22:14:09Z

projects/plugins/protect/src/js/components/threats-list/pagination.jsx

+						disabled={ currentPage === 1 }
+						variant={ 'secondary' }
+					>
+						{ '<' }


Suggestion: could use an icon here from @wordpress/icons

nateweller · 2024-08-29T22:26:49Z

Design wise, could we match the pagination in Jetpack Boost or CRM?

IMO this could make a great component for the Jetpack design library, if you wanted to take this task further. I'm happy to merge this directly into Protect first though.

Boost:

CRM:

nateweller · 2024-08-29T22:30:08Z

projects/plugins/protect/src/js/components/threats-list/pagination.jsx

+		setCurrentPage( pageNumber );
+	}, [] );
+
+	const [ isSmall, setIsSmall ] = useState( window.matchMedia( '(max-width: 1220px)' ).matches );


Could useBreakpointMatch be useful here?

I started with useBreakpointMatch but found that we seem to have a unique requirement with how our UI shifts in various viewports that was not exactly covered by the options it provided (isSm, isMd, isLg).

dkmyta · 2024-08-29T22:38:35Z

Design wise, could we match the pagination in Jetpack Boost or CRM

I'll look into it!

nateweller · 2024-08-30T20:35:49Z

@dkmyta I found a Figma file which might be useful! TTzDk3dzct551hYWRXPFa3-fi-7790_96468

projects/plugins/protect/src/js/components/threats-list/styles.module.scss

nateweller · 2024-09-05T00:47:50Z

Looking good and testing well 👍

Sketched out some suggestions in #39249

nateweller

Very nice enhancement to the threats UI! Looks good works good LGTM 👍

* Add threats list pagination * changelog * Add items per page constant, and handling * Fix mobile view * Simplify and consolidate * Fix versions * Use custom media query to improve responsiveness * Revert versions updates * Update and improve implementation * Compact * Set iconSize on parent component level * Adjustments to pagination design and accessibility (#39249) --------- Co-authored-by: Nate Weller <[email protected]>

dkmyta added 2 commits August 23, 2024 13:34

Add threats list pagination

aafab14

changelog

b532fc1

github-actions bot added [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Status] In Progress labels Aug 23, 2024

dkmyta added 5 commits August 23, 2024 13:47

Add items per page constant, and handling

53bec44

Fix mobile view

7d05854

Simplify and consolidate

30ff337

Fix versions

36572b5

Use custom media query to improve responsiveness

747775e

dkmyta marked this pull request as ready for review August 26, 2024 20:11

dkmyta requested a review from a team August 26, 2024 20:11

dkmyta self-assigned this Aug 26, 2024

dkmyta and others added 2 commits August 27, 2024 10:05

Merge branch 'trunk' into add/protect-threats-list-pagination

31bbab3

Revert versions updates

7fb67ed

nateweller reviewed Aug 29, 2024

View reviewed changes

dkmyta added 2 commits September 3, 2024 15:38

Update and improve implementation

0091879

Compact

907e538

nateweller reviewed Sep 4, 2024

View reviewed changes

projects/plugins/protect/src/js/components/threats-list/styles.module.scss Outdated Show resolved Hide resolved

Set iconSize on parent component level

34e9ee8

Adjustments to pagination design and accessibility (#39249)

34ea4ec

nateweller approved these changes Sep 5, 2024

View reviewed changes

nateweller added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] In Progress labels Sep 5, 2024

dkmyta merged commit b0faef5 into trunk Sep 5, 2024
55 checks passed

dkmyta deleted the add/protect-threats-list-pagination branch September 5, 2024 02:55

github-actions bot removed the [Status] Ready to Merge Go ahead, you can push that green button! label Sep 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Protect: Add FreeList and PaidList pagination #39058

Protect: Add FreeList and PaidList pagination #39058

dkmyta commented Aug 23, 2024 •

edited

Loading

github-actions bot commented Aug 23, 2024

nateweller Aug 29, 2024

nateweller commented Aug 29, 2024

nateweller Aug 29, 2024

dkmyta Aug 29, 2024

dkmyta commented Aug 29, 2024

nateweller commented Aug 30, 2024

nateweller commented Sep 5, 2024

nateweller left a comment •

edited

Loading

Protect: Add FreeList and PaidList pagination #39058

Protect: Add FreeList and PaidList pagination #39058

Conversation

dkmyta commented Aug 23, 2024 • edited Loading

Description

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Screenshots

github-actions bot commented Aug 23, 2024

nateweller Aug 29, 2024

Choose a reason for hiding this comment

nateweller commented Aug 29, 2024

nateweller Aug 29, 2024

Choose a reason for hiding this comment

dkmyta Aug 29, 2024

Choose a reason for hiding this comment

dkmyta commented Aug 29, 2024

nateweller commented Aug 30, 2024

nateweller commented Sep 5, 2024

nateweller left a comment • edited Loading

Choose a reason for hiding this comment

dkmyta commented Aug 23, 2024 •

edited

Loading

nateweller left a comment •

edited

Loading