diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7054e946f8af8..7d8e6b960550d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -290,6 +290,9 @@ importers:
'@automattic/jetpack-boost-score-api':
specifier: workspace:*
version: link:../boost-score-api
+ '@automattic/jetpack-scan':
+ specifier: workspace:*
+ version: link:../scan
'@babel/runtime':
specifier: ^7
version: 7.24.7
@@ -305,6 +308,9 @@ importers:
'@wordpress/data':
specifier: 10.9.0
version: 10.9.0(react@18.3.1)
+ '@wordpress/dataviews':
+ specifier: 4.6.0
+ version: 4.6.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@wordpress/date':
specifier: 5.9.0
version: 5.9.0
@@ -1157,12 +1163,6 @@ importers:
'@automattic/jetpack-base-styles':
specifier: workspace:*
version: link:../base-styles
- '@automattic/jetpack-connection':
- specifier: workspace:*
- version: link:../connection
- '@automattic/jetpack-shared-extension-utils':
- specifier: workspace:*
- version: link:../shared-extension-utils
'@wordpress/api-fetch':
specifier: 7.9.0
version: 7.9.0
@@ -5680,6 +5680,10 @@ packages:
resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
engines: {node: '>=6.9.0'}
+ '@babel/runtime@7.25.7':
+ resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==}
+ engines: {node: '>=6.9.0'}
+
'@babel/template@7.25.7':
resolution: {integrity: sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==}
engines: {node: '>=6.9.0'}
@@ -7695,6 +7699,10 @@ packages:
webpack-dev-server:
optional: true
+ '@wordpress/a11y@4.10.0':
+ resolution: {integrity: sha512-fp7C0Ofy95a+jzK126CxAXV+uXSFQs2Clm6PCeE9Y1BowUiL9l7juUCh1R+2NDAKATxH4r3QplxVftDqn+ctUw==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/a11y@4.9.0':
resolution: {integrity: sha512-OfM/wnB8ItmGM5I/u+4E4aJdqvy98kg24zrS+CqPLgq3eYG6MNkIQJZov/I3XcsyxGjLkkLsybEM5xEYUN0ZtA==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7770,6 +7778,13 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
+ '@wordpress/components@28.10.0':
+ resolution: {integrity: sha512-w5mteCe9qOBMgD8d80QBVOPk0YAquUkMD9o3jDvdqUwiTcVgxn4QSKjh65NGYotvMhDsgsMTq+qgifAB+ubepg==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ react: ^18.0.0
+ react-dom: ^18.0.0
+
'@wordpress/components@28.9.0':
resolution: {integrity: sha512-/ept6OSWAh4bdZwlhU8TwJe9QM6rqjAXVA08H0wymtjdRbAQiuDsmMfLFKCF1M4hGZeeThAD5YF0ZkBK5iCeCA==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7777,6 +7792,12 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
+ '@wordpress/compose@7.10.0':
+ resolution: {integrity: sha512-/j4+wXthaV/KMt0VANvhhRJEJfPc21c7Tq1ZeLxgsbkq4xmi9qXeDT91cvP/U+Ta3phf15K8vdxMr8MqHHiFoQ==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ react: ^18.0.0
+
'@wordpress/compose@7.9.0':
resolution: {integrity: sha512-6f1mZLwMD2woFSMLJ5JaCZQZz1kFD2X4gwT5c4IVnzpm+/9A0OqeTdncAi6I6wHRtKN9DzvaMQPuZitQz7HmNA==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7797,6 +7818,12 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
+ '@wordpress/data@10.10.0':
+ resolution: {integrity: sha512-oyYl89p86+U9W6vKDqScKhUGKKzsnETj9rg8zOnT4K9ceOScjGCgdCE+XxcY9exeRg33aSYDjmvnsXXYStBYmA==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ react: ^18.0.0
+
'@wordpress/data@10.9.0':
resolution: {integrity: sha512-hw8VYSPZuEqlEwRnQnKgqzbwCqoGY4U5kLCZA/1McOYspvkIceTVve4qBC17QUJhu2pLEXEc6p4zBpy+SXfToQ==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7809,6 +7836,16 @@ packages:
peerDependencies:
react: ^18.0.0
+ '@wordpress/dataviews@4.6.0':
+ resolution: {integrity: sha512-DdlKg1ojGjkgS0z0GHfALOYcsMU7+8Gwzi+GFqRcfGdVOn9SiKY5pMEULFki3RkF3Nh61FEpViRxNczHJhOKCg==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ react: ^18.0.0
+
+ '@wordpress/date@5.10.0':
+ resolution: {integrity: sha512-TT9HN0H72Eqhlaiy+XMDyZBlTBf2iZ936Q2tJdxsB4qBlG2ntLT3PviIPa+G44QYYxLomrUqTEYQ6FBxiJaNHg==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/date@5.9.0':
resolution: {integrity: sha512-Iywz1bga3cPSrf7k4dh2mYVsACqzu0GXYhfu57ElAM9robGjcUxJdzgbWUZw90v473NOp2UpVYsWCuDEqNDcdw==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7819,14 +7856,26 @@ packages:
peerDependencies:
webpack: ^5.0.0
+ '@wordpress/deprecated@4.10.0':
+ resolution: {integrity: sha512-lktJKX3AxrskTuLbJuKY/Mzg9De6MYcOzEEL+RUHxfIx8wMtiDnVTAf7epur9XuHVOmdgCCRT6D44I23MoS0sw==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/deprecated@4.9.0':
resolution: {integrity: sha512-1PMCLULxTlI0iatsHxpPgtogMfvd/wvAqAOLGHUdkdbBtUEquGrRMo/h+TLU/ne2JDf5JKMA4ntQV6zDNO4+eg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/dom-ready@4.10.0':
+ resolution: {integrity: sha512-qpadyGMRvLf7zOe4XtoIo409ZRJ7IrBI36fdEXjRWV8E+Cmcx3ldr5/2iLKJ2cqYg9geQWXDeiykSWOClNJx+w==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/dom-ready@4.9.0':
resolution: {integrity: sha512-Kas5YaRl+HebAxFfv9ctB8bdmjbhISIBo747nXCK6KqojQ/Zn2Bctv2XTypR3GMb7OS7KqVMeyCJhjEpuc8Wlw==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/dom@4.10.0':
+ resolution: {integrity: sha512-1ZRCrDB2TV44GLwaUH9HRGQGQqXcawSEmzVPABQwfwzkUKijfbRdsWqpHrTLqlSZRImHEdp6oSON+1JmCNhXSw==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/dom@4.9.0':
resolution: {integrity: sha512-g9jRTxOpSfygEbKNGwYwx21b5GktI2SkwQSAPKpG4mmFAvLbqIzjVc2nkudRO914DKgPWrBsfKsc4Smbtpbkig==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7845,10 +7894,18 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
+ '@wordpress/element@6.10.0':
+ resolution: {integrity: sha512-7zW+14vHqEn45nszSLMUqE5IbzOtvgUUgF56qlMhwabpG4l/zhaj3gO3wLDI19C13ih1vOdSjzPc3At4fB3tRQ==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/element@6.9.0':
resolution: {integrity: sha512-G5W29cxfAVc/JQBzkKoXh1t4T+G3HWa1kIgXCqIZksonlYHzCVON1Or+rD/YJZSxT6RDkBVDzdl9p0pGOrccTg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/escape-html@3.10.0':
+ resolution: {integrity: sha512-3glY3MhXEHlPP0/hrS3vkRmAOHtutvoHGhkr8vnva6TLg4CsAeo42nYbuFJ+ukVMWdCtmV+28UjOeiYtG/fZOA==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/escape-html@3.9.0':
resolution: {integrity: sha512-+/SnVUXzzr+0pgfAqK3pocGveSDS3SHrgJ1BTgV7DA1l6y9mbjnqKgFQkNW/nzca92ZuYg2vjLcq1dqDGz4v1Q==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7890,19 +7947,38 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
+ '@wordpress/hooks@4.10.0':
+ resolution: {integrity: sha512-LcorV5Z9XoJCKyj5Ulgw1HPHyM2mxsSInC7wl5cuIgDFmuwPTfRndUDGWz/v86GX1GnUIB0h/ggd53vx1HiW4A==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/hooks@4.9.0':
resolution: {integrity: sha512-nan2w5imPhTaJwWdKjm/0ZMDbWR3P6Vhl4OqnBZZcJqOyNSfwsnJ98I+BWjq0U6SmiCnZQERjN0SjVdmD1tCjw==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/html-entities@4.10.0':
+ resolution: {integrity: sha512-Bnop0k3yjtRhm4CedbsGG22OMLEeob4mYmTR9z0g0QP7OofEw1TINspizr+kQbOu4n1ubJ6YVC8T13Z2va1j0g==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/html-entities@4.9.0':
resolution: {integrity: sha512-RaiMecK8Igqb4yreJncSZEBl6DR1eAj8M3mHwrJASJLiiBLcaWg0oi8iiabUEmgGCsIu2pCeXmV+8WO0FRDO5Q==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/i18n@5.10.0':
+ resolution: {integrity: sha512-HZ6UcMHsjOocDI0zVAuP4JIl97LRmpGo/lVxzVIreaLoYitmYVDUzji02u1o7sEdRWc1Hpkm2/oO/9275rJg1w==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ hasBin: true
+
'@wordpress/i18n@5.9.0':
resolution: {integrity: sha512-pKFV9S/l0TFlm0mlWLW51hAoRDNmZPGnfEpNXq43VKZkm1cco3Z1E54PHMGk8HdCECHqYNiJuQJOBOlqcYmnVQ==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
hasBin: true
+ '@wordpress/icons@10.10.0':
+ resolution: {integrity: sha512-41HaxMtq0WZF37mpZ1RQ1s1J3ia5gHFUd/uGhP9p1dhzEFYALxKVTB0Gy3cJhT0CslKeEwYx2XQIP1ZaCKNakQ==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ react: ^18
+
'@wordpress/icons@10.9.0':
resolution: {integrity: sha512-mAkqhlbbPiuR6yBOczunqyxQ2Pez1XB7gAZnnsP5DlTKsYnJQ12N0Ql4Oh8f1LI+UeF18VMtHes12sWK/1LQHQ==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7924,6 +8000,10 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
+ '@wordpress/is-shallow-equal@5.10.0':
+ resolution: {integrity: sha512-KOkZzOnmjpH7hzPiaXUjhUlfKIGTzL7qUdNHBC1SFDOYpnRUSw8f1AtWxRpPBHl5dieYVx0x1qjOWjm/DtTOXg==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/is-shallow-equal@5.9.0':
resolution: {integrity: sha512-cKqgI6RQ27ZZRo4Zc/jioG3qInDKQqcT3xg5YxsduX2f1b6vQV42p0L4waLFeJZQ8WDUsgsR53AQivdInkO8gA==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7940,6 +8020,10 @@ packages:
peerDependencies:
react: ^18.0.0
+ '@wordpress/keycodes@4.10.0':
+ resolution: {integrity: sha512-2i+N90HBMqQegtGqeVB8pJz8ZgKAY1eZmQegE9MXczYVac85DDOoxhY/41c44s6Kwl3waJ2Zght6UXE0OUFMxw==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/keycodes@4.9.0':
resolution: {integrity: sha512-WO4MPlO+uGaDP5jYB9f4hn0NgBwvlaUvj4MLOIDcQGE0ljElLGFeXvqjVH0KVtnZkIKiZNPK7eoQxTWnxWaTjw==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7987,20 +8071,40 @@ packages:
peerDependencies:
prettier: '>=3'
+ '@wordpress/primitives@4.10.0':
+ resolution: {integrity: sha512-dmck1VSKbxy7yA5VZhi+jOyb0Hc6QqOxIZ4R139a/Zuzr0xHuuKurh94At/R9UHYP8Dr9YxAlgiF/uQChFzKQg==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ react: ^18.0.0
+
'@wordpress/primitives@4.9.0':
resolution: {integrity: sha512-vroiqxd+MP/K1+KEJqMAR/B/++4oShY4CisvMOK3gn75DmUV2QB6iQmBSjHRALqw9rqeHf7S0jLHWiFrAR+Dkg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
peerDependencies:
react: ^18.0.0
+ '@wordpress/priority-queue@3.10.0':
+ resolution: {integrity: sha512-Gjbw5NmRLrZ9KkiROJlL4I/s96bMlpd7gGkQbcCyyeLIZduGxQDzI4Jih5s0Xrm7Gj8WFd57wRDe/voZJR0ZsQ==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/priority-queue@3.9.0':
resolution: {integrity: sha512-QVfELUL4ei5Uf0DNG9wMVNBILasGWWWogVjVeP1xXqmfSDoeFpPzXpfL9zfANndE2S49DJP9ZoZsCaJHtMrYzA==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/private-apis@1.10.0':
+ resolution: {integrity: sha512-gH6ZHmkc01MC431nMyjxFmU/77jVliOwjuv6SffQUgHMJyM75LiKC8CU8LEeLWbn3obG87m/n7Quj5p2MjtaeA==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/private-apis@1.9.0':
resolution: {integrity: sha512-hZbKVSlo5yOpssMshXwNlUyk83Ev55ZKMfJMVU5nWxiIM9bMCuhpwU+AXQ0GKxOzn2oMayVmtJ00FRbJFg+AMg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/redux-routine@5.10.0':
+ resolution: {integrity: sha512-oDqZDjz8H/bt02IEoIZCwsUsL17UOEnMg/heV0PoJxo3k5MTrvqJqzgBLoSC0PFzx/pwOo4TwvwCL+kjjm5gCQ==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ redux: '>=4'
+
'@wordpress/redux-routine@5.9.0':
resolution: {integrity: sha512-eEb/otHMhOwVUydb5kErV3X+1R8qQ2hrLmlWIh+kiiKwFJVCl3ge/xN8Tiy1kEBEqgGRgPqxuLvNPZDd0ySpNg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -8014,6 +8118,12 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
+ '@wordpress/rich-text@7.10.0':
+ resolution: {integrity: sha512-2sl/KPRq2ygAiRcs/La733OguL9xIT4uKRA5XpCIWNAqTX7f2kzY5YRn05iJfCxDC+GcDKcHl0JX4ZbFxZn5SA==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ peerDependencies:
+ react: ^18.0.0
+
'@wordpress/rich-text@7.9.0':
resolution: {integrity: sha512-GN2SGz8bVkdCVVskvJSgul4wKyq/qaXRmEJSrk3LMHuAbxHL5FFkwRHaOhnHScNz+P1bdEehCqgP8DB3yv+IEw==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -8049,6 +8159,10 @@ packages:
resolution: {integrity: sha512-mnwh8WcA9//DVwwZVfEaFHfIK1RaNQ8QvhD1fOtjJWjheS12QsQwjdlGTgvBVl66ErP65GdK7BM1pTv6NI0GwA==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+ '@wordpress/undo-manager@1.10.0':
+ resolution: {integrity: sha512-WaLwZ+AlfXQm9PhLf6kwCBaD5DoKaIqelRsgAaqa4APjgMBlxktQ1dadime0CO9+e8R2kLwAE3rxQXhGjicRMw==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/undo-manager@1.9.0':
resolution: {integrity: sha512-JLrcmeCTqITbChkJy+PeXcE03+6ZgIfQ22cBg1+0mzLQxglx1gndTnhRcnCSebvsXnmOVmxvE4HmJ84lv7liCQ==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -8063,6 +8177,10 @@ packages:
peerDependencies:
react: ^18.0.0
+ '@wordpress/warning@3.10.0':
+ resolution: {integrity: sha512-IhvIBhhzsNYuLT61ZtKWm7oMg4G0x//eQD8dlnsBA4edP8BiX1VzwA3wCtz9+QdEFzraPJAq9NG4RPxGQas4Nw==}
+ engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
'@wordpress/warning@3.9.0':
resolution: {integrity: sha512-c+bEWwDjp3+Q7SAGb47CuZe56giBFNvutoyiAkn34pQZeO8pRjPElRABIkR7oyn4dEusjL1f6OQmU3dSYAMTpg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -15212,6 +15330,10 @@ snapshots:
dependencies:
regenerator-runtime: 0.14.1
+ '@babel/runtime@7.25.7':
+ dependencies:
+ regenerator-runtime: 0.14.1
+
'@babel/template@7.25.7':
dependencies:
'@babel/code-frame': 7.25.7
@@ -17793,6 +17915,12 @@ snapshots:
dependencies:
webpack-cli: 4.9.1(webpack@5.94.0)
+ '@wordpress/a11y@4.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/dom-ready': 4.10.0
+ '@wordpress/i18n': 5.10.0
+
'@wordpress/a11y@4.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -18228,6 +18356,60 @@ snapshots:
- '@types/react-dom'
- supports-color
+ '@wordpress/components@28.10.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+ dependencies:
+ '@ariakit/react': 0.4.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@babel/runtime': 7.25.7
+ '@emotion/cache': 11.13.1
+ '@emotion/css': 11.13.4
+ '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
+ '@emotion/serialize': 1.3.2
+ '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+ '@emotion/utils': 1.4.1
+ '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@types/gradient-parser': 0.1.3
+ '@types/highlight-words-core': 1.2.1
+ '@use-gesture/react': 10.3.1(react@18.3.1)
+ '@wordpress/a11y': 4.10.0
+ '@wordpress/compose': 7.10.0(react@18.3.1)
+ '@wordpress/date': 5.10.0
+ '@wordpress/deprecated': 4.10.0
+ '@wordpress/dom': 4.10.0
+ '@wordpress/element': 6.10.0
+ '@wordpress/escape-html': 3.10.0
+ '@wordpress/hooks': 4.10.0
+ '@wordpress/html-entities': 4.10.0
+ '@wordpress/i18n': 5.10.0
+ '@wordpress/icons': 10.10.0(react@18.3.1)
+ '@wordpress/is-shallow-equal': 5.10.0
+ '@wordpress/keycodes': 4.10.0
+ '@wordpress/primitives': 4.10.0(react@18.3.1)
+ '@wordpress/private-apis': 1.10.0
+ '@wordpress/rich-text': 7.10.0(react@18.3.1)
+ '@wordpress/warning': 3.10.0
+ change-case: 4.1.2
+ clsx: 2.1.1
+ colord: 2.9.3
+ date-fns: 3.6.0
+ deepmerge: 4.3.1
+ fast-deep-equal: 3.1.3
+ framer-motion: 11.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ gradient-parser: 0.1.5
+ highlight-words-core: 1.2.3
+ is-plain-object: 5.0.0
+ memize: 2.1.0
+ path-to-regexp: 6.3.0
+ re-resizable: 6.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ react: 18.3.1
+ react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ react-dom: 18.3.1(react@18.3.1)
+ remove-accents: 0.5.0
+ uuid: 9.0.1
+ transitivePeerDependencies:
+ - '@emotion/is-prop-valid'
+ - '@types/react'
+ - supports-color
+
'@wordpress/components@28.9.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@ariakit/react': 0.4.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -18336,6 +18518,23 @@ snapshots:
- '@types/react'
- supports-color
+ '@wordpress/compose@7.10.0(react@18.3.1)':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@types/mousetrap': 1.6.15
+ '@wordpress/deprecated': 4.10.0
+ '@wordpress/dom': 4.10.0
+ '@wordpress/element': 6.10.0
+ '@wordpress/is-shallow-equal': 5.10.0
+ '@wordpress/keycodes': 4.10.0
+ '@wordpress/priority-queue': 3.10.0
+ '@wordpress/undo-manager': 1.10.0
+ change-case: 4.1.2
+ clipboard: 2.0.11
+ mousetrap: 1.6.5
+ react: 18.3.1
+ use-memo-one: 1.1.3(react@18.3.1)
+
'@wordpress/compose@7.9.0(react@18.2.0)':
dependencies:
'@babel/runtime': 7.24.7
@@ -18524,6 +18723,25 @@ snapshots:
- supports-color
- utf-8-validate
+ '@wordpress/data@10.10.0(react@18.3.1)':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/compose': 7.10.0(react@18.3.1)
+ '@wordpress/deprecated': 4.10.0
+ '@wordpress/element': 6.10.0
+ '@wordpress/is-shallow-equal': 5.10.0
+ '@wordpress/priority-queue': 3.10.0
+ '@wordpress/private-apis': 1.10.0
+ '@wordpress/redux-routine': 5.10.0(redux@4.2.1)
+ deepmerge: 4.3.1
+ equivalent-key-map: 0.2.2
+ is-plain-object: 5.0.0
+ is-promise: 4.0.0
+ react: 18.3.1
+ redux: 4.2.1
+ rememo: 4.0.2
+ use-memo-one: 1.1.3(react@18.3.1)
+
'@wordpress/data@10.9.0(react@18.2.0)':
dependencies:
'@babel/runtime': 7.24.7
@@ -18606,6 +18824,35 @@ snapshots:
- react-dom
- supports-color
+ '@wordpress/dataviews@4.6.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+ dependencies:
+ '@ariakit/react': 0.4.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@babel/runtime': 7.25.7
+ '@wordpress/components': 28.10.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@wordpress/compose': 7.10.0(react@18.3.1)
+ '@wordpress/data': 10.10.0(react@18.3.1)
+ '@wordpress/element': 6.10.0
+ '@wordpress/i18n': 5.10.0
+ '@wordpress/icons': 10.10.0(react@18.3.1)
+ '@wordpress/primitives': 4.10.0(react@18.3.1)
+ '@wordpress/private-apis': 1.10.0
+ '@wordpress/warning': 3.10.0
+ clsx: 2.1.1
+ react: 18.3.1
+ remove-accents: 0.5.0
+ transitivePeerDependencies:
+ - '@emotion/is-prop-valid'
+ - '@types/react'
+ - react-dom
+ - supports-color
+
+ '@wordpress/date@5.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/deprecated': 4.10.0
+ moment: 2.29.4
+ moment-timezone: 0.5.46
+
'@wordpress/date@5.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -18618,15 +18865,29 @@ snapshots:
json2php: 0.0.7
webpack: 5.94.0(webpack-cli@4.9.1)
+ '@wordpress/deprecated@4.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/hooks': 4.10.0
+
'@wordpress/deprecated@4.9.0':
dependencies:
'@babel/runtime': 7.24.7
'@wordpress/hooks': 4.9.0
+ '@wordpress/dom-ready@4.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+
'@wordpress/dom-ready@4.9.0':
dependencies:
'@babel/runtime': 7.24.7
+ '@wordpress/dom@4.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/deprecated': 4.10.0
+
'@wordpress/dom@4.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -18897,6 +19158,17 @@ snapshots:
- supports-color
- utf-8-validate
+ '@wordpress/element@6.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@types/react': 18.3.3
+ '@types/react-dom': 18.3.0
+ '@wordpress/escape-html': 3.10.0
+ change-case: 4.1.2
+ is-plain-object: 5.0.0
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+
'@wordpress/element@6.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -18908,6 +19180,10 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
+ '@wordpress/escape-html@3.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+
'@wordpress/escape-html@3.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -19064,14 +19340,31 @@ snapshots:
- '@types/react-dom'
- supports-color
+ '@wordpress/hooks@4.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+
'@wordpress/hooks@4.9.0':
dependencies:
'@babel/runtime': 7.24.7
+ '@wordpress/html-entities@4.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+
'@wordpress/html-entities@4.9.0':
dependencies:
'@babel/runtime': 7.24.7
+ '@wordpress/i18n@5.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/hooks': 4.10.0
+ gettext-parser: 1.4.0
+ memize: 2.1.0
+ sprintf-js: 1.1.3
+ tannin: 1.2.0
+
'@wordpress/i18n@5.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -19081,6 +19374,13 @@ snapshots:
sprintf-js: 1.1.2
tannin: 1.2.0
+ '@wordpress/icons@10.10.0(react@18.3.1)':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/element': 6.10.0
+ '@wordpress/primitives': 4.10.0(react@18.3.1)
+ react: 18.3.1
+
'@wordpress/icons@10.9.0(react@18.3.1)':
dependencies:
'@babel/runtime': 7.24.7
@@ -19144,6 +19444,10 @@ snapshots:
- '@types/react'
- supports-color
+ '@wordpress/is-shallow-equal@5.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+
'@wordpress/is-shallow-equal@5.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -19162,6 +19466,11 @@ snapshots:
'@wordpress/keycodes': 4.9.0
react: 18.3.1
+ '@wordpress/keycodes@4.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/i18n': 5.10.0
+
'@wordpress/keycodes@4.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -19347,6 +19656,13 @@ snapshots:
dependencies:
prettier: wp-prettier@3.0.3
+ '@wordpress/primitives@4.10.0(react@18.3.1)':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/element': 6.10.0
+ clsx: 2.1.1
+ react: 18.3.1
+
'@wordpress/primitives@4.9.0(react@18.3.1)':
dependencies:
'@babel/runtime': 7.24.7
@@ -19354,15 +19670,32 @@ snapshots:
clsx: 2.1.1
react: 18.3.1
+ '@wordpress/priority-queue@3.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ requestidlecallback: 0.3.0
+
'@wordpress/priority-queue@3.9.0':
dependencies:
'@babel/runtime': 7.24.7
requestidlecallback: 0.3.0
+ '@wordpress/private-apis@1.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+
'@wordpress/private-apis@1.9.0':
dependencies:
'@babel/runtime': 7.24.7
+ '@wordpress/redux-routine@5.10.0(redux@4.2.1)':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ is-plain-object: 5.0.0
+ is-promise: 4.0.0
+ redux: 4.2.1
+ rungen: 0.3.2
+
'@wordpress/redux-routine@5.9.0(redux@4.2.1)':
dependencies:
'@babel/runtime': 7.24.7
@@ -19443,6 +19776,20 @@ snapshots:
- supports-color
- utf-8-validate
+ '@wordpress/rich-text@7.10.0(react@18.3.1)':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/a11y': 4.10.0
+ '@wordpress/compose': 7.10.0(react@18.3.1)
+ '@wordpress/data': 10.10.0(react@18.3.1)
+ '@wordpress/deprecated': 4.10.0
+ '@wordpress/element': 6.10.0
+ '@wordpress/escape-html': 3.10.0
+ '@wordpress/i18n': 5.10.0
+ '@wordpress/keycodes': 4.10.0
+ memize: 2.1.0
+ react: 18.3.1
+
'@wordpress/rich-text@7.9.0(react@18.3.1)':
dependencies:
'@babel/runtime': 7.24.7
@@ -19537,6 +19884,11 @@ snapshots:
dependencies:
'@babel/runtime': 7.24.7
+ '@wordpress/undo-manager@1.10.0':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@wordpress/is-shallow-equal': 5.10.0
+
'@wordpress/undo-manager@1.9.0':
dependencies:
'@babel/runtime': 7.24.7
@@ -19555,6 +19907,8 @@ snapshots:
'@wordpress/element': 6.9.0
react: 18.3.1
+ '@wordpress/warning@3.10.0': {}
+
'@wordpress/warning@3.9.0': {}
'@wordpress/widgets@4.9.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
diff --git a/projects/js-packages/components/changelog/add-threats-data-view-component b/projects/js-packages/components/changelog/add-threats-data-view-component
new file mode 100644
index 0000000000000..ce943e85a6b6a
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-threats-data-view-component
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ThreatsDataView component
diff --git a/projects/js-packages/components/components/badge/index.tsx b/projects/js-packages/components/components/badge/index.tsx
new file mode 100644
index 0000000000000..4ca1044e60f6b
--- /dev/null
+++ b/projects/js-packages/components/components/badge/index.tsx
@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import React from 'react';
+import styles from './style.module.scss';
+
+type BadgeProps = {
+ children?: React.ReactNode;
+ className?: string;
+ variant?: 'success' | 'warning' | 'danger';
+ [ key: string ]: unknown;
+};
+
+/**
+ * Badge component
+ *
+ * @param {object} props - The component properties.
+ * @param {string} props.variant - The badge variant (i.e. 'success', 'warning', 'danger').
+ * @param {JSX.Element} props.children - Badge text or content.
+ * @param {string} props.className - Additional class name to pass to the Badge component.
+ *
+ * @return {React.ReactElement} The `Badge` component.
+ */
+const Badge: React.FC< BadgeProps > = ( { children, className, variant = 'info', ...props } ) => {
+ const classes = clsx(
+ styles.badge,
+ {
+ [ styles[ 'is-success' ] ]: variant === 'success',
+ [ styles[ 'is-warning' ] ]: variant === 'warning',
+ [ styles[ 'is-danger' ] ]: variant === 'danger',
+ },
+ className
+ );
+ return (
+
+ { children }
+
+ );
+};
+
+export default Badge;
diff --git a/projects/js-packages/components/components/badge/stories/index.stories.tsx b/projects/js-packages/components/components/badge/stories/index.stories.tsx
new file mode 100644
index 0000000000000..c74ac1c476897
--- /dev/null
+++ b/projects/js-packages/components/components/badge/stories/index.stories.tsx
@@ -0,0 +1,22 @@
+import Badge from '../index';
+
+export default {
+ title: 'JS Packages/Components/Badge',
+ component: Badge,
+ argTypes: {
+ type: {
+ control: {
+ type: 'select',
+ },
+ options: [ 'info', 'danger', 'warning', 'success' ],
+ },
+ },
+};
+
+const Template = args => ;
+
+export const _default = Template.bind( {} );
+_default.args = {
+ type: 'info',
+ children: 'Hello World',
+};
diff --git a/projects/js-packages/components/components/badge/style.module.scss b/projects/js-packages/components/components/badge/style.module.scss
new file mode 100644
index 0000000000000..a305d7c2520a0
--- /dev/null
+++ b/projects/js-packages/components/components/badge/style.module.scss
@@ -0,0 +1,25 @@
+.badge {
+ display: inline-block;
+ border-radius: 4px;
+ background-color: var(--jp-gray-0);
+ color: var(--jp-gray-80);
+ padding: 4px 8px;
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 16px;
+
+ &.is-success {
+ background-color: var(--jp-green-5);
+ color: var(--jp-green-50);
+ }
+
+ &.is-warning {
+ background-color: var(--jp-yellow-5);
+ color: var(--jp-yellow-60);
+ }
+
+ &.is-danger {
+ background-color: var(--jp-red-5);
+ color: var(--jp-red-70);
+ }
+}
diff --git a/projects/js-packages/components/components/threat-fixer-button/index.tsx b/projects/js-packages/components/components/threat-fixer-button/index.tsx
new file mode 100644
index 0000000000000..95788ac4334e7
--- /dev/null
+++ b/projects/js-packages/components/components/threat-fixer-button/index.tsx
@@ -0,0 +1,135 @@
+import { Button, Text, ActionPopover } from '@automattic/jetpack-components';
+import { CONTACT_SUPPORT_URL, type Threat, fixerStatusIsStale } from '@automattic/jetpack-scan';
+import { ExternalLink } from '@wordpress/components';
+import { createInterpolateElement, useCallback, useMemo, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import styles from './styles.module.scss';
+
+/**
+ * Threat Fixer Button component.
+ *
+ * @param {object} props - Component props.
+ * @param {object} props.threat - The threat.
+ * @param {Function} props.onClick - The onClick function.
+ * @param {string} props.className - The className.
+ *
+ * @return {JSX.Element} The component.
+ */
+export default function ThreatFixerButton( {
+ threat,
+ className,
+ onClick,
+}: {
+ threat: Threat;
+ onClick: ( items: Threat[] ) => void;
+ className?: string;
+} ): JSX.Element {
+ const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+
+ const [ anchor, setAnchor ] = useState( null );
+
+ const children = useMemo( () => {
+ if ( ! threat.fixable ) {
+ return null;
+ }
+ if ( threat.fixer && threat.fixer.error ) {
+ return __( 'Error', 'jetpack' );
+ }
+ if ( threat.fixer && threat.fixer.status === 'in_progress' ) {
+ return __( 'Fixing…', 'jetpack' );
+ }
+ if ( threat.fixable.fixer === 'delete' ) {
+ return __( 'Delete', 'jetpack' );
+ }
+ if ( threat.fixable.fixer === 'update' ) {
+ return __( 'Update', 'jetpack' );
+ }
+ return __( 'Fix', 'jetpack' );
+ }, [ threat.fixable, threat.fixer ] );
+
+ const errorMessage = useMemo( () => {
+ if ( threat.fixer && fixerStatusIsStale( threat.fixer ) ) {
+ return __( 'Fixer is taking longer than expected.', 'jetpack' );
+ }
+
+ if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) {
+ return __( 'An error occurred auto-fixing this threat.', 'jetpack' );
+ }
+
+ return null;
+ }, [ threat.fixer ] );
+
+ const handleClick = useCallback(
+ ( event: React.MouseEvent ) => {
+ event.stopPropagation();
+ if ( errorMessage && ! isPopoverVisible ) {
+ setIsPopoverVisible( true );
+ return;
+ }
+ onClick( [ threat ] );
+ },
+ [ onClick, errorMessage, isPopoverVisible, threat ]
+ );
+
+ const closePopover = useCallback( () => {
+ setIsPopoverVisible( false );
+ }, [] );
+
+ if ( ! threat.fixable ) {
+ return null;
+ }
+
+ return (
+
+
+ { isPopoverVisible && (
+
+
+ { createInterpolateElement(
+ sprintf(
+ /* translators: placeholder is an error message. */
+ __(
+ '%s Please try again or contact support.',
+ 'jetpack'
+ ),
+ errorMessage
+ ),
+ {
+ supportLink: (
+
+ ),
+ }
+ ) }
+
+
+ ) }
+
- { severityText( severity ) }
-
- );
+ return { _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ) };
};
export default ThreatSeverityBadge;
diff --git a/projects/js-packages/components/components/threats-data-views/constants.ts b/projects/js-packages/components/components/threats-data-views/constants.ts
new file mode 100644
index 0000000000000..721ebcd7f4034
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/constants.ts
@@ -0,0 +1,16 @@
+import { __ } from '@wordpress/i18n';
+
+export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] =
+ [
+ { value: 'current', label: __( 'Active', 'jetpack' ), variant: 'warning' },
+ { value: 'fixed', label: __( 'Fixed', 'jetpack' ), variant: 'success' },
+ { value: 'ignored', label: __( 'Ignored', 'jetpack' ) },
+ ];
+
+export const THREAT_TYPES = [
+ { value: 'plugin', label: __( 'Plugin', 'jetpack' ) },
+ { value: 'theme', label: __( 'Theme', 'jetpack' ) },
+ { value: 'core', label: __( 'WordPress', 'jetpack' ) },
+ { value: 'file', label: __( 'File', 'jetpack' ) },
+ { value: 'database', label: __( 'Database', 'jetpack' ) },
+];
diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx
new file mode 100644
index 0000000000000..1f99304d6cff1
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -0,0 +1,486 @@
+import { getThreatType, type Threat } from '@automattic/jetpack-scan';
+import {
+ Action,
+ ActionButton,
+ DataViews,
+ Field,
+ FieldType,
+ Filter,
+ filterSortAndPaginate,
+ SortDirection,
+ SupportedLayouts,
+ type View,
+} from '@wordpress/dataviews';
+import { dateI18n } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { code, color, grid, plugins, shield, wordpress } from '@wordpress/icons';
+import { useCallback, useMemo, useState } from 'react';
+import Badge from '../badge';
+import ThreatFixerButton from '../threat-fixer-button';
+import ThreatSeverityBadge from '../threat-severity-badge';
+import { THREAT_STATUSES, THREAT_TYPES } from './constants';
+import styles from './styles.module.scss';
+
+/**
+ * DataViews component for displaying security threats.
+ *
+ * @param {object} props - Component props.
+ * @param {Array} props.data - Threats data.
+ * @param {Array} props.filters - Initial DataView filters.
+ * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
+ * @param {Function} props.onFixThreats - Threat fix action callback.
+ * @param {Function} props.onIgnoreThreats - Threat ignore action callback.
+ * @param {Function} props.onUnignoreThreats - Threat unignore action callback.
+ * @param {Function} props.isThreatEligibleForFix - Function to determine if a threat is eligible for fixing.
+ * @param {Function} props.isThreatEligibleForIgnore - Function to determine if a threat is eligible for ignoring.
+ * @param {Function} props.isThreatEligibleForUnignore - Function to determine if a threat is eligible for unignoring.
+ *
+ * @return {JSX.Element} The ThreatsDataViews component.
+ */
+export default function ThreatsDataViews( {
+ data,
+ filters,
+ onChangeSelection,
+ isThreatEligibleForFix,
+ isThreatEligibleForIgnore,
+ isThreatEligibleForUnignore,
+ onFixThreats,
+ onIgnoreThreats,
+ onUnignoreThreats,
+}: {
+ data: Threat[];
+ filters?: Filter[];
+ onChangeSelection?: ( selectedItemIds: string[] ) => void;
+ isThreatEligibleForFix?: ( threat: Threat ) => boolean;
+ isThreatEligibleForIgnore?: ( threat: Threat ) => boolean;
+ isThreatEligibleForUnignore?: ( threat: Threat ) => boolean;
+ onFixThreats?: ( threats: Threat[] ) => void;
+ onIgnoreThreats?: ActionButton< Threat >[ 'callback' ];
+ onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
+} ): JSX.Element {
+ const baseView = {
+ sort: {
+ field: 'severity',
+ direction: 'desc' as SortDirection,
+ },
+ search: '',
+ filters: filters || [],
+ page: 1,
+ perPage: 20,
+ };
+
+ /**
+ * DataView default layouts.
+ *
+ * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
+ */
+ const defaultLayouts: SupportedLayouts = {
+ table: {
+ ...baseView,
+ fields: [ 'severity', 'threat', 'type', 'auto-fix' ],
+ layout: {
+ primaryField: 'severity',
+ combinedFields: [
+ {
+ id: 'threat',
+ label: __( 'Threat', 'jetpack' ),
+ children: [ 'title', 'description' ],
+ direction: 'vertical',
+ },
+ ],
+ },
+ },
+ list: {
+ ...baseView,
+ fields: [ 'severity', 'type', 'signature' ],
+ layout: {
+ primaryField: 'title',
+ mediaField: 'icon',
+ },
+ },
+ };
+
+ /**
+ * DataView view object - configures how the dataset is visible to the user.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
+ */
+ const [ view, setView ] = useState< View >( {
+ type: 'table',
+ ...defaultLayouts.table,
+ } );
+
+ /**
+ * Compute values from the provided threats data.
+ *
+ * @member {object} extensions - List of unique threat extensions.
+ * @member {object} signatures - List of unique threat signatures.
+ * @member {Array} dataFields - List of unique fields.
+ */
+ const {
+ extensions,
+ signatures,
+ dataFields,
+ }: {
+ extensions: { value: string; label: string }[];
+ signatures: { value: string; label: string }[];
+ dataFields: string[];
+ } = useMemo( () => {
+ return data.reduce(
+ ( acc, threat ) => {
+ // Extensions
+ if ( threat.extension ) {
+ if ( ! acc.extensions.find( ( { value } ) => value === threat.extension.slug ) ) {
+ acc.extensions.push( { value: threat.extension.slug, label: threat.extension.name } );
+ }
+ }
+
+ // Signatures
+ if ( threat.signature ) {
+ if ( ! acc.signatures.find( ( { value } ) => value === threat.signature ) ) {
+ acc.signatures.push( { value: threat.signature, label: threat.signature } );
+ }
+ }
+
+ // Fields
+ const fields = Object.keys( threat );
+ fields.forEach( field => {
+ if (
+ ! acc.dataFields.includes( field ) &&
+ threat[ field ] !== null &&
+ threat[ field ] !== undefined
+ ) {
+ acc.dataFields.push( field );
+ }
+ } );
+
+ return acc;
+ },
+ {
+ extensions: [],
+ signatures: [],
+ dataFields: [],
+ }
+ );
+ }, [ data ] );
+
+ /**
+ * DataView fields - describes the visible items for each record in the dataset.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
+ */
+ const fields = useMemo( () => {
+ const result: Field< Threat >[] = [
+ {
+ id: 'title',
+ label: __( 'Title', 'jetpack' ),
+ enableGlobalSearch: true,
+ enableHiding: false,
+ render: ( { item }: { item: Threat } ) => (
+ { item.title }
+ ),
+ },
+ {
+ id: 'description',
+ label: __( 'Description', 'jetpack' ),
+ enableGlobalSearch: true,
+ enableHiding: false,
+ render: ( { item }: { item: Threat } ) => (
+ { item.description }
+ ),
+ },
+ {
+ id: 'icon',
+ label: __( 'Icon', 'jetpack' ),
+ enableHiding: false,
+ getValue( { item }: { item: Threat } ) {
+ return getThreatType( item );
+ },
+ render( { item }: { item: Threat } ) {
+ const type = getThreatType( item );
+
+ let icon;
+ switch ( type ) {
+ case 'plugin':
+ icon = plugins;
+ break;
+ case 'theme':
+ icon = color;
+ break;
+ case 'core':
+ icon = wordpress;
+ break;
+ case 'file':
+ icon = code;
+ break;
+ case 'database':
+ icon = grid;
+ break;
+ default:
+ icon = shield;
+ }
+
+ return (
+
+
+
+ );
+ },
+ },
+ ...( dataFields.includes( 'severity' )
+ ? [
+ {
+ id: 'severity',
+ label: __( 'Severity', 'jetpack' ),
+ type: 'integer' as FieldType,
+ getValue( { item }: { item: Threat } ) {
+ return item.severity ?? 0;
+ },
+ render( { item }: { item: Threat } ) {
+ return ;
+ },
+ },
+ ]
+ : [] ),
+ {
+ id: 'status',
+ label: __( 'Status', 'jetpack' ),
+ elements: THREAT_STATUSES,
+ getValue( { item }: { item: Threat } ) {
+ if ( ! item.status ) {
+ return 'current';
+ }
+ return (
+ THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+ );
+ },
+ render( { item }: { item: Threat } ) {
+ if ( item.status ) {
+ const status = THREAT_STATUSES.find( ( { value } ) => value === item.status );
+ if ( status ) {
+ return { status.label };
+ }
+ }
+ return { __( 'Active', 'jetpack' ) };
+ },
+ },
+ {
+ id: 'extension',
+ label: __( 'Extension', 'jetpack' ),
+ enableGlobalSearch: true,
+ elements: extensions,
+ getValue( { item }: { item: Threat } ) {
+ return item.extension ? item.extension.slug : '';
+ },
+ },
+ {
+ id: 'type',
+ label: __( 'Type', 'jetpack' ),
+ elements: THREAT_TYPES,
+ getValue( { item }: { item: Threat } ) {
+ return getThreatType( item ) ?? '';
+ },
+ },
+ ...( dataFields.includes( 'signature' )
+ ? [
+ {
+ id: 'signature',
+ label: __( 'Signature', 'jetpack' ),
+ elements: signatures,
+ enableGlobalSearch: true,
+ getValue( { item }: { item: Threat } ) {
+ return item.signature || '';
+ },
+ },
+ ]
+ : [] ),
+ ...( dataFields.includes( 'fixable' )
+ ? [
+ {
+ id: 'auto-fix',
+ label: __( 'Auto-Fix', 'jetpack' ),
+ enableHiding: false,
+ elements: [
+ {
+ value: 'yes',
+ label: __( 'Yes', 'jetpack' ),
+ },
+ {
+ value: 'no',
+ label: __( 'No', 'jetpack' ),
+ },
+ ],
+ getValue( { item }: { item: Threat } ) {
+ return item.fixable ? 'yes' : 'no';
+ },
+ render( { item }: { item: Threat } ) {
+ if ( ! item.fixable ) {
+ return null;
+ }
+
+ return ;
+ },
+ },
+ ]
+ : [] ),
+ ...( dataFields.includes( 'firstDetected' )
+ ? [
+ {
+ id: 'first-detected',
+ label: __( 'First Detected', 'jetpack' ),
+ type: 'datetime' as FieldType,
+ getValue( { item }: { item: Threat } ) {
+ return item.firstDetected ? new Date( item.firstDetected ) : null;
+ },
+ render( { item }: { item: Threat } ) {
+ return item.firstDetected ? (
+
+ { dateI18n( 'F j Y', item.firstDetected, false ) }
+
+ ) : null;
+ },
+ },
+ ]
+ : [] ),
+ ...( dataFields.includes( 'fixedOn' )
+ ? [
+ {
+ id: 'fixed-on',
+ label: __( 'Fixed On', 'jetpack' ),
+ type: 'datetime' as FieldType,
+ getValue( { item }: { item: Threat } ) {
+ return item.fixedOn ? new Date( item.fixedOn ) : null;
+ },
+ render( { item }: { item: Threat } ) {
+ return item.fixedOn ? (
+
+ { dateI18n( 'F j Y', item.fixedOn, false ) }
+
+ ) : null;
+ },
+ },
+ ]
+ : [] ),
+ ];
+
+ return result;
+ }, [ dataFields, extensions, signatures, onFixThreats ] );
+
+ /**
+ * DataView actions - collection of operations that can be performed upon each record.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#actions-object
+ */
+ const actions = useMemo( () => {
+ const result: Action< Threat >[] = [];
+
+ if ( dataFields.includes( 'fixable' ) ) {
+ result.push( {
+ id: 'fix',
+ label: __( 'Auto-Fix', 'jetpack' ),
+ isPrimary: true,
+ supportsBulk: true,
+ callback: onFixThreats,
+ isEligible( item ) {
+ if ( ! onFixThreats ) {
+ return false;
+ }
+ if ( isThreatEligibleForFix ) {
+ return isThreatEligibleForFix( item );
+ }
+ return !! item.fixable;
+ },
+ } );
+ }
+
+ if ( dataFields.includes( 'status' ) ) {
+ result.push( {
+ id: 'ignore',
+ label: __( 'Ignore', 'jetpack' ),
+ isPrimary: true,
+ isDestructive: true,
+ callback: onIgnoreThreats,
+ isEligible( item ) {
+ if ( ! onIgnoreThreats ) {
+ return false;
+ }
+ if ( isThreatEligibleForIgnore ) {
+ return isThreatEligibleForIgnore( item );
+ }
+ return item.status === 'current';
+ },
+ } );
+ }
+
+ if ( dataFields.includes( 'status' ) ) {
+ result.push( {
+ id: 'un-ignore',
+ label: __( 'Unignore', 'jetpack' ),
+ isPrimary: true,
+ isDestructive: true,
+ callback: onUnignoreThreats,
+ isEligible( item ) {
+ if ( ! onUnignoreThreats ) {
+ return false;
+ }
+ if ( isThreatEligibleForUnignore ) {
+ return isThreatEligibleForUnignore( item );
+ }
+ return item.status === 'ignored';
+ },
+ } );
+ }
+
+ return result;
+ }, [
+ dataFields,
+ onFixThreats,
+ onIgnoreThreats,
+ onUnignoreThreats,
+ isThreatEligibleForFix,
+ isThreatEligibleForIgnore,
+ isThreatEligibleForUnignore,
+ ] );
+
+ /**
+ * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dataviews/src/filter-and-sort-data-view.ts
+ */
+ const { data: processedData, paginationInfo } = useMemo( () => {
+ return filterSortAndPaginate( data, view, fields );
+ }, [ data, view, fields ] );
+
+ /**
+ * Callback function to update the view state.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function
+ */
+ const onChangeView = useCallback( ( newView: View ) => {
+ setView( newView );
+ }, [] );
+
+ /**
+ * DataView getItemId function - returns the unique ID for each record in the dataset.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
+ */
+ const getItemId = useCallback( ( item: Threat ) => item.id.toString(), [] );
+
+ return (
+
+ );
+}
diff --git a/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
new file mode 100644
index 0000000000000..4693c94fdd093
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
@@ -0,0 +1,371 @@
+import ThreatsDataViews from '..';
+
+export default {
+ title: 'JS Packages/Components/Threats Data Views',
+ component: ThreatsDataViews,
+ parameters: {
+ backgrounds: {
+ default: 'light',
+ values: [ { name: 'light', value: 'white' } ],
+ },
+ },
+ decorators: [
+ Story => (
+
+
+
+ ),
+ ],
+};
+
+export const Default = args => ;
+Default.args = {
+ data: [
+ {
+ id: 185869885,
+ signature: 'EICAR_AV_Test',
+ title: 'Malicious code found in file: index.php',
+ description:
+ "This is the standard EICAR antivirus test code, and not a real infection. If your site contains this code when you don't expect it to, contact Jetpack support for some help.",
+ firstDetected: '2024-10-07T20:45:06.000Z',
+ fixedIn: null,
+ fixedOn: null,
+ severity: 8,
+ fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' },
+ fixer: { status: 'not_started' },
+ status: 'current',
+ filename: '/var/www/html/wp-content/index.php',
+ context: {
+ '1': 'echo <<
+ alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+ onIgnoreThreats: () =>
+ alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+ onUnignoreThreats: () =>
+ // eslint-disable-next-line no-alert
+ alert(
+ 'Unignore threat action callback triggered! This is handled by the component consumer.'
+ ),
+};
+
+export const FixerStatuses = args => ;
+FixerStatuses.args = {
+ data: [
+ {
+ id: 13216959,
+ signature: 'Vulnerable.WP.Core',
+ title: 'Vulnerable WordPress Version (6.4.3)',
+ description: 'This threat has an auto-fixer available. ',
+ firstDetected: '2024-07-15T21:56:50.000Z',
+ severity: 4,
+ fixer: null,
+ fixedOn: '2024-07-15T22:01:42.000Z',
+ status: 'fixed',
+ fixable: { fixer: 'update', target: '6.4.4', extensionStatus: 'inactive' },
+ version: '6.4.3',
+ source: '',
+ },
+ {
+ id: 12345678910,
+ signature: 'Vulnerable.WP.Extension',
+ title: 'Vulnerable Plugin: Example Plugin (version 1.2.3)',
+ description: 'This threat has an in-progress auto-fixer.',
+ firstDetected: '2024-10-02T17:34:59.000Z',
+ fixedIn: '1.2.4',
+ fixedOn: null,
+ severity: 3,
+ fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' },
+ fixer: { status: 'in_progress', last_updated: new Date().toISOString() },
+ status: 'current',
+ filename: null,
+ context: null,
+ source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3',
+ extension: {
+ name: 'Example Plugin',
+ slug: 'example-plugin',
+ version: '1.2.3',
+ type: 'plugin',
+ },
+ },
+ {
+ id: 12345678911,
+ signature: 'Vulnerable.WP.Extension',
+ title: 'Vulnerable Theme: Example Theme (version 2.2.2)',
+ description: 'This threat has an in-progress auto-fixer that is taking too long.',
+ firstDetected: '2024-10-02T17:34:59.000Z',
+ fixedIn: '2.22.22',
+ fixedOn: null,
+ severity: 3,
+ fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' },
+ fixer: { status: 'in_progress', last_updated: new Date( '1999-01-01' ).toISOString() },
+ status: 'current',
+ filename: null,
+ context: null,
+ source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3',
+ extension: {
+ name: 'Example Theme',
+ slug: 'example-theme',
+ version: '2.2.2',
+ type: 'theme',
+ },
+ },
+ {
+ id: 12345678912,
+ signature: 'Vulnerable.WP.Extension',
+ title: 'Vulnerable Theme: Example Theme II (version 3.3.3)',
+ description: 'This threat has a fixer with an error status.',
+ firstDetected: '2024-10-02T17:34:59.000Z',
+ fixedIn: '3.4.5',
+ fixedOn: null,
+ severity: 3,
+ fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' },
+ fixer: { status: 'error', error: 'error' },
+ status: 'current',
+ filename: null,
+ context: null,
+ source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3',
+ extension: {
+ name: 'Example Theme II',
+ slug: 'example-theme-2',
+ version: '3.3.3',
+ type: 'theme',
+ },
+ },
+ {
+ id: 185868972,
+ signature: 'EICAR_AV_Test_Suspicious',
+ title: 'Malicious code found in file: jptt_eicar.php',
+ description: 'This threat has no auto-fixer available.',
+ firstDetected: '2024-10-07T20:40:15.000Z',
+ fixedIn: null,
+ fixedOn: null,
+ severity: 1,
+ fixable: false,
+ status: 'current',
+ filename: '/var/www/html/wp-content/uploads/jptt_eicar.php',
+ context: {
+ '6': 'echo <<
+ alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+ onIgnoreThreats: () =>
+ alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+ onUnignoreThreats: () =>
+ // eslint-disable-next-line no-alert
+ alert(
+ 'Unignore threat action callback triggered! This is handled by the component consumer.'
+ ),
+};
+
+export const FreeResults = args => ;
+FreeResults.args = {
+ data: [
+ {
+ id: '1d0470df-4671-47ac-8d87-a165e8f7d502',
+ title: 'WooCommerce <= 3.2.3 - Authenticated PHP Object Injection',
+ description:
+ 'Versions 3.2.3 and earlier are affected by an issue where cached queries within shortcodes could lead to object injection. This is related to the recent WordPress 4.8.3 security release.This issue can only be exploited by users who can edit content and add shortcodes, but we still recommend all users running WooCommerce 3.x upgrade to 3.2 to mitigate this issue.',
+ firstDetected: null,
+ fixedIn: '3.2.4',
+ fixedOn: null,
+ severity: null,
+ fixable: null,
+ status: null,
+ filename: null,
+ context: null,
+ signature: null,
+ source: 'https://wpscan.com/vulnerability/1d0470df-4671-47ac-8d87-a165e8f7d502',
+ extension: {
+ name: 'WooCommerce',
+ slug: 'woocommerce',
+ version: '3.2.3',
+ type: 'plugin',
+ },
+ },
+ {
+ id: '7275a176-d579-471a-8492-df8edbdf27de',
+ signature: null,
+ subtitle: 'WooCommerce 3.4.5',
+ title: 'WooCommerce <= 3.4.5 - Authenticated Stored XSS',
+ description:
+ 'The WooCommerce WordPress plugin was affected by an Authenticated Stored XSS security vulnerability.',
+ firstDetected: null,
+ fixedIn: '3.4.6',
+ fixedOn: null,
+ severity: null,
+ fixable: null,
+ status: null,
+ filename: null,
+ context: null,
+ source: 'https://wpscan.com/vulnerability/7275a176-d579-471a-8492-df8edbdf27de',
+ extension: {
+ name: 'WooCommerce',
+ slug: 'woocommerce',
+ version: '3.4.5',
+ type: 'plugin',
+ },
+ },
+ {
+ id: '733d8a02-0d44-4b78-bbb2-37e447acd2f3',
+ signature: null,
+ title: 'WP Super Cache < 1.7.2 - Authenticated Remote Code Execution (RCE)',
+ description:
+ 'The plugin was affected by an authenticated (admin+) RCE in the settings page due to input validation failure and weak $cache_path check in the WP Super Cache Settings -> Cache Location option. Direct access to the wp-cache-config.php file is not prohibited, so this vulnerability can be exploited for a web shell injection.\r\n\r\nAnother possible attack vector: from XSS (via another plugin affected by XSS) to RCE.',
+ firstDetected: null,
+ fixedIn: '1.7.2',
+ fixedOn: null,
+ severity: null,
+ fixable: null,
+ status: null,
+ filename: null,
+ context: null,
+ source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3',
+ extension: {
+ name: 'WP Super Cache',
+ slug: 'wp-super-cache',
+ version: '1.6.3',
+ type: 'plugin',
+ },
+ },
+ ],
+};
diff --git a/projects/js-packages/components/components/threats-data-views/styles.module.scss b/projects/js-packages/components/components/threats-data-views/styles.module.scss
new file mode 100644
index 0000000000000..98789b2f794ec
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/styles.module.scss
@@ -0,0 +1,36 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+.threat__title {
+ color: var( --jp-gray-80 );
+ font-weight: 510;
+ white-space: initial;
+}
+
+.threat__description {
+ color: var( --jp-gray-80 );
+ font-size: 12px;
+ white-space: initial;
+}
+
+.threat__fixedOn,
+.threat__firstDetected {
+ white-space: nowrap;
+}
+
+.threat__fixedOn {
+ color: var( --jp-green-70 );
+}
+
+.threat__media {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #EDFFEE;
+ border-color: #EDFFEE;
+
+ svg {
+ fill: black;
+ }
+}
diff --git a/projects/js-packages/components/components/threats-data-views/test/index.test.tsx b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
new file mode 100644
index 0000000000000..65dd02c3a171a
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
@@ -0,0 +1,63 @@
+import { type Threat } from '@automattic/jetpack-scan';
+import { render, screen } from '@testing-library/react';
+import ThreatsDataView from '..';
+
+const data = [
+ // Scan API Data
+ {
+ id: 185869885,
+ signature: 'EICAR_AV_Test',
+ title: 'Malicious code found in file: index.php',
+ description:
+ "This is the standard EICAR antivirus test code, and not a real infection. If your site contains this code when you don't expect it to, contact Jetpack support for some help.",
+ firstDetected: '2024-10-07T20:45:06.000Z',
+ fixedIn: null,
+ fixedOn: '2024-10-07T20:45:06.000Z',
+ fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' },
+ fixer: { status: 'in_progress', startedAt: '2024-10-07T20:45:06.000Z' },
+ severity: 8,
+ status: 'current',
+ filename: '/var/www/html/wp-content/index.php',
+ context: {
+ '1': 'echo << {
+ it( 'renders threat data', () => {
+ render( );
+ expect( screen.getByText( 'Malicious code found in file: index.php' ) ).toBeInTheDocument();
+ expect(
+ screen.getByText( 'WooCommerce <= 3.2.3 - Authenticated PHP Object Injection' )
+ ).toBeInTheDocument();
+ } );
+} );
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index d0a6a683663bf..eb90df97ad5fe 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -44,7 +44,9 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard';
export * from './components/icons';
export { default as SplitButton } from './components/split-button';
export { default as ThemeProvider } from './components/theme-provider';
+export { default as ThreatFixerButton } from './components/threat-fixer-button';
export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
+export { default as ThreatsDataViews } from './components/threats-data-views';
export { default as Text, H2, H3, Title } from './components/text';
export { default as ToggleControl } from './components/toggle-control';
export { default as numberFormat } from './components/number-format';
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index 2add1cb76864c..1e7b3ba6f9949 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -16,11 +16,13 @@
"dependencies": {
"@automattic/format-currency": "1.0.1",
"@automattic/jetpack-boost-score-api": "workspace:*",
+ "@automattic/jetpack-scan": "workspace:*",
"@babel/runtime": "^7",
"@wordpress/browserslist-config": "6.9.0",
"@wordpress/components": "28.9.0",
"@wordpress/compose": "7.9.0",
"@wordpress/data": "10.9.0",
+ "@wordpress/dataviews": "4.6.0",
"@wordpress/date": "5.9.0",
"@wordpress/element": "6.9.0",
"@wordpress/i18n": "5.9.0",
diff --git a/projects/js-packages/scan/changelog/add-threat-and-fixer-types b/projects/js-packages/scan/changelog/add-threat-and-fixer-types
new file mode 100644
index 0000000000000..c339bfa18ace5
--- /dev/null
+++ b/projects/js-packages/scan/changelog/add-threat-and-fixer-types
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added threat and fixer types.
diff --git a/projects/js-packages/scan/changelog/remove-deps b/projects/js-packages/scan/changelog/remove-deps
new file mode 100644
index 0000000000000..223cefe9d9cb8
--- /dev/null
+++ b/projects/js-packages/scan/changelog/remove-deps
@@ -0,0 +1,4 @@
+Significance: patch
+Type: removed
+
+Updated dependencies.
diff --git a/projects/js-packages/scan/package.json b/projects/js-packages/scan/package.json
index 480b5a2e424e6..3215bb8366e35 100644
--- a/projects/js-packages/scan/package.json
+++ b/projects/js-packages/scan/package.json
@@ -52,8 +52,6 @@
"dependencies": {
"@automattic/jetpack-api": "workspace:*",
"@automattic/jetpack-base-styles": "workspace:*",
- "@automattic/jetpack-connection": "workspace:*",
- "@automattic/jetpack-shared-extension-utils": "workspace:*",
"@wordpress/api-fetch": "7.9.0",
"@wordpress/element": "6.9.0",
"@wordpress/i18n": "5.9.0",
diff --git a/projects/js-packages/scan/src/constants/index.ts b/projects/js-packages/scan/src/constants/index.ts
new file mode 100644
index 0000000000000..bccc025dbe2e9
--- /dev/null
+++ b/projects/js-packages/scan/src/constants/index.ts
@@ -0,0 +1,4 @@
+export const CONTACT_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support';
+
+/** Once a fixer has been running for this specified amount of time (in ms), it should be considered "stale". */
+export const FIXER_IS_STALE_THRESHOLD = 1000 * 60 * 60 * 24; // 24 hours
diff --git a/projects/js-packages/scan/src/index.ts b/projects/js-packages/scan/src/index.ts
index e69de29bb2d1d..8009266228a9b 100644
--- a/projects/js-packages/scan/src/index.ts
+++ b/projects/js-packages/scan/src/index.ts
@@ -0,0 +1,3 @@
+export * from './types/index.js';
+export * from './constants/index.js';
+export * from './utils/index.js';
diff --git a/projects/js-packages/scan/src/types/fixers.d.ts b/projects/js-packages/scan/src/types/fixers.d.ts
new file mode 100644
index 0000000000000..6ba9433122dbb
--- /dev/null
+++ b/projects/js-packages/scan/src/types/fixers.d.ts
@@ -0,0 +1,17 @@
+export type FixerStatus = 'not_started' | 'in_progress' | 'fixed' | 'not_fixed';
+
+/**
+ * Threat Fix Status
+ *
+ * Individual fixer status for a threat.
+ */
+export type ThreatFixStatusError = {
+ error: string;
+};
+
+export type ThreatFixStatusSuccess = {
+ status: FixerStatus;
+ last_updated: string;
+};
+
+export type ThreatFixStatus = ThreatFixStatusError | ThreatFixStatusSuccess;
diff --git a/projects/js-packages/scan/src/types/index.ts b/projects/js-packages/scan/src/types/index.ts
new file mode 100644
index 0000000000000..e831f787e4b42
--- /dev/null
+++ b/projects/js-packages/scan/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from './fixers.js';
+export * from './threats.js';
diff --git a/projects/js-packages/scan/src/types/threats.d.ts b/projects/js-packages/scan/src/types/threats.d.ts
new file mode 100644
index 0000000000000..be81934adf3ac
--- /dev/null
+++ b/projects/js-packages/scan/src/types/threats.d.ts
@@ -0,0 +1,70 @@
+export type ThreatStatus = 'fixed' | 'ignored' | 'current';
+
+export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
+
+export type Threat = {
+ /** The threat's unique ID. */
+ id: string | number;
+
+ /** The threat's signature. */
+ signature: string;
+
+ /** The threat's title. */
+ title: string;
+
+ /** The threat's description. */
+ description: string;
+
+ /** The threat's current status. */
+ status: ThreatStatus;
+
+ /** The threat's severity level (0-10). */
+ severity: number;
+
+ /** The date the threat was first detected on the site, in YYYY-MM-DDTHH:MM:SS.000Z format. */
+ firstDetected: string;
+
+ /** The version the threat is fixed in. */
+ fixedIn?: string | null;
+
+ /** The date the threat was fixed, in YYYY-MM-DDTHH:MM:SS.000Z format. */
+ fixedOn?: string | null;
+
+ /** The fixable details. */
+ fixable:
+ | {
+ fixer: ThreatFixType;
+ target?: string | null;
+ extensionStatus?: string | null;
+ }
+ | false;
+
+ /** The fixer status. */
+ fixer: ThreatFixStatus;
+
+ /** The threat's source. */
+ source?: string;
+
+ /** The threat's context. */
+ context?: Record< string, unknown > | null;
+
+ /** The name of the affected file. */
+ filename: string | null;
+
+ /** The rows affected by the database threat. */
+ rows?: unknown;
+
+ /** The table name of the database threat. */
+ table?: string;
+
+ /** The diff showing the threat's modified file contents. */
+ diff?: string;
+
+ /** The affected extension. */
+ extension?: {
+ slug: string;
+ name: string;
+ version: string;
+ type: 'plugin' | 'theme' | 'core';
+ };
+};
diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
new file mode 100644
index 0000000000000..2827c94fe51be
--- /dev/null
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -0,0 +1,34 @@
+import { FIXER_IS_STALE_THRESHOLD } from '../constants/index.js';
+import { ThreatFixStatus } from '../types/fixers.js';
+import { Threat } from '../types/threats.js';
+
+export const getThreatType = ( threat: Threat ) => {
+ if ( threat.signature === 'Vulnerable.WP.Core' ) {
+ return 'core';
+ }
+ if ( threat.extension ) {
+ return threat.extension.type;
+ }
+ if ( threat.filename ) {
+ return 'file';
+ }
+ if ( threat.table ) {
+ return 'database';
+ }
+
+ return null;
+};
+
+export const fixerTimestampIsStale = ( lastUpdatedTimestamp: string ) => {
+ const now = new Date();
+ const lastUpdated = new Date( lastUpdatedTimestamp );
+ return now.getTime() - lastUpdated.getTime() >= FIXER_IS_STALE_THRESHOLD;
+};
+
+export const fixerStatusIsStale = ( fixerStatus: ThreatFixStatus ) => {
+ return (
+ 'status' in fixerStatus &&
+ fixerStatus.status === 'in_progress' &&
+ fixerTimestampIsStale( fixerStatus.last_updated )
+ );
+};