Protect Components: Use @wordpress/dataviews/wp import path #41510

nateweller · 2025-02-03T16:46:30Z

See WordPress/gutenberg#66825 for more info on the @wordpress/dataviews/wp import path.

Proposed changes:

Changes instances of import ... from '@wordpress/dataviews' to import ... from '@wordpress/dataviews/wp'.
See Protect's webpack config for an example of how the components will be transpiled.

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

peb6dq-3ta-p2

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

No

Testing instructions:

Review automated tests, ensure all passing.
Manually test the ThreatsDataViews and ScanReport components.
- Option A - Storybook: cd projects/js-packages/storybook && pnpm storybook:dev
- Option B - Smoke test the Jetpack Protect plugin

github-actions · 2025-02-03T16:47:21Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/components/dataviews-wp-import branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/components/dataviews-wp-import

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/components/dataviews-wp-import

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-02-03T16:47:33Z

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 a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ 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.

github-actions · 2025-02-03T17:00:51Z

Code Coverage Summary

Cannot generate coverage summary while tests are failing. 🤐

Please fix the tests, or re-run the Code coverage job if it was something being flaky.

Full summary · PHP report · JS report

nateweller · 2025-02-03T22:13:45Z

Build currently fails with the following:

In GitHub build (logs):

[plugins/jetpack 2:09.374] [build-production-extensions] ERROR in ../../../node_modules/.pnpm/@[email protected]_patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze_@[email protected][email protected]/node_modules/@wordpress/dataviews/build-wp/index.js 8555:0-65
[plugins/jetpack 2:09.374] [build-production-extensions] Module not found: Error: Can't resolve '@wordpress/date' in '/home/runner/work/jetpack/jetpack/node_modules/.pnpm/@[email protected]_patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze_@[email protected][email protected]/node_modules/@wordpress/dataviews/build-wp'
[plugins/jetpack 2:09.374] [build-production-extensions] resolve '@wordpress/date' in '/home/runner/work/jetpack/jetpack/node_modules/.pnpm/@[email protected]_patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze_@[email protected][email protected]/node_modules/@wordpress/dataviews/build-wp'
[plugins/jetpack 2:09.374] [build-production-extensions]   Parsed request is a module
[plugins/jetpack 2:09.374] [build-production-extensions]   using description file: /home/runner/work/jetpack/jetpack/node_modules/.pnpm/@[email protected]_patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze_@[email protected][email protected]/node_modules/@wordpress/dataviews/package.json (relative path: ./build-wp)
[plugins/jetpack 2:09.374] [build-production-extensions]     Field 'browser' doesn't contain a valid alias configuration
[plugins/jetpack 2:09.374] [build-production-extensions]     resolve as module
[plugins/jetpack 2:09.374] [build-production-extensions]       /home/runner/work/jetpack/jetpack/node_modules/.pnpm/@[email protected]_patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze_@[email protected][email protected]/node_modules/@wordpress/dataviews/build-wp/node_modules doesn't exist or is not a directory

