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'.
Updates Protect's webpack config for compatibility.

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 WoA dev 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 (Jetpack or WordPress.com Site Helper), and enable the add/components/dataviews-wp-import branch.
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 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 🤖

🔴 Action required: Please add missing changelog entries for the following projects: projects/js-packages/scan, projects/plugins/protect

Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Protect plugin:

Next scheduled release: April 1, 2025

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.

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.

see also: #41510

ntsekouras · 2025-02-12T13:40:19Z

.pnpmfile.cjs

+	// Missing deps.
+	// https://github.com/WordPress/gutenberg/issues/67864
+	if ( pkg.name === '@wordpress/dataviews' ) {
+		for ( const dep of [


How did you compile this list? Was it by looking at the errors during building?

I don't remember how I got it for WordPress/gutenberg#67864. 😀 Possibly that, or possibly by grepping build-wp/index.js for import statements and then removing the ones that are already dependencies of @wordpress/dataviews.

ntsekouras · 2025-02-12T13:43:33Z

projects/plugins/protect/webpack.config.js

+								{
+									textdomain: 'jetpack-protect',
+									functions: {
+										__: 1,


Why do we need the functions object here?

Was the compiling manual? If yes, would that mean updating things here if the core DataViews package adds more i18n functions in its code?

The real problem is that build-wp/index.js isn't preserving the names of the @wordpress/i18n functions. Instead it does a lot of aliasing like import { __ as __9 } from '@wordpress/i18n';.

It turns out that Webpack as used in this particular PR currently winds up undoing all the bad import aliasing, going back to the correct __ name so GlotPress's use of wp i18n will pick up the strings from the bundle. But @automattic/babel-plugin-replace-textdomain (which runs long before Webpack fixes it) needs this to know to inject the correct textdomain into all the aliased calls, because the translations won't be in Core's default domain.

Someday, when Core distributes @wordpress/dataviews like it does @wordpress/components and other packages, none of this will be needed because both the script and translations will come from Core instead of having to be bundled with the plugin. It's unfortunate that we're currently in this situation where @wordpress/dataviews is too unstable for Core to provide but everyone wants to start using it anyway.

dkmyta

A beautiful thing to see this working in Protect now without Gutenberg - very nicely done!

That said, I wasn't able to get the Storybooks to load with various @wordpress+dataviews webpack specific build errors running the provided command. Perhaps I need to reinstall or clear/rebuild something but each of the combinations I tried that have worked previously didn't seem to help or caused other issues. Is it working for you? If so, any recommendations on how to get that configured properly?

There's one error for '@wordpress/hooks' and another for '@wordpress/date' - example:

ERROR in ../../../node_modules/.pnpm/@[email protected]_patch_hash=9971bdb899e2fb0a4421ab8b7f0a54a41f03b10ef1b51d72_b9a36bf3010841a36adc99ad3275ff5d/node_modules/@wordpress/dataviews/build-wp/index.js 422:0-44
Module not found: Error: Can't resolve '@wordpress/hooks' in '/Users/dkmyta/dev/jetpack/node_modules/.pnpm/@[email protected]_patch_hash=9971bdb899e2fb0a4421ab8b7f0a54a41f03b10ef1b51d72_b9a36bf3010841a36adc99ad3275ff5d/node_modules/@wordpress/dataviews/build-wp'

anomiex · 2025-03-25T14:22:22Z

Sigh. I guess @wordpress/hooks and @wordpress/date need to be added to the list after all.

I'd probably include a comment to point out the difference between these and the rest.

// Needed for storybook to build with the /wp endpoint. Normal builds don't need them due to dependency extraction.
'@wordpress/date',
'@wordpress/hooks',

nateweller · 2025-03-25T19:31:31Z

Storybooks are working nicely with the wordpress deps added 👍

dkmyta

LGTM!

The same requests/nit-picks I've outlined here apply, but I think we can go ahead and merge this into the project branch and deal with those in trunk.

UPDATE: I've approved, but there are some outstanding failing tests.

This reverts commit e4f9321.

nateweller · 2025-03-29T20:29:36Z

projects/js-packages/scan/src/components/threats-data-views/test/index.test.jsx

🤔 The change to using the @wordpress/dataviews/wp import path appears to break tests that use the dataviews package... removed this basic render test for now.

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 need more details from you. This label will be auto-added until the PR meets all requirements. 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 force-pushed the add/components/dataviews-wp-import branch from d9c496f to c97a1b2 Compare February 9, 2025 21:56

ntsekouras added a commit that referenced this pull request Feb 12, 2025

use /dataviews/wp import path

0536b69

see also: #41510

ntsekouras added a commit that referenced this pull request Feb 12, 2025

use /dataviews/wp import path

f6d1e36

see also: #41510

ntsekouras reviewed Feb 12, 2025

View reviewed changes

nateweller added the [Status] Needs Review This PR is ready for review. label Mar 24, 2025

github-actions bot added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Mar 24, 2025

dkmyta reviewed Mar 25, 2025

View reviewed changes

nateweller requested a review from dkmyta March 25, 2025 19:30

nateweller added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Mar 25, 2025

github-actions bot added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Mar 25, 2025

dkmyta approved these changes Mar 25, 2025

View reviewed changes

nateweller force-pushed the add/protect/core-3 branch from 5ec6013 to 9499f09 Compare March 25, 2025 21:34

nateweller force-pushed the add/components/dataviews-wp-import branch from cbcf1bc to b9cad5f Compare March 25, 2025 21:35

nateweller force-pushed the add/protect/core-3 branch from 9499f09 to bcbb401 Compare March 25, 2025 22:27

nateweller force-pushed the add/components/dataviews-wp-import branch from b9cad5f to a104f99 Compare March 25, 2025 22:28

nateweller force-pushed the add/protect/core-3 branch from bcbb401 to ae2effe Compare March 29, 2025 18:28

nateweller added 2 commits March 29, 2025 12:29

Use /wp import path with dataviews package

9edd2dd

Add missing wordpress deps to dataviews build process for storybook

a8761cf

nateweller force-pushed the add/components/dataviews-wp-import branch from a104f99 to a8761cf Compare March 29, 2025 18:30

Remove initial ThreatsDataViews test

e4f9321

github-actions bot added the [Tests] Includes Tests label Mar 29, 2025

nateweller added 2 commits March 29, 2025 13:25

Revert "Remove initial ThreatsDataViews test"

ae2cb0d

This reverts commit e4f9321.

Fix tests

53d1977

nateweller commented Mar 29, 2025

View reviewed changes

Remove tests and stories from build

dda7f23

nateweller merged commit 2f760d6 into add/protect/core-3 Mar 29, 2025
75 of 78 checks passed

nateweller deleted the add/components/dataviews-wp-import branch March 29, 2025 21:23

github-actions bot removed the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Mar 29, 2025

nateweller added a commit that referenced this pull request Mar 30, 2025

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

ea5282d

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

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

Uh oh!

Conversation

nateweller commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

github-actions bot commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

nateweller commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

anomiex Feb 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nateweller commented Feb 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

anomiex commented Feb 10, 2025

Uh oh!

ntsekouras Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

anomiex Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ntsekouras Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

anomiex Feb 13, 2025

Choose a reason for hiding this comment

Uh oh!

dkmyta left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anomiex commented Mar 25, 2025

Uh oh!

nateweller commented Mar 25, 2025

Uh oh!

dkmyta left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nateweller Mar 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

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

anomiex Feb 13, 2025 •

edited

Loading

dkmyta left a comment •

edited

Loading

dkmyta left a comment •

edited

Loading