From 6a8e44a1ed88426fe122f535c02a507f6cfb3b18 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 11 Oct 2024 14:50:30 -0600
Subject: [PATCH 01/24] Add ThreatsDataView

---
 pnpm-lock.yaml                                | 357 ++++++++++++++++++
 .../changelog/add-threats-data-view-component |   4 +
 .../components/threats-data-view/constants.ts |  17 +
 .../threats-data-view/fixer-status.tsx        |  74 ++++
 .../threats-data-view/icon-tooltip.tsx        |  52 +++
 .../components/threats-data-view/index.tsx    | 353 +++++++++++++++++
 .../stories/index.stories.tsx                 | 250 ++++++++++++
 .../threats-data-view/styles.module.scss      |  45 +++
 .../threats-data-view/test/index.test.tsx     |  34 ++
 .../components/threats-data-view/types.d.ts   |  93 +++++
 .../components/threats-data-view/utils.ts     |  72 ++++
 projects/js-packages/components/index.ts      |   1 +
 projects/js-packages/components/package.json  |   1 +
 .../scan/changelog/add-threat-types           |   4 +
 .../js-packages/scan/src/types/threat.d.ts    |  59 +++
 .../changelog/move-components-to-package      |   5 +
 projects/plugins/protect/tsconfig.json        |   2 +-
 17 files changed, 1422 insertions(+), 1 deletion(-)
 create mode 100644 projects/js-packages/components/changelog/add-threats-data-view-component
 create mode 100644 projects/js-packages/components/components/threats-data-view/constants.ts
 create mode 100644 projects/js-packages/components/components/threats-data-view/fixer-status.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/index.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/styles.module.scss
 create mode 100644 projects/js-packages/components/components/threats-data-view/test/index.test.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/types.d.ts
 create mode 100644 projects/js-packages/components/components/threats-data-view/utils.ts
 create mode 100644 projects/js-packages/scan/changelog/add-threat-types
 create mode 100644 projects/js-packages/scan/src/types/threat.d.ts
 create mode 100644 projects/plugins/protect/changelog/move-components-to-package

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d20a403bb87c6..d1b7cc69be26c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -305,6 +305,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
@@ -5680,6 +5683,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'}
@@ -7689,6 +7696,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'}
@@ -7764,6 +7775,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'}
@@ -7771,6 +7789,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'}
@@ -7791,6 +7815,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'}
@@ -7803,6 +7833,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'}
@@ -7813,14 +7853,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'}
@@ -7839,10 +7891,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'}
@@ -7884,19 +7944,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'}
@@ -7918,6 +7997,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'}
@@ -7934,6 +8017,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'}
@@ -7981,20 +8068,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'}
@@ -8008,6 +8115,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'}
@@ -8043,6 +8156,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'}
@@ -8057,6 +8174,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'}
@@ -15176,6 +15297,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
@@ -17751,6 +17876,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
@@ -18186,6 +18317,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)
@@ -18294,6 +18479,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
@@ -18482,6 +18684,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
@@ -18564,6 +18785,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
@@ -18576,15 +18826,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
@@ -18855,6 +19119,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
@@ -18866,6 +19141,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
@@ -19022,14 +19301,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
@@ -19039,6 +19335,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
@@ -19102,6 +19405,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
@@ -19120,6 +19427,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
@@ -19305,6 +19617,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
@@ -19312,15 +19631,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
@@ -19401,6 +19737,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
@@ -19495,6 +19845,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
@@ -19513,6 +19868,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/threats-data-view/constants.ts b/projects/js-packages/components/components/threats-data-view/constants.ts
new file mode 100644
index 0000000000000..e9b2fea3e1db5
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/constants.ts
@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support';
+
+export const THREAT_STATUSES = [
+	{ value: 'current', label: __( 'Active', 'jetpack' ) },
+	{ value: 'fixed', label: __( 'Fixed', 'jetpack' ) },
+	{ 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-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
new file mode 100644
index 0000000000000..dfdaa7920c55c
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -0,0 +1,74 @@
+import { ExternalLink, Spinner } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { check, info } from '@wordpress/icons';
+import { PAID_PLUGIN_SUPPORT_URL } from './constants';
+import IconTooltip from './icon-tooltip';
+import styles from './styles.module.scss';
+import { ThreatFixStatus } from './types';
+import { fixerStatusIsStale } from './utils';
+
+/**
+ * Fixer Status component.
+ *
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ *
+ * @return {JSX.Element} The component.
+ */
+export default function FixerStatus( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ 24 }
+				text={ createInterpolateElement(
+					__(
+						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ 24 }
+				text={ createInterpolateElement(
+					__(
+						'An error occurred auto-fixing this threat. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return <Spinner color="black" />;
+	}
+
+	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
+}
diff --git a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
new file mode 100644
index 0000000000000..32699631c9807
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
@@ -0,0 +1,52 @@
+import { Text } from '@automattic/jetpack-components';
+import { Popover } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import React, { useCallback, useState } from 'react';
+import styles from './styles.module.scss';
+
+const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => {
+	const [ showPopover, setShowPopover ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
+	const handleEnter = useCallback( () => {
+		// Clear any existing timeout if user hovers back quickly
+		if ( timeoutId ) {
+			clearTimeout( timeoutId );
+			setTimeoutId( null );
+		}
+		setShowPopover( true );
+	}, [ timeoutId ] );
+
+	const handleOut = useCallback( () => {
+		// Set a timeout to delay the hiding of the popover
+		const id = setTimeout( () => {
+			setShowPopover( false );
+			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
+		}, 100 );
+
+		setTimeoutId( id );
+	}, [] );
+
+	return (
+		<div
+			className={ styles[ 'icon-popover' ] }
+			onMouseLeave={ handleOut }
+			onMouseEnter={ handleEnter }
+			onClick={ handleEnter }
+			onFocus={ handleEnter }
+			onBlur={ handleOut }
+			role="presentation"
+		>
+			<Icon className={ iconClassName } icon={ icon } size={ iconSize } />
+			{ showPopover && (
+				<Popover noArrow={ false } offset={ 5 } inline={ true } position={ popoverPosition }>
+					<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
+						{ text }
+					</Text>
+				</Popover>
+			) }
+		</div>
+	);
+};
+
+export default IconTooltip;
diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
new file mode 100644
index 0000000000000..5e3ec600a3ff7
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -0,0 +1,353 @@
+import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { Icon } from '@wordpress/components';
+import {
+	Action,
+	DataViews,
+	Field,
+	Filter,
+	filterSortAndPaginate,
+	SupportedLayouts,
+	type View,
+} from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from 'react';
+import { THREAT_STATUSES, THREAT_TYPES } from './constants';
+import FixerStatus from './fixer-status';
+import styles from './styles.module.scss';
+import { DataViewThreat, ThreatsDataViewActionCallback } from './types';
+import { getThreatIcon, getThreatSubtitle } from './utils';
+
+/**
+ * DataView 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.onFixThreat                 - Threat fix action callback.
+ * @param {Function} props.onIgnoreThreat              - Threat ignore action callback.
+ * @param {Function} props.onUnignoreThreat            - 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 component.
+ */
+export default function ThreatsDataView( {
+	data,
+	filters,
+	isThreatEligibleForFix,
+	isThreatEligibleForIgnore,
+	isThreatEligibleForUnignore,
+	onFixThreat,
+	onIgnoreThreat,
+	onUnignoreThreat,
+}: {
+	data: DataViewThreat[];
+	filters?: Filter[];
+	isThreatEligibleForFix?: ( threat: DataViewThreat ) => boolean;
+	isThreatEligibleForIgnore?: ( threat: DataViewThreat ) => boolean;
+	isThreatEligibleForUnignore?: ( threat: DataViewThreat ) => boolean;
+	onFixThreat?: ThreatsDataViewActionCallback;
+	onIgnoreThreat?: ThreatsDataViewActionCallback;
+	onUnignoreThreat?: ThreatsDataViewActionCallback;
+} ): JSX.Element {
+	/**
+	 * 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',
+		search: '',
+		filters: filters || [],
+		page: 1,
+		perPage: 25,
+		sort: {
+			field: 'severity',
+			direction: 'desc',
+		},
+		fields: [ 'severity', 'threat', 'auto-fix' ],
+		layout: {},
+	} );
+
+	/**
+	 * Compute values based on the threats data.
+	 *
+	 * @member {object} extensions - List of unique threat extensions.
+	 * @member {object} signatures - List of unique threat signatures.
+	 * @member {Array}  dataFields - List of unique threat data fields.
+	 */
+	const { extensions, signatures, dataFields } = 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.extensions.find( ( { value } ) => value === threat.signature ) ) {
+						acc.extensions.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: [] as { value: string; label: string }[],
+				signatures: [] as { value: string; label: string }[],
+				dataFields: [] as string[],
+			}
+		);
+	}, [ 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< DataViewThreat >[] = [
+			{
+				id: 'threat',
+				label: __( 'Threat', 'jetpack' ),
+				enableHiding: false,
+				enableGlobalSearch: true,
+				getValue( { item }: { item: DataViewThreat } ) {
+					return `${ item.title } ${ item.description }`;
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					return (
+						<div>
+							<Text mb={ 1 } className={ styles.threat__subtitle }>
+								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+								{ getThreatSubtitle( item ) }
+							</Text>
+							<Text variant="body" className={ styles.threat__title }>
+								{ item.title }
+							</Text>
+							<Text variant="body-extra-small">{ item.description }</Text>
+						</div>
+					);
+				},
+			},
+			{
+				id: 'status',
+				label: __( 'Status', 'jetpack' ),
+				elements: THREAT_STATUSES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					return (
+						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+					);
+				},
+			},
+			{
+				id: 'extension',
+				label: __( 'Extension', 'jetpack' ),
+				enableGlobalSearch: true,
+				elements: extensions,
+				getValue( { item }: { item: DataViewThreat } ) {
+					return item.extension ? item.extension.slug : '';
+				},
+			},
+			{
+				id: 'type',
+				label: __( 'Category', 'jetpack' ),
+				elements: THREAT_TYPES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
+						return 'core';
+					}
+					if ( 'extension' in item && item.extension ) {
+						return item.extension.type;
+					}
+					if ( 'filename' in item && item.filename ) {
+						return 'file';
+					}
+					if ( 'table' in item && item.table ) {
+						return 'database';
+					}
+
+					return 'uncategorized';
+				},
+			},
+		];
+
+		if ( dataFields.includes( 'fixable' ) ) {
+			result.push( {
+				id: 'auto-fix',
+				label: __( 'Auto-fix', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return item.fixable ? 'Yes' : '';
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					return item.fixable ? <FixerStatus fixer={ item.fixer } /> : null;
+				},
+			} );
+		}
+
+		if ( dataFields.includes( 'severity' ) ) {
+			result.push( {
+				id: 'severity',
+				label: __( 'Severity', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return item.severity ?? 0;
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					return <ThreatSeverityBadge severity={ item.severity } />;
+				},
+			} );
+		}
+
+		if ( dataFields.includes( 'signature' ) ) {
+			result.push( {
+				id: 'signature',
+				label: __( 'Signature', 'jetpack' ),
+				elements: signatures,
+				enableGlobalSearch: true,
+			} );
+		}
+
+		return result;
+	}, [ extensions, signatures, dataFields ] );
+
+	/**
+	 * 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< DataViewThreat >[] = [];
+
+		if ( dataFields.includes( 'fixable' ) ) {
+			result.push( {
+				id: 'fix',
+				label: __( 'Auto-Fix', 'jetpack' ),
+				isPrimary: true,
+				callback: onFixThreat,
+				isEligible( item ) {
+					if ( ! onFixThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForFix ) {
+						return isThreatEligibleForFix( item );
+					}
+					return !! item.fixable;
+				},
+				icon: 'check',
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: 'ignore',
+				label: __( 'Ignore', 'jetpack' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onIgnoreThreat,
+				isEligible( item ) {
+					if ( ! onIgnoreThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForIgnore ) {
+						return isThreatEligibleForIgnore( item );
+					}
+					return item.status === 'current';
+				},
+				icon: 'unseen',
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: 'un-ignore',
+				label: __( 'Unignore', 'jetpack' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onUnignoreThreat,
+				isEligible( item ) {
+					if ( ! onUnignoreThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForUnignore ) {
+						return isThreatEligibleForUnignore( item );
+					}
+					return item.status === 'ignored';
+				},
+				icon: 'seen',
+			} );
+		}
+
+		return result;
+	}, [
+		dataFields,
+		onFixThreat,
+		onIgnoreThreat,
+		onUnignoreThreat,
+		isThreatEligibleForFix,
+		isThreatEligibleForIgnore,
+		isThreatEligibleForUnignore,
+	] );
+
+	/**
+	 * 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 = {};
+
+	/**
+	 * 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: DataViewThreat ) => item.id.toString(), [] );
+
+	return (
+		<DataViews
+			actions={ actions }
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+		/>
+	);
+}
diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
new file mode 100644
index 0000000000000..b2ac064d0dda8
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
@@ -0,0 +1,250 @@
+import ThreatsDataView from '..';
+
+export default {
+	title: 'JS Packages/Components/Threats Data View',
+	component: ThreatsDataView,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = args => <ThreatsDataView { ...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: '' },
+			status: 'current',
+			filename: '/var/www/html/wp-content/index.php',
+			context: {
+				'1': 'echo <<<HTML',
+				'2': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*',
+				'3': 'HTML;',
+				marks: {},
+			},
+			source: null,
+		},
+		{
+			id: 185869883,
+			signature: 'Suspicious.Files',
+			title: 'Malicious code found in file: fuzzy.php',
+			description:
+				'Our security scanners detected that this file is identical to a previously identified malicious file',
+			firstDetected: '2024-10-07T20:45:06.000Z',
+			fixedIn: null,
+			fixedOn: null,
+			severity: 4,
+			fixable: false,
+			status: 'ignored',
+			filename: '/var/www/html/wp-content/fuzzy.php',
+			context: '',
+			source: null,
+		},
+		{
+			id: 185868972,
+			signature: 'EICAR_AV_Test_Suspicious',
+			title: 'Malicious code found in file: jptt_eicar.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: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 <<<HTML',
+				'7': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'8': 'HTML;',
+				'9': 'echo <<<HTML',
+				'10': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'11': 'HTML;',
+				marks: {},
+			},
+			source: null,
+		},
+		{
+			id: 184847701,
+			signature: 'Vulnerable.WP.Extension',
+			title: 'Vulnerable Plugin: WP Super Cache (version 1.6.3)',
+			description:
+				'The plugin WP Super Cache (version 1.6.3) has a known vulnerability. The WP Super Cache plugin before version 1.7.2 is vulnerable to an authenticated RCE in the settings page.',
+			firstDetected: '2024-10-02T17:34:59.000Z',
+			fixedIn: '1.12.4',
+			fixedOn: null,
+			severity: 3,
+			fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' },
+			status: 'current',
+			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',
+			},
+		},
+		{
+			id: 185868945,
+			signature: 'Core.File.Modification',
+			title: 'Compromised WordPress core file: index.php',
+			description:
+				'Core WordPress files are not normally changed. If you did not make these changes you should review the code.',
+			firstDetected: '2024-10-07T20:40:05.000Z',
+			severity: 4,
+			status: 'current',
+			fixable: {
+				fixer: 'replace',
+				file: '/var/www/html/wp-admin/index.php',
+				extensionStatus: '',
+			},
+			filename: '/var/www/html/wp-admin/index.php',
+			diff: "--- /tmp/wordpress/6.6.2/wordpress/wp-admin/index.php\t2024-10-07 20:40:04.887546480 +0000\n+++ /var/www/html/wp-admin/index.php\t2024-10-07 20:39:58.775512965 +0000\n@@ -210,3 +210,4 @@\n wp_print_community_events_templates();\n \n require_once ABSPATH . 'wp-admin/admin-footer.php';\n+if ( true === false ) exit();\n\\ No newline at end of file\n",
+		},
+		{
+			id: 13216959,
+			signature: 'Vulnerable.WP.Core',
+			title: 'Vulnerable WordPress Version (6.4.3)',
+			description: 'The installed version of WordPress (6.4.3) has a known vulnerability. ',
+			firstDetected: '2024-07-15T21:56:50.000Z',
+			severity: 4,
+			fixer: null,
+			fixedOn: '2024-07-15T22:01:42.000Z',
+			status: 'fixed',
+			fixable: false,
+			version: '6.4.3',
+			source: '',
+		},
+		{
+			id: '7275a176-d579-471a-8492-df8edbdf27de',
+			signature: null,
+			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',
+			},
+		},
+	],
+	filters: [
+		{
+			field: 'status',
+			operator: 'is',
+			value: 'current',
+		},
+	],
+	onFixThreat: () =>
+		alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+	onIgnoreThreat: () =>
+		alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+	onUnignoreThreat: () =>
+		// eslint-disable-next-line no-alert
+		alert(
+			'Unignore threat action callback triggered! This is handled by the component consumer.'
+		),
+};
+
+export const FreeResults = args => <ThreatsDataView { ...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-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
new file mode 100644
index 0000000000000..53abe3bc19fac
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -0,0 +1,45 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+:global {
+    .dataviews-view-table td, .dataviews-view-table th {
+        white-space: initial;
+    }
+}
+
+.icon-check {
+	fill: var( --jp-green-40 );
+}
+
+.icon-info {
+	fill: var( --jp-red );
+}
+
+.support-link {
+	color: inherit;
+
+	&:focus,
+	&:hover {
+		color: inherit;
+		box-shadow: none;
+	}
+}
+
+.threat__subtitle {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 0.75rem; // 12px
+	line-height: 1.25rem; // 20px 
+	color: var( --jp-gray-80 );
+	font-weight: 400;
+}
+
+.threat__title {
+	color: var( --jp-gray-80 );
+	font-size: 0.875rem; // 14px
+	font-weight: 510;
+}
+
+.threat__description {
+	color: var( --jp-gray-80 );
+}
diff --git a/projects/js-packages/components/components/threats-data-view/test/index.test.tsx b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx
new file mode 100644
index 0000000000000..0cada3e4c063a
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import ThreatsDataView from '..';
+import { DataViewThreat } from '../types';
+
+const 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: '' },
+		status: 'current',
+		filename: '/var/www/html/wp-content/index.php',
+		context: {
+			'1': 'echo <<<HTML',
+			'2': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*',
+			'3': 'HTML;',
+			marks: {},
+		},
+		source: null,
+	},
+] as DataViewThreat[];
+
+describe( 'ThreatsDataView', () => {
+	it( 'renders threat data', () => {
+		render( <ThreatsDataView data={ data } /> );
+		expect( screen.getByText( 'Malicious code found in file: index.php' ) ).toBeInTheDocument();
+	} );
+} );
diff --git a/projects/js-packages/components/components/threats-data-view/types.d.ts b/projects/js-packages/components/components/threats-data-view/types.d.ts
new file mode 100644
index 0000000000000..3f75a9f7d0b9d
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/types.d.ts
@@ -0,0 +1,93 @@
+export type ThreatStatus = 'fixed' | 'ignored' | 'current';
+
+export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
+
+export type DataViewThreat = {
+	/** The threat's unique ID. */
+	id: 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;
+
+	/** If available, the threat's latest fixer status. */
+	fixer?: ThreatFixStatus;
+
+	/** The threat's source. */
+	source?: string;
+
+	/** The threat's affected extension. */
+	extension?: {
+		name: string;
+		slug: string;
+		type: 'plugin' | 'theme' | 'core';
+		version: 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;
+};
+
+export type ThreatsDataViewActionCallback = (
+	items: Threat[],
+	context: { registry: unknown; onActionPerformed?: ( threats: DataViewThreat[] ) => void }
+) => void;
+
+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/components/components/threats-data-view/utils.ts b/projects/js-packages/components/components/threats-data-view/utils.ts
new file mode 100644
index 0000000000000..a01a3865c534e
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/utils.ts
@@ -0,0 +1,72 @@
+import { code, color, grid, plugins, shield, wordpress } from '@wordpress/icons';
+import { DataViewThreat, ThreatFixStatus } from './types';
+
+export const getThreatIcon = ( threat: DataViewThreat ) => {
+	const type = getThreatType( threat );
+
+	switch ( type ) {
+		case 'plugin':
+			return plugins;
+		case 'theme':
+			return color;
+		case 'core':
+			return wordpress;
+		case 'file':
+			return code;
+		case 'database':
+			return grid;
+		default:
+			return shield;
+	}
+};
+
+export const getThreatType = ( threat: DataViewThreat ) => {
+	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 getThreatSubtitle = ( threat: DataViewThreat ) => {
+	const type = getThreatType( threat );
+
+	switch ( type ) {
+		case 'plugin':
+		case 'theme':
+			return `${ threat.extension?.name } (${ threat.extension?.version })`;
+		case 'core':
+			return 'WordPress Core';
+		case 'file':
+			return threat.filename;
+		case 'database':
+			return threat.table;
+		default:
+			return '';
+	}
+};
+
+const FIXER_IS_STALE_THRESHOLD = 1000 * 60 * 60 * 24; // 24 hours
+
+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 )
+	);
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index d0a6a683663bf..499f783960073 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -45,6 +45,7 @@ export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
+export { default as ThreatsDataView } from './components/threats-data-view';
 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..1a5130f11e3aa 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -21,6 +21,7 @@
 		"@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-types b/projects/js-packages/scan/changelog/add-threat-types