When running locally (jetpack build plugins/protect --production -v I get something different:

ERROR in index.js:60:6036: domain argument (index 2) is missing: (0,s.__)("Select item")

anomiex · 2025-02-04T22:16:14Z

pnpm-lock.yaml

You've got a lot of accidental downgrades going on here. You should probably do something like git fetch && git checkout $( git merge-base HEAD origin/add/protect/core ) pnpm-lock.yaml && pnpm dedupe to regnerate this file.

.pnpmfile.cjs

nateweller · 2025-02-07T18:52:55Z

This PR has been updated. Summary of changes:

Adds missing deps to .pnpmfile.cjs.
Updates Protect's build config:

Targets the specific @wordpress/dataviews/build-wp path for the replace textdomain rule.
Adds custom functions map to the replace textdomain config.

Rebased and rebuilt pnpm to address unintentional downgrades.

Currently looking into why the JS Tests are failing:

[plugins/jetpack] [test-extensions] FAIL extensions/blocks/goodreads/test/validate.js
[plugins/jetpack] [test-extensions]   ● Test suite failed to run
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     Jest encountered an unexpected token
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     By default "node_modules" folder is ignored by transformers.
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     Here's what you can do:
[plugins/jetpack] [test-extensions]      • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
[plugins/jetpack] [test-extensions]      • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
[plugins/jetpack] [test-extensions]      • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
[plugins/jetpack] [test-extensions]      • If you need a custom transformation specify a "transform" option in your config.
[plugins/jetpack] [test-extensions]      • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     You'll find more details and examples of these config options in the docs:
[plugins/jetpack] [test-extensions]     https://jestjs.io/docs/configuration
[plugins/jetpack] [test-extensions]     For information about custom transformations, see:
[plugins/jetpack] [test-extensions]     https://jestjs.io/docs/code-transformation
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     Details:
[plugins/jetpack] [test-extensions] 
[plugins/jetpack]     /home/runner/work/jetpack/jetpack/node_modules/.pnpm/@[email protected]_patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze_@[email protected][email protected]/node_modules/@wordpress/dataviews/build-wp/index.js:8
[plugins/jetpack] [test-extensions]     import clsx from "clsx";
[plugins/jetpack] [test-extensions]     ^^^^^^
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]     SyntaxError: Cannot use import statement outside a module
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]        6 | 	type Threat,
[plugins/jetpack] [test-extensions]        7 | } from '@automattic/jetpack-scan';
[plugins/jetpack] [test-extensions]     >  8 | import {
[plugins/jetpack] [test-extensions]          | ^
[plugins/jetpack] [test-extensions]        9 | 	type Field,
[plugins/jetpack] [test-extensions]       10 | 	type FieldType,
[plugins/jetpack] [test-extensions]       11 | 	type Filter,
[plugins/jetpack] [test-extensions] 
[plugins/jetpack] [test-extensions]       at Runtime.createScriptFromCode (../../../node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1505:14)
[plugins/jetpack] [test-extensions]       at Object.require (../../js-packages/components/components/threats-data-views/index.tsx:8:1)
[plugins/jetpack] [test-extensions]       at Object.require (../../js-packages/components/index.ts:49:1)
[plugins/jetpack] [test-extensions]       at Object.require (../../js-packages/connection/components/connect-screen/basic/visual.tsx:1:1)
[plugins/jetpack] [test-extensions]       at Object.require (../../js-packages/connection/components/connect-screen/basic/index.tsx:4:1)
[plugins/jetpack] [test-extensions]       at Object.require (../../js-packages/connection/index.jsx:20:1)
[plugins/jetpack] [test-extensions]       at Object.require (../../js-packages/shared-extension-utils/src/hooks/use-analytics.js:2:1)
[plugins/jetpack] [test-extensions]       at Object.require (../../js-packages/shared-extension-utils/index.js:18:1)
[plugins/jetpack] [test-extensions]       at Object.require (extensions/blocks/goodreads/edit.js:1:1)
[plugins/jetpack] [test-extensions]       at Object.require (extensions/blocks/goodreads/test/validate.js:3:1)

The above error is introduced when switching between importing from @wordpress/dataviews to @wordpress/dataviews/wp. This might be resolved when we migrate the threats components into their own package, where there could be a different Jest config.

Co-authored-by: Brad Jorsch <[email protected]>

anomiex · 2025-02-10T19:43:32Z

The test failure looks like the same thing as described in the "ESM" section of WordPress/gutenberg#67897. TL;DR: The way @wordpress/dataviews is set up, the file is supposed to contain CommonJS, but it actually contains ESM. We currently have a hack around it for the normal import, but we can't do the same for the /wp entry point because there's no CommonJS build of that to point at.

nateweller changed the base branch from trunk to add/protect/core February 3, 2025 16:46

github-actions bot added [JS Package] Components [Status] In Progress RNA labels Feb 3, 2025

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Feb 3, 2025

nateweller self-assigned this Feb 3, 2025

nateweller force-pushed the add/components/dataviews-wp-import branch from 8cc7233 to 65b7cd0 Compare February 3, 2025 21:31

github-actions bot added the [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. label Feb 3, 2025

nateweller force-pushed the add/components/dataviews-wp-import branch from 33306a4 to dd2f628 Compare February 4, 2025 20:30

nateweller force-pushed the add/protect/core branch from 31495ea to 9da5046 Compare February 4, 2025 21:09

nateweller force-pushed the add/components/dataviews-wp-import branch from 65e404a to 907c3b8 Compare February 4, 2025 21:11

anomiex reviewed Feb 4, 2025

View reviewed changes

nateweller force-pushed the add/protect/core branch from 1ad1cae to 4386869 Compare February 5, 2025 22:42

nateweller force-pushed the add/components/dataviews-wp-import branch 2 times, most recently from dbeb4ff to 672faeb Compare February 6, 2025 01:34

nateweller force-pushed the add/protect/core branch from ed169af to 18acf38 Compare February 9, 2025 01:02

nateweller force-pushed the add/components/dataviews-wp-import branch from 672faeb to 45cf11f Compare February 9, 2025 02:14

github-actions bot added the [Package] Protect Status label Feb 9, 2025

nateweller force-pushed the add/protect/core branch from d8c8932 to fb4fcf1 Compare February 9, 2025 21:55

nateweller added 6 commits February 9, 2025 14:56

Init project branch

9633458

Init project branch

4644928

minor adjustments

33b77fc

Init project branch

4b13484

Init project branch

0de3241

Import from @wordpress/dataviews/wp instead of @wordpress/dataviews

09b9e2d

nateweller and others added 11 commits February 9, 2025 14:56

Add missing deps to .pnpmfile.cjs

d3941a0

Update pnpm-lock.yaml

df4416d

Change target version for missing deps to @wordpress/dataviews 4.12.0

1791902

Only target the /wp import path for transpilation

0bbb378

Add more missing deps to pnpmfile

4b590d0

Fix transpilation of dataviews for Jetpack Protect

42d2496

changelog

8d55b07

Regenerate pnpm.lock

0cd0079

Update .pnpmfile.cjs

d5d4226

Co-authored-by: Brad Jorsch <[email protected]>

Update pnpm-lock.yaml

332a427

Remove unintentional changes introduced during rebase

c97a1b2

nateweller force-pushed the add/components/dataviews-wp-import branch from d9c496f to c97a1b2 Compare February 9, 2025 21:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Protect Components: Use @wordpress/dataviews/wp import path #41510

Protect Components: Use @wordpress/dataviews/wp import path #41510

nateweller commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

nateweller commented Feb 3, 2025 •

edited

Loading

anomiex Feb 4, 2025

nateweller commented Feb 7, 2025 •

edited

Loading

anomiex commented Feb 10, 2025

Protect Components: Use @wordpress/dataviews/wp import path #41510

Are you sure you want to change the base?

Protect Components: Use @wordpress/dataviews/wp import path #41510

Conversation

nateweller commented Feb 3, 2025 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

github-actions bot commented Feb 3, 2025 • edited Loading

github-actions bot commented Feb 3, 2025 • edited Loading

github-actions bot commented Feb 3, 2025 • edited Loading

Code Coverage Summary

nateweller commented Feb 3, 2025 • edited Loading

anomiex Feb 4, 2025

Choose a reason for hiding this comment

nateweller commented Feb 7, 2025 • edited Loading

anomiex commented Feb 10, 2025

nateweller commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

nateweller commented Feb 3, 2025 •

edited

Loading

nateweller commented Feb 7, 2025 •

edited

Loading