From 32008f08d79191d51a14523e5497bf6d9e634f9b Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 11 Oct 2024 14:50:30 -0600
Subject: [PATCH] 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

Update ThreatDataView list view fixer status (#39854)

Update ThreatsDataView to use js-packages IconTooltip (#39856)
---
 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 +
 .../components/icon-tooltip/index.tsx         |  30 +-
 .../icon-tooltip/stories/index.stories.tsx    |  11 +
 .../components/icon-tooltip/types.ts          |   5 +
 .../threat-severity-badge/index.tsx           |  38 +-
 .../threats-data-views/constants.ts           |  18 +
 .../threats-data-views/fixer-status.tsx       | 154 ++++++
 .../threats-data-views/icon-tooltip.tsx       |  52 ++
 .../components/threats-data-views/index.tsx   | 505 ++++++++++++++++++
 .../stories/index.stories.tsx                 | 362 +++++++++++++
 .../threats-data-views/styles.module.scss     | 124 +++++
 .../threats-data-views/test/index.test.tsx    |  34 ++
 .../components/threats-data-views/types.d.ts  |  93 ++++
 .../components/threats-data-views/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 +-
 24 files changed, 1995 insertions(+), 26 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-views/constants.ts
 create mode 100644 projects/js-packages/components/components/threats-data-views/fixer-status.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-views/icon-tooltip.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-views/index.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-views/styles.module.scss
 create mode 100644 projects/js-packages/components/components/threats-data-views/test/index.test.tsx
 create mode 100644 projects/js-packages/components/components/threats-data-views/types.d.ts
 create mode 100644 projects/js-packages/components/components/threats-data-views/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 573fa8ff3aeff..a3883be69e5cd 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'}
@@ -7692,6 +7699,10 @@ packages:
       webpack-dev-server:
         optional: true
 
+  '@wordpress/a11y@4.10.0':
+    resolution: {integrity: sha512-fp7C0Ofy95a+jzK126CxAXV+uXSFQs2Clm6PCeE9Y1BowUiL9l7juUCh1R+2NDAKATxH4r3QplxVftDqn+ctUw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/a11y@4.9.0':
     resolution: {integrity: sha512-OfM/wnB8ItmGM5I/u+4E4aJdqvy98kg24zrS+CqPLgq3eYG6MNkIQJZov/I3XcsyxGjLkkLsybEM5xEYUN0ZtA==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7767,6 +7778,13 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/components@28.10.0':
+    resolution: {integrity: sha512-w5mteCe9qOBMgD8d80QBVOPk0YAquUkMD9o3jDvdqUwiTcVgxn4QSKjh65NGYotvMhDsgsMTq+qgifAB+ubepg==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   '@wordpress/components@28.9.0':
     resolution: {integrity: sha512-/ept6OSWAh4bdZwlhU8TwJe9QM6rqjAXVA08H0wymtjdRbAQiuDsmMfLFKCF1M4hGZeeThAD5YF0ZkBK5iCeCA==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7774,6 +7792,12 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/compose@7.10.0':
+    resolution: {integrity: sha512-/j4+wXthaV/KMt0VANvhhRJEJfPc21c7Tq1ZeLxgsbkq4xmi9qXeDT91cvP/U+Ta3phf15K8vdxMr8MqHHiFoQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+
   '@wordpress/compose@7.9.0':
     resolution: {integrity: sha512-6f1mZLwMD2woFSMLJ5JaCZQZz1kFD2X4gwT5c4IVnzpm+/9A0OqeTdncAi6I6wHRtKN9DzvaMQPuZitQz7HmNA==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7794,6 +7818,12 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/data@10.10.0':
+    resolution: {integrity: sha512-oyYl89p86+U9W6vKDqScKhUGKKzsnETj9rg8zOnT4K9ceOScjGCgdCE+XxcY9exeRg33aSYDjmvnsXXYStBYmA==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+
   '@wordpress/data@10.9.0':
     resolution: {integrity: sha512-hw8VYSPZuEqlEwRnQnKgqzbwCqoGY4U5kLCZA/1McOYspvkIceTVve4qBC17QUJhu2pLEXEc6p4zBpy+SXfToQ==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7806,6 +7836,16 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  '@wordpress/dataviews@4.6.0':
+    resolution: {integrity: sha512-DdlKg1ojGjkgS0z0GHfALOYcsMU7+8Gwzi+GFqRcfGdVOn9SiKY5pMEULFki3RkF3Nh61FEpViRxNczHJhOKCg==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+
+  '@wordpress/date@5.10.0':
+    resolution: {integrity: sha512-TT9HN0H72Eqhlaiy+XMDyZBlTBf2iZ936Q2tJdxsB4qBlG2ntLT3PviIPa+G44QYYxLomrUqTEYQ6FBxiJaNHg==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/date@5.9.0':
     resolution: {integrity: sha512-Iywz1bga3cPSrf7k4dh2mYVsACqzu0GXYhfu57ElAM9robGjcUxJdzgbWUZw90v473NOp2UpVYsWCuDEqNDcdw==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7816,14 +7856,26 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
 
+  '@wordpress/deprecated@4.10.0':
+    resolution: {integrity: sha512-lktJKX3AxrskTuLbJuKY/Mzg9De6MYcOzEEL+RUHxfIx8wMtiDnVTAf7epur9XuHVOmdgCCRT6D44I23MoS0sw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/deprecated@4.9.0':
     resolution: {integrity: sha512-1PMCLULxTlI0iatsHxpPgtogMfvd/wvAqAOLGHUdkdbBtUEquGrRMo/h+TLU/ne2JDf5JKMA4ntQV6zDNO4+eg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/dom-ready@4.10.0':
+    resolution: {integrity: sha512-qpadyGMRvLf7zOe4XtoIo409ZRJ7IrBI36fdEXjRWV8E+Cmcx3ldr5/2iLKJ2cqYg9geQWXDeiykSWOClNJx+w==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/dom-ready@4.9.0':
     resolution: {integrity: sha512-Kas5YaRl+HebAxFfv9ctB8bdmjbhISIBo747nXCK6KqojQ/Zn2Bctv2XTypR3GMb7OS7KqVMeyCJhjEpuc8Wlw==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/dom@4.10.0':
+    resolution: {integrity: sha512-1ZRCrDB2TV44GLwaUH9HRGQGQqXcawSEmzVPABQwfwzkUKijfbRdsWqpHrTLqlSZRImHEdp6oSON+1JmCNhXSw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/dom@4.9.0':
     resolution: {integrity: sha512-g9jRTxOpSfygEbKNGwYwx21b5GktI2SkwQSAPKpG4mmFAvLbqIzjVc2nkudRO914DKgPWrBsfKsc4Smbtpbkig==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7842,10 +7894,18 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/element@6.10.0':
+    resolution: {integrity: sha512-7zW+14vHqEn45nszSLMUqE5IbzOtvgUUgF56qlMhwabpG4l/zhaj3gO3wLDI19C13ih1vOdSjzPc3At4fB3tRQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/element@6.9.0':
     resolution: {integrity: sha512-G5W29cxfAVc/JQBzkKoXh1t4T+G3HWa1kIgXCqIZksonlYHzCVON1Or+rD/YJZSxT6RDkBVDzdl9p0pGOrccTg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/escape-html@3.10.0':
+    resolution: {integrity: sha512-3glY3MhXEHlPP0/hrS3vkRmAOHtutvoHGhkr8vnva6TLg4CsAeo42nYbuFJ+ukVMWdCtmV+28UjOeiYtG/fZOA==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/escape-html@3.9.0':
     resolution: {integrity: sha512-+/SnVUXzzr+0pgfAqK3pocGveSDS3SHrgJ1BTgV7DA1l6y9mbjnqKgFQkNW/nzca92ZuYg2vjLcq1dqDGz4v1Q==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7887,19 +7947,38 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/hooks@4.10.0':
+    resolution: {integrity: sha512-LcorV5Z9XoJCKyj5Ulgw1HPHyM2mxsSInC7wl5cuIgDFmuwPTfRndUDGWz/v86GX1GnUIB0h/ggd53vx1HiW4A==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/hooks@4.9.0':
     resolution: {integrity: sha512-nan2w5imPhTaJwWdKjm/0ZMDbWR3P6Vhl4OqnBZZcJqOyNSfwsnJ98I+BWjq0U6SmiCnZQERjN0SjVdmD1tCjw==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/html-entities@4.10.0':
+    resolution: {integrity: sha512-Bnop0k3yjtRhm4CedbsGG22OMLEeob4mYmTR9z0g0QP7OofEw1TINspizr+kQbOu4n1ubJ6YVC8T13Z2va1j0g==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/html-entities@4.9.0':
     resolution: {integrity: sha512-RaiMecK8Igqb4yreJncSZEBl6DR1eAj8M3mHwrJASJLiiBLcaWg0oi8iiabUEmgGCsIu2pCeXmV+8WO0FRDO5Q==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/i18n@5.10.0':
+    resolution: {integrity: sha512-HZ6UcMHsjOocDI0zVAuP4JIl97LRmpGo/lVxzVIreaLoYitmYVDUzji02u1o7sEdRWc1Hpkm2/oO/9275rJg1w==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    hasBin: true
+
   '@wordpress/i18n@5.9.0':
     resolution: {integrity: sha512-pKFV9S/l0TFlm0mlWLW51hAoRDNmZPGnfEpNXq43VKZkm1cco3Z1E54PHMGk8HdCECHqYNiJuQJOBOlqcYmnVQ==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
     hasBin: true
 
+  '@wordpress/icons@10.10.0':
+    resolution: {integrity: sha512-41HaxMtq0WZF37mpZ1RQ1s1J3ia5gHFUd/uGhP9p1dhzEFYALxKVTB0Gy3cJhT0CslKeEwYx2XQIP1ZaCKNakQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18
+
   '@wordpress/icons@10.9.0':
     resolution: {integrity: sha512-mAkqhlbbPiuR6yBOczunqyxQ2Pez1XB7gAZnnsP5DlTKsYnJQ12N0Ql4Oh8f1LI+UeF18VMtHes12sWK/1LQHQ==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7921,6 +8000,10 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/is-shallow-equal@5.10.0':
+    resolution: {integrity: sha512-KOkZzOnmjpH7hzPiaXUjhUlfKIGTzL7qUdNHBC1SFDOYpnRUSw8f1AtWxRpPBHl5dieYVx0x1qjOWjm/DtTOXg==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/is-shallow-equal@5.9.0':
     resolution: {integrity: sha512-cKqgI6RQ27ZZRo4Zc/jioG3qInDKQqcT3xg5YxsduX2f1b6vQV42p0L4waLFeJZQ8WDUsgsR53AQivdInkO8gA==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7937,6 +8020,10 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  '@wordpress/keycodes@4.10.0':
+    resolution: {integrity: sha512-2i+N90HBMqQegtGqeVB8pJz8ZgKAY1eZmQegE9MXczYVac85DDOoxhY/41c44s6Kwl3waJ2Zght6UXE0OUFMxw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/keycodes@4.9.0':
     resolution: {integrity: sha512-WO4MPlO+uGaDP5jYB9f4hn0NgBwvlaUvj4MLOIDcQGE0ljElLGFeXvqjVH0KVtnZkIKiZNPK7eoQxTWnxWaTjw==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -7984,20 +8071,40 @@ packages:
     peerDependencies:
       prettier: '>=3'
 
+  '@wordpress/primitives@4.10.0':
+    resolution: {integrity: sha512-dmck1VSKbxy7yA5VZhi+jOyb0Hc6QqOxIZ4R139a/Zuzr0xHuuKurh94At/R9UHYP8Dr9YxAlgiF/uQChFzKQg==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+
   '@wordpress/primitives@4.9.0':
     resolution: {integrity: sha512-vroiqxd+MP/K1+KEJqMAR/B/++4oShY4CisvMOK3gn75DmUV2QB6iQmBSjHRALqw9rqeHf7S0jLHWiFrAR+Dkg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
     peerDependencies:
       react: ^18.0.0
 
+  '@wordpress/priority-queue@3.10.0':
+    resolution: {integrity: sha512-Gjbw5NmRLrZ9KkiROJlL4I/s96bMlpd7gGkQbcCyyeLIZduGxQDzI4Jih5s0Xrm7Gj8WFd57wRDe/voZJR0ZsQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/priority-queue@3.9.0':
     resolution: {integrity: sha512-QVfELUL4ei5Uf0DNG9wMVNBILasGWWWogVjVeP1xXqmfSDoeFpPzXpfL9zfANndE2S49DJP9ZoZsCaJHtMrYzA==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/private-apis@1.10.0':
+    resolution: {integrity: sha512-gH6ZHmkc01MC431nMyjxFmU/77jVliOwjuv6SffQUgHMJyM75LiKC8CU8LEeLWbn3obG87m/n7Quj5p2MjtaeA==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/private-apis@1.9.0':
     resolution: {integrity: sha512-hZbKVSlo5yOpssMshXwNlUyk83Ev55ZKMfJMVU5nWxiIM9bMCuhpwU+AXQ0GKxOzn2oMayVmtJ00FRbJFg+AMg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/redux-routine@5.10.0':
+    resolution: {integrity: sha512-oDqZDjz8H/bt02IEoIZCwsUsL17UOEnMg/heV0PoJxo3k5MTrvqJqzgBLoSC0PFzx/pwOo4TwvwCL+kjjm5gCQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      redux: '>=4'
+
   '@wordpress/redux-routine@5.9.0':
     resolution: {integrity: sha512-eEb/otHMhOwVUydb5kErV3X+1R8qQ2hrLmlWIh+kiiKwFJVCl3ge/xN8Tiy1kEBEqgGRgPqxuLvNPZDd0ySpNg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -8011,6 +8118,12 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/rich-text@7.10.0':
+    resolution: {integrity: sha512-2sl/KPRq2ygAiRcs/La733OguL9xIT4uKRA5XpCIWNAqTX7f2kzY5YRn05iJfCxDC+GcDKcHl0JX4ZbFxZn5SA==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+
   '@wordpress/rich-text@7.9.0':
     resolution: {integrity: sha512-GN2SGz8bVkdCVVskvJSgul4wKyq/qaXRmEJSrk3LMHuAbxHL5FFkwRHaOhnHScNz+P1bdEehCqgP8DB3yv+IEw==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -8046,6 +8159,10 @@ packages:
     resolution: {integrity: sha512-mnwh8WcA9//DVwwZVfEaFHfIK1RaNQ8QvhD1fOtjJWjheS12QsQwjdlGTgvBVl66ErP65GdK7BM1pTv6NI0GwA==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/undo-manager@1.10.0':
+    resolution: {integrity: sha512-WaLwZ+AlfXQm9PhLf6kwCBaD5DoKaIqelRsgAaqa4APjgMBlxktQ1dadime0CO9+e8R2kLwAE3rxQXhGjicRMw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/undo-manager@1.9.0':
     resolution: {integrity: sha512-JLrcmeCTqITbChkJy+PeXcE03+6ZgIfQ22cBg1+0mzLQxglx1gndTnhRcnCSebvsXnmOVmxvE4HmJ84lv7liCQ==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -8060,6 +8177,10 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  '@wordpress/warning@3.10.0':
+    resolution: {integrity: sha512-IhvIBhhzsNYuLT61ZtKWm7oMg4G0x//eQD8dlnsBA4edP8BiX1VzwA3wCtz9+QdEFzraPJAq9NG4RPxGQas4Nw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/warning@3.9.0':
     resolution: {integrity: sha512-c+bEWwDjp3+Q7SAGb47CuZe56giBFNvutoyiAkn34pQZeO8pRjPElRABIkR7oyn4dEusjL1f6OQmU3dSYAMTpg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -15206,6 +15327,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
@@ -17785,6 +17910,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
@@ -18220,6 +18351,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)
@@ -18328,6 +18513,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
@@ -18516,6 +18718,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
@@ -18598,6 +18819,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
@@ -18610,15 +18860,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
@@ -18889,6 +19153,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
@@ -18900,6 +19175,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
@@ -19056,14 +19335,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
@@ -19073,6 +19369,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
@@ -19136,6 +19439,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
@@ -19154,6 +19461,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
@@ -19339,6 +19651,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
@@ -19346,15 +19665,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
@@ -19435,6 +19771,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
@@ -19529,6 +19879,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
@@ -19547,6 +19902,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/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
index c64b6e74309dd..c51ec4e125d01 100644
--- a/projects/js-packages/components/components/icon-tooltip/index.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -41,9 +41,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	wide = false,
 	inline = true,
 	shift = false,
+	hoverShow = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
 	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 	const toggleTooltip = useCallback(
 		e => {
@@ -53,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 ),
@@ -79,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 } />
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..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
@@ -46,6 +46,9 @@ export default {
 		wide: {
 			control: { type: 'boolean' },
 		},
+		hoverShow: {
+			control: { type: 'boolean' },
+		},
 	},
 };
 
@@ -106,3 +109,11 @@ Wide.args = {
 	wide: true,
 	placement: 'bottom-start',
 };
+
+export const HoverShow = Template.bind( {} );
+HoverShow.args = {
+	title: 'This is title!',
+	children: <div>This is a tooltip!</div>,
+	placement: 'bottom-start',
+	hoverShow: true,
+};
diff --git a/projects/js-packages/components/components/icon-tooltip/types.ts b/projects/js-packages/components/components/icon-tooltip/types.ts
index 4e62cbdeeee3f..dfb2c285ee854 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.
+	 */
+	hoverShow?: boolean;
 };
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-views/constants.ts b/projects/js-packages/components/components/threats-data-views/constants.ts
new file mode 100644
index 0000000000000..a3b8f4449f885
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/constants.ts
@@ -0,0 +1,18 @@
+import { __ } from '@wordpress/i18n';
+
+export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support';
+
+export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] =
+	[
+		{ value: 'current', label: __( 'Active', 'jetpack' ), variant: 'warning' },
+		{ value: 'fixed', label: __( 'Fixed', 'jetpack' ), variant: 'success' },
+		{ value: 'ignored', label: __( 'Ignored', 'jetpack' ) },
+	];
+
+export const THREAT_TYPES = [
+	{ value: 'plugin', label: __( 'Plugin', 'jetpack' ) },
+	{ value: 'theme', label: __( 'Theme', 'jetpack' ) },
+	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
+	{ value: 'file', label: __( 'File', 'jetpack' ) },
+	{ value: 'database', label: __( 'Database', 'jetpack' ) },
+];
diff --git a/projects/js-packages/components/components/threats-data-views/fixer-status.tsx b/projects/js-packages/components/components/threats-data-views/fixer-status.tsx
new file mode 100644
index 0000000000000..889c58cff036f
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/fixer-status.tsx
@@ -0,0 +1,154 @@
+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 } from '@wordpress/icons';
+import IconTooltip from '../icon-tooltip';
+import Text from '../text';
+import { PAID_PLUGIN_SUPPORT_URL } from './constants';
+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 FixerStatusIcon( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return (
+			<InfoIconTooltip message={ __( 'The fixer is taking longer than expected.', 'jetpack' ) } />
+		);
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return (
+			<InfoIconTooltip message={ __( 'An error occurred auto-fixing this threat.', 'jetpack' ) } />
+		);
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return (
+			<div className={ styles[ 'icon-spinner' ] }>
+				<Spinner color="black" />
+			</div>
+		);
+	}
+
+	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 {JSX.Element} The component.
+ */
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'Fixer is taking longer than expected', 'jetpack' ) }
+			</span>
+		);
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		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 className={ styles[ 'spinner-spacer' ] }>{ __( 'Auto-fixing', 'jetpack' ) }</span>;
+	}
+
+	return <span className={ styles[ 'check-spacer' ] }>{ __( 'Auto-fixable', 'jetpack' ) }</span>;
+}
+
+/**
+ * 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' ] }>
+			<FixerStatusIcon fixer={ fixer } />
+			<FixerStatusText fixer={ fixer } />
+		</div>
+	);
+}
+
+/**
+ * DataViewFixerStatus 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 } />;
+}
+
+/**
+ * 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' }
+			className={ styles[ 'icon-tooltip__container' ] }
+			iconClassName={ styles[ 'icon-tooltip__icon' ] }
+			iconSize={ size }
+			hoverShow={ true }
+		>
+			<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-views/icon-tooltip.tsx b/projects/js-packages/components/components/threats-data-views/icon-tooltip.tsx
new file mode 100644
index 0000000000000..32699631c9807
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/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-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx
new file mode 100644
index 0000000000000..a2b1e17ac93ae
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -0,0 +1,505 @@
+import {
+	Action,
+	DataViews,
+	Field,
+	FieldType,
+	Filter,
+	filterSortAndPaginate,
+	SortDirection,
+	SupportedLayouts,
+	type View,
+} from '@wordpress/dataviews';
+import { dateI18n } from '@wordpress/date';
+import { __, _x } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+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';
+
+/**
+ * DataViews component for displaying security threats.
+ *
+ * @param {object}   props                             - Component props.
+ * @param {Array}    props.data                        - Threats data.
+ * @param {Array}    props.filters                     - Initial DataView filters.
+ * @param {Function} props.onChangeSelection           - Callback function run when an item is selected.
+ * @param {Function} props.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 ThreatsDataViews( {
+	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: 20,
+	};
+
+	/**
+	 * DataView default layouts.
+	 *
+	 * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
+	 */
+	const defaultLayouts: SupportedLayouts = {
+		table: {
+			...baseView,
+			fields: [ 'severity', 'threat', 'auto-fix' ],
+			layout: {
+				primaryField: 'severity',
+			},
+		},
+		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: 'threat',
+				label: __( 'Threat', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render( { item }: { item: DataViewThreat } ) {
+					return (
+						<div className={ styles.threat__primary }>
+							<div className={ styles.threat__subtitle }>
+								<Icon icon={ getThreatIcon( item ) } size={ 20 } />
+								{ getThreatSubtitle( item ) }
+							</div>
+							<div className={ styles.threat__title }>{ item.title }</div>
+							<div className={ styles.threat__description }>{ item.description }</div>
+						</div>
+					);
+				},
+			},
+			{
+				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
+					);
+				},
+				render( { item }: { item: DataViewThreat } ) {
+					if ( item.status ) {
+						const status = THREAT_STATUSES.find( ( { value } ) => value === item.status );
+						if ( status ) {
+							return <Badge variant={ status?.variant }>{ status?.label }</Badge>;
+						}
+					}
+					return <Badge variant="warning">{ __( 'Active', 'jetpack' ) }</Badge>;
+				},
+			},
+			{
+				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;
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'firstDetected' )
+				? [
+						{
+							id: 'first-detected',
+							label: __( 'First Detected', 'jetpack' ),
+							type: 'datetime' as FieldType,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return new Date( item.firstDetected );
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								return (
+									<span className={ styles.threat__firstDetected }>
+										{ dateI18n( 'F j Y', item.firstDetected, false ) }
+									</span>
+								);
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'fixedOn' )
+				? [
+						{
+							id: 'fixed-on',
+							label: __( 'Fixed On', 'jetpack' ),
+							type: 'datetime' as FieldType,
+							getValue( { item }: { item: DataViewThreat } ) {
+								return new Date( item.firstDetected );
+							},
+							render( { item }: { item: DataViewThreat } ) {
+								return (
+									<span className={ styles.threat__fixedOn }>
+										{ dateI18n( 'F j Y', item.firstDetected, false ) }
+									</span>
+								);
+							},
+						},
+				  ]
+				: [] ),
+		];
+
+		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-views/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
new file mode 100644
index 0000000000000..ab6d6137d6b3c
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
@@ -0,0 +1,362 @@
+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: 'not_started' },
+			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' },
+			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: '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: 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",
+		},
+		{
+			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-views/styles.module.scss b/projects/js-packages/components/components/threats-data-views/styles.module.scss
new file mode 100644
index 0000000000000..08f159c26b6e1
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/styles.module.scss
@@ -0,0 +1,124 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+.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 );
+}
+
+.support-link {
+	color: inherit;
+
+	&:focus,
+	&:hover {
+		color: inherit;
+		box-shadow: none;
+	}
+}
+
+.fixer-status {
+	display: flex;
+	align-items: center;
+	line-height: 0;
+
+	.icon-spinner {
+		margin-left: 1px;
+	}
+
+	.icon-info {
+		margin-left: -3px;
+	}
+
+	.icon-check {
+		margin-left: -6px;
+	}
+}
+
+.threat__primary {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	white-space: initial;
+}
+
+.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__fixedOn,
+.threat__firstDetected {
+	white-space: nowrap;
+}
+
+.threat__fixedOn {
+	color: var( --jp-green-70 );
+}
+
+.icon-spinner {
+	svg {
+		margin: 0;
+	}
+}
+
+.spinner-spacer {
+	margin-left: 8px;
+}
+
+.info-spacer {
+	margin-left: 4px;
+}
+
+.check-spacer {
+	margin-left: -2px;
+}
+
+.threat__fixer {
+	min-width: 54px;
+	display: flex;
+	justify-content: center;
+}
+
+.icon-tooltip {
+	width: fit-content;
+
+	&__container {
+		text-align: left;
+		height: 20px;
+	}
+
+	&__icon {
+		color: var( --jp-red );
+	}
+}
diff --git a/projects/js-packages/components/components/threats-data-views/test/index.test.tsx b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
new file mode 100644
index 0000000000000..0cada3e4c063a
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/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-views/types.d.ts b/projects/js-packages/components/components/threats-data-views/types.d.ts
new file mode 100644
index 0000000000000..3f75a9f7d0b9d
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/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-views/utils.ts b/projects/js-packages/components/components/threats-data-views/utils.ts
new file mode 100644
index 0000000000000..3899b66d2f747
--- /dev/null
+++ b/projects/js-packages/components/components/threats-data-views/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..3cfdd7aa00065 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 ThreatsDataViews } from './components/threats-data-views';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index 2add1cb76864c..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/",