new file mode 100644
index 0000000000000..e549d3e8a3f87
--- /dev/null
+++ b/projects/js-packages/scan/changelog/add-threat-types
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add threat TypeScript types
diff --git a/projects/js-packages/scan/src/types/threat.d.ts b/projects/js-packages/scan/src/types/threat.d.ts
new file mode 100644
index 0000000000000..757503972fa0c
--- /dev/null
+++ b/projects/js-packages/scan/src/types/threat.d.ts
@@ -0,0 +1,59 @@
+export type ThreatStatus = 'fixed' | 'ignored' | 'current';
+
+export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
+
+export type Threat = {
+	/** The threat's unique ID. */
+	id: 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 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;
+};
diff --git a/projects/plugins/protect/changelog/move-components-to-package b/projects/plugins/protect/changelog/move-components-to-package
new file mode 100644
index 0000000000000..29ead1e0b072a
--- /dev/null
+++ b/projects/plugins/protect/changelog/move-components-to-package
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Moved components to package
+
+
diff --git a/projects/plugins/protect/tsconfig.json b/projects/plugins/protect/tsconfig.json
index bc49ef3cebb58..3efc0b5fbb273 100644
--- a/projects/plugins/protect/tsconfig.json
+++ b/projects/plugins/protect/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"extends": "jetpack-js-tools/tsconfig.base.json",
-	"include": [ "./src/js" ],
+	"include": [ "./src/js", "../../js-packages/components/components/threats-data-view" ],
 	"compilerOptions": {
 		"sourceMap": true,
 		"outDir": "./build/",

From 2b5edb06789adbcac68eeef02a3b0595f123bba9 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Sun, 20 Oct 2024 15:22:32 -0600
Subject: [PATCH 02/24] Add support for list view in threats data table

---
 .../threats-data-view/fixer-status.tsx        |  70 ++++-
 .../components/threats-data-view/index.tsx    | 275 ++++++++++++------
 .../threats-data-view/styles.module.scss      |  68 ++++-
 3 files changed, 318 insertions(+), 95 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index dfdaa7920c55c..35f61d4358d83 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -1,4 +1,5 @@
 import { ExternalLink, Spinner } from '@wordpress/components';
+import { View } from '@wordpress/dataviews';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
@@ -14,16 +15,23 @@ import { fixerStatusIsStale } from './utils';
  *
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
+ * @param {number}  props.size  - The size of the icon.
  *
  * @return {JSX.Element} The component.
  */
-export default function FixerStatus( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+export default function FixerStatusIcon( {
+	fixer,
+	size = 24,
+}: {
+	fixer?: ThreatFixStatus;
+	size?: number;
+} ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
 		return (
 			<IconTooltip
 				icon={ info }
 				iconClassName={ styles[ 'icon-info' ] }
-				iconSize={ 24 }
+				iconSize={ size }
 				text={ createInterpolateElement(
 					__(
 						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
@@ -72,3 +80,61 @@ export default function FixerStatus( { fixer }: { fixer?: ThreatFixStatus } ): J
 
 	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
 }
+
+/**
+ * FixerStatusText component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return __( 'Fixer is taking longer than expected', 'jetpack' );
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return __( 'Error auto-fixing threat', 'jetpack' );
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return __( 'Auto-fix in progress', 'jetpack' );
+	}
+
+	return __( 'Auto-fixable', 'jetpack' );
+}
+
+/**
+ * FixerStatusBadge component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	return (
+		<div className={ styles[ 'fixer-status-badge' ] }>
+			<FixerStatusIcon fixer={ fixer } size={ 12 } />
+			<FixerStatusText fixer={ fixer } />
+		</div>
+	);
+}
+
+/**
+ * FixerStatusText component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @param {object}  props.view  - The view.
+ * @return {string} The component.
+ */
+export function DataViewFixerStatus( {
+	fixer,
+	view,
+}: {
+	fixer?: ThreatFixStatus;
+	view: View;
+} ): JSX.Element {
+	if ( view.type === 'table' ) {
+		return <FixerStatusIcon fixer={ fixer } />;
+	}
+
+	return <FixerStatusBadge fixer={ fixer } />;
+}
diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
index 5e3ec600a3ff7..3e60a3f85ff4f 100644
--- a/projects/js-packages/components/components/threats-data-view/index.tsx
+++ b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -9,13 +9,14 @@ import {
 	SupportedLayouts,
 	type View,
 } from '@wordpress/dataviews';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
+import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
 import { THREAT_STATUSES, THREAT_TYPES } from './constants';
-import FixerStatus from './fixer-status';
+import { DataViewFixerStatus } from './fixer-status';
 import styles from './styles.module.scss';
 import { DataViewThreat, ThreatsDataViewActionCallback } from './types';
-import { getThreatIcon, getThreatSubtitle } from './utils';
+import { getThreatIcon, getThreatSubtitle, getThreatType } from './utils';
 
 /**
  * DataView component for displaying security threats.
@@ -51,6 +52,37 @@ export default function ThreatsDataView( {
 	onIgnoreThreat?: ThreatsDataViewActionCallback;
 	onUnignoreThreat?: ThreatsDataViewActionCallback;
 } ): JSX.Element {
+	/**
+	 * 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: {
+			fields: [ 'severity', 'threat', 'auto-fix' ],
+			layout: {
+				primaryField: 'severity',
+				combinedFields: [
+					{
+						id: 'threat',
+						label: __( 'Threat', 'jetpack' ),
+						children: [ 'subtitle', 'title', 'description' ],
+						direction: 'vertical',
+					},
+				],
+			},
+		},
+		list: {
+			layout: {
+				primaryField: 'title',
+				mediaField: 'icon',
+			},
+			fields: [ 'severity', 'subtitle', 'signature', 'auto-fix' ],
+		},
+	};
+
 	/**
 	 * DataView view object - configures how the dataset is visible to the user.
 	 *
@@ -58,6 +90,7 @@ export default function ThreatsDataView( {
 	 */
 	const [ view, setView ] = useState< View >( {
 		type: 'table',
+		...defaultLayouts.table,
 		search: '',
 		filters: filters || [],
 		page: 1,
@@ -66,8 +99,6 @@ export default function ThreatsDataView( {
 			field: 'severity',
 			direction: 'desc',
 		},
-		fields: [ 'severity', 'threat', 'auto-fix' ],
-		layout: {},
 	} );
 
 	/**
@@ -89,8 +120,8 @@ export default function ThreatsDataView( {
 
 				// Signatures
 				if ( threat?.signature ) {
-					if ( ! acc.extensions.find( ( { value } ) => value === threat.signature ) ) {
-						acc.extensions.push( { value: threat.signature, label: threat.signature } );
+					if ( ! acc.signatures.find( ( { value } ) => value === threat.signature ) ) {
+						acc.signatures.push( { value: threat.signature, label: threat.signature } );
 					}
 				}
 
@@ -122,109 +153,178 @@ export default function ThreatsDataView( {
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
 	 */
 	const fields = useMemo( () => {
-		const result: Field< DataViewThreat >[] = [
-			{
-				id: 'threat',
-				label: __( 'Threat', 'jetpack' ),
-				enableHiding: false,
-				enableGlobalSearch: true,
+		const result: Field< DataViewThreat >[] = [];
+
+		result.push( {
+			id: 'status',
+			label: __( 'Status', 'jetpack' ),
+			elements: THREAT_STATUSES,
+			getValue( { item }: { item: DataViewThreat } ) {
+				if ( ! item.status ) {
+					return 'current';
+				}
+				return THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status;
+			},
+		} );
+
+		if ( dataFields.includes( 'severity' ) ) {
+			result.push( {
+				id: 'severity',
+				label: __( 'Severity', 'jetpack' ),
 				getValue( { item }: { item: DataViewThreat } ) {
-					return `${ item.title } ${ item.description }`;
+					return item.severity ?? 0;
 				},
 				render( { item }: { item: DataViewThreat } ) {
-					return (
-						<div>
-							<Text mb={ 1 } className={ styles.threat__subtitle }>
-								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
-								{ getThreatSubtitle( item ) }
-							</Text>
-							<Text variant="body" className={ styles.threat__title }>
-								{ item.title }
-							</Text>
-							<Text variant="body-extra-small">{ item.description }</Text>
-						</div>
-					);
+					if ( view.type === 'list' ) {
+						if ( item.severity >= 5 ) {
+							return _x(
+								'Critical Severity',
+								'Severity label for issues rated 5 or higher.',
+								'jetpack'
+							);
+						} else if ( item.severity >= 3 && item.severity < 5 ) {
+							return _x(
+								'High Severity',
+								'Severity label for issues rated between 3 and 5.',
+								'jetpack'
+							);
+						}
+						return _x( 'Low Severity', 'Severity label for issues rated below 3.', 'jetpack' );
+					}
+
+					return <ThreatSeverityBadge severity={ item.severity } />;
 				},
+			} );
+		}
+
+		result.push( {
+			id: 'extension',
+			label: __( 'Extension', 'jetpack' ),
+			enableGlobalSearch: true,
+			elements: extensions,
+			getValue( { item }: { item: DataViewThreat } ) {
+				return item.extension ? item.extension.slug : '';
 			},
-			{
-				id: 'status',
-				label: __( 'Status', 'jetpack' ),
-				elements: THREAT_STATUSES,
-				getValue( { item }: { item: DataViewThreat } ) {
+		} );
+
+		result.push( {
+			id: 'type',
+			label: __( 'Category', 'jetpack' ),
+			elements: THREAT_TYPES,
+			getValue( { item }: { item: DataViewThreat } ) {
+				if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
+					return 'core';
+				}
+				if ( 'extension' in item && item.extension ) {
+					return item.extension.type;
+				}
+				if ( 'filename' in item && item.filename ) {
+					return 'file';
+				}
+				if ( 'table' in item && item.table ) {
+					return 'database';
+				}
+
+				return 'uncategorized';
+			},
+		} );
+
+		result.push( {
+			id: 'subtitle',
+			label: __( 'Affected Item', 'jetpack' ),
+			getValue( { item }: { item: DataViewThreat } ) {
+				return getThreatSubtitle( item );
+			},
+			render( { item }: { item: DataViewThreat } ) {
+				if ( view.type === 'table' ) {
 					return (
-						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+						<Text className={ styles.threat__subtitle }>
+							<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+							{ getThreatSubtitle( item ) }
+						</Text>
 					);
-				},
+				}
+
+				return getThreatSubtitle( item );
 			},
-			{
-				id: 'extension',
-				label: __( 'Extension', 'jetpack' ),
-				enableGlobalSearch: true,
-				elements: extensions,
-				getValue( { item }: { item: DataViewThreat } ) {
-					return item.extension ? item.extension.slug : '';
-				},
+		} );
+
+		result.push( {
+			id: 'icon',
+			label: __( 'Icon', 'jetpack' ),
+			getValue( { item }: { item: DataViewThreat } ) {
+				return getThreatType( item );
 			},
-			{
-				id: 'type',
-				label: __( 'Category', 'jetpack' ),
-				elements: THREAT_TYPES,
-				getValue( { item }: { item: DataViewThreat } ) {
-					if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
-						return 'core';
-					}
-					if ( 'extension' in item && item.extension ) {
-						return item.extension.type;
-					}
-					if ( 'filename' in item && item.filename ) {
-						return 'file';
-					}
-					if ( 'table' in item && item.table ) {
-						return 'database';
-					}
+			render( { item }: { item: DataViewThreat } ) {
+				return (
+					<div
+						className={ clsx( styles.media, {
+							[ styles[ 'media--critical' ] ]: item.severity >= 5,
+							[ styles[ 'media--high' ] ]: item.severity >= 3 && item.severity < 5,
+						} ) }
+					>
+						<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+					</div>
+				);
+			},
+			enableHiding: false,
+		} );
 
-					return 'uncategorized';
-				},
+		result.push( {
+			id: 'title',
+			label: __( 'Title', 'jetpack' ),
+			enableGlobalSearch: true,
+			enableHiding: false,
+			render( { item }: { item: DataViewThreat } ) {
+				if ( view.type === 'list' ) {
+					return item.title;
+				}
+				return (
+					<Text variant="body" className={ styles.threat__title }>
+						{ item.title }
+					</Text>
+				);
 			},
-		];
+		} );
 
-		if ( dataFields.includes( 'fixable' ) ) {
+		result.push( {
+			id: 'description',
+			label: __( 'Description', 'jetpack' ),
+			enableGlobalSearch: true,
+			enableHiding: false,
+			render( { item }: { item: DataViewThreat } ) {
+				return <Text variant="body-extra-small">{ item.description }</Text>;
+			},
+		} );
+
+		if ( dataFields.includes( 'signature' ) ) {
 			result.push( {
-				id: 'auto-fix',
-				label: __( 'Auto-fix', 'jetpack' ),
+				id: 'signature',
+				label: __( 'Signature', 'jetpack' ),
+				elements: signatures,
+				enableGlobalSearch: true,
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? 'Yes' : '';
-				},
-				render( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? <FixerStatus fixer={ item.fixer } /> : null;
+					return item.signature || '';
 				},
 			} );
 		}
 
-		if ( dataFields.includes( 'severity' ) ) {
+		if ( dataFields.includes( 'fixable' ) ) {
 			result.push( {
-				id: 'severity',
-				label: __( 'Severity', 'jetpack' ),
+				id: 'auto-fix',
+				label: __( 'Auto-fix', 'jetpack' ),
+				enableHiding: false,
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.severity ?? 0;
+					return item.fixable ? 'Yes' : '';
 				},
 				render( { item }: { item: DataViewThreat } ) {
-					return <ThreatSeverityBadge severity={ item.severity } />;
+					return item.fixable ? <DataViewFixerStatus fixer={ item.fixer } view={ view } /> : null;
 				},
 			} );
 		}
 
-		if ( dataFields.includes( 'signature' ) ) {
-			result.push( {
-				id: 'signature',
-				label: __( 'Signature', 'jetpack' ),
-				elements: signatures,
-				enableGlobalSearch: true,
-			} );
-		}
-
 		return result;
-	}, [ extensions, signatures, dataFields ] );
+	}, [ extensions, signatures, dataFields, view ] );
 
 	/**
 	 * DataView actions - collection of operations that can be performed upon each record.
@@ -304,15 +404,6 @@ export default function ThreatsDataView( {
 		isThreatEligibleForUnignore,
 	] );
 
-	/**
-	 * 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 = {};
-
 	/**
 	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
 	 *
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index 53abe3bc19fac..f514629759f0a 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -4,6 +4,35 @@
     .dataviews-view-table td, .dataviews-view-table th {
         white-space: initial;
     }
+
+	.dataviews-view-list .dataviews-views-list__fields {
+		align-items: center;
+	}
+}
+
+.media {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: black;
+	background-color: #EDFFEE;
+	border-color: #EDFFEE;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.media--critical {
+	background-color: var( --jp-red-5 );
+	color: var( --jp-red-80 );
+}
+
+.media--high {
+	background-color:  var( --jp-yellow-5 );
+	color: var( --jp-yellow-60 );
 }
 
 .icon-check {
@@ -24,12 +53,41 @@
 	}
 }
 
+.fixer-status-badge {
+	border-radius: 32px;
+	flex-shrink: 0;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: 16px;
+	padding: calc( var( --spacing-base ) / 2 ); // 4px
+	padding-right: calc( var( --spacing-base ) * 1.75 ); // 14px
+	position: relative;
+	text-align: center;
+	background: var( --jp-green-0 );
+	color: var( --jp-green-50 );
+	display: flex;
+	align-items: center;
+	
+	> svg {
+		height: 20px;
+		margin-top: -2px;
+		margin-bottom: -2px;
+	}
+}
+
+.threat__primary {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
 .threat__subtitle {
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	font-size: 0.75rem; // 12px
-	line-height: 1.25rem; // 20px 
+	line-height: 1;
 	color: var( --jp-gray-80 );
 	font-weight: 400;
 }
@@ -43,3 +101,11 @@
 .threat__description {
 	color: var( --jp-gray-80 );
 }
+
+.threat__severityHigh {
+	color: var( --jp-yellow-60 );
+}
+
+.threat__severityCritical {
+	color: var( --jp-red-60 );
+}

From 4b505807ba7d4beadb059ee9be55613c713c9a6f Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Sun, 20 Oct 2024 20:53:56 -0600
Subject: [PATCH 03/24] Minor adjustments

---
 .../components/threats-data-view/index.tsx    | 332 +++++++++---------
 .../stories/index.stories.tsx                 |   5 +
 .../threats-data-view/styles.module.scss      |  19 +-
 .../components/threats-data-view/utils.ts     |   4 +
 4 files changed, 195 insertions(+), 165 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
index 3e60a3f85ff4f..4e018d27c7a86 100644
--- a/projects/js-packages/components/components/threats-data-view/index.tsx
+++ b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -1,4 +1,4 @@
-import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { ThreatSeverityBadge } from '@automattic/jetpack-components';
 import { Icon } from '@wordpress/components';
 import {
 	Action,
@@ -6,6 +6,7 @@ import {
 	Field,
 	Filter,
 	filterSortAndPaginate,
+	SortDirection,
 	SupportedLayouts,
 	type View,
 } from '@wordpress/dataviews';
@@ -24,18 +25,19 @@ import { getThreatIcon, getThreatSubtitle, getThreatType } from './utils';
  * @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.onFixThreat                 - Threat fix action callback.
  * @param {Function} props.onIgnoreThreat              - Threat ignore action callback.
  * @param {Function} props.onUnignoreThreat            - 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 component.
  */
 export default function ThreatsDataView( {
 	data,
 	filters,
+	onChangeSelection,
 	isThreatEligibleForFix,
 	isThreatEligibleForIgnore,
 	isThreatEligibleForUnignore,
@@ -45,6 +47,7 @@ export default function ThreatsDataView( {
 }: {
 	data: DataViewThreat[];
 	filters?: Filter[];
+	onChangeSelection?: ( selectedItemIds: string[] ) => void;
 	isThreatEligibleForFix?: ( threat: DataViewThreat ) => boolean;
 	isThreatEligibleForIgnore?: ( threat: DataViewThreat ) => boolean;
 	isThreatEligibleForUnignore?: ( threat: DataViewThreat ) => boolean;
@@ -52,6 +55,17 @@ export default function ThreatsDataView( {
 	onIgnoreThreat?: ThreatsDataViewActionCallback;
 	onUnignoreThreat?: ThreatsDataViewActionCallback;
 } ): JSX.Element {
+	const baseView = {
+		sort: {
+			field: 'severity',
+			direction: 'desc' as SortDirection,
+		},
+		search: '',
+		filters: filters || [],
+		page: 1,
+		perPage: 25,
+	};
+
 	/**
 	 * DataView default layouts.
 	 *
@@ -61,6 +75,7 @@ export default function ThreatsDataView( {
 	 */
 	const defaultLayouts: SupportedLayouts = {
 		table: {
+			...baseView,
 			fields: [ 'severity', 'threat', 'auto-fix' ],
 			layout: {
 				primaryField: 'severity',
@@ -75,11 +90,12 @@ export default function ThreatsDataView( {
 			},
 		},
 		list: {
+			...baseView,
+			fields: [ 'severity', 'subtitle', 'signature', 'auto-fix' ],
 			layout: {
 				primaryField: 'title',
 				mediaField: 'icon',
 			},
-			fields: [ 'severity', 'subtitle', 'signature', 'auto-fix' ],
 		},
 	};
 
@@ -91,14 +107,6 @@ export default function ThreatsDataView( {
 	const [ view, setView ] = useState< View >( {
 		type: 'table',
 		...defaultLayouts.table,
-		search: '',
-		filters: filters || [],
-		page: 1,
-		perPage: 25,
-		sort: {
-			field: 'severity',
-			direction: 'desc',
-		},
 	} );
 
 	/**
@@ -106,7 +114,7 @@ export default function ThreatsDataView( {
 	 *
 	 * @member {object} extensions - List of unique threat extensions.
 	 * @member {object} signatures - List of unique threat signatures.
-	 * @member {Array}  dataFields - List of unique threat data fields.
+	 * @member {Array}  dataFields - List of unique fields.
 	 */
 	const { extensions, signatures, dataFields } = useMemo( () => {
 		return data.reduce(
@@ -153,175 +161,176 @@ export default function ThreatsDataView( {
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
 	 */
 	const fields = useMemo( () => {
-		const result: Field< DataViewThreat >[] = [];
-
-		result.push( {
-			id: 'status',
-			label: __( 'Status', 'jetpack' ),
-			elements: THREAT_STATUSES,
-			getValue( { item }: { item: DataViewThreat } ) {
-				if ( ! item.status ) {
-					return 'current';
-				}
-				return THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status;
-			},
-		} );
-
-		if ( dataFields.includes( 'severity' ) ) {
-			result.push( {
-				id: 'severity',
-				label: __( 'Severity', 'jetpack' ),
-				getValue( { item }: { item: DataViewThreat } ) {
-					return item.severity ?? 0;
-				},
+		const result: Field< DataViewThreat >[] = [
+			{
+				id: 'title',
+				label: __( 'Title', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
 				render( { item }: { item: DataViewThreat } ) {
 					if ( view.type === 'list' ) {
-						if ( item.severity >= 5 ) {
-							return _x(
-								'Critical Severity',
-								'Severity label for issues rated 5 or higher.',
-								'jetpack'
-							);
-						} else if ( item.severity >= 3 && item.severity < 5 ) {
-							return _x(
-								'High Severity',
-								'Severity label for issues rated between 3 and 5.',
-								'jetpack'
-							);
-						}
-						return _x( 'Low Severity', 'Severity label for issues rated below 3.', 'jetpack' );
+						return item.title;
 					}
-
-					return <ThreatSeverityBadge severity={ item.severity } />;
+					return <span className={ styles.threat__title }>{ item.title }</span>;
 				},
-			} );
-		}
-
-		result.push( {
-			id: 'extension',
-			label: __( 'Extension', 'jetpack' ),
-			enableGlobalSearch: true,
-			elements: extensions,
-			getValue( { item }: { item: DataViewThreat } ) {
-				return item.extension ? item.extension.slug : '';
-			},
-		} );
-
-		result.push( {
-			id: 'type',
-			label: __( 'Category', 'jetpack' ),
-			elements: THREAT_TYPES,
-			getValue( { item }: { item: DataViewThreat } ) {
-				if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
-					return 'core';
-				}
-				if ( 'extension' in item && item.extension ) {
-					return item.extension.type;
-				}
-				if ( 'filename' in item && item.filename ) {
-					return 'file';
-				}
-				if ( 'table' in item && item.table ) {
-					return 'database';
-				}
-
-				return 'uncategorized';
 			},
-		} );
-
-		result.push( {
-			id: 'subtitle',
-			label: __( 'Affected Item', 'jetpack' ),
-			getValue( { item }: { item: DataViewThreat } ) {
-				return getThreatSubtitle( item );
+			{
+				id: 'description',
+				label: __( 'Description', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render( { item }: { item: DataViewThreat } ) {
+					return <span className={ styles.threat__description }>{ item.description }</span>;
+				},
 			},
-			render( { item }: { item: DataViewThreat } ) {
-				if ( view.type === 'table' ) {
+			{
+				id: 'icon',
+				label: __( 'Icon', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return getThreatType( item );
+				},
+				render( { item }: { item: DataViewThreat } ) {
 					return (
-						<Text className={ styles.threat__subtitle }>
+						<div
+							className={ clsx( styles.media, {
+								[ styles[ 'media--critical' ] ]: item.severity >= 5,
+								[ styles[ 'media--high' ] ]: item.severity >= 3 && item.severity < 5,
+							} ) }
+						>
 							<Icon icon={ getThreatIcon( item ) } size={ 20 } />
-							{ getThreatSubtitle( item ) }
-						</Text>
+						</div>
 					);
-				}
-
-				return getThreatSubtitle( item );
-			},
-		} );
-
-		result.push( {
-			id: 'icon',
-			label: __( 'Icon', 'jetpack' ),
-			getValue( { item }: { item: DataViewThreat } ) {
-				return getThreatType( item );
-			},
-			render( { item }: { item: DataViewThreat } ) {
-				return (
-					<div
-						className={ clsx( styles.media, {
-							[ styles[ 'media--critical' ] ]: item.severity >= 5,
-							[ styles[ 'media--high' ] ]: item.severity >= 3 && item.severity < 5,
-						} ) }
-					>
-						<Icon icon={ getThreatIcon( item ) } size={ 20 } />
-					</div>
-				);
-			},
-			enableHiding: false,
-		} );
-
-		result.push( {
-			id: 'title',
-			label: __( 'Title', 'jetpack' ),
-			enableGlobalSearch: true,
-			enableHiding: false,
-			render( { item }: { item: DataViewThreat } ) {
-				if ( view.type === 'list' ) {
-					return item.title;
-				}
-				return (
-					<Text variant="body" className={ styles.threat__title }>
-						{ item.title }
-					</Text>
-				);
+				},
+				enableHiding: false,
 			},
-		} );
-
-		result.push( {
-			id: 'description',
-			label: __( 'Description', 'jetpack' ),
-			enableGlobalSearch: true,
-			enableHiding: false,
-			render( { item }: { item: DataViewThreat } ) {
-				return <Text variant="body-extra-small">{ item.description }</Text>;
+			{
+				id: 'status',
+				label: __( 'Status', 'jetpack' ),
+				elements: THREAT_STATUSES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( ! item.status ) {
+						return 'current';
+					}
+					return (
+						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+					);
+				},
 			},
-		} );
+			...( dataFields.includes( 'severity' )
+				? [
+						{
+							id: 'severity',
+							label: __( 'Severity', 'jetpack' ),
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.severity ?? 0;
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								if ( view.type === 'list' ) {
+									if ( item.severity >= 5 ) {
+										return _x(
+											'Critical Severity',
+											'Severity label for issues rated 5 or higher.',
+											'jetpack'
+										);
+									} else if ( item.severity >= 3 && item.severity < 5 ) {
+										return _x(
+											'High Severity',
+											'Severity label for issues rated between 3 and 5.',
+											'jetpack'
+										);
+									}
+									return _x(
+										'Low Severity',
+										'Severity label for issues rated below 3.',
+										'jetpack'
+									);
+								}
 
-		if ( dataFields.includes( 'signature' ) ) {
-			result.push( {
-				id: 'signature',
-				label: __( 'Signature', 'jetpack' ),
-				elements: signatures,
+								return <ThreatSeverityBadge severity={ item.severity } />;
+							},
+						},
+				  ]
+				: [] ),
+			{
+				id: 'extension',
+				label: __( 'Extension', 'jetpack' ),
 				enableGlobalSearch: true,
+				elements: extensions,
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.signature || '';
+					return item.extension ? item.extension.slug : '';
 				},
-			} );
-		}
+			},
+			{
+				id: 'type',
+				label: __( 'Category', 'jetpack' ),
+				elements: THREAT_TYPES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
+						return 'core';
+					}
+					if ( 'extension' in item && item.extension ) {
+						return item.extension.type;
+					}
+					if ( 'filename' in item && item.filename ) {
+						return 'file';
+					}
+					if ( 'table' in item && item.table ) {
+						return 'database';
+					}
 
-		if ( dataFields.includes( 'fixable' ) ) {
-			result.push( {
-				id: 'auto-fix',
-				label: __( 'Auto-fix', 'jetpack' ),
-				enableHiding: false,
+					return 'uncategorized';
+				},
+			},
+			{
+				id: 'subtitle',
+				label: __( 'Affected Item', 'jetpack' ),
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? 'Yes' : '';
+					return getThreatSubtitle( item );
 				},
 				render( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? <DataViewFixerStatus fixer={ item.fixer } view={ view } /> : null;
+					if ( view.type === 'table' ) {
+						return (
+							<div className={ styles.threat__subtitle }>
+								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+								{ getThreatSubtitle( item ) }
+							</div>
+						);
+					}
+
+					return getThreatSubtitle( item );
 				},
-			} );
-		}
+			},
+			...( dataFields.includes( 'signature' )
+				? [
+						{
+							id: 'signature',
+							label: __( 'Signature', 'jetpack' ),
+							elements: signatures,
+							enableGlobalSearch: true,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.signature || '';
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'fixable' )
+				? [
+						{
+							id: 'auto-fix',
+							label: __( 'Auto-fix', 'jetpack' ),
+							enableHiding: false,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.fixable ? 'Yes' : '';
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								return item.fixable ? (
+									<DataViewFixerStatus fixer={ item.fixer } view={ view } />
+								) : null;
+							},
+						},
+				  ]
+				: [] ),
+		];
 
 		return result;
 	}, [ extensions, signatures, dataFields, view ] );
@@ -436,6 +445,7 @@ export default function ThreatsDataView( {
 			defaultLayouts={ defaultLayouts }
 			fields={ fields }
 			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
 			onChangeView={ onChangeView }
 			paginationInfo={ paginationInfo }
 			view={ view }
diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
index b2ac064d0dda8..6dd33215489f4 100644
--- a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
@@ -32,6 +32,7 @@ Default.args = {
 			fixedOn: null,
 			severity: 8,
 			fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' },
+			fixer: { status: 'in_progress', last_updated: new Date().toISOString() },
 			status: 'current',
 			filename: '/var/www/html/wp-content/index.php',
 			context: {
@@ -118,6 +119,10 @@ Default.args = {
 				file: '/var/www/html/wp-admin/index.php',
 				extensionStatus: '',
 			},
+			fixer: {
+				status: 'in_progress',
+				last_updated: new Date( '1999-09-09T19:19:19.000Z' ).toISOString(),
+			},
 			filename: '/var/www/html/wp-admin/index.php',
 			diff: "--- /tmp/wordpress/6.6.2/wordpress/wp-admin/index.php\t2024-10-07 20:40:04.887546480 +0000\n+++ /var/www/html/wp-admin/index.php\t2024-10-07 20:39:58.775512965 +0000\n@@ -210,3 +210,4 @@\n wp_print_community_events_templates();\n \n require_once ABSPATH . 'wp-admin/admin-footer.php';\n+if ( true === false ) exit();\n\\ No newline at end of file\n",
 		},
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index f514629759f0a..ccac15b2d9215 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -1,10 +1,18 @@
 @import '@wordpress/dataviews/build-style/style.css';
 
 :global {
+	.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
+		min-height: 0;
+	}
+
     .dataviews-view-table td, .dataviews-view-table th {
         white-space: initial;
     }
 
+	.dataviews-view-table td .components-flex {
+		gap: 4px;
+	}
+
 	.dataviews-view-list .dataviews-views-list__fields {
 		align-items: center;
 	}
@@ -86,20 +94,23 @@
 	display: flex;
 	align-items: center;
 	gap: 6px;
-	font-size: 0.75rem; // 12px
-	line-height: 1;
+	font-size: 12px;
 	color: var( --jp-gray-80 );
-	font-weight: 400;
+	margin-bottom: 4px;
+
+	> svg {
+		color: currentColor;
+	}
 }
 
 .threat__title {
 	color: var( --jp-gray-80 );
-	font-size: 0.875rem; // 14px
 	font-weight: 510;
 }
 
 .threat__description {
 	color: var( --jp-gray-80 );
+	font-size: 12px;
 }
 
 .threat__severityHigh {
diff --git a/projects/js-packages/components/components/threats-data-view/utils.ts b/projects/js-packages/components/components/threats-data-view/utils.ts
index a01a3865c534e..3899b66d2f747 100644
--- a/projects/js-packages/components/components/threats-data-view/utils.ts
+++ b/projects/js-packages/components/components/threats-data-view/utils.ts
@@ -47,6 +47,10 @@ export const getThreatSubtitle = ( threat: DataViewThreat ) => {
 		case 'core':
 			return 'WordPress Core';
 		case 'file':
+			// Trim leading slash
+			if ( threat.filename.startsWith( '/' ) ) {
+				return threat.filename.slice( 1 );
+			}
 			return threat.filename;
 		case 'database':
 			return threat.table;

From 90e6dc55b217b7009811da169901349a9550d49c Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 11 Oct 2024 14:50:30 -0600
Subject: [PATCH 04/24] Add ThreatsDataView

---
 pnpm-lock.yaml                                | 357 ++++++++++++++++++
 .../changelog/add-threats-data-view-component |   4 +
 .../components/threats-data-view/constants.ts |  17 +
 .../threats-data-view/fixer-status.tsx        |  74 ++++
 .../threats-data-view/icon-tooltip.tsx        |  52 +++
 .../components/threats-data-view/index.tsx    | 353 +++++++++++++++++
 .../stories/index.stories.tsx                 | 250 ++++++++++++
 .../threats-data-view/styles.module.scss      |  45 +++
 .../threats-data-view/test/index.test.tsx     |  34 ++
 .../components/threats-data-view/types.d.ts   |  93 +++++
 .../components/threats-data-view/utils.ts     |  72 ++++
 projects/js-packages/components/index.ts      |   1 +
 projects/js-packages/components/package.json  |   1 +
 .../scan/changelog/add-threat-types           |   4 +
 .../js-packages/scan/src/types/threat.d.ts    |  59 +++
 .../changelog/move-components-to-package      |   5 +
 projects/plugins/protect/tsconfig.json        |   2 +-
 17 files changed, 1422 insertions(+), 1 deletion(-)
 create mode 100644 projects/js-packages/components/changelog/add-threats-data-view-component
 create mode 100644 projects/js-packages/components/components/threats-data-view/constants.ts
 create mode 100644 projects/js-packages/components/components/threats-data-view/fixer-status.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/index.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/styles.module.scss
 create mode 100644 projects/js-packages/components/components/threats-data-view/test/index.test.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/types.d.ts
 create mode 100644 projects/js-packages/components/components/threats-data-view/utils.ts
 create mode 100644 projects/js-packages/scan/changelog/add-threat-types
 create mode 100644 projects/js-packages/scan/src/types/threat.d.ts
 create mode 100644 projects/plugins/protect/changelog/move-components-to-package

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d20a403bb87c6..d1b7cc69be26c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -305,6 +305,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
@@ -5680,6 +5683,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'}
@@ -7689,6 +7696,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'}
@@ -7764,6 +7775,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'}
@@ -7771,6 +7789,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'}
@@ -7791,6 +7815,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'}
@@ -7803,6 +7833,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'}
@@ -7813,14 +7853,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'}
@@ -7839,10 +7891,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'}
@@ -7884,19 +7944,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'}
@@ -7918,6 +7997,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'}
@@ -7934,6 +8017,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'}
@@ -7981,20 +8068,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'}
@@ -8008,6 +8115,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'}
@@ -8043,6 +8156,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'}
@@ -8057,6 +8174,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'}
@@ -15176,6 +15297,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
@@ -17751,6 +17876,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
@@ -18186,6 +18317,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)
@@ -18294,6 +18479,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
@@ -18482,6 +18684,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
@@ -18564,6 +18785,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
@@ -18576,15 +18826,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
@@ -18855,6 +19119,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
@@ -18866,6 +19141,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
@@ -19022,14 +19301,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
@@ -19039,6 +19335,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
@@ -19102,6 +19405,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
@@ -19120,6 +19427,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
@@ -19305,6 +19617,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
@@ -19312,15 +19631,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
@@ -19401,6 +19737,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
@@ -19495,6 +19845,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
@@ -19513,6 +19868,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/threats-data-view/constants.ts b/projects/js-packages/components/components/threats-data-view/constants.ts
new file mode 100644
index 0000000000000..e9b2fea3e1db5
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/constants.ts
@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support';
+
+export const THREAT_STATUSES = [
+	{ value: 'current', label: __( 'Active', 'jetpack' ) },
+	{ value: 'fixed', label: __( 'Fixed', 'jetpack' ) },
+	{ 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-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
new file mode 100644
index 0000000000000..dfdaa7920c55c
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -0,0 +1,74 @@
+import { ExternalLink, Spinner } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { check, info } from '@wordpress/icons';
+import { PAID_PLUGIN_SUPPORT_URL } from './constants';
+import IconTooltip from './icon-tooltip';
+import styles from './styles.module.scss';
+import { ThreatFixStatus } from './types';
+import { fixerStatusIsStale } from './utils';
+
+/**
+ * Fixer Status component.
+ *
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ *
+ * @return {JSX.Element} The component.
+ */
+export default function FixerStatus( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ 24 }
+				text={ createInterpolateElement(
+					__(
+						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ 24 }
+				text={ createInterpolateElement(
+					__(
+						'An error occurred auto-fixing this threat. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return <Spinner color="black" />;
+	}
+
+	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
+}
diff --git a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
new file mode 100644
index 0000000000000..32699631c9807
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
@@ -0,0 +1,52 @@
+import { Text } from '@automattic/jetpack-components';
+import { Popover } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import React, { useCallback, useState } from 'react';
+import styles from './styles.module.scss';
+
+const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => {
+	const [ showPopover, setShowPopover ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
+	const handleEnter = useCallback( () => {
+		// Clear any existing timeout if user hovers back quickly
+		if ( timeoutId ) {
+			clearTimeout( timeoutId );
+			setTimeoutId( null );
+		}
+		setShowPopover( true );
+	}, [ timeoutId ] );
+
+	const handleOut = useCallback( () => {
+		// Set a timeout to delay the hiding of the popover
+		const id = setTimeout( () => {
+			setShowPopover( false );
+			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
+		}, 100 );
+
+		setTimeoutId( id );
+	}, [] );
+
+	return (
+		<div
+			className={ styles[ 'icon-popover' ] }
+			onMouseLeave={ handleOut }
+			onMouseEnter={ handleEnter }
+			onClick={ handleEnter }
+			onFocus={ handleEnter }
+			onBlur={ handleOut }
+			role="presentation"
+		>
+			<Icon className={ iconClassName } icon={ icon } size={ iconSize } />
+			{ showPopover && (
+				<Popover noArrow={ false } offset={ 5 } inline={ true } position={ popoverPosition }>
+					<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
+						{ text }
+					</Text>
+				</Popover>
+			) }
+		</div>
+	);
+};
+
+export default IconTooltip;
diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
new file mode 100644
index 0000000000000..5e3ec600a3ff7
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -0,0 +1,353 @@
+import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { Icon } from '@wordpress/components';
+import {
+	Action,
+	DataViews,
+	Field,
+	Filter,
+	filterSortAndPaginate,
+	SupportedLayouts,
+	type View,
+} from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from 'react';
+import { THREAT_STATUSES, THREAT_TYPES } from './constants';
+import FixerStatus from './fixer-status';
+import styles from './styles.module.scss';
+import { DataViewThreat, ThreatsDataViewActionCallback } from './types';
+import { getThreatIcon, getThreatSubtitle } from './utils';
+
+/**
+ * DataView 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.onFixThreat                 - Threat fix action callback.
+ * @param {Function} props.onIgnoreThreat              - Threat ignore action callback.
+ * @param {Function} props.onUnignoreThreat            - 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 component.
+ */
+export default function ThreatsDataView( {
+	data,
+	filters,
+	isThreatEligibleForFix,
+	isThreatEligibleForIgnore,
+	isThreatEligibleForUnignore,
+	onFixThreat,
+	onIgnoreThreat,
+	onUnignoreThreat,
+}: {
+	data: DataViewThreat[];
+	filters?: Filter[];
+	isThreatEligibleForFix?: ( threat: DataViewThreat ) => boolean;
+	isThreatEligibleForIgnore?: ( threat: DataViewThreat ) => boolean;
+	isThreatEligibleForUnignore?: ( threat: DataViewThreat ) => boolean;
+	onFixThreat?: ThreatsDataViewActionCallback;
+	onIgnoreThreat?: ThreatsDataViewActionCallback;
+	onUnignoreThreat?: ThreatsDataViewActionCallback;
+} ): JSX.Element {
+	/**
+	 * 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',
+		search: '',
+		filters: filters || [],
+		page: 1,
+		perPage: 25,
+		sort: {
+			field: 'severity',
+			direction: 'desc',
+		},
+		fields: [ 'severity', 'threat', 'auto-fix' ],
+		layout: {},
+	} );
+
+	/**
+	 * Compute values based on the threats data.
+	 *
+	 * @member {object} extensions - List of unique threat extensions.
+	 * @member {object} signatures - List of unique threat signatures.
+	 * @member {Array}  dataFields - List of unique threat data fields.
+	 */
+	const { extensions, signatures, dataFields } = 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.extensions.find( ( { value } ) => value === threat.signature ) ) {
+						acc.extensions.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: [] as { value: string; label: string }[],
+				signatures: [] as { value: string; label: string }[],
+				dataFields: [] as string[],
+			}
+		);
+	}, [ 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< DataViewThreat >[] = [
+			{
+				id: 'threat',
+				label: __( 'Threat', 'jetpack' ),
+				enableHiding: false,
+				enableGlobalSearch: true,
+				getValue( { item }: { item: DataViewThreat } ) {
+					return `${ item.title } ${ item.description }`;
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					return (
+						<div>
+							<Text mb={ 1 } className={ styles.threat__subtitle }>
+								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+								{ getThreatSubtitle( item ) }
+							</Text>
+							<Text variant="body" className={ styles.threat__title }>
+								{ item.title }
+							</Text>
+							<Text variant="body-extra-small">{ item.description }</Text>
+						</div>
+					);
+				},
+			},
+			{
+				id: 'status',
+				label: __( 'Status', 'jetpack' ),
+				elements: THREAT_STATUSES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					return (
+						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+					);
+				},
+			},
+			{
+				id: 'extension',
+				label: __( 'Extension', 'jetpack' ),
+				enableGlobalSearch: true,
+				elements: extensions,
+				getValue( { item }: { item: DataViewThreat } ) {
+					return item.extension ? item.extension.slug : '';
+				},
+			},
+			{
+				id: 'type',
+				label: __( 'Category', 'jetpack' ),
+				elements: THREAT_TYPES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
+						return 'core';
+					}
+					if ( 'extension' in item && item.extension ) {
+						return item.extension.type;
+					}
+					if ( 'filename' in item && item.filename ) {
+						return 'file';
+					}
+					if ( 'table' in item && item.table ) {
+						return 'database';
+					}
+
+					return 'uncategorized';
+				},
+			},
+		];
+
+		if ( dataFields.includes( 'fixable' ) ) {
+			result.push( {
+				id: 'auto-fix',
+				label: __( 'Auto-fix', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return item.fixable ? 'Yes' : '';
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					return item.fixable ? <FixerStatus fixer={ item.fixer } /> : null;
+				},
+			} );
+		}
+
+		if ( dataFields.includes( 'severity' ) ) {
+			result.push( {
+				id: 'severity',
+				label: __( 'Severity', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return item.severity ?? 0;
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					return <ThreatSeverityBadge severity={ item.severity } />;
+				},
+			} );
+		}
+
+		if ( dataFields.includes( 'signature' ) ) {
+			result.push( {
+				id: 'signature',
+				label: __( 'Signature', 'jetpack' ),
+				elements: signatures,
+				enableGlobalSearch: true,
+			} );
+		}
+
+		return result;
+	}, [ extensions, signatures, dataFields ] );
+
+	/**
+	 * 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< DataViewThreat >[] = [];
+
+		if ( dataFields.includes( 'fixable' ) ) {
+			result.push( {
+				id: 'fix',
+				label: __( 'Auto-Fix', 'jetpack' ),
+				isPrimary: true,
+				callback: onFixThreat,
+				isEligible( item ) {
+					if ( ! onFixThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForFix ) {
+						return isThreatEligibleForFix( item );
+					}
+					return !! item.fixable;
+				},
+				icon: 'check',
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: 'ignore',
+				label: __( 'Ignore', 'jetpack' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onIgnoreThreat,
+				isEligible( item ) {
+					if ( ! onIgnoreThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForIgnore ) {
+						return isThreatEligibleForIgnore( item );
+					}
+					return item.status === 'current';
+				},
+				icon: 'unseen',
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: 'un-ignore',
+				label: __( 'Unignore', 'jetpack' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onUnignoreThreat,
+				isEligible( item ) {
+					if ( ! onUnignoreThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForUnignore ) {
+						return isThreatEligibleForUnignore( item );
+					}
+					return item.status === 'ignored';
+				},
+				icon: 'seen',
+			} );
+		}
+
+		return result;
+	}, [
+		dataFields,
+		onFixThreat,
+		onIgnoreThreat,
+		onUnignoreThreat,
+		isThreatEligibleForFix,
+		isThreatEligibleForIgnore,
+		isThreatEligibleForUnignore,
+	] );
+
+	/**
+	 * 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 = {};
+
+	/**
+	 * 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: DataViewThreat ) => item.id.toString(), [] );
+
+	return (
+		<DataViews
+			actions={ actions }
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+		/>
+	);
+}
diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
new file mode 100644
index 0000000000000..b2ac064d0dda8
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
@@ -0,0 +1,250 @@
+import ThreatsDataView from '..';
+
+export default {
+	title: 'JS Packages/Components/Threats Data View',
+	component: ThreatsDataView,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = args => <ThreatsDataView { ...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: '' },
+			status: 'current',
+			filename: '/var/www/html/wp-content/index.php',
+			context: {
+				'1': 'echo <<<HTML',
+				'2': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*',
+				'3': 'HTML;',
+				marks: {},
+			},
+			source: null,
+		},
+		{
+			id: 185869883,
+			signature: 'Suspicious.Files',
+			title: 'Malicious code found in file: fuzzy.php',
+			description:
+				'Our security scanners detected that this file is identical to a previously identified malicious file',
+			firstDetected: '2024-10-07T20:45:06.000Z',
+			fixedIn: null,
+			fixedOn: null,
+			severity: 4,
+			fixable: false,
+			status: 'ignored',
+			filename: '/var/www/html/wp-content/fuzzy.php',
+			context: '',
+			source: null,
+		},
+		{
+			id: 185868972,
+			signature: 'EICAR_AV_Test_Suspicious',
+			title: 'Malicious code found in file: jptt_eicar.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: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 <<<HTML',
+				'7': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'8': 'HTML;',
+				'9': 'echo <<<HTML',
+				'10': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'11': 'HTML;',
+				marks: {},
+			},
+			source: null,
+		},
+		{
+			id: 184847701,
+			signature: 'Vulnerable.WP.Extension',
+			title: 'Vulnerable Plugin: WP Super Cache (version 1.6.3)',
+			description:
+				'The plugin WP Super Cache (version 1.6.3) has a known vulnerability. The WP Super Cache plugin before version 1.7.2 is vulnerable to an authenticated RCE in the settings page.',
+			firstDetected: '2024-10-02T17:34:59.000Z',
+			fixedIn: '1.12.4',
+			fixedOn: null,
+			severity: 3,
+			fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' },
+			status: 'current',
+			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',
+			},
+		},
+		{
+			id: 185868945,
+			signature: 'Core.File.Modification',
+			title: 'Compromised WordPress core file: index.php',
+			description:
+				'Core WordPress files are not normally changed. If you did not make these changes you should review the code.',
+			firstDetected: '2024-10-07T20:40:05.000Z',
+			severity: 4,
+			status: 'current',
+			fixable: {
+				fixer: 'replace',
+				file: '/var/www/html/wp-admin/index.php',
+				extensionStatus: '',
+			},
+			filename: '/var/www/html/wp-admin/index.php',
+			diff: "--- /tmp/wordpress/6.6.2/wordpress/wp-admin/index.php\t2024-10-07 20:40:04.887546480 +0000\n+++ /var/www/html/wp-admin/index.php\t2024-10-07 20:39:58.775512965 +0000\n@@ -210,3 +210,4 @@\n wp_print_community_events_templates();\n \n require_once ABSPATH . 'wp-admin/admin-footer.php';\n+if ( true === false ) exit();\n\\ No newline at end of file\n",
+		},
+		{
+			id: 13216959,
+			signature: 'Vulnerable.WP.Core',
+			title: 'Vulnerable WordPress Version (6.4.3)',
+			description: 'The installed version of WordPress (6.4.3) has a known vulnerability. ',
+			firstDetected: '2024-07-15T21:56:50.000Z',
+			severity: 4,
+			fixer: null,
+			fixedOn: '2024-07-15T22:01:42.000Z',
+			status: 'fixed',
+			fixable: false,
+			version: '6.4.3',
+			source: '',
+		},
+		{
+			id: '7275a176-d579-471a-8492-df8edbdf27de',
+			signature: null,
+			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',
+			},
+		},
+	],
+	filters: [
+		{
+			field: 'status',
+			operator: 'is',
+			value: 'current',
+		},
+	],
+	onFixThreat: () =>
+		alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+	onIgnoreThreat: () =>
+		alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+	onUnignoreThreat: () =>
+		// eslint-disable-next-line no-alert
+		alert(
+			'Unignore threat action callback triggered! This is handled by the component consumer.'
+		),
+};
+
+export const FreeResults = args => <ThreatsDataView { ...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-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
new file mode 100644
index 0000000000000..53abe3bc19fac
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -0,0 +1,45 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+:global {
+    .dataviews-view-table td, .dataviews-view-table th {
+        white-space: initial;
+    }
+}
+
+.icon-check {
+	fill: var( --jp-green-40 );
+}
+
+.icon-info {
+	fill: var( --jp-red );
+}
+
+.support-link {
+	color: inherit;
+
+	&:focus,
+	&:hover {
+		color: inherit;
+		box-shadow: none;
+	}
+}
+
+.threat__subtitle {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 0.75rem; // 12px
+	line-height: 1.25rem; // 20px 
+	color: var( --jp-gray-80 );
+	font-weight: 400;
+}
+
+.threat__title {
+	color: var( --jp-gray-80 );
+	font-size: 0.875rem; // 14px
+	font-weight: 510;
+}
+
+.threat__description {
+	color: var( --jp-gray-80 );
+}
diff --git a/projects/js-packages/components/components/threats-data-view/test/index.test.tsx b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx
new file mode 100644
index 0000000000000..0cada3e4c063a
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import ThreatsDataView from '..';
+import { DataViewThreat } from '../types';
+
+const 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: '' },
+		status: 'current',
+		filename: '/var/www/html/wp-content/index.php',
+		context: {
+			'1': 'echo <<<HTML',
+			'2': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*',
+			'3': 'HTML;',
+			marks: {},
+		},
+		source: null,
+	},
+] as DataViewThreat[];
+
+describe( 'ThreatsDataView', () => {
+	it( 'renders threat data', () => {
+		render( <ThreatsDataView data={ data } /> );
+		expect( screen.getByText( 'Malicious code found in file: index.php' ) ).toBeInTheDocument();
+	} );
+} );
diff --git a/projects/js-packages/components/components/threats-data-view/types.d.ts b/projects/js-packages/components/components/threats-data-view/types.d.ts
new file mode 100644
index 0000000000000..3f75a9f7d0b9d
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/types.d.ts
@@ -0,0 +1,93 @@
+export type ThreatStatus = 'fixed' | 'ignored' | 'current';
+
+export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
+
+export type DataViewThreat = {
+	/** The threat's unique ID. */
+	id: 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;
+
+	/** If available, the threat's latest fixer status. */
+	fixer?: ThreatFixStatus;
+
+	/** The threat's source. */
+	source?: string;
+
+	/** The threat's affected extension. */
+	extension?: {
+		name: string;
+		slug: string;
+		type: 'plugin' | 'theme' | 'core';
+		version: 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;
+};
+
+export type ThreatsDataViewActionCallback = (
+	items: Threat[],
+	context: { registry: unknown; onActionPerformed?: ( threats: DataViewThreat[] ) => void }
+) => void;
+
+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/components/components/threats-data-view/utils.ts b/projects/js-packages/components/components/threats-data-view/utils.ts
new file mode 100644
index 0000000000000..a01a3865c534e
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/utils.ts
@@ -0,0 +1,72 @@
+import { code, color, grid, plugins, shield, wordpress } from '@wordpress/icons';
+import { DataViewThreat, ThreatFixStatus } from './types';
+
+export const getThreatIcon = ( threat: DataViewThreat ) => {
+	const type = getThreatType( threat );
+
+	switch ( type ) {
+		case 'plugin':
+			return plugins;
+		case 'theme':
+			return color;
+		case 'core':
+			return wordpress;
+		case 'file':
+			return code;
+		case 'database':
+			return grid;
+		default:
+			return shield;
+	}
+};
+
+export const getThreatType = ( threat: DataViewThreat ) => {
+	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 getThreatSubtitle = ( threat: DataViewThreat ) => {
+	const type = getThreatType( threat );
+
+	switch ( type ) {
+		case 'plugin':
+		case 'theme':
+			return `${ threat.extension?.name } (${ threat.extension?.version })`;
+		case 'core':
+			return 'WordPress Core';
+		case 'file':
+			return threat.filename;
+		case 'database':
+			return threat.table;
+		default:
+			return '';
+	}
+};
+
+const FIXER_IS_STALE_THRESHOLD = 1000 * 60 * 60 * 24; // 24 hours
+
+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 )
+	);
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index d0a6a683663bf..499f783960073 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -45,6 +45,7 @@ export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
+export { default as ThreatsDataView } from './components/threats-data-view';
 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..1a5130f11e3aa 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -21,6 +21,7 @@
 		"@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-types b/projects/js-packages/scan/changelog/add-threat-types
new file mode 100644
index 0000000000000..e549d3e8a3f87
--- /dev/null
+++ b/projects/js-packages/scan/changelog/add-threat-types
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add threat TypeScript types
diff --git a/projects/js-packages/scan/src/types/threat.d.ts b/projects/js-packages/scan/src/types/threat.d.ts
new file mode 100644
index 0000000000000..757503972fa0c
--- /dev/null
+++ b/projects/js-packages/scan/src/types/threat.d.ts
@@ -0,0 +1,59 @@
+export type ThreatStatus = 'fixed' | 'ignored' | 'current';
+
+export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
+
+export type Threat = {
+	/** The threat's unique ID. */
+	id: 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 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;
+};
diff --git a/projects/plugins/protect/changelog/move-components-to-package b/projects/plugins/protect/changelog/move-components-to-package
new file mode 100644
index 0000000000000..29ead1e0b072a
--- /dev/null
+++ b/projects/plugins/protect/changelog/move-components-to-package
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Moved components to package
+
+
diff --git a/projects/plugins/protect/tsconfig.json b/projects/plugins/protect/tsconfig.json
index bc49ef3cebb58..3efc0b5fbb273 100644
--- a/projects/plugins/protect/tsconfig.json
+++ b/projects/plugins/protect/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"extends": "jetpack-js-tools/tsconfig.base.json",
-	"include": [ "./src/js" ],
+	"include": [ "./src/js", "../../js-packages/components/components/threats-data-view" ],
 	"compilerOptions": {
 		"sourceMap": true,
 		"outDir": "./build/",

From 3785e1a2ea98898f222844a486cc4dbe3c1bd436 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Sun, 20 Oct 2024 15:22:32 -0600
Subject: [PATCH 05/24] Add support for list view in threats data table

---
 .../threats-data-view/fixer-status.tsx        |  70 ++++-
 .../components/threats-data-view/index.tsx    | 275 ++++++++++++------
 .../threats-data-view/styles.module.scss      |  68 ++++-
 3 files changed, 318 insertions(+), 95 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index dfdaa7920c55c..35f61d4358d83 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -1,4 +1,5 @@
 import { ExternalLink, Spinner } from '@wordpress/components';
+import { View } from '@wordpress/dataviews';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
@@ -14,16 +15,23 @@ import { fixerStatusIsStale } from './utils';
  *
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
+ * @param {number}  props.size  - The size of the icon.
  *
  * @return {JSX.Element} The component.
  */
-export default function FixerStatus( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+export default function FixerStatusIcon( {
+	fixer,
+	size = 24,
+}: {
+	fixer?: ThreatFixStatus;
+	size?: number;
+} ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
 		return (
 			<IconTooltip
 				icon={ info }
 				iconClassName={ styles[ 'icon-info' ] }
-				iconSize={ 24 }
+				iconSize={ size }
 				text={ createInterpolateElement(
 					__(
 						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
@@ -72,3 +80,61 @@ export default function FixerStatus( { fixer }: { fixer?: ThreatFixStatus } ): J
 
 	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
 }
+
+/**
+ * FixerStatusText component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return __( 'Fixer is taking longer than expected', 'jetpack' );
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return __( 'Error auto-fixing threat', 'jetpack' );
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return __( 'Auto-fix in progress', 'jetpack' );
+	}
+
+	return __( 'Auto-fixable', 'jetpack' );
+}
+
+/**
+ * FixerStatusBadge component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	return (
+		<div className={ styles[ 'fixer-status-badge' ] }>
+			<FixerStatusIcon fixer={ fixer } size={ 12 } />
+			<FixerStatusText fixer={ fixer } />
+		</div>
+	);
+}
+
+/**
+ * FixerStatusText component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @param {object}  props.view  - The view.
+ * @return {string} The component.
+ */
+export function DataViewFixerStatus( {
+	fixer,
+	view,
+}: {
+	fixer?: ThreatFixStatus;
+	view: View;
+} ): JSX.Element {
+	if ( view.type === 'table' ) {
+		return <FixerStatusIcon fixer={ fixer } />;
+	}
+
+	return <FixerStatusBadge fixer={ fixer } />;
+}
diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
index 5e3ec600a3ff7..3e60a3f85ff4f 100644
--- a/projects/js-packages/components/components/threats-data-view/index.tsx
+++ b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -9,13 +9,14 @@ import {
 	SupportedLayouts,
 	type View,
 } from '@wordpress/dataviews';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
+import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
 import { THREAT_STATUSES, THREAT_TYPES } from './constants';
-import FixerStatus from './fixer-status';
+import { DataViewFixerStatus } from './fixer-status';
 import styles from './styles.module.scss';
 import { DataViewThreat, ThreatsDataViewActionCallback } from './types';
-import { getThreatIcon, getThreatSubtitle } from './utils';
+import { getThreatIcon, getThreatSubtitle, getThreatType } from './utils';
 
 /**
  * DataView component for displaying security threats.
@@ -51,6 +52,37 @@ export default function ThreatsDataView( {
 	onIgnoreThreat?: ThreatsDataViewActionCallback;
 	onUnignoreThreat?: ThreatsDataViewActionCallback;
 } ): JSX.Element {
+	/**
+	 * 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: {
+			fields: [ 'severity', 'threat', 'auto-fix' ],
+			layout: {
+				primaryField: 'severity',
+				combinedFields: [
+					{
+						id: 'threat',
+						label: __( 'Threat', 'jetpack' ),
+						children: [ 'subtitle', 'title', 'description' ],
+						direction: 'vertical',
+					},
+				],
+			},
+		},
+		list: {
+			layout: {
+				primaryField: 'title',
+				mediaField: 'icon',
+			},
+			fields: [ 'severity', 'subtitle', 'signature', 'auto-fix' ],
+		},
+	};
+
 	/**
 	 * DataView view object - configures how the dataset is visible to the user.
 	 *
@@ -58,6 +90,7 @@ export default function ThreatsDataView( {
 	 */
 	const [ view, setView ] = useState< View >( {
 		type: 'table',
+		...defaultLayouts.table,
 		search: '',
 		filters: filters || [],
 		page: 1,
@@ -66,8 +99,6 @@ export default function ThreatsDataView( {
 			field: 'severity',
 			direction: 'desc',
 		},
-		fields: [ 'severity', 'threat', 'auto-fix' ],
-		layout: {},
 	} );
 
 	/**
@@ -89,8 +120,8 @@ export default function ThreatsDataView( {
 
 				// Signatures
 				if ( threat?.signature ) {
-					if ( ! acc.extensions.find( ( { value } ) => value === threat.signature ) ) {
-						acc.extensions.push( { value: threat.signature, label: threat.signature } );
+					if ( ! acc.signatures.find( ( { value } ) => value === threat.signature ) ) {
+						acc.signatures.push( { value: threat.signature, label: threat.signature } );
 					}
 				}
 
@@ -122,109 +153,178 @@ export default function ThreatsDataView( {
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
 	 */
 	const fields = useMemo( () => {
-		const result: Field< DataViewThreat >[] = [
-			{
-				id: 'threat',
-				label: __( 'Threat', 'jetpack' ),
-				enableHiding: false,
-				enableGlobalSearch: true,
+		const result: Field< DataViewThreat >[] = [];
+
+		result.push( {
+			id: 'status',
+			label: __( 'Status', 'jetpack' ),
+			elements: THREAT_STATUSES,
+			getValue( { item }: { item: DataViewThreat } ) {
+				if ( ! item.status ) {
+					return 'current';
+				}
+				return THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status;
+			},
+		} );
+
+		if ( dataFields.includes( 'severity' ) ) {
+			result.push( {
+				id: 'severity',
+				label: __( 'Severity', 'jetpack' ),
 				getValue( { item }: { item: DataViewThreat } ) {
-					return `${ item.title } ${ item.description }`;
+					return item.severity ?? 0;
 				},
 				render( { item }: { item: DataViewThreat } ) {
-					return (
-						<div>
-							<Text mb={ 1 } className={ styles.threat__subtitle }>
-								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
-								{ getThreatSubtitle( item ) }
-							</Text>
-							<Text variant="body" className={ styles.threat__title }>
-								{ item.title }
-							</Text>
-							<Text variant="body-extra-small">{ item.description }</Text>
-						</div>
-					);
+					if ( view.type === 'list' ) {
+						if ( item.severity >= 5 ) {
+							return _x(
+								'Critical Severity',
+								'Severity label for issues rated 5 or higher.',
+								'jetpack'
+							);
+						} else if ( item.severity >= 3 && item.severity < 5 ) {
+							return _x(
+								'High Severity',
+								'Severity label for issues rated between 3 and 5.',
+								'jetpack'
+							);
+						}
+						return _x( 'Low Severity', 'Severity label for issues rated below 3.', 'jetpack' );
+					}
+
+					return <ThreatSeverityBadge severity={ item.severity } />;
 				},
+			} );
+		}
+
+		result.push( {
+			id: 'extension',
+			label: __( 'Extension', 'jetpack' ),
+			enableGlobalSearch: true,
+			elements: extensions,
+			getValue( { item }: { item: DataViewThreat } ) {
+				return item.extension ? item.extension.slug : '';
 			},
-			{
-				id: 'status',
-				label: __( 'Status', 'jetpack' ),
-				elements: THREAT_STATUSES,
-				getValue( { item }: { item: DataViewThreat } ) {
+		} );
+
+		result.push( {
+			id: 'type',
+			label: __( 'Category', 'jetpack' ),
+			elements: THREAT_TYPES,
+			getValue( { item }: { item: DataViewThreat } ) {
+				if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
+					return 'core';
+				}
+				if ( 'extension' in item && item.extension ) {
+					return item.extension.type;
+				}
+				if ( 'filename' in item && item.filename ) {
+					return 'file';
+				}
+				if ( 'table' in item && item.table ) {
+					return 'database';
+				}
+
+				return 'uncategorized';
+			},
+		} );
+
+		result.push( {
+			id: 'subtitle',
+			label: __( 'Affected Item', 'jetpack' ),
+			getValue( { item }: { item: DataViewThreat } ) {
+				return getThreatSubtitle( item );
+			},
+			render( { item }: { item: DataViewThreat } ) {
+				if ( view.type === 'table' ) {
 					return (
-						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+						<Text className={ styles.threat__subtitle }>
+							<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+							{ getThreatSubtitle( item ) }
+						</Text>
 					);
-				},
+				}
+
+				return getThreatSubtitle( item );
 			},
-			{
-				id: 'extension',
-				label: __( 'Extension', 'jetpack' ),
-				enableGlobalSearch: true,
-				elements: extensions,
-				getValue( { item }: { item: DataViewThreat } ) {
-					return item.extension ? item.extension.slug : '';
-				},
+		} );
+
+		result.push( {
+			id: 'icon',
+			label: __( 'Icon', 'jetpack' ),
+			getValue( { item }: { item: DataViewThreat } ) {
+				return getThreatType( item );
 			},
-			{
-				id: 'type',
-				label: __( 'Category', 'jetpack' ),
-				elements: THREAT_TYPES,
-				getValue( { item }: { item: DataViewThreat } ) {
-					if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
-						return 'core';
-					}
-					if ( 'extension' in item && item.extension ) {
-						return item.extension.type;
-					}
-					if ( 'filename' in item && item.filename ) {
-						return 'file';
-					}
-					if ( 'table' in item && item.table ) {
-						return 'database';
-					}
+			render( { item }: { item: DataViewThreat } ) {
+				return (
+					<div
+						className={ clsx( styles.media, {
+							[ styles[ 'media--critical' ] ]: item.severity >= 5,
+							[ styles[ 'media--high' ] ]: item.severity >= 3 && item.severity < 5,
+						} ) }
+					>
+						<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+					</div>
+				);
+			},
+			enableHiding: false,
+		} );
 
-					return 'uncategorized';
-				},
+		result.push( {
+			id: 'title',
+			label: __( 'Title', 'jetpack' ),
+			enableGlobalSearch: true,
+			enableHiding: false,
+			render( { item }: { item: DataViewThreat } ) {
+				if ( view.type === 'list' ) {
+					return item.title;
+				}
+				return (
+					<Text variant="body" className={ styles.threat__title }>
+						{ item.title }
+					</Text>
+				);
 			},
-		];
+		} );
 
-		if ( dataFields.includes( 'fixable' ) ) {
+		result.push( {
+			id: 'description',
+			label: __( 'Description', 'jetpack' ),
+			enableGlobalSearch: true,
+			enableHiding: false,
+			render( { item }: { item: DataViewThreat } ) {
+				return <Text variant="body-extra-small">{ item.description }</Text>;
+			},
+		} );
+
+		if ( dataFields.includes( 'signature' ) ) {
 			result.push( {
-				id: 'auto-fix',
-				label: __( 'Auto-fix', 'jetpack' ),
+				id: 'signature',
+				label: __( 'Signature', 'jetpack' ),
+				elements: signatures,
+				enableGlobalSearch: true,
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? 'Yes' : '';
-				},
-				render( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? <FixerStatus fixer={ item.fixer } /> : null;
+					return item.signature || '';
 				},
 			} );
 		}
 
-		if ( dataFields.includes( 'severity' ) ) {
+		if ( dataFields.includes( 'fixable' ) ) {
 			result.push( {
-				id: 'severity',
-				label: __( 'Severity', 'jetpack' ),
+				id: 'auto-fix',
+				label: __( 'Auto-fix', 'jetpack' ),
+				enableHiding: false,
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.severity ?? 0;
+					return item.fixable ? 'Yes' : '';
 				},
 				render( { item }: { item: DataViewThreat } ) {
-					return <ThreatSeverityBadge severity={ item.severity } />;
+					return item.fixable ? <DataViewFixerStatus fixer={ item.fixer } view={ view } /> : null;
 				},
 			} );
 		}
 
-		if ( dataFields.includes( 'signature' ) ) {
-			result.push( {
-				id: 'signature',
-				label: __( 'Signature', 'jetpack' ),
-				elements: signatures,
-				enableGlobalSearch: true,
-			} );
-		}
-
 		return result;
-	}, [ extensions, signatures, dataFields ] );
+	}, [ extensions, signatures, dataFields, view ] );
 
 	/**
 	 * DataView actions - collection of operations that can be performed upon each record.
@@ -304,15 +404,6 @@ export default function ThreatsDataView( {
 		isThreatEligibleForUnignore,
 	] );
 
-	/**
-	 * 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 = {};
-
 	/**
 	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
 	 *
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index 53abe3bc19fac..f514629759f0a 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -4,6 +4,35 @@
     .dataviews-view-table td, .dataviews-view-table th {
         white-space: initial;
     }
+
+	.dataviews-view-list .dataviews-views-list__fields {
+		align-items: center;
+	}
+}
+
+.media {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: black;
+	background-color: #EDFFEE;
+	border-color: #EDFFEE;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.media--critical {
+	background-color: var( --jp-red-5 );
+	color: var( --jp-red-80 );
+}
+
+.media--high {
+	background-color:  var( --jp-yellow-5 );
+	color: var( --jp-yellow-60 );
 }
 
 .icon-check {
@@ -24,12 +53,41 @@
 	}
 }
 
+.fixer-status-badge {
+	border-radius: 32px;
+	flex-shrink: 0;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: 16px;
+	padding: calc( var( --spacing-base ) / 2 ); // 4px
+	padding-right: calc( var( --spacing-base ) * 1.75 ); // 14px
+	position: relative;
+	text-align: center;
+	background: var( --jp-green-0 );
+	color: var( --jp-green-50 );
+	display: flex;
+	align-items: center;
+	
+	> svg {
+		height: 20px;
+		margin-top: -2px;
+		margin-bottom: -2px;
+	}
+}
+
+.threat__primary {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
 .threat__subtitle {
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	font-size: 0.75rem; // 12px
-	line-height: 1.25rem; // 20px 
+	line-height: 1;
 	color: var( --jp-gray-80 );
 	font-weight: 400;
 }
@@ -43,3 +101,11 @@
 .threat__description {
 	color: var( --jp-gray-80 );
 }
+
+.threat__severityHigh {
+	color: var( --jp-yellow-60 );
+}
+
+.threat__severityCritical {
+	color: var( --jp-red-60 );
+}

From 50b5cc184c728bf11e1a75d30ed584aaa2a67af8 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Sun, 20 Oct 2024 20:53:56 -0600
Subject: [PATCH 06/24] Minor adjustments

---
 .../components/threats-data-view/index.tsx    | 332 +++++++++---------
 .../stories/index.stories.tsx                 |   5 +
 .../threats-data-view/styles.module.scss      |  19 +-
 .../components/threats-data-view/utils.ts     |   4 +
 4 files changed, 195 insertions(+), 165 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
index 3e60a3f85ff4f..4e018d27c7a86 100644
--- a/projects/js-packages/components/components/threats-data-view/index.tsx
+++ b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -1,4 +1,4 @@
-import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { ThreatSeverityBadge } from '@automattic/jetpack-components';
 import { Icon } from '@wordpress/components';
 import {
 	Action,
@@ -6,6 +6,7 @@ import {
 	Field,
 	Filter,
 	filterSortAndPaginate,
+	SortDirection,
 	SupportedLayouts,
 	type View,
 } from '@wordpress/dataviews';
@@ -24,18 +25,19 @@ import { getThreatIcon, getThreatSubtitle, getThreatType } from './utils';
  * @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.onFixThreat                 - Threat fix action callback.
  * @param {Function} props.onIgnoreThreat              - Threat ignore action callback.
  * @param {Function} props.onUnignoreThreat            - 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 component.
  */
 export default function ThreatsDataView( {
 	data,
 	filters,
+	onChangeSelection,
 	isThreatEligibleForFix,
 	isThreatEligibleForIgnore,
 	isThreatEligibleForUnignore,
@@ -45,6 +47,7 @@ export default function ThreatsDataView( {
 }: {
 	data: DataViewThreat[];
 	filters?: Filter[];
+	onChangeSelection?: ( selectedItemIds: string[] ) => void;
 	isThreatEligibleForFix?: ( threat: DataViewThreat ) => boolean;
 	isThreatEligibleForIgnore?: ( threat: DataViewThreat ) => boolean;
 	isThreatEligibleForUnignore?: ( threat: DataViewThreat ) => boolean;
@@ -52,6 +55,17 @@ export default function ThreatsDataView( {
 	onIgnoreThreat?: ThreatsDataViewActionCallback;
 	onUnignoreThreat?: ThreatsDataViewActionCallback;
 } ): JSX.Element {
+	const baseView = {
+		sort: {
+			field: 'severity',
+			direction: 'desc' as SortDirection,
+		},
+		search: '',
+		filters: filters || [],
+		page: 1,
+		perPage: 25,
+	};
+
 	/**
 	 * DataView default layouts.
 	 *
@@ -61,6 +75,7 @@ export default function ThreatsDataView( {
 	 */
 	const defaultLayouts: SupportedLayouts = {
 		table: {
+			...baseView,
 			fields: [ 'severity', 'threat', 'auto-fix' ],
 			layout: {
 				primaryField: 'severity',
@@ -75,11 +90,12 @@ export default function ThreatsDataView( {
 			},
 		},
 		list: {
+			...baseView,
+			fields: [ 'severity', 'subtitle', 'signature', 'auto-fix' ],
 			layout: {
 				primaryField: 'title',
 				mediaField: 'icon',
 			},
-			fields: [ 'severity', 'subtitle', 'signature', 'auto-fix' ],
 		},
 	};
 
@@ -91,14 +107,6 @@ export default function ThreatsDataView( {
 	const [ view, setView ] = useState< View >( {
 		type: 'table',
 		...defaultLayouts.table,
-		search: '',
-		filters: filters || [],
-		page: 1,
-		perPage: 25,
-		sort: {
-			field: 'severity',
-			direction: 'desc',
-		},
 	} );
 
 	/**
@@ -106,7 +114,7 @@ export default function ThreatsDataView( {
 	 *
 	 * @member {object} extensions - List of unique threat extensions.
 	 * @member {object} signatures - List of unique threat signatures.
-	 * @member {Array}  dataFields - List of unique threat data fields.
+	 * @member {Array}  dataFields - List of unique fields.
 	 */
 	const { extensions, signatures, dataFields } = useMemo( () => {
 		return data.reduce(
@@ -153,175 +161,176 @@ export default function ThreatsDataView( {
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
 	 */
 	const fields = useMemo( () => {
-		const result: Field< DataViewThreat >[] = [];
-
-		result.push( {
-			id: 'status',
-			label: __( 'Status', 'jetpack' ),
-			elements: THREAT_STATUSES,
-			getValue( { item }: { item: DataViewThreat } ) {
-				if ( ! item.status ) {
-					return 'current';
-				}
-				return THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status;
-			},
-		} );
-
-		if ( dataFields.includes( 'severity' ) ) {
-			result.push( {
-				id: 'severity',
-				label: __( 'Severity', 'jetpack' ),
-				getValue( { item }: { item: DataViewThreat } ) {
-					return item.severity ?? 0;
-				},
+		const result: Field< DataViewThreat >[] = [
+			{
+				id: 'title',
+				label: __( 'Title', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
 				render( { item }: { item: DataViewThreat } ) {
 					if ( view.type === 'list' ) {
-						if ( item.severity >= 5 ) {
-							return _x(
-								'Critical Severity',
-								'Severity label for issues rated 5 or higher.',
-								'jetpack'
-							);
-						} else if ( item.severity >= 3 && item.severity < 5 ) {
-							return _x(
-								'High Severity',
-								'Severity label for issues rated between 3 and 5.',
-								'jetpack'
-							);
-						}
-						return _x( 'Low Severity', 'Severity label for issues rated below 3.', 'jetpack' );
+						return item.title;
 					}
-
-					return <ThreatSeverityBadge severity={ item.severity } />;
+					return <span className={ styles.threat__title }>{ item.title }</span>;
 				},
-			} );
-		}
-
-		result.push( {
-			id: 'extension',
-			label: __( 'Extension', 'jetpack' ),
-			enableGlobalSearch: true,
-			elements: extensions,
-			getValue( { item }: { item: DataViewThreat } ) {
-				return item.extension ? item.extension.slug : '';
-			},
-		} );
-
-		result.push( {
-			id: 'type',
-			label: __( 'Category', 'jetpack' ),
-			elements: THREAT_TYPES,
-			getValue( { item }: { item: DataViewThreat } ) {
-				if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
-					return 'core';
-				}
-				if ( 'extension' in item && item.extension ) {
-					return item.extension.type;
-				}
-				if ( 'filename' in item && item.filename ) {
-					return 'file';
-				}
-				if ( 'table' in item && item.table ) {
-					return 'database';
-				}
-
-				return 'uncategorized';
 			},
-		} );
-
-		result.push( {
-			id: 'subtitle',
-			label: __( 'Affected Item', 'jetpack' ),
-			getValue( { item }: { item: DataViewThreat } ) {
-				return getThreatSubtitle( item );
+			{
+				id: 'description',
+				label: __( 'Description', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render( { item }: { item: DataViewThreat } ) {
+					return <span className={ styles.threat__description }>{ item.description }</span>;
+				},
 			},
-			render( { item }: { item: DataViewThreat } ) {
-				if ( view.type === 'table' ) {
+			{
+				id: 'icon',
+				label: __( 'Icon', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return getThreatType( item );
+				},
+				render( { item }: { item: DataViewThreat } ) {
 					return (
-						<Text className={ styles.threat__subtitle }>
+						<div
+							className={ clsx( styles.media, {
+								[ styles[ 'media--critical' ] ]: item.severity >= 5,
+								[ styles[ 'media--high' ] ]: item.severity >= 3 && item.severity < 5,
+							} ) }
+						>
 							<Icon icon={ getThreatIcon( item ) } size={ 20 } />
-							{ getThreatSubtitle( item ) }
-						</Text>
+						</div>
 					);
-				}
-
-				return getThreatSubtitle( item );
-			},
-		} );
-
-		result.push( {
-			id: 'icon',
-			label: __( 'Icon', 'jetpack' ),
-			getValue( { item }: { item: DataViewThreat } ) {
-				return getThreatType( item );
-			},
-			render( { item }: { item: DataViewThreat } ) {
-				return (
-					<div
-						className={ clsx( styles.media, {
-							[ styles[ 'media--critical' ] ]: item.severity >= 5,
-							[ styles[ 'media--high' ] ]: item.severity >= 3 && item.severity < 5,
-						} ) }
-					>
-						<Icon icon={ getThreatIcon( item ) } size={ 20 } />
-					</div>
-				);
-			},
-			enableHiding: false,
-		} );
-
-		result.push( {
-			id: 'title',
-			label: __( 'Title', 'jetpack' ),
-			enableGlobalSearch: true,
-			enableHiding: false,
-			render( { item }: { item: DataViewThreat } ) {
-				if ( view.type === 'list' ) {
-					return item.title;
-				}
-				return (
-					<Text variant="body" className={ styles.threat__title }>
-						{ item.title }
-					</Text>
-				);
+				},
+				enableHiding: false,
 			},
-		} );
-
-		result.push( {
-			id: 'description',
-			label: __( 'Description', 'jetpack' ),
-			enableGlobalSearch: true,
-			enableHiding: false,
-			render( { item }: { item: DataViewThreat } ) {
-				return <Text variant="body-extra-small">{ item.description }</Text>;
+			{
+				id: 'status',
+				label: __( 'Status', 'jetpack' ),
+				elements: THREAT_STATUSES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( ! item.status ) {
+						return 'current';
+					}
+					return (
+						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+					);
+				},
 			},
-		} );
+			...( dataFields.includes( 'severity' )
+				? [
+						{
+							id: 'severity',
+							label: __( 'Severity', 'jetpack' ),
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.severity ?? 0;
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								if ( view.type === 'list' ) {
+									if ( item.severity >= 5 ) {
+										return _x(
+											'Critical Severity',
+											'Severity label for issues rated 5 or higher.',
+											'jetpack'
+										);
+									} else if ( item.severity >= 3 && item.severity < 5 ) {
+										return _x(
+											'High Severity',
+											'Severity label for issues rated between 3 and 5.',
+											'jetpack'
+										);
+									}
+									return _x(
+										'Low Severity',
+										'Severity label for issues rated below 3.',
+										'jetpack'
+									);
+								}
 
-		if ( dataFields.includes( 'signature' ) ) {
-			result.push( {
-				id: 'signature',
-				label: __( 'Signature', 'jetpack' ),
-				elements: signatures,
+								return <ThreatSeverityBadge severity={ item.severity } />;
+							},
+						},
+				  ]
+				: [] ),
+			{
+				id: 'extension',
+				label: __( 'Extension', 'jetpack' ),
 				enableGlobalSearch: true,
+				elements: extensions,
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.signature || '';
+					return item.extension ? item.extension.slug : '';
 				},
-			} );
-		}
+			},
+			{
+				id: 'type',
+				label: __( 'Category', 'jetpack' ),
+				elements: THREAT_TYPES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
+						return 'core';
+					}
+					if ( 'extension' in item && item.extension ) {
+						return item.extension.type;
+					}
+					if ( 'filename' in item && item.filename ) {
+						return 'file';
+					}
+					if ( 'table' in item && item.table ) {
+						return 'database';
+					}
 
-		if ( dataFields.includes( 'fixable' ) ) {
-			result.push( {
-				id: 'auto-fix',
-				label: __( 'Auto-fix', 'jetpack' ),
-				enableHiding: false,
+					return 'uncategorized';
+				},
+			},
+			{
+				id: 'subtitle',
+				label: __( 'Affected Item', 'jetpack' ),
 				getValue( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? 'Yes' : '';
+					return getThreatSubtitle( item );
 				},
 				render( { item }: { item: DataViewThreat } ) {
-					return item.fixable ? <DataViewFixerStatus fixer={ item.fixer } view={ view } /> : null;
+					if ( view.type === 'table' ) {
+						return (
+							<div className={ styles.threat__subtitle }>
+								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+								{ getThreatSubtitle( item ) }
+							</div>
+						);
+					}
+
+					return getThreatSubtitle( item );
 				},
-			} );
-		}
+			},
+			...( dataFields.includes( 'signature' )
+				? [
+						{
+							id: 'signature',
+							label: __( 'Signature', 'jetpack' ),
+							elements: signatures,
+							enableGlobalSearch: true,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.signature || '';
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'fixable' )
+				? [
+						{
+							id: 'auto-fix',
+							label: __( 'Auto-fix', 'jetpack' ),
+							enableHiding: false,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.fixable ? 'Yes' : '';
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								return item.fixable ? (
+									<DataViewFixerStatus fixer={ item.fixer } view={ view } />
+								) : null;
+							},
+						},
+				  ]
+				: [] ),
+		];
 
 		return result;
 	}, [ extensions, signatures, dataFields, view ] );
@@ -436,6 +445,7 @@ export default function ThreatsDataView( {
 			defaultLayouts={ defaultLayouts }
 			fields={ fields }
 			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
 			onChangeView={ onChangeView }
 			paginationInfo={ paginationInfo }
 			view={ view }
diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
index b2ac064d0dda8..6dd33215489f4 100644
--- a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
@@ -32,6 +32,7 @@ Default.args = {
 			fixedOn: null,
 			severity: 8,
 			fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' },
+			fixer: { status: 'in_progress', last_updated: new Date().toISOString() },
 			status: 'current',
 			filename: '/var/www/html/wp-content/index.php',
 			context: {
@@ -118,6 +119,10 @@ Default.args = {
 				file: '/var/www/html/wp-admin/index.php',
 				extensionStatus: '',
 			},
+			fixer: {
+				status: 'in_progress',
+				last_updated: new Date( '1999-09-09T19:19:19.000Z' ).toISOString(),
+			},
 			filename: '/var/www/html/wp-admin/index.php',
 			diff: "--- /tmp/wordpress/6.6.2/wordpress/wp-admin/index.php\t2024-10-07 20:40:04.887546480 +0000\n+++ /var/www/html/wp-admin/index.php\t2024-10-07 20:39:58.775512965 +0000\n@@ -210,3 +210,4 @@\n wp_print_community_events_templates();\n \n require_once ABSPATH . 'wp-admin/admin-footer.php';\n+if ( true === false ) exit();\n\\ No newline at end of file\n",
 		},
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index f514629759f0a..ccac15b2d9215 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -1,10 +1,18 @@
 @import '@wordpress/dataviews/build-style/style.css';
 
 :global {
+	.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
+		min-height: 0;
+	}
+
     .dataviews-view-table td, .dataviews-view-table th {
         white-space: initial;
     }
 
+	.dataviews-view-table td .components-flex {
+		gap: 4px;
+	}
+
 	.dataviews-view-list .dataviews-views-list__fields {
 		align-items: center;
 	}
@@ -86,20 +94,23 @@
 	display: flex;
 	align-items: center;
 	gap: 6px;
-	font-size: 0.75rem; // 12px
-	line-height: 1;
+	font-size: 12px;
 	color: var( --jp-gray-80 );
-	font-weight: 400;
+	margin-bottom: 4px;
+
+	> svg {
+		color: currentColor;
+	}
 }
 
 .threat__title {
 	color: var( --jp-gray-80 );
-	font-size: 0.875rem; // 14px
 	font-weight: 510;
 }
 
 .threat__description {
 	color: var( --jp-gray-80 );
+	font-size: 12px;
 }
 
 .threat__severityHigh {
diff --git a/projects/js-packages/components/components/threats-data-view/utils.ts b/projects/js-packages/components/components/threats-data-view/utils.ts
index a01a3865c534e..3899b66d2f747 100644
--- a/projects/js-packages/components/components/threats-data-view/utils.ts
+++ b/projects/js-packages/components/components/threats-data-view/utils.ts
@@ -47,6 +47,10 @@ export const getThreatSubtitle = ( threat: DataViewThreat ) => {
 		case 'core':
 			return 'WordPress Core';
 		case 'file':
+			// Trim leading slash
+			if ( threat.filename.startsWith( '/' ) ) {
+				return threat.filename.slice( 1 );
+			}
 			return threat.filename;
 		case 'database':
 			return threat.table;

From 601c3ddf50708e61db9115db163664d1487512f5 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 21 Oct 2024 10:13:37 -0700
Subject: [PATCH 07/24] Fix popover content styling

---
 .../components/threats-data-view/styles.module.scss  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index ccac15b2d9215..806ec78548dce 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -120,3 +120,15 @@
 .threat__severityCritical {
 	color: var( --jp-red-60 );
 }
+
+.icon-popover {
+	display: flex;
+	margin-left: calc( var( --spacing-base ) / 2 ); // 4px
+	fill: var( --jp-gray-20 );
+}
+
+.popover-text {
+	width: 250px;
+	padding: calc( var( --spacing-base ) * 2 ); // 16px
+	cursor: default;
+}
\ No newline at end of file

From 32b6d613c78d2c85424b7e032faf946cbc1ec136 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 11 Oct 2024 14:50:30 -0600
Subject: [PATCH 08/24] Add ThreatsDataView

Add support for list view in threats data table

Minor adjustments

Add badge component and integrate with threats data view

Update stories and align auto-fix column
---
 pnpm-lock.yaml                                | 357 ++++++++++++++
 .../changelog/add-threats-data-view-component |   4 +
 .../components/components/badge/index.tsx     |  39 ++
 .../badge/stories/index.stories.tsx           |  22 +
 .../components/badge/style.module.scss        |  25 +
 .../threat-severity-badge/index.tsx           |  38 +-
 .../components/threats-data-view/constants.ts |  17 +
 .../threats-data-view/fixer-status.tsx        | 144 ++++++
 .../threats-data-view/icon-tooltip.tsx        |  52 ++
 .../components/threats-data-view/index.tsx    | 446 ++++++++++++++++++
 .../stories/index.stories.tsx                 | 364 ++++++++++++++
 .../threats-data-view/styles.module.scss      | 109 +++++
 .../threats-data-view/test/index.test.tsx     |  34 ++
 .../components/threats-data-view/types.d.ts   |  93 ++++
 .../components/threats-data-view/utils.ts     |  76 +++
 projects/js-packages/components/index.ts      |   1 +
 projects/js-packages/components/package.json  |   1 +
 .../scan/changelog/add-threat-types           |   4 +
 .../js-packages/scan/src/types/threat.d.ts    |  59 +++
 .../changelog/move-components-to-package      |   5 +
 projects/plugins/protect/tsconfig.json        |   2 +-
 21 files changed, 1867 insertions(+), 25 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/add-threats-data-view-component
 create mode 100644 projects/js-packages/components/components/badge/index.tsx
 create mode 100644 projects/js-packages/components/components/badge/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/badge/style.module.scss
 create mode 100644 projects/js-packages/components/components/threats-data-view/constants.ts
 create mode 100644 projects/js-packages/components/components/threats-data-view/fixer-status.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/index.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/styles.module.scss
 create mode 100644 projects/js-packages/components/components/threats-data-view/test/index.test.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-view/types.d.ts
 create mode 100644 projects/js-packages/components/components/threats-data-view/utils.ts
 create mode 100644 projects/js-packages/scan/changelog/add-threat-types
 create mode 100644 projects/js-packages/scan/src/types/threat.d.ts
 create mode 100644 projects/plugins/protect/changelog/move-components-to-package

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d20a403bb87c6..d1b7cc69be26c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -305,6 +305,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
@@ -5680,6 +5683,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'}
@@ -7689,6 +7696,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'}
@@ -7764,6 +7775,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'}
@@ -7771,6 +7789,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'}
@@ -7791,6 +7815,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'}
@@ -7803,6 +7833,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'}
@@ -7813,14 +7853,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'}
@@ -7839,10 +7891,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'}
@@ -7884,19 +7944,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'}
@@ -7918,6 +7997,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'}
@@ -7934,6 +8017,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'}
@@ -7981,20 +8068,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'}
@@ -8008,6 +8115,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'}
@@ -8043,6 +8156,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'}
@@ -8057,6 +8174,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'}
@@ -15176,6 +15297,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
@@ -17751,6 +17876,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
@@ -18186,6 +18317,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)
@@ -18294,6 +18479,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
@@ -18482,6 +18684,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
@@ -18564,6 +18785,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
@@ -18576,15 +18826,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
@@ -18855,6 +19119,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
@@ -18866,6 +19141,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
@@ -19022,14 +19301,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
@@ -19039,6 +19335,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
@@ -19102,6 +19405,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
@@ -19120,6 +19427,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
@@ -19305,6 +19617,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
@@ -19312,15 +19631,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
@@ -19401,6 +19737,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
@@ -19495,6 +19845,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
@@ -19513,6 +19868,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 (
+		<span className={ classes } { ...props }>
+			{ children }
+		</span>
+	);
+};
+
+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 => <Badge { ...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-severity-badge/index.tsx b/projects/js-packages/components/components/threat-severity-badge/index.tsx
index 0c44edeee7222..6b076786a2959 100644
--- a/projects/js-packages/components/components/threat-severity-badge/index.tsx
+++ b/projects/js-packages/components/components/threat-severity-badge/index.tsx
@@ -1,34 +1,24 @@
 import { _x } from '@wordpress/i18n';
-import styles from './styles.module.scss';
+import Badge from '../badge';
 
-const severityClassNames = severity => {
+const ThreatSeverityBadge = ( { severity } ) => {
 	if ( severity >= 5 ) {
-		return 'is-critical';
-	} else if ( severity >= 3 && severity < 5 ) {
-		return 'is-high';
+		return (
+			<Badge variant="danger">
+				{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' ) }
+			</Badge>
+		);
 	}
-	return 'is-low';
-};
 
-const severityText = severity => {
-	if ( severity >= 5 ) {
-		return _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' );
-	} else if ( severity >= 3 && severity < 5 ) {
-		return _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' );
+	if ( severity >= 3 && severity < 5 ) {
+		return (
+			<Badge variant="warning">
+				{ _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' ) }
+			</Badge>
+		);
 	}
-	return _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' );
-};
 
-const ThreatSeverityBadge = ( { severity } ) => {
-	return (
-		<div
-			className={ `${ styles[ 'threat-severity-badge' ] } ${
-				styles[ severityClassNames( severity ) ]
-			}` }
-		>
-			{ severityText( severity ) }
-		</div>
-	);
+	return <Badge>{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ) }</Badge>;
 };
 
 export default ThreatSeverityBadge;
diff --git a/projects/js-packages/components/components/threats-data-view/constants.ts b/projects/js-packages/components/components/threats-data-view/constants.ts
new file mode 100644
index 0000000000000..e9b2fea3e1db5
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/constants.ts
@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support';
+
+export const THREAT_STATUSES = [
+	{ value: 'current', label: __( 'Active', 'jetpack' ) },
+	{ value: 'fixed', label: __( 'Fixed', 'jetpack' ) },
+	{ 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-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
new file mode 100644
index 0000000000000..f44a17a5c853d
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -0,0 +1,144 @@
+import { ExternalLink, Spinner } from '@wordpress/components';
+import { View } from '@wordpress/dataviews';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { check, info } from '@wordpress/icons';
+import { PAID_PLUGIN_SUPPORT_URL } from './constants';
+import IconTooltip from './icon-tooltip';
+import styles from './styles.module.scss';
+import { ThreatFixStatus } from './types';
+import { fixerStatusIsStale } from './utils';
+
+/**
+ * Fixer Status component.
+ *
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @param {number}  props.size  - The size of the icon.
+ *
+ * @return {JSX.Element} The component.
+ */
+export default function FixerStatusIcon( {
+	fixer,
+	size = 24,
+}: {
+	fixer?: ThreatFixStatus;
+	size?: number;
+} ): JSX.Element {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ size }
+				text={ createInterpolateElement(
+					__(
+						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ 24 }
+				text={ createInterpolateElement(
+					__(
+						'An error occurred auto-fixing this threat. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return <Spinner color="black" />;
+	}
+
+	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
+}
+
+/**
+ * FixerStatusText component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return __( 'Fixer is taking longer than expected', 'jetpack' );
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return __( 'Error auto-fixing threat', 'jetpack' );
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return __( 'Auto-fix in progress', 'jetpack' );
+	}
+
+	return __( 'Auto-fixable', 'jetpack' );
+}
+
+/**
+ * FixerStatusBadge component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	return (
+		<div className={ styles[ 'fixer-status-badge' ] }>
+			<FixerStatusIcon fixer={ fixer } size={ 12 } />
+			<FixerStatusText fixer={ fixer } />
+		</div>
+	);
+}
+
+/**
+ * FixerStatusText component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @param {object}  props.view  - The view.
+ * @return {string} The component.
+ */
+export function DataViewFixerStatus( {
+	fixer,
+	view,
+}: {
+	fixer?: ThreatFixStatus;
+	view: View;
+} ): JSX.Element {
+	if ( view.type === 'table' ) {
+		return (
+			<div className={ styles.threat__fixer }>
+				<FixerStatusIcon fixer={ fixer } />
+			</div>
+		);
+	}
+
+	return <FixerStatusBadge fixer={ fixer } />;
+}
diff --git a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
new file mode 100644
index 0000000000000..32699631c9807
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
@@ -0,0 +1,52 @@
+import { Text } from '@automattic/jetpack-components';
+import { Popover } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import React, { useCallback, useState } from 'react';
+import styles from './styles.module.scss';
+
+const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => {
+	const [ showPopover, setShowPopover ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
+	const handleEnter = useCallback( () => {
+		// Clear any existing timeout if user hovers back quickly
+		if ( timeoutId ) {
+			clearTimeout( timeoutId );
+			setTimeoutId( null );
+		}
+		setShowPopover( true );
+	}, [ timeoutId ] );
+
+	const handleOut = useCallback( () => {
+		// Set a timeout to delay the hiding of the popover
+		const id = setTimeout( () => {
+			setShowPopover( false );
+			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
+		}, 100 );
+
+		setTimeoutId( id );
+	}, [] );
+
+	return (
+		<div
+			className={ styles[ 'icon-popover' ] }
+			onMouseLeave={ handleOut }
+			onMouseEnter={ handleEnter }
+			onClick={ handleEnter }
+			onFocus={ handleEnter }
+			onBlur={ handleOut }
+			role="presentation"
+		>
+			<Icon className={ iconClassName } icon={ icon } size={ iconSize } />
+			{ showPopover && (
+				<Popover noArrow={ false } offset={ 5 } inline={ true } position={ popoverPosition }>
+					<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
+						{ text }
+					</Text>
+				</Popover>
+			) }
+		</div>
+	);
+};
+
+export default IconTooltip;
diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
new file mode 100644
index 0000000000000..2377e7a3a12cd
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -0,0 +1,446 @@
+import { Icon } from '@wordpress/components';
+import {
+	Action,
+	DataViews,
+	Field,
+	Filter,
+	filterSortAndPaginate,
+	SortDirection,
+	SupportedLayouts,
+	type View,
+} from '@wordpress/dataviews';
+import { __, _x } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from 'react';
+import Badge from '../badge';
+import { THREAT_STATUSES, THREAT_TYPES } from './constants';
+import { DataViewFixerStatus } from './fixer-status';
+import styles from './styles.module.scss';
+import { DataViewThreat, ThreatsDataViewActionCallback } from './types';
+import { getThreatIcon, getThreatSubtitle, getThreatType } from './utils';
+
+/**
+ * DataView 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.onFixThreat                 - Threat fix action callback.
+ * @param {Function} props.onIgnoreThreat              - Threat ignore action callback.
+ * @param {Function} props.onUnignoreThreat            - 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 component.
+ */
+export default function ThreatsDataView( {
+	data,
+	filters,
+	onChangeSelection,
+	isThreatEligibleForFix,
+	isThreatEligibleForIgnore,
+	isThreatEligibleForUnignore,
+	onFixThreat,
+	onIgnoreThreat,
+	onUnignoreThreat,
+}: {
+	data: DataViewThreat[];
+	filters?: Filter[];
+	onChangeSelection?: ( selectedItemIds: string[] ) => void;
+	isThreatEligibleForFix?: ( threat: DataViewThreat ) => boolean;
+	isThreatEligibleForIgnore?: ( threat: DataViewThreat ) => boolean;
+	isThreatEligibleForUnignore?: ( threat: DataViewThreat ) => boolean;
+	onFixThreat?: ThreatsDataViewActionCallback;
+	onIgnoreThreat?: ThreatsDataViewActionCallback;
+	onUnignoreThreat?: ThreatsDataViewActionCallback;
+} ): JSX.Element {
+	const baseView = {
+		sort: {
+			field: 'severity',
+			direction: 'desc' as SortDirection,
+		},
+		search: '',
+		filters: filters || [],
+		page: 1,
+		perPage: 25,
+	};
+
+	/**
+	 * 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', 'auto-fix' ],
+			layout: {
+				primaryField: 'severity',
+				combinedFields: [
+					{
+						id: 'threat',
+						label: __( 'Threat', 'jetpack' ),
+						children: [ 'subtitle', 'title', 'description' ],
+						direction: 'vertical',
+					},
+				],
+			},
+		},
+		list: {
+			...baseView,
+			fields: [ 'severity', 'subtitle', 'signature', 'auto-fix' ],
+			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 based on the 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 } = 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: [] as { value: string; label: string }[],
+				signatures: [] as { value: string; label: string }[],
+				dataFields: [] as string[],
+			}
+		);
+	}, [ 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< DataViewThreat >[] = [
+			{
+				id: 'title',
+				label: __( 'Title', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render( { item }: { item: DataViewThreat } ) {
+					if ( view.type === 'list' ) {
+						return item.title;
+					}
+					return <span className={ styles.threat__title }>{ item.title }</span>;
+				},
+			},
+			{
+				id: 'description',
+				label: __( 'Description', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render( { item }: { item: DataViewThreat } ) {
+					return <span className={ styles.threat__description }>{ item.description }</span>;
+				},
+			},
+			{
+				id: 'icon',
+				label: __( 'Icon', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return getThreatType( item );
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					return (
+						<div className={ styles.media }>
+							<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+						</div>
+					);
+				},
+				enableHiding: false,
+			},
+			{
+				id: 'status',
+				label: __( 'Status', 'jetpack' ),
+				elements: THREAT_STATUSES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( ! item.status ) {
+						return 'current';
+					}
+					return (
+						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
+					);
+				},
+			},
+			{
+				id: 'extension',
+				label: __( 'Extension', 'jetpack' ),
+				enableGlobalSearch: true,
+				elements: extensions,
+				getValue( { item }: { item: DataViewThreat } ) {
+					return item.extension ? item.extension.slug : '';
+				},
+			},
+			{
+				id: 'type',
+				label: __( 'Category', 'jetpack' ),
+				elements: THREAT_TYPES,
+				getValue( { item }: { item: DataViewThreat } ) {
+					if ( 'signature' in item && item.signature === 'Vulnerable.WP.Core' ) {
+						return 'core';
+					}
+					if ( 'extension' in item && item.extension ) {
+						return item.extension.type;
+					}
+					if ( 'filename' in item && item.filename ) {
+						return 'file';
+					}
+					if ( 'table' in item && item.table ) {
+						return 'database';
+					}
+
+					return 'uncategorized';
+				},
+			},
+			{
+				id: 'subtitle',
+				label: __( 'Affected Item', 'jetpack' ),
+				getValue( { item }: { item: DataViewThreat } ) {
+					return getThreatSubtitle( item );
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					if ( view.type === 'table' ) {
+						return (
+							<div className={ styles.threat__subtitle }>
+								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+								{ getThreatSubtitle( item ) }
+							</div>
+						);
+					}
+
+					return getThreatSubtitle( item );
+				},
+			},
+			...( dataFields.includes( 'signature' )
+				? [
+						{
+							id: 'signature',
+							label: __( 'Signature', 'jetpack' ),
+							elements: signatures,
+							enableGlobalSearch: true,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.signature || '';
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'severity' )
+				? [
+						{
+							id: 'severity',
+							label: __( 'Severity', 'jetpack' ),
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.severity ?? 0;
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								let text = _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' );
+								let variant: 'danger' | 'warning' | undefined;
+
+								if ( item.severity >= 5 ) {
+									text = _x(
+										'Critical',
+										'Severity label for issues rated 5 or higher.',
+										'jetpack'
+									);
+									variant = 'danger';
+								} else if ( item.severity >= 3 && item.severity < 5 ) {
+									text = _x(
+										'High',
+										'Severity label for issues rated between 3 and 5.',
+										'jetpack'
+									);
+									variant = 'warning';
+								}
+
+								return <Badge variant={ variant }>{ text }</Badge>;
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'fixable' )
+				? [
+						{
+							id: 'auto-fix',
+							label: __( 'Auto-fix', 'jetpack' ),
+							enableHiding: false,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return item.fixable ? 'Yes' : '';
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								return item.fixable ? (
+									<DataViewFixerStatus fixer={ item.fixer } view={ view } />
+								) : null;
+							},
+						},
+				  ]
+				: [] ),
+		];
+
+		return result;
+	}, [ extensions, signatures, dataFields, view ] );
+
+	/**
+	 * 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< DataViewThreat >[] = [];
+
+		if ( dataFields.includes( 'fixable' ) ) {
+			result.push( {
+				id: 'fix',
+				label: __( 'Auto-Fix', 'jetpack' ),
+				isPrimary: true,
+				callback: onFixThreat,
+				isEligible( item ) {
+					if ( ! onFixThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForFix ) {
+						return isThreatEligibleForFix( item );
+					}
+					return !! item.fixable;
+				},
+				icon: 'check',
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: 'ignore',
+				label: __( 'Ignore', 'jetpack' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onIgnoreThreat,
+				isEligible( item ) {
+					if ( ! onIgnoreThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForIgnore ) {
+						return isThreatEligibleForIgnore( item );
+					}
+					return item.status === 'current';
+				},
+				icon: 'unseen',
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: 'un-ignore',
+				label: __( 'Unignore', 'jetpack' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onUnignoreThreat,
+				isEligible( item ) {
+					if ( ! onUnignoreThreat ) {
+						return false;
+					}
+					if ( isThreatEligibleForUnignore ) {
+						return isThreatEligibleForUnignore( item );
+					}
+					return item.status === 'ignored';
+				},
+				icon: 'seen',
+			} );
+		}
+
+		return result;
+	}, [
+		dataFields,
+		onFixThreat,
+		onIgnoreThreat,
+		onUnignoreThreat,
+		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: DataViewThreat ) => item.id.toString(), [] );
+
+	return (
+		<DataViews
+			actions={ actions }
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+		/>
+	);
+}
diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
new file mode 100644
index 0000000000000..676debe4cf6c8
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
@@ -0,0 +1,364 @@
+import ThreatsDataView from '..';
+
+export default {
+	title: 'JS Packages/Components/Threats Data View',
+	component: ThreatsDataView,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = args => <ThreatsDataView { ...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: 'in_progress', last_updated: new Date().toISOString() },
+			status: 'current',
+			filename: '/var/www/html/wp-content/index.php',
+			context: {
+				'1': 'echo <<<HTML',
+				'2': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*',
+				'3': 'HTML;',
+				marks: {},
+			},
+			source: null,
+		},
+		{
+			id: 185869883,
+			signature: 'Suspicious.Files',
+			title: 'Malicious code found in file: fuzzy.php',
+			description:
+				'Our security scanners detected that this file is identical to a previously identified malicious file',
+			firstDetected: '2024-10-07T20:45:06.000Z',
+			fixedIn: null,
+			fixedOn: null,
+			severity: 4,
+			fixable: false,
+			status: 'ignored',
+			filename: '/var/www/html/wp-content/fuzzy.php',
+			context: '',
+			source: null,
+		},
+		{
+			id: 185868972,
+			signature: 'EICAR_AV_Test_Suspicious',
+			title: 'Malicious code found in file: jptt_eicar.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: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 <<<HTML',
+				'7': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'8': 'HTML;',
+				'9': 'echo <<<HTML',
+				'10': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'11': 'HTML;',
+				marks: {},
+			},
+			source: null,
+		},
+		{
+			id: 184847701,
+			signature: 'Vulnerable.WP.Extension',
+			title: 'Vulnerable Plugin: WP Super Cache (version 1.6.3)',
+			description:
+				'The plugin WP Super Cache (version 1.6.3) has a known vulnerability. The WP Super Cache plugin before version 1.7.2 is vulnerable to an authenticated RCE in the settings page.',
+			firstDetected: '2024-10-02T17:34:59.000Z',
+			fixedIn: '1.12.4',
+			fixedOn: null,
+			severity: 3,
+			fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' },
+			status: 'current',
+			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',
+			},
+		},
+		{
+			id: 185868945,
+			signature: 'Core.File.Modification',
+			title: 'Compromised WordPress core file: index.php',
+			description:
+				'Core WordPress files are not normally changed. If you did not make these changes you should review the code.',
+			firstDetected: '2024-10-07T20:40:05.000Z',
+			severity: 4,
+			status: 'current',
+			fixable: {
+				fixer: 'replace',
+				file: '/var/www/html/wp-admin/index.php',
+				extensionStatus: '',
+			},
+			fixer: {
+				status: 'in_progress',
+				last_updated: new Date( '1999-09-09T19:19:19.000Z' ).toISOString(),
+			},
+			filename: '/var/www/html/wp-admin/index.php',
+			diff: "--- /tmp/wordpress/6.6.2/wordpress/wp-admin/index.php\t2024-10-07 20:40:04.887546480 +0000\n+++ /var/www/html/wp-admin/index.php\t2024-10-07 20:39:58.775512965 +0000\n@@ -210,3 +210,4 @@\n wp_print_community_events_templates();\n \n require_once ABSPATH . 'wp-admin/admin-footer.php';\n+if ( true === false ) exit();\n\\ No newline at end of file\n",
+		},
+		{
+			id: 13216959,
+			signature: 'Vulnerable.WP.Core',
+			title: 'Vulnerable WordPress Version (6.4.3)',
+			description: 'The installed version of WordPress (6.4.3) has a known vulnerability. ',
+			firstDetected: '2024-07-15T21:56:50.000Z',
+			severity: 4,
+			fixer: null,
+			fixedOn: '2024-07-15T22:01:42.000Z',
+			status: 'fixed',
+			fixable: false,
+			version: '6.4.3',
+			source: '',
+		},
+		{
+			id: '7275a176-d579-471a-8492-df8edbdf27de',
+			signature: null,
+			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',
+			},
+		},
+	],
+	filters: [
+		{
+			field: 'status',
+			operator: 'is',
+			value: 'current',
+		},
+	],
+	onFixThreat: () =>
+		alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+	onIgnoreThreat: () =>
+		alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert
+	onUnignoreThreat: () =>
+		// eslint-disable-next-line no-alert
+		alert(
+			'Unignore threat action callback triggered! This is handled by the component consumer.'
+		),
+};
+
+export const FixerStatuses = args => <ThreatsDataView { ...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 <<<HTML',
+				'7': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'8': 'HTML;',
+				'9': 'echo <<<HTML',
+				'10': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-SUSPICIOUS-ANTIVIRUS-TEST-FILE!$H+H*',
+				'11': 'HTML;',
+				marks: {},
+			},
+			source: null,
+		},
+	],
+};
+
+export const FreeResults = args => <ThreatsDataView { ...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-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
new file mode 100644
index 0000000000000..158a01817cafd
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -0,0 +1,109 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+:global {
+	.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
+		min-height: 0;
+	}
+
+    .dataviews-view-table td, .dataviews-view-table th {
+        white-space: initial;
+    }
+
+	.dataviews-view-table td .components-flex {
+		gap: 4px;
+	}
+
+	.dataviews-view-list .dataviews-views-list__fields {
+		align-items: center;
+	}
+}
+
+.media {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: black;
+	background-color: #EDFFEE;
+	border-color: #EDFFEE;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.icon-check {
+	fill: var( --jp-green-40 );
+}
+
+.icon-info {
+	fill: var( --jp-red );
+}
+
+.support-link {
+	color: inherit;
+
+	&:focus,
+	&:hover {
+		color: inherit;
+		box-shadow: none;
+	}
+}
+
+.fixer-status-badge {
+	border-radius: 32px;
+	flex-shrink: 0;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: 16px;
+	padding: calc( var( --spacing-base ) / 2 ); // 4px
+	padding-right: calc( var( --spacing-base ) * 1.75 ); // 14px
+	position: relative;
+	text-align: center;
+	background: var( --jp-green-0 );
+	color: var( --jp-green-50 );
+	display: flex;
+	align-items: center;
+	
+	> svg {
+		height: 20px;
+		margin-top: -2px;
+		margin-bottom: -2px;
+	}
+}
+
+.threat__primary {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.threat__subtitle {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12px;
+	color: var( --jp-gray-80 );
+	margin-bottom: 4px;
+
+	> svg {
+		color: currentColor;
+	}
+}
+
+.threat__title {
+	color: var( --jp-gray-80 );
+	font-weight: 510;
+}
+
+.threat__description {
+	color: var( --jp-gray-80 );
+	font-size: 12px;
+}
+
+.threat__fixer {
+	min-width: 48px;
+	text-align: center;
+}
diff --git a/projects/js-packages/components/components/threats-data-view/test/index.test.tsx b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx
new file mode 100644
index 0000000000000..0cada3e4c063a
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import ThreatsDataView from '..';
+import { DataViewThreat } from '../types';
+
+const 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: '' },
+		status: 'current',
+		filename: '/var/www/html/wp-content/index.php',
+		context: {
+			'1': 'echo <<<HTML',
+			'2': 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*',
+			'3': 'HTML;',
+			marks: {},
+		},
+		source: null,
+	},
+] as DataViewThreat[];
+
+describe( 'ThreatsDataView', () => {
+	it( 'renders threat data', () => {
+		render( <ThreatsDataView data={ data } /> );
+		expect( screen.getByText( 'Malicious code found in file: index.php' ) ).toBeInTheDocument();
+	} );
+} );
diff --git a/projects/js-packages/components/components/threats-data-view/types.d.ts b/projects/js-packages/components/components/threats-data-view/types.d.ts
new file mode 100644
index 0000000000000..3f75a9f7d0b9d
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/types.d.ts
@@ -0,0 +1,93 @@
+export type ThreatStatus = 'fixed' | 'ignored' | 'current';
+
+export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
+
+export type DataViewThreat = {
+	/** The threat's unique ID. */
+	id: 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;
+
+	/** If available, the threat's latest fixer status. */
+	fixer?: ThreatFixStatus;
+
+	/** The threat's source. */
+	source?: string;
+
+	/** The threat's affected extension. */
+	extension?: {
+		name: string;
+		slug: string;
+		type: 'plugin' | 'theme' | 'core';
+		version: 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;
+};
+
+export type ThreatsDataViewActionCallback = (
+	items: Threat[],
+	context: { registry: unknown; onActionPerformed?: ( threats: DataViewThreat[] ) => void }
+) => void;
+
+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/components/components/threats-data-view/utils.ts b/projects/js-packages/components/components/threats-data-view/utils.ts
new file mode 100644
index 0000000000000..3899b66d2f747
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-view/utils.ts
@@ -0,0 +1,76 @@
+import { code, color, grid, plugins, shield, wordpress } from '@wordpress/icons';
+import { DataViewThreat, ThreatFixStatus } from './types';
+
+export const getThreatIcon = ( threat: DataViewThreat ) => {
+	const type = getThreatType( threat );
+
+	switch ( type ) {
+		case 'plugin':
+			return plugins;
+		case 'theme':
+			return color;
+		case 'core':
+			return wordpress;
+		case 'file':
+			return code;
+		case 'database':
+			return grid;
+		default:
+			return shield;
+	}
+};
+
+export const getThreatType = ( threat: DataViewThreat ) => {
+	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 getThreatSubtitle = ( threat: DataViewThreat ) => {
+	const type = getThreatType( threat );
+
+	switch ( type ) {
+		case 'plugin':
+		case 'theme':
+			return `${ threat.extension?.name } (${ threat.extension?.version })`;
+		case 'core':
+			return 'WordPress Core';
+		case 'file':
+			// Trim leading slash
+			if ( threat.filename.startsWith( '/' ) ) {
+				return threat.filename.slice( 1 );
+			}
+			return threat.filename;
+		case 'database':
+			return threat.table;
+		default:
+			return '';
+	}
+};
+
+const FIXER_IS_STALE_THRESHOLD = 1000 * 60 * 60 * 24; // 24 hours
+
+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 )
+	);
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index d0a6a683663bf..499f783960073 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -45,6 +45,7 @@ export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
+export { default as ThreatsDataView } from './components/threats-data-view';
 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..1a5130f11e3aa 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -21,6 +21,7 @@
 		"@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-types b/projects/js-packages/scan/changelog/add-threat-types
new file mode 100644
index 0000000000000..e549d3e8a3f87
--- /dev/null
+++ b/projects/js-packages/scan/changelog/add-threat-types
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add threat TypeScript types
diff --git a/projects/js-packages/scan/src/types/threat.d.ts b/projects/js-packages/scan/src/types/threat.d.ts
new file mode 100644
index 0000000000000..757503972fa0c
--- /dev/null
+++ b/projects/js-packages/scan/src/types/threat.d.ts
@@ -0,0 +1,59 @@
+export type ThreatStatus = 'fixed' | 'ignored' | 'current';
+
+export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
+
+export type Threat = {
+	/** The threat's unique ID. */
+	id: 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 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;
+};
diff --git a/projects/plugins/protect/changelog/move-components-to-package b/projects/plugins/protect/changelog/move-components-to-package
new file mode 100644
index 0000000000000..29ead1e0b072a
--- /dev/null
+++ b/projects/plugins/protect/changelog/move-components-to-package
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Moved components to package
+
+
diff --git a/projects/plugins/protect/tsconfig.json b/projects/plugins/protect/tsconfig.json
index bc49ef3cebb58..3efc0b5fbb273 100644
--- a/projects/plugins/protect/tsconfig.json
+++ b/projects/plugins/protect/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"extends": "jetpack-js-tools/tsconfig.base.json",
-	"include": [ "./src/js" ],
+	"include": [ "./src/js", "../../js-packages/components/components/threats-data-view" ],
 	"compilerOptions": {
 		"sourceMap": true,
 		"outDir": "./build/",

From 290086cd0d5d4d0aa710a739bb113f29b0bb0261 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 21 Oct 2024 13:42:41 -0700
Subject: [PATCH 09/24] Use js-packages IconTooltip

---
 .../threats-data-view/fixer-status.tsx        | 102 ++++++++----------
 .../threats-data-view/icon-tooltip.tsx        |  52 ---------
 .../threats-data-view/styles.module.scss      |  18 +---
 3 files changed, 48 insertions(+), 124 deletions(-)
 delete mode 100644 projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx

diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index 35f61d4358d83..1f53a4ad776b3 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -3,9 +3,10 @@ import { View } from '@wordpress/dataviews';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import { check, info } from '@wordpress/icons';
+import { check } from '@wordpress/icons';
+import IconTooltip from '../icon-tooltip';
+import Text from '../text';
 import { PAID_PLUGIN_SUPPORT_URL } from './constants';
-import IconTooltip from './icon-tooltip';
 import styles from './styles.module.scss';
 import { ThreatFixStatus } from './types';
 import { fixerStatusIsStale } from './utils';
@@ -15,62 +16,19 @@ import { fixerStatusIsStale } from './utils';
  *
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
- * @param {number}  props.size  - The size of the icon.
  *
  * @return {JSX.Element} The component.
  */
-export default function FixerStatusIcon( {
-	fixer,
-	size = 24,
-}: {
-	fixer?: ThreatFixStatus;
-	size?: number;
-} ): JSX.Element {
+export default function FixerStatusIcon( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
 		return (
-			<IconTooltip
-				icon={ info }
-				iconClassName={ styles[ 'icon-info' ] }
-				iconSize={ size }
-				text={ createInterpolateElement(
-					__(
-						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
-						'jetpack'
-					),
-					{
-						supportLink: (
-							<ExternalLink
-								className={ styles[ 'support-link' ] }
-								href={ PAID_PLUGIN_SUPPORT_URL }
-							/>
-						),
-					}
-				) }
-			/>
+			<InfoIconTooltip message={ __( 'The fixer is taking longer than expected.', 'jetpack' ) } />
 		);
 	}
 
 	if ( fixer && 'error' in fixer && fixer.error ) {
 		return (
-			<IconTooltip
-				icon={ info }
-				iconClassName={ styles[ 'icon-info' ] }
-				iconSize={ 24 }
-				text={ createInterpolateElement(
-					__(
-						'An error occurred auto-fixing this threat. Please try again or <supportLink>contact support</supportLink>.',
-						'jetpack'
-					),
-					{
-						supportLink: (
-							<ExternalLink
-								className={ styles[ 'support-link' ] }
-								href={ PAID_PLUGIN_SUPPORT_URL }
-							/>
-						),
-					}
-				) }
-			/>
+			<InfoIconTooltip message={ __( 'An error occurred auto-fixing this threat.', 'jetpack' ) } />
 		);
 	}
 
@@ -85,22 +43,22 @@ export default function FixerStatusIcon( {
  * FixerStatusText component.
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
- * @return {string} The component.
+ * @return {JSX.Element} The component.
  */
-function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
-		return __( 'Fixer is taking longer than expected', 'jetpack' );
+		return <span>{ __( 'Fixer is taking longer than expected', 'jetpack' ) }</span>;
 	}
 
 	if ( fixer && 'error' in fixer && fixer.error ) {
-		return __( 'Error auto-fixing threat', 'jetpack' );
+		return <span>{ __( 'Error auto-fixing threat', 'jetpack' ) }</span>;
 	}
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
-		return __( 'Auto-fix in progress', 'jetpack' );
+		return <span>{ __( 'Auto-fix in progress', 'jetpack' ) }</span>;
 	}
 
-	return __( 'Auto-fixable', 'jetpack' );
+	return <span>{ __( 'Auto-fixable', 'jetpack' ) }</span>;
 }
 
 /**
@@ -112,7 +70,7 @@ function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
 export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	return (
 		<div className={ styles[ 'fixer-status-badge' ] }>
-			<FixerStatusIcon fixer={ fixer } size={ 12 } />
+			<FixerStatusIcon fixer={ fixer } />
 			<FixerStatusText fixer={ fixer } />
 		</div>
 	);
@@ -138,3 +96,37 @@ export function DataViewFixerStatus( {
 
 	return <FixerStatusBadge fixer={ fixer } />;
 }
+
+/**
+ * InfoIconTooltip component.
+ * @param {object}  props         - Component props.
+ * @param {boolean} props.message - The popover message.
+ * @param {object}  props.size    - The size of the icon.
+ * @return {JSX.Elenment} The component.
+ */
+export function InfoIconTooltip( {
+	message,
+	size = 20,
+}: {
+	message?: string;
+	size?: number;
+} ): JSX.Element {
+	return (
+		<IconTooltip placement={ 'top' } iconSize={ size }>
+			<Text variant={ 'body-small' }>
+				{ message }{ ' ' }
+				{ createInterpolateElement(
+					__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			</Text>
+		</IconTooltip>
+	);
+}
diff --git a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
deleted file mode 100644
index 32699631c9807..0000000000000
--- a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover } from '@wordpress/components';
-import { Icon } from '@wordpress/icons';
-import React, { useCallback, useState } from 'react';
-import styles from './styles.module.scss';
-
-const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => {
-	const [ showPopover, setShowPopover ] = useState( false );
-	const [ timeoutId, setTimeoutId ] = useState( null );
-
-	const handleEnter = useCallback( () => {
-		// Clear any existing timeout if user hovers back quickly
-		if ( timeoutId ) {
-			clearTimeout( timeoutId );
-			setTimeoutId( null );
-		}
-		setShowPopover( true );
-	}, [ timeoutId ] );
-
-	const handleOut = useCallback( () => {
-		// Set a timeout to delay the hiding of the popover
-		const id = setTimeout( () => {
-			setShowPopover( false );
-			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
-		}, 100 );
-
-		setTimeoutId( id );
-	}, [] );
-
-	return (
-		<div
-			className={ styles[ 'icon-popover' ] }
-			onMouseLeave={ handleOut }
-			onMouseEnter={ handleEnter }
-			onClick={ handleEnter }
-			onFocus={ handleEnter }
-			onBlur={ handleOut }
-			role="presentation"
-		>
-			<Icon className={ iconClassName } icon={ icon } size={ iconSize } />
-			{ showPopover && (
-				<Popover noArrow={ false } offset={ 5 } inline={ true } position={ popoverPosition }>
-					<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
-						{ text }
-					</Text>
-				</Popover>
-			) }
-		</div>
-	);
-};
-
-export default IconTooltip;
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index bcac969fd76f7..859e8b3eb092a 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -47,10 +47,6 @@
 	fill: var( --jp-green-40 );
 }
 
-.icon-info {
-	fill: var( --jp-red );
-}
-
 .support-link {
 	color: inherit;
 
@@ -119,16 +115,4 @@
 
 .threat__severityCritical {
 	color: var( --jp-red-60 );
-}
-
-.icon-popover {
-	display: flex;
-	margin-left: calc( var( --spacing-base ) / 2 ); // 4px
-	fill: var( --jp-gray-20 );
-}
-
-.popover-text {
-	width: 250px;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px
-	cursor: default;
-}
+}
\ No newline at end of file

From a689b1c4ba4f4bf98a983d0cedf2e4f60b610e49 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 21 Oct 2024 15:14:20 -0700
Subject: [PATCH 10/24] Rebase

---
 .../threats-data-view/fixer-status.tsx        | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index 1f53a4ad776b3..bdbbe6097735b 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -33,7 +33,11 @@ export default function FixerStatusIcon( { fixer }: { fixer?: ThreatFixStatus }
 	}
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
-		return <Spinner color="black" />;
+		return (
+			<span className={ styles[ 'icon-spinner' ] }>
+				<Spinner color="black" />
+			</span>
+		);
 	}
 
 	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
@@ -47,18 +51,26 @@ export default function FixerStatusIcon( { fixer }: { fixer?: ThreatFixStatus }
  */
 function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
-		return <span>{ __( 'Fixer is taking longer than expected', 'jetpack' ) }</span>;
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'Fixer is taking longer than expected', 'jetpack' ) }
+			</span>
+		);
 	}
 
 	if ( fixer && 'error' in fixer && fixer.error ) {
-		return <span>{ __( 'Error auto-fixing threat', 'jetpack' ) }</span>;
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'An error occurred auto-fixing this threat', 'jetpack' ) }
+			</span>
+		);
 	}
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
-		return <span>{ __( 'Auto-fix in progress', 'jetpack' ) }</span>;
+		return <span className={ styles[ 'spinner-spacer' ] }>{ __( 'Auto-fixing', 'jetpack' ) }</span>;
 	}
 
-	return <span>{ __( 'Auto-fixable', 'jetpack' ) }</span>;
+	return <span className={ styles[ 'check-spacer' ] }>{ __( 'Auto-fixable', 'jetpack' ) }</span>;
 }
 
 /**
@@ -69,7 +81,7 @@ function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element
  */
 export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	return (
-		<div className={ styles[ 'fixer-status-badge' ] }>
+		<div className={ styles[ 'fixer-status' ] }>
 			<FixerStatusIcon fixer={ fixer } />
 			<FixerStatusText fixer={ fixer } />
 		</div>
@@ -77,7 +89,7 @@ export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.
 }
 
 /**
- * FixerStatusText component.
+ * DataViewFixerStatus component.
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
  * @param {object}  props.view  - The view.

From 606b19312277345e7d26a56c3d4008f4c4e5edf8 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 21 Oct 2024 15:15:10 -0700
Subject: [PATCH 11/24] Update CSS

---
 .../threats-data-view/styles.module.scss      | 74 ++++++++++---------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index 859e8b3eb092a..d6457b0ad110f 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -5,9 +5,9 @@
 		min-height: 0;
 	}
 
-    .dataviews-view-table td, .dataviews-view-table th {
-        white-space: initial;
-    }
+	.dataviews-view-table td, .dataviews-view-table th {
+		white-space: initial;
+	}
 
 	.dataviews-view-table td .components-flex {
 		gap: 4px;
@@ -33,20 +33,14 @@
 	}
 }
 
-.media--critical {
-	background-color: var( --jp-red-5 );
-	color: var( --jp-red-80 );
-}
-
-.media--high {
-	background-color:  var( --jp-yellow-5 );
-	color: var( --jp-yellow-60 );
-}
-
 .icon-check {
 	fill: var( --jp-green-40 );
 }
 
+.icon-info {
+	fill: var( --jp-red );
+}
+
 .support-link {
 	color: inherit;
 
@@ -57,26 +51,21 @@
 	}
 }
 
-.fixer-status-badge {
-	border-radius: 32px;
-	flex-shrink: 0;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 600;
-	line-height: 16px;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	padding-right: calc( var( --spacing-base ) * 1.75 ); // 14px
-	position: relative;
-	text-align: center;
-	background: var( --jp-green-0 );
-	color: var( --jp-green-50 );
+.fixer-status {
 	display: flex;
 	align-items: center;
-	
-	> svg {
-		height: 20px;
-		margin-top: -2px;
-		margin-bottom: -2px;
+	line-height: 0;
+
+	.icon-spinner {
+		margin-left: 1px;
+	}
+
+	.icon-info {
+		margin-left: -3px;
+	}
+
+	.icon-check {
+		margin-left: -6px;
 	}
 }
 
@@ -109,10 +98,25 @@
 	font-size: 12px;
 }
 
-.threat__severityHigh {
-	color: var( --jp-yellow-60 );
+.icon-spinner {
+	svg {
+		margin: 0;
+	}
+}
+
+.spinner-spacer {
+	margin-left: 8px;
+}
+
+.info-spacer {
+	margin-left: 4px;
 }
 
-.threat__severityCritical {
-	color: var( --jp-red-60 );
+.check-spacer {
+	margin-left: -2px;
+}
+
+.threat__fixer {
+	min-width: 50px;
+	text-align: center;
 }
\ No newline at end of file

From 0b3d618aa2ccc2c9f16ce5343ecfa4986c2db88a Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 21 Oct 2024 15:24:43 -0700
Subject: [PATCH 12/24] Update threat fixer position

---
 .../components/components/threats-data-view/styles.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index df7780ba1afcf..5cf22e93b8a4e 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -117,6 +117,6 @@
 }
 
 .threat__fixer {
-	min-width: 50px;
+	min-width: 54px;
 	text-align: center;
 }

From 6e65c57fe06eced4bc240784b1c7fb3bad2f8329 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 21 Oct 2024 15:42:17 -0700
Subject: [PATCH 13/24] Fixes and improvements

---
 .../threats-data-view/fixer-status.tsx           |  7 ++++++-
 .../threats-data-view/styles.module.scss         | 16 ++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index 3201b0c9cd381..9fb75d0011b43 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -128,7 +128,12 @@ export function InfoIconTooltip( {
 	size?: number;
 } ): JSX.Element {
 	return (
-		<IconTooltip placement={ 'top' } iconSize={ size }>
+		<IconTooltip
+			placement={ 'top' }
+			className={ styles[ 'icon-tooltip__container' ] }
+			iconClassName={ styles[ 'icon-tooltip__icon' ] }
+			iconSize={ size }
+		>
 			<Text variant={ 'body-small' }>
 				{ message }{ ' ' }
 				{ createInterpolateElement(
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index 5cf22e93b8a4e..e7ba45f4c7f96 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -60,10 +60,6 @@
 		margin-left: 1px;
 	}
 
-	.icon-info {
-		margin-left: -3px;
-	}
-
 	.icon-check {
 		margin-left: -6px;
 	}
@@ -120,3 +116,15 @@
 	min-width: 54px;
 	text-align: center;
 }
+
+.icon-tooltip {
+
+	&__container {
+		text-align: left;
+		height: 20px;
+	}
+
+	&__icon {
+		color: var( --jp-red );
+	}
+}
\ No newline at end of file

From 7da9b3ee7d849c364a598587b0a911e74eeb48c4 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Mon, 21 Oct 2024 22:04:33 -0700
Subject: [PATCH 14/24] Update ThreatDataView list view fixer status (#39854)

---
 .../threats-data-view/fixer-status.tsx        | 30 +++++++---
 .../threats-data-view/styles.module.scss      | 57 ++++++++++++-------
 2 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index f44a17a5c853d..89c68bc56b4cf 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -75,7 +75,11 @@ export default function FixerStatusIcon( {
 	}
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
-		return <Spinner color="black" />;
+		return (
+			<div className={ styles[ 'icon-spinner' ] }>
+				<Spinner color="black" />
+			</div>
+		);
 	}
 
 	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
@@ -87,20 +91,28 @@ export default function FixerStatusIcon( {
  * @param {boolean} props.fixer - The fixer status.
  * @return {string} The component.
  */
-function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
-		return __( 'Fixer is taking longer than expected', 'jetpack' );
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'Fixer is taking longer than expected', 'jetpack' ) }
+			</span>
+		);
 	}
 
 	if ( fixer && 'error' in fixer && fixer.error ) {
-		return __( 'Error auto-fixing threat', 'jetpack' );
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'An error occurred auto-fixing this threat', 'jetpack' ) }
+			</span>
+		);
 	}
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
-		return __( 'Auto-fix in progress', 'jetpack' );
+		return <span className={ styles[ 'spinner-spacer' ] }>{ __( 'Auto-fixing', 'jetpack' ) }</span>;
 	}
 
-	return __( 'Auto-fixable', 'jetpack' );
+	return <span className={ styles[ 'check-spacer' ] }>{ __( 'Auto-fixable', 'jetpack' ) }</span>;
 }
 
 /**
@@ -111,15 +123,15 @@ function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
  */
 export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	return (
-		<div className={ styles[ 'fixer-status-badge' ] }>
-			<FixerStatusIcon fixer={ fixer } size={ 12 } />
+		<div className={ styles[ 'fixer-status' ] }>
+			<FixerStatusIcon fixer={ fixer } />
 			<FixerStatusText fixer={ fixer } />
 		</div>
 	);
 }
 
 /**
- * FixerStatusText component.
+ * DataViewFixerStatus component.
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
  * @param {object}  props.view  - The view.
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index 158a01817cafd..5cf22e93b8a4e 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -5,9 +5,9 @@
 		min-height: 0;
 	}
 
-    .dataviews-view-table td, .dataviews-view-table th {
-        white-space: initial;
-    }
+	.dataviews-view-table td, .dataviews-view-table th {
+		white-space: initial;
+	}
 
 	.dataviews-view-table td .components-flex {
 		gap: 4px;
@@ -51,26 +51,21 @@
 	}
 }
 
-.fixer-status-badge {
-	border-radius: 32px;
-	flex-shrink: 0;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 600;
-	line-height: 16px;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	padding-right: calc( var( --spacing-base ) * 1.75 ); // 14px
-	position: relative;
-	text-align: center;
-	background: var( --jp-green-0 );
-	color: var( --jp-green-50 );
+.fixer-status {
 	display: flex;
 	align-items: center;
-	
-	> svg {
-		height: 20px;
-		margin-top: -2px;
-		margin-bottom: -2px;
+	line-height: 0;
+
+	.icon-spinner {
+		margin-left: 1px;
+	}
+
+	.icon-info {
+		margin-left: -3px;
+	}
+
+	.icon-check {
+		margin-left: -6px;
 	}
 }
 
@@ -103,7 +98,25 @@
 	font-size: 12px;
 }
 
+.icon-spinner {
+	svg {
+		margin: 0;
+	}
+}
+
+.spinner-spacer {
+	margin-left: 8px;
+}
+
+.info-spacer {
+	margin-left: 4px;
+}
+
+.check-spacer {
+	margin-left: -2px;
+}
+
 .threat__fixer {
-	min-width: 48px;
+	min-width: 54px;
 	text-align: center;
 }

From 998dcb7fff1c98f109dba9e2fcafa6f18365632f Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 08:28:58 -0700
Subject: [PATCH 15/24] Fix span use

---
 .../components/components/threats-data-view/fixer-status.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index 9fb75d0011b43..669e34e548c97 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -34,9 +34,9 @@ export default function FixerStatusIcon( { fixer }: { fixer?: ThreatFixStatus }
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
 		return (
-			<span className={ styles[ 'icon-spinner' ] }>
+			<div className={ styles[ 'icon-spinner' ] }>
 				<Spinner color="black" />
-			</span>
+			</div>
 		);
 	}
 

From 87761d6b877a26b15f93c78b40df53f59662d169 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 08:58:37 -0700
Subject: [PATCH 16/24] Add hover effect

---
 .../components/icon-tooltip/index.tsx         |  3 +-
 .../components/icon-tooltip/types.ts          |  5 ++
 .../threats-data-view/fixer-status.tsx        | 74 ++++++++++++++-----
 .../threats-data-view/styles.module.scss      |  4 +-
 4 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
index c64b6e74309dd..ec4acb787ecb2 100644
--- a/projects/js-packages/components/components/icon-tooltip/index.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -41,6 +41,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	wide = false,
 	inline = true,
 	shift = false,
+	hoverEnabled = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -89,7 +90,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 				className={ clsx( 'icon-tooltip-helper', { 'is-wide': wide } ) }
 				style={ iconShiftBySize }
 			>
-				{ ( isForcedToShow || isVisible ) && (
+				{ ( isForcedToShow || isVisible || hoverEnabled ) && (
 					<Popover { ...args }>
 						<div>
 							{ title && <div className="icon-tooltip-title">{ title }</div> }
diff --git a/projects/js-packages/components/components/icon-tooltip/types.ts b/projects/js-packages/components/components/icon-tooltip/types.ts
index 4e62cbdeeee3f..0a9cefea1d07e 100644
--- a/projects/js-packages/components/components/icon-tooltip/types.ts
+++ b/projects/js-packages/components/components/icon-tooltip/types.ts
@@ -83,4 +83,9 @@ export type IconTooltipProps = {
 	 * Enables the Popover to shift in order to stay in view when meeting the viewport edges.
 	 */
 	shift?: boolean;
+
+	/**
+	 * Enables the Popover to show on hover.
+	 */
+	hoverEnabled?: boolean;
 };
diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index 669e34e548c97..384968d862bc1 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -4,6 +4,7 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { check } from '@wordpress/icons';
+import React, { useState, useCallback } from 'react';
 import IconTooltip from '../icon-tooltip';
 import Text from '../text';
 import { PAID_PLUGIN_SUPPORT_URL } from './constants';
@@ -127,27 +128,60 @@ export function InfoIconTooltip( {
 	message?: string;
 	size?: number;
 } ): JSX.Element {
+	const [ showPopover, setShowPopover ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
+	const handleEnter = useCallback( () => {
+		// Clear any existing timeout if user hovers back quickly
+		if ( timeoutId ) {
+			clearTimeout( timeoutId );
+			setTimeoutId( null );
+		}
+		setShowPopover( true );
+	}, [ timeoutId ] );
+
+	const handleOut = useCallback( () => {
+		// Set a timeout to delay the hiding of the popover
+		const id = setTimeout( () => {
+			setShowPopover( false );
+			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
+		}, 100 );
+
+		setTimeoutId( id );
+	}, [] );
+
 	return (
-		<IconTooltip
-			placement={ 'top' }
-			className={ styles[ 'icon-tooltip__container' ] }
-			iconClassName={ styles[ 'icon-tooltip__icon' ] }
-			iconSize={ size }
+		<div
+			className={ styles[ 'icon-tooltip' ] }
+			onMouseLeave={ handleOut }
+			onMouseEnter={ handleEnter }
+			onClick={ handleEnter }
+			onFocus={ handleEnter }
+			onBlur={ handleOut }
+			role="presentation"
 		>
-			<Text variant={ 'body-small' }>
-				{ message }{ ' ' }
-				{ createInterpolateElement(
-					__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
-					{
-						supportLink: (
-							<ExternalLink
-								className={ styles[ 'support-link' ] }
-								href={ PAID_PLUGIN_SUPPORT_URL }
-							/>
-						),
-					}
-				) }
-			</Text>
-		</IconTooltip>
+			<IconTooltip
+				placement={ 'top' }
+				className={ styles[ 'icon-tooltip__container' ] }
+				iconClassName={ styles[ 'icon-tooltip__icon' ] }
+				iconSize={ size }
+				hoverEnabled={ showPopover }
+			>
+				<Text variant={ 'body-small' }>
+					{ message }{ ' ' }
+					{ createInterpolateElement(
+						__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
+						{
+							supportLink: (
+								<ExternalLink
+									className={ styles[ 'support-link' ] }
+									href={ PAID_PLUGIN_SUPPORT_URL }
+								/>
+							),
+						}
+					) }
+				</Text>
+			</IconTooltip>
+		</div>
 	);
 }
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index e7ba45f4c7f96..26481cfe4ad95 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -114,10 +114,12 @@
 
 .threat__fixer {
 	min-width: 54px;
-	text-align: center;
+	display: flex;
+	justify-content: center;
 }
 
 .icon-tooltip {
+	width: fit-content;
 
 	&__container {
 		text-align: left;

From 29bdae013983e329ed54a7ef0245869062443aac Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 09:32:52 -0700
Subject: [PATCH 17/24] Move hover effect handlers into base component

---
 .../components/icon-tooltip/index.tsx         | 33 +++++++-
 .../components/icon-tooltip/types.ts          |  2 +-
 .../threats-data-view/fixer-status.tsx        | 75 ++++++-------------
 .../threats-data-view/styles.module.scss      |  4 -
 4 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
index ec4acb787ecb2..574e7e5811c35 100644
--- a/projects/js-packages/components/components/icon-tooltip/index.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -41,10 +41,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	wide = false,
 	inline = true,
 	shift = false,
-	hoverEnabled = false,
+	hoverShow = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState< NodeJS.Timeout | null >( null );
+
 	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 	const toggleTooltip = useCallback(
 		e => {
@@ -54,6 +56,26 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 		[ isVisible, setIsVisible ]
 	);
 
+	const handleMouseEnter = useCallback( () => {
+		if ( hoverShow ) {
+			if ( timeoutId ) {
+				clearTimeout( timeoutId );
+				setTimeoutId( null );
+			}
+			setIsVisible( true );
+		}
+	}, [ hoverShow, timeoutId ] );
+
+	const handleMouseLeave = useCallback( () => {
+		if ( hoverShow ) {
+			const id = setTimeout( () => {
+				setIsVisible( false );
+				setTimeoutId( null );
+			}, 100 );
+			setTimeoutId( id );
+		}
+	}, [ hoverShow ] );
+
 	const args = {
 		// To be compatible with deprecating prop `position`.
 		position: placementsToPositions( placement ),
@@ -80,7 +102,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	const isForcedToShow = isAnchorWrapper && forceShow;
 
 	return (
-		<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
+		<div
+			className={ wrapperClassNames }
+			data-testid="icon-tooltip_wrapper"
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+		>
 			{ ! isAnchorWrapper && (
 				<Button variant="link" onMouseDown={ toggleTooltip }>
 					<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
@@ -90,7 +117,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 				className={ clsx( 'icon-tooltip-helper', { 'is-wide': wide } ) }
 				style={ iconShiftBySize }
 			>
-				{ ( isForcedToShow || isVisible || hoverEnabled ) && (
+				{ ( isForcedToShow || isVisible ) && (
 					<Popover { ...args }>
 						<div>
 							{ title && <div className="icon-tooltip-title">{ title }</div> }
diff --git a/projects/js-packages/components/components/icon-tooltip/types.ts b/projects/js-packages/components/components/icon-tooltip/types.ts
index 0a9cefea1d07e..dfb2c285ee854 100644
--- a/projects/js-packages/components/components/icon-tooltip/types.ts
+++ b/projects/js-packages/components/components/icon-tooltip/types.ts
@@ -87,5 +87,5 @@ export type IconTooltipProps = {
 	/**
 	 * Enables the Popover to show on hover.
 	 */
-	hoverEnabled?: boolean;
+	hoverShow?: boolean;
 };
diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index 384968d862bc1..889c58cff036f 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -4,7 +4,6 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { check } from '@wordpress/icons';
-import React, { useState, useCallback } from 'react';
 import IconTooltip from '../icon-tooltip';
 import Text from '../text';
 import { PAID_PLUGIN_SUPPORT_URL } from './constants';
@@ -128,60 +127,28 @@ export function InfoIconTooltip( {
 	message?: string;
 	size?: number;
 } ): JSX.Element {
-	const [ showPopover, setShowPopover ] = useState( false );
-	const [ timeoutId, setTimeoutId ] = useState( null );
-
-	const handleEnter = useCallback( () => {
-		// Clear any existing timeout if user hovers back quickly
-		if ( timeoutId ) {
-			clearTimeout( timeoutId );
-			setTimeoutId( null );
-		}
-		setShowPopover( true );
-	}, [ timeoutId ] );
-
-	const handleOut = useCallback( () => {
-		// Set a timeout to delay the hiding of the popover
-		const id = setTimeout( () => {
-			setShowPopover( false );
-			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
-		}, 100 );
-
-		setTimeoutId( id );
-	}, [] );
-
 	return (
-		<div
-			className={ styles[ 'icon-tooltip' ] }
-			onMouseLeave={ handleOut }
-			onMouseEnter={ handleEnter }
-			onClick={ handleEnter }
-			onFocus={ handleEnter }
-			onBlur={ handleOut }
-			role="presentation"
+		<IconTooltip
+			placement={ 'top' }
+			className={ styles[ 'icon-tooltip__container' ] }
+			iconClassName={ styles[ 'icon-tooltip__icon' ] }
+			iconSize={ size }
+			hoverShow={ true }
 		>
-			<IconTooltip
-				placement={ 'top' }
-				className={ styles[ 'icon-tooltip__container' ] }
-				iconClassName={ styles[ 'icon-tooltip__icon' ] }
-				iconSize={ size }
-				hoverEnabled={ showPopover }
-			>
-				<Text variant={ 'body-small' }>
-					{ message }{ ' ' }
-					{ createInterpolateElement(
-						__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
-						{
-							supportLink: (
-								<ExternalLink
-									className={ styles[ 'support-link' ] }
-									href={ PAID_PLUGIN_SUPPORT_URL }
-								/>
-							),
-						}
-					) }
-				</Text>
-			</IconTooltip>
-		</div>
+			<Text variant={ 'body-small' }>
+				{ message }{ ' ' }
+				{ createInterpolateElement(
+					__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			</Text>
+		</IconTooltip>
 	);
 }
diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
index 888f0e399cfc9..b291216e79e2f 100644
--- a/projects/js-packages/components/components/threats-data-view/styles.module.scss
+++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -37,10 +37,6 @@
 	fill: var( --jp-green-40 );
 }
 
-.icon-info {
-	fill: var( --jp-red );
-}
-
 .support-link {
 	color: inherit;
 

From 90f120eaca24dedefd1ce02992b47ae212e286e8 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 09:39:10 -0700
Subject: [PATCH 18/24] Add story

---
 .../icon-tooltip/stories/index.stories.tsx           | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx b/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
index c18acaafb6e21..e14347045d148 100644
--- a/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
@@ -46,6 +46,9 @@ export default {
 		wide: {
 			control: { type: 'boolean' },
 		},
+		hoverShow: {
+			control: { type: 'boolean' },
+		},
 	},
 };
 
@@ -106,3 +109,12 @@ Wide.args = {
 	wide: true,
 	placement: 'bottom-start',
 };
+
+export const HoverShow = Template.bind( {} );
+HoverShow.args = {
+	title: 'This is title!',
+	children: <div>This is a wide tooltip!</div>,
+	wide: true,
+	placement: 'bottom-start',
+	hoverShow: true,
+};

From e0573e41f71e4fd09ca188546e6d372ce3cf4c12 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 09:40:47 -0700
Subject: [PATCH 19/24] Fix story

---
 .../components/icon-tooltip/stories/index.stories.tsx          | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx b/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
index e14347045d148..fe10c03164ffc 100644
--- a/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx
@@ -113,8 +113,7 @@ Wide.args = {
 export const HoverShow = Template.bind( {} );
 HoverShow.args = {
 	title: 'This is title!',
-	children: <div>This is a wide tooltip!</div>,
-	wide: true,
+	children: <div>This is a tooltip!</div>,
 	placement: 'bottom-start',
 	hoverShow: true,
 };

From 3fd1561c8d8ef09118f99edd51e47684517ce6ce Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 11:29:58 -0700
Subject: [PATCH 20/24] Update type

---
 .../js-packages/components/components/icon-tooltip/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
index 574e7e5811c35..6d653703e6ada 100644
--- a/projects/js-packages/components/components/icon-tooltip/index.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -45,7 +45,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
-	const [ timeoutId, setTimeoutId ] = useState< NodeJS.Timeout | null >( null );
+	const [ timeoutId, setTimeoutId ] = useState< number | null >( null );
 
 	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 	const toggleTooltip = useCallback(

From 8b2d0de5d51a7d4a1d006d833114b5fdc7e627b3 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 11:40:25 -0700
Subject: [PATCH 21/24] Fix build issues

---
 .../js-packages/components/components/icon-tooltip/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
index 6d653703e6ada..c51ec4e125d01 100644
--- a/projects/js-packages/components/components/icon-tooltip/index.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -45,7 +45,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
-	const [ timeoutId, setTimeoutId ] = useState< number | null >( null );
+	const [ timeoutId, setTimeoutId ] = useState( null );
 
 	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 	const toggleTooltip = useCallback(

From f3149b17e8f67fd131f7f5f461728d0d28e0ca5f Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 22 Oct 2024 11:43:45 -0700
Subject: [PATCH 22/24] Remove custom IconTooltip

---
 .../threats-data-view/icon-tooltip.tsx        | 52 -------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx

diff --git a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
deleted file mode 100644
index 32699631c9807..0000000000000
--- a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover } from '@wordpress/components';
-import { Icon } from '@wordpress/icons';
-import React, { useCallback, useState } from 'react';
-import styles from './styles.module.scss';
-
-const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => {
-	const [ showPopover, setShowPopover ] = useState( false );
-	const [ timeoutId, setTimeoutId ] = useState( null );
-
-	const handleEnter = useCallback( () => {
-		// Clear any existing timeout if user hovers back quickly
-		if ( timeoutId ) {
-			clearTimeout( timeoutId );
-			setTimeoutId( null );
-		}
-		setShowPopover( true );
-	}, [ timeoutId ] );
-
-	const handleOut = useCallback( () => {
-		// Set a timeout to delay the hiding of the popover
-		const id = setTimeout( () => {
-			setShowPopover( false );
-			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
-		}, 100 );
-
-		setTimeoutId( id );
-	}, [] );
-
-	return (
-		<div
-			className={ styles[ 'icon-popover' ] }
-			onMouseLeave={ handleOut }
-			onMouseEnter={ handleEnter }
-			onClick={ handleEnter }
-			onFocus={ handleEnter }
-			onBlur={ handleOut }
-			role="presentation"
-		>
-			<Icon className={ iconClassName } icon={ icon } size={ iconSize } />
-			{ showPopover && (
-				<Popover noArrow={ false } offset={ 5 } inline={ true } position={ popoverPosition }>
-					<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
-						{ text }
-					</Text>
-				</Popover>
-			) }
-		</div>
-	);
-};
-
-export default IconTooltip;

From 7221cf9e0cf154ff60ff37f9745b9eaa1036ba57 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 23 Oct 2024 09:45:59 -0700
Subject: [PATCH 23/24] Include stale fixer in main story

---
 .../components/threats-data-view/stories/index.stories.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
index ab6d6137d6b3c..ef738f23f8e98 100644
--- a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
@@ -120,7 +120,10 @@ Default.args = {
 				file: '/var/www/html/wp-admin/index.php',
 				extensionStatus: '',
 			},
-			fixer: null,
+			fixer: {
+				status: 'in_progress',
+				last_updated: new Date( '1999-09-09T19:19:19.000Z' ).toISOString(),
+			},
 			filename: '/var/www/html/wp-admin/index.php',
 			diff: "--- /tmp/wordpress/6.6.2/wordpress/wp-admin/index.php\t2024-10-07 20:40:04.887546480 +0000\n+++ /var/www/html/wp-admin/index.php\t2024-10-07 20:39:58.775512965 +0000\n@@ -210,3 +210,4 @@\n wp_print_community_events_templates();\n \n require_once ABSPATH . 'wp-admin/admin-footer.php';\n+if ( true === false ) exit();\n\\ No newline at end of file\n",
 		},

From 27fc7bc51e497f9f5cef21e98d0af3854ea61c43 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Thu, 24 Oct 2024 16:19:07 -0600
Subject: [PATCH 24/24] Update
 projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx

---
 .../components/threats-data-view/stories/index.stories.tsx   | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
index ef738f23f8e98..ab6d6137d6b3c 100644
--- a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx
@@ -120,10 +120,7 @@ Default.args = {
 				file: '/var/www/html/wp-admin/index.php',
 				extensionStatus: '',
 			},
-			fixer: {
-				status: 'in_progress',
-				last_updated: new Date( '1999-09-09T19:19:19.000Z' ).toISOString(),
-			},
+			fixer: null,
 			filename: '/var/www/html/wp-admin/index.php',
 			diff: "--- /tmp/wordpress/6.6.2/wordpress/wp-admin/index.php\t2024-10-07 20:40:04.887546480 +0000\n+++ /var/www/html/wp-admin/index.php\t2024-10-07 20:39:58.775512965 +0000\n@@ -210,3 +210,4 @@\n wp_print_community_events_templates();\n \n require_once ABSPATH . 'wp-admin/admin-footer.php';\n+if ( true === false ) exit();\n\\ No newline at end of file\n",
 		},