From c9d4eac0441813cbf2c1a6e4b2c0083ac5d65e61 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 10:56:49 -0700 Subject: [PATCH 01/10] Init project branch From 2c694c57f0f863125af75d0ec86cfa37144a5ba4 Mon Sep 17 00:00:00 2001 From: dkmyta Date: Sun, 27 Oct 2024 13:28:54 -0600 Subject: [PATCH 02/10] Components: add ThreatsDataViews --- pnpm-lock.yaml | 366 +++++++++++- .../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/threat-fixer-button/index.tsx | 142 +++++ .../stories/index.stories.tsx | 30 + .../threat-fixer-button/styles.module.scss | 9 + .../threat-severity-badge/index.tsx | 38 +- .../threats-data-views/constants.ts | 49 ++ .../components/threats-data-views/index.tsx | 531 ++++++++++++++++++ .../stories/index.stories.tsx | 371 ++++++++++++ .../threats-data-views/styles.module.scss | 36 ++ .../threats-data-views/test/index.test.tsx | 63 +++ projects/js-packages/components/index.ts | 2 + projects/js-packages/components/package.json | 2 + .../scan/changelog/add-threat-and-fixer-types | 4 + .../js-packages/scan/changelog/remove-deps | 4 + projects/js-packages/scan/package.json | 2 - .../js-packages/scan/src/constants/index.ts | 4 + projects/js-packages/scan/src/index.ts | 3 + projects/js-packages/scan/src/types/fixers.ts | 17 + projects/js-packages/scan/src/types/index.ts | 2 + .../js-packages/scan/src/types/threats.ts | 72 +++ projects/js-packages/scan/src/utils/index.ts | 34 ++ 25 files changed, 1839 insertions(+), 32 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/threat-fixer-button/index.tsx create mode 100644 projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx create mode 100644 projects/js-packages/components/components/threat-fixer-button/styles.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/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/scan/changelog/add-threat-and-fixer-types create mode 100644 projects/js-packages/scan/changelog/remove-deps create mode 100644 projects/js-packages/scan/src/constants/index.ts create mode 100644 projects/js-packages/scan/src/types/fixers.ts create mode 100644 projects/js-packages/scan/src/types/index.ts create mode 100644 projects/js-packages/scan/src/types/threats.ts create mode 100644 projects/js-packages/scan/src/utils/index.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d36f230b48d0..e162445a37d70 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -299,6 +299,9 @@ importers: '@automattic/jetpack-boost-score-api': specifier: workspace:* version: link:../boost-score-api + '@automattic/jetpack-scan': + specifier: workspace:* + version: link:../scan '@babel/runtime': specifier: ^7 version: 7.26.0 @@ -314,6 +317,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 @@ -1166,12 +1172,6 @@ importers: '@automattic/jetpack-base-styles': specifier: workspace:* version: link:../base-styles - '@automattic/jetpack-connection': - specifier: workspace:* - version: link:../connection - '@automattic/jetpack-shared-extension-utils': - specifier: workspace:* - version: link:../shared-extension-utils '@wordpress/api-fetch': specifier: 7.9.0 version: 7.9.0 @@ -5678,6 +5678,10 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/runtime@7.25.7': + resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==} + engines: {node: '>=6.9.0'} + '@babel/runtime@7.26.0': resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==} engines: {node: '>=6.9.0'} @@ -7697,6 +7701,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'} @@ -7772,6 +7780,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'} @@ -7779,6 +7794,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'} @@ -7799,6 +7820,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'} @@ -7811,6 +7838,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'} @@ -7821,14 +7858,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'} @@ -7847,10 +7896,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'} @@ -7892,19 +7949,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'} @@ -7926,6 +8002,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'} @@ -7942,6 +8022,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'} @@ -7989,20 +8073,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'} @@ -8016,6 +8120,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'} @@ -8051,6 +8161,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'} @@ -8065,6 +8179,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'} @@ -15172,6 +15290,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/runtime@7.25.7': + dependencies: + regenerator-runtime: 0.14.1 + '@babel/runtime@7.26.0': dependencies: regenerator-runtime: 0.14.1 @@ -17756,6 +17878,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.26.0 @@ -18191,6 +18319,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) @@ -18299,6 +18481,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.26.0 @@ -18487,6 +18686,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.26.0 @@ -18569,6 +18787,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.26.0 @@ -18581,15 +18828,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.26.0 '@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.26.0 + '@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.26.0 @@ -18860,6 +19121,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.26.0 @@ -18871,6 +19143,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.26.0 @@ -19027,14 +19303,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.26.0 + '@wordpress/html-entities@4.10.0': + dependencies: + '@babel/runtime': 7.25.7 + '@wordpress/html-entities@4.9.0': dependencies: '@babel/runtime': 7.26.0 + '@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.26.0 @@ -19044,6 +19337,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.26.0 @@ -19107,6 +19407,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.26.0 @@ -19125,6 +19429,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.26.0 @@ -19310,6 +19619,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.26.0 @@ -19317,15 +19633,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.26.0 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.26.0 + '@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.26.0 @@ -19406,6 +19739,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.26.0 @@ -19500,6 +19847,11 @@ snapshots: dependencies: '@babel/runtime': 7.26.0 + '@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.26.0 @@ -19518,6 +19870,8 @@ snapshots: '@wordpress/element': 6.9.0 react: 18.3.1 + '@wordpress/warning@3.10.0': {} + '@wordpress/warning@3.9.0': {} '@wordpress/widgets@4.9.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': diff --git a/projects/js-packages/components/changelog/add-threats-data-view-component b/projects/js-packages/components/changelog/add-threats-data-view-component new file mode 100644 index 0000000000000..ce943e85a6b6a --- /dev/null +++ b/projects/js-packages/components/changelog/add-threats-data-view-component @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Add ThreatsDataView component diff --git a/projects/js-packages/components/components/badge/index.tsx b/projects/js-packages/components/components/badge/index.tsx new file mode 100644 index 0000000000000..4ca1044e60f6b --- /dev/null +++ b/projects/js-packages/components/components/badge/index.tsx @@ -0,0 +1,39 @@ +import clsx from 'clsx'; +import React from 'react'; +import styles from './style.module.scss'; + +type BadgeProps = { + children?: React.ReactNode; + className?: string; + variant?: 'success' | 'warning' | 'danger'; + [ key: string ]: unknown; +}; + +/** + * Badge component + * + * @param {object} props - The component properties. + * @param {string} props.variant - The badge variant (i.e. 'success', 'warning', 'danger'). + * @param {JSX.Element} props.children - Badge text or content. + * @param {string} props.className - Additional class name to pass to the Badge component. + * + * @return {React.ReactElement} The `Badge` component. + */ +const Badge: React.FC< BadgeProps > = ( { children, className, variant = 'info', ...props } ) => { + const classes = clsx( + styles.badge, + { + [ styles[ 'is-success' ] ]: variant === 'success', + [ styles[ 'is-warning' ] ]: variant === 'warning', + [ styles[ 'is-danger' ] ]: variant === 'danger', + }, + className + ); + return ( + + { children } + + ); +}; + +export default Badge; diff --git a/projects/js-packages/components/components/badge/stories/index.stories.tsx b/projects/js-packages/components/components/badge/stories/index.stories.tsx new file mode 100644 index 0000000000000..c74ac1c476897 --- /dev/null +++ b/projects/js-packages/components/components/badge/stories/index.stories.tsx @@ -0,0 +1,22 @@ +import Badge from '../index'; + +export default { + title: 'JS Packages/Components/Badge', + component: Badge, + argTypes: { + type: { + control: { + type: 'select', + }, + options: [ 'info', 'danger', 'warning', 'success' ], + }, + }, +}; + +const Template = args => ; + +export const _default = Template.bind( {} ); +_default.args = { + type: 'info', + children: 'Hello World', +}; diff --git a/projects/js-packages/components/components/badge/style.module.scss b/projects/js-packages/components/components/badge/style.module.scss new file mode 100644 index 0000000000000..a305d7c2520a0 --- /dev/null +++ b/projects/js-packages/components/components/badge/style.module.scss @@ -0,0 +1,25 @@ +.badge { + display: inline-block; + border-radius: 4px; + background-color: var(--jp-gray-0); + color: var(--jp-gray-80); + padding: 4px 8px; + font-size: 13px; + font-weight: 400; + line-height: 16px; + + &.is-success { + background-color: var(--jp-green-5); + color: var(--jp-green-50); + } + + &.is-warning { + background-color: var(--jp-yellow-5); + color: var(--jp-yellow-60); + } + + &.is-danger { + background-color: var(--jp-red-5); + color: var(--jp-red-70); + } +} diff --git a/projects/js-packages/components/components/threat-fixer-button/index.tsx b/projects/js-packages/components/components/threat-fixer-button/index.tsx new file mode 100644 index 0000000000000..25c3e23b3bc09 --- /dev/null +++ b/projects/js-packages/components/components/threat-fixer-button/index.tsx @@ -0,0 +1,142 @@ +import { Button, Text, ActionPopover } from '@automattic/jetpack-components'; +import { CONTACT_SUPPORT_URL, type Threat, fixerStatusIsStale } from '@automattic/jetpack-scan'; +import { ExternalLink } from '@wordpress/components'; +import { createInterpolateElement, useCallback, useMemo, useState } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import styles from './styles.module.scss'; + +/** + * Threat Fixer Button component. + * + * @param {object} props - Component props. + * @param {object} props.threat - The threat. + * @param {Function} props.onClick - The onClick function. + * @param {string} props.className - The className. + * + * @return {JSX.Element} The component. + */ +export default function ThreatFixerButton( { + threat, + className, + onClick, +}: { + threat: Threat; + onClick: ( items: Threat[] ) => void; + className?: string; +} ): JSX.Element { + const [ isPopoverVisible, setIsPopoverVisible ] = useState( false ); + + const [ anchor, setAnchor ] = useState( null ); + + const children = useMemo( () => { + if ( ! threat.fixable ) { + return null; + } + if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) { + return __( 'Error', 'jetpack' ); + } + if ( threat.fixer && 'status' in threat.fixer && threat.fixer.status === 'in_progress' ) { + return __( 'Fixing…', 'jetpack' ); + } + if ( threat.fixable.fixer === 'delete' ) { + return __( 'Delete', 'jetpack' ); + } + if ( threat.fixable.fixer === 'update' ) { + return __( 'Update', 'jetpack' ); + } + return __( 'Fix', 'jetpack' ); + }, [ threat.fixable, threat.fixer ] ); + + const errorMessage = useMemo( () => { + if ( threat.fixer && fixerStatusIsStale( threat.fixer ) ) { + return __( 'Fixer is taking longer than expected.', 'jetpack' ); + } + + if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) { + return __( 'An error occurred auto-fixing this threat.', 'jetpack' ); + } + + return null; + }, [ threat.fixer ] ); + + const handleClick = useCallback( + ( event: React.MouseEvent ) => { + event.stopPropagation(); + if ( errorMessage && ! isPopoverVisible ) { + setIsPopoverVisible( true ); + return; + } + onClick( [ threat ] ); + }, + [ onClick, errorMessage, isPopoverVisible, threat ] + ); + + const closePopover = useCallback( () => { + setIsPopoverVisible( false ); + }, [] ); + + if ( ! threat.fixable ) { + return null; + } + + return ( +
+
+ ); +} diff --git a/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx b/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx new file mode 100644 index 0000000000000..6b378030a2d89 --- /dev/null +++ b/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx @@ -0,0 +1,30 @@ +import ThreatFixerButton from '../index.js'; + +export default { + title: 'JS Packages/Components/Threat Fixer Button', + component: ThreatFixerButton, +}; + +export const Default = args => ; +Default.args = { + threat: { fixable: { fixer: 'edit' } }, + onClick: () => alert( 'Edit fixer callback triggered' ), // eslint-disable-line no-alert +}; + +export const Update = args => ; +Update.args = { + threat: { fixable: { fixer: 'update' } }, + onClick: () => alert( 'Update fixer callback triggered' ), // eslint-disable-line no-alert +}; + +export const Delete = args => ; +Delete.args = { + threat: { fixable: { fixer: 'delete' } }, + onClick: () => alert( 'Delete fixer callback triggered' ), // eslint-disable-line no-alert +}; + +export const Loading = args => ; +Loading.args = { + threat: { fixable: { fixer: 'edit' }, fixer: { status: 'in_progress' } }, + onClick: () => alert( 'Fixer callback triggered' ), // eslint-disable-line no-alert +}; diff --git a/projects/js-packages/components/components/threat-fixer-button/styles.module.scss b/projects/js-packages/components/components/threat-fixer-button/styles.module.scss new file mode 100644 index 0000000000000..071761daff049 --- /dev/null +++ b/projects/js-packages/components/components/threat-fixer-button/styles.module.scss @@ -0,0 +1,9 @@ +.support-link { + color: inherit; + + &:focus, + &:hover { + color: inherit; + box-shadow: none; + } +} 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 ( + + { _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' ) } + + ); } - 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 ( + + { _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' ) } + + ); } - return _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ); -}; -const ThreatSeverityBadge = ( { severity } ) => { - return ( -
- { severityText( severity ) } -
- ); + return { _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ) }; }; export default ThreatSeverityBadge; diff --git a/projects/js-packages/components/components/threats-data-views/constants.ts b/projects/js-packages/components/components/threats-data-views/constants.ts new file mode 100644 index 0000000000000..76e94756ab804 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-views/constants.ts @@ -0,0 +1,49 @@ +import { __ } from '@wordpress/i18n'; +import { + code as fileIcon, + color as themeIcon, + plugins as pluginIcon, + shield as shieldIcon, + wordpress as coreIcon, +} from '@wordpress/icons'; + +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' ) }, +]; + +export const THREAT_ICONS = { + plugin: pluginIcon, + theme: themeIcon, + core: coreIcon, + file: fileIcon, + default: shieldIcon, +}; + +export const THREAT_FIELD_THREAT = 'threat'; +export const THREAT_FIELD_TITLE = 'title'; +export const THREAT_FIELD_DESCRIPTION = 'description'; +export const THREAT_FIELD_ICON = 'icon'; +export const THREAT_FIELD_STATUS = 'status'; +export const THREAT_FIELD_TYPE = 'type'; +export const THREAT_FIELD_EXTENSION = 'extension'; +export const THREAT_FIELD_PLUGIN = 'plugin'; +export const THREAT_FIELD_THEME = 'theme'; +export const THREAT_FIELD_SEVERITY = 'severity'; +export const THREAT_FIELD_SIGNATURE = 'signature'; +export const THREAT_FIELD_FIRST_DETECTED = 'first-detected'; +export const THREAT_FIELD_FIXED_ON = 'fixed-on'; +export const THREAT_FIELD_AUTO_FIX = 'auto-fix'; + +export const THREAT_ACTION_FIX = 'fix'; +export const THREAT_ACTION_IGNORE = 'ignore'; +export const THREAT_ACTION_UNIGNORE = 'unignore'; 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..c041e31699f42 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-views/index.tsx @@ -0,0 +1,531 @@ +import { getThreatType, type Threat } from '@automattic/jetpack-scan'; +import { + type Action, + type ActionButton, + type Field, + type FieldType, + type Filter, + type SortDirection, + type SupportedLayouts, + type View, + DataViews, + filterSortAndPaginate, +} from '@wordpress/dataviews'; +import { dateI18n } from '@wordpress/date'; +import { __ } from '@wordpress/i18n'; +import { Icon } from '@wordpress/icons'; +import { useCallback, useMemo, useState } from 'react'; +import Badge from '../badge'; +import ThreatFixerButton from '../threat-fixer-button'; +import ThreatSeverityBadge from '../threat-severity-badge'; +import { + THREAT_ACTION_FIX, + THREAT_ACTION_IGNORE, + THREAT_ACTION_UNIGNORE, + THREAT_FIELD_AUTO_FIX, + THREAT_FIELD_DESCRIPTION, + THREAT_FIELD_EXTENSION, + THREAT_FIELD_FIRST_DETECTED, + THREAT_FIELD_FIXED_ON, + THREAT_FIELD_ICON, + THREAT_FIELD_PLUGIN, + THREAT_FIELD_SEVERITY, + THREAT_FIELD_SIGNATURE, + THREAT_FIELD_STATUS, + THREAT_FIELD_THEME, + THREAT_FIELD_THREAT, + THREAT_FIELD_TITLE, + THREAT_FIELD_TYPE, + THREAT_ICONS, + THREAT_STATUSES, + THREAT_TYPES, +} from './constants'; +import styles from './styles.module.scss'; + +/** + * DataViews component for displaying security threats. + * + * @param {object} props - Component props. + * @param {Array} props.data - Threats data. + * @param {Array} props.filters - Initial DataView filters. + * @param {Function} props.onChangeSelection - Callback function run when an item is selected. + * @param {Function} props.onFixThreats - Threat fix action callback. + * @param {Function} props.onIgnoreThreats - Threat ignore action callback. + * @param {Function} props.onUnignoreThreats - Threat unignore action callback. + * @param {Function} props.isThreatEligibleForFix - Function to determine if a threat is eligible for fixing. + * @param {Function} props.isThreatEligibleForIgnore - Function to determine if a threat is eligible for ignoring. + * @param {Function} props.isThreatEligibleForUnignore - Function to determine if a threat is eligible for unignoring. + * + * @return {JSX.Element} The ThreatsDataViews component. + */ +export default function ThreatsDataViews( { + data, + filters, + onChangeSelection, + isThreatEligibleForFix, + isThreatEligibleForIgnore, + isThreatEligibleForUnignore, + onFixThreats, + onIgnoreThreats, + onUnignoreThreats, +}: { + data: Threat[]; + filters?: Filter[]; + onChangeSelection?: ( selectedItemIds: string[] ) => void; + isThreatEligibleForFix?: ( threat: Threat ) => boolean; + isThreatEligibleForIgnore?: ( threat: Threat ) => boolean; + isThreatEligibleForUnignore?: ( threat: Threat ) => boolean; + onFixThreats?: ( threats: Threat[] ) => void; + onIgnoreThreats?: ActionButton< Threat >[ 'callback' ]; + onUnignoreThreats?: ActionButton< Threat >[ 'callback' ]; +} ): JSX.Element { + const baseView = { + sort: { + field: 'severity', + direction: 'desc' as SortDirection, + }, + search: '', + filters: filters || [], + page: 1, + perPage: 20, + }; + + /** + * DataView default layouts. + * + * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view + */ + const defaultLayouts: SupportedLayouts = { + table: { + ...baseView, + fields: [ + THREAT_FIELD_SEVERITY, + THREAT_FIELD_THREAT, + THREAT_FIELD_TYPE, + THREAT_FIELD_AUTO_FIX, + ], + layout: { + primaryField: THREAT_FIELD_SEVERITY, + combinedFields: [ + { + id: THREAT_FIELD_THREAT, + label: __( 'Threat', 'jetpack' ), + children: [ THREAT_FIELD_TITLE, THREAT_FIELD_DESCRIPTION ], + direction: 'vertical', + }, + ], + }, + }, + list: { + ...baseView, + fields: [ + THREAT_FIELD_SEVERITY, + THREAT_FIELD_TYPE, + THREAT_FIELD_EXTENSION, + THREAT_FIELD_SIGNATURE, + ], + layout: { + primaryField: THREAT_FIELD_TITLE, + mediaField: THREAT_FIELD_ICON, + }, + }, + }; + + /** + * DataView view object - configures how the dataset is visible to the user. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object + */ + const [ view, setView ] = useState< View >( { + type: 'table', + ...defaultLayouts.table, + } ); + + /** + * Compute values from the provided threats data. + * + * @member {object[]} themes - List of unique themes included in the threats data. + * @member {object[]} plugins - List of unique plugins included in the threats data. + * @member {object[]} signatures - List of unique threat signatures. + * @member {string[]} dataFields - List of unique fields. + */ + const { + themes, + plugins, + signatures, + dataFields, + }: { + themes: { value: string; label: string }[]; + plugins: { value: string; label: string }[]; + signatures: { value: string; label: string }[]; + dataFields: string[]; + } = useMemo( () => { + return data.reduce( + ( acc, threat ) => { + // Extensions (Themes and Plugins) + if ( threat.extension ) { + switch ( threat.extension.type ) { + case 'theme': + if ( ! acc.themes.find( ( { value } ) => value === threat.extension.slug ) ) { + acc.themes.push( { value: threat.extension.slug, label: threat.extension.name } ); + } + break; + case 'plugin': + if ( ! acc.plugins.find( ( { value } ) => value === threat.extension.slug ) ) { + acc.plugins.push( { value: threat.extension.slug, label: threat.extension.name } ); + } + break; + default: + break; + } + } + + // 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; + }, + { + themes: [], + plugins: [], + signatures: [], + dataFields: [], + } + ); + }, [ data ] ); + + /** + * DataView fields - describes the visible items for each record in the dataset. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object + */ + const fields = useMemo( () => { + const result: Field< Threat >[] = [ + { + id: THREAT_FIELD_TITLE, + label: __( 'Title', 'jetpack' ), + enableGlobalSearch: true, + enableHiding: false, + render: ( { item }: { item: Threat } ) => ( +
{ item.title }
+ ), + }, + { + id: THREAT_FIELD_DESCRIPTION, + label: __( 'Description', 'jetpack' ), + enableGlobalSearch: true, + enableHiding: false, + render: ( { item }: { item: Threat } ) => ( +
{ item.description }
+ ), + }, + { + id: THREAT_FIELD_ICON, + label: __( 'Icon', 'jetpack' ), + enableHiding: false, + getValue( { item }: { item: Threat } ) { + return getThreatType( item ); + }, + render( { item }: { item: Threat } ) { + return ( +
+ +
+ ); + }, + }, + { + id: THREAT_FIELD_STATUS, + label: __( 'Status', 'jetpack' ), + elements: THREAT_STATUSES, + getValue( { item }: { item: Threat } ) { + if ( ! item.status ) { + return 'current'; + } + return ( + THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status + ); + }, + render( { item }: { item: Threat } ) { + if ( item.status ) { + const status = THREAT_STATUSES.find( ( { value } ) => value === item.status ); + if ( status ) { + return { status.label }; + } + } + return { __( 'Active', 'jetpack' ) }; + }, + }, + { + id: THREAT_FIELD_TYPE, + label: __( 'Type', 'jetpack' ), + elements: THREAT_TYPES, + getValue( { item }: { item: Threat } ) { + return getThreatType( item ) ?? ''; + }, + }, + { + id: THREAT_FIELD_EXTENSION, + label: __( 'Extension', 'jetpack' ), + enableGlobalSearch: true, + enableHiding: true, + getValue( { item }: { item: Threat } ) { + return item.extension ? item.extension.slug : ''; + }, + render( { item }: { item: Threat } ) { + return item.extension ? item.extension.name : ''; + }, + }, + { + id: THREAT_FIELD_PLUGIN, + label: __( 'Plugin', 'jetpack' ), + enableGlobalSearch: true, + enableHiding: false, + elements: plugins, + getValue( { item }: { item: Threat } ) { + return item.extension ? item.extension.slug : ''; + }, + }, + { + id: THREAT_FIELD_THEME, + label: __( 'Theme', 'jetpack' ), + enableGlobalSearch: true, + enableHiding: false, + elements: themes, + getValue( { item }: { item: Threat } ) { + return item.extension ? item.extension.slug : ''; + }, + }, + ...( dataFields.includes( 'severity' ) + ? [ + { + id: THREAT_FIELD_SEVERITY, + label: __( 'Severity', 'jetpack' ), + type: 'integer' as FieldType, + getValue( { item }: { item: Threat } ) { + return item.severity ?? 0; + }, + render( { item }: { item: Threat } ) { + return ; + }, + }, + ] + : [] ), + ...( dataFields.includes( 'signature' ) + ? [ + { + id: THREAT_FIELD_SIGNATURE, + label: __( 'Signature', 'jetpack' ), + elements: signatures, + enableGlobalSearch: true, + getValue( { item }: { item: Threat } ) { + return item.signature || ''; + }, + }, + ] + : [] ), + ...( dataFields.includes( 'firstDetected' ) + ? [ + { + id: THREAT_FIELD_FIRST_DETECTED, + label: __( 'First Detected', 'jetpack' ), + type: 'datetime' as FieldType, + getValue( { item }: { item: Threat } ) { + return item.firstDetected ? new Date( item.firstDetected ) : null; + }, + render( { item }: { item: Threat } ) { + return item.firstDetected ? ( + + { dateI18n( 'F j Y', item.firstDetected, false ) } + + ) : null; + }, + }, + ] + : [] ), + ...( dataFields.includes( 'fixedOn' ) + ? [ + { + id: THREAT_FIELD_FIXED_ON, + label: __( 'Fixed On', 'jetpack' ), + type: 'datetime' as FieldType, + getValue( { item }: { item: Threat } ) { + return item.fixedOn ? new Date( item.fixedOn ) : null; + }, + render( { item }: { item: Threat } ) { + return item.fixedOn ? ( + + { dateI18n( 'F j Y', item.fixedOn, false ) } + + ) : null; + }, + }, + ] + : [] ), + ...( dataFields.includes( 'fixable' ) + ? [ + { + id: THREAT_FIELD_AUTO_FIX, + label: __( 'Auto-Fix', 'jetpack' ), + enableHiding: false, + elements: [ + { + value: 'yes', + label: __( 'Yes', 'jetpack' ), + }, + { + value: 'no', + label: __( 'No', 'jetpack' ), + }, + ], + getValue( { item }: { item: Threat } ) { + return item.fixable ? 'yes' : 'no'; + }, + render( { item }: { item: Threat } ) { + if ( ! item.fixable ) { + return null; + } + + return ; + }, + }, + ] + : [] ), + ]; + + return result; + }, [ dataFields, plugins, themes, signatures, onFixThreats ] ); + + /** + * DataView actions - collection of operations that can be performed upon each record. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#actions-object + */ + const actions = useMemo( () => { + const result: Action< Threat >[] = []; + + if ( dataFields.includes( 'fixable' ) ) { + result.push( { + id: THREAT_ACTION_FIX, + label: __( 'Auto-Fix', 'jetpack' ), + isPrimary: true, + supportsBulk: true, + callback: onFixThreats, + isEligible( item ) { + if ( ! onFixThreats ) { + return false; + } + if ( isThreatEligibleForFix ) { + return isThreatEligibleForFix( item ); + } + return !! item.fixable; + }, + } ); + } + + if ( dataFields.includes( 'status' ) ) { + result.push( { + id: THREAT_ACTION_IGNORE, + label: __( 'Ignore', 'jetpack' ), + isPrimary: true, + isDestructive: true, + callback: onIgnoreThreats, + isEligible( item ) { + if ( ! onIgnoreThreats ) { + return false; + } + if ( isThreatEligibleForIgnore ) { + return isThreatEligibleForIgnore( item ); + } + return item.status === 'current'; + }, + } ); + } + + if ( dataFields.includes( 'status' ) ) { + result.push( { + id: THREAT_ACTION_UNIGNORE, + label: __( 'Unignore', 'jetpack' ), + isPrimary: true, + isDestructive: true, + callback: onUnignoreThreats, + isEligible( item ) { + if ( ! onUnignoreThreats ) { + return false; + } + if ( isThreatEligibleForUnignore ) { + return isThreatEligibleForUnignore( item ); + } + return item.status === 'ignored'; + }, + } ); + } + + return result; + }, [ + dataFields, + onFixThreats, + onIgnoreThreats, + onUnignoreThreats, + isThreatEligibleForFix, + isThreatEligibleForIgnore, + isThreatEligibleForUnignore, + ] ); + + /** + * Apply the view settings (i.e. filters, sorting, pagination) to the dataset. + * + * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dataviews/src/filter-and-sort-data-view.ts + */ + const { data: processedData, paginationInfo } = useMemo( () => { + return filterSortAndPaginate( data, view, fields ); + }, [ data, view, fields ] ); + + /** + * Callback function to update the view state. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function + */ + const onChangeView = useCallback( ( newView: View ) => { + setView( newView ); + }, [] ); + + /** + * DataView getItemId function - returns the unique ID for each record in the dataset. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function + */ + const getItemId = useCallback( ( item: Threat ) => item.id.toString(), [] ); + + return ( + + ); +} diff --git a/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx new file mode 100644 index 0000000000000..4693c94fdd093 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx @@ -0,0 +1,371 @@ +import ThreatsDataViews from '..'; + +export default { + title: 'JS Packages/Components/Threats Data Views', + component: ThreatsDataViews, + parameters: { + backgrounds: { + default: 'light', + values: [ { name: 'light', value: 'white' } ], + }, + }, + decorators: [ + Story => ( +
+ +
+ ), + ], +}; + +export const Default = args => ; +Default.args = { + data: [ + { + id: 185869885, + signature: 'EICAR_AV_Test', + title: 'Malicious code found in file: index.php', + description: + "This is the standard EICAR antivirus test code, and not a real infection. If your site contains this code when you don't expect it to, contact Jetpack support for some help.", + firstDetected: '2024-10-07T20:45:06.000Z', + fixedIn: null, + fixedOn: null, + severity: 8, + fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' }, + fixer: { status: 'not_started' }, + status: 'current', + filename: '/var/www/html/wp-content/index.php', + context: { + '1': 'echo << + alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert + onIgnoreThreats: () => + alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert + onUnignoreThreats: () => + // eslint-disable-next-line no-alert + alert( + 'Unignore threat action callback triggered! This is handled by the component consumer.' + ), +}; + +export const FixerStatuses = args => ; +FixerStatuses.args = { + data: [ + { + id: 13216959, + signature: 'Vulnerable.WP.Core', + title: 'Vulnerable WordPress Version (6.4.3)', + description: 'This threat has an auto-fixer available. ', + firstDetected: '2024-07-15T21:56:50.000Z', + severity: 4, + fixer: null, + fixedOn: '2024-07-15T22:01:42.000Z', + status: 'fixed', + fixable: { fixer: 'update', target: '6.4.4', extensionStatus: 'inactive' }, + version: '6.4.3', + source: '', + }, + { + id: 12345678910, + signature: 'Vulnerable.WP.Extension', + title: 'Vulnerable Plugin: Example Plugin (version 1.2.3)', + description: 'This threat has an in-progress auto-fixer.', + firstDetected: '2024-10-02T17:34:59.000Z', + fixedIn: '1.2.4', + fixedOn: null, + severity: 3, + fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' }, + fixer: { status: 'in_progress', last_updated: new Date().toISOString() }, + status: 'current', + filename: null, + context: null, + source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3', + extension: { + name: 'Example Plugin', + slug: 'example-plugin', + version: '1.2.3', + type: 'plugin', + }, + }, + { + id: 12345678911, + signature: 'Vulnerable.WP.Extension', + title: 'Vulnerable Theme: Example Theme (version 2.2.2)', + description: 'This threat has an in-progress auto-fixer that is taking too long.', + firstDetected: '2024-10-02T17:34:59.000Z', + fixedIn: '2.22.22', + fixedOn: null, + severity: 3, + fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' }, + fixer: { status: 'in_progress', last_updated: new Date( '1999-01-01' ).toISOString() }, + status: 'current', + filename: null, + context: null, + source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3', + extension: { + name: 'Example Theme', + slug: 'example-theme', + version: '2.2.2', + type: 'theme', + }, + }, + { + id: 12345678912, + signature: 'Vulnerable.WP.Extension', + title: 'Vulnerable Theme: Example Theme II (version 3.3.3)', + description: 'This threat has a fixer with an error status.', + firstDetected: '2024-10-02T17:34:59.000Z', + fixedIn: '3.4.5', + fixedOn: null, + severity: 3, + fixable: { fixer: 'update', target: '1.12.4', extensionStatus: 'inactive' }, + fixer: { status: 'error', error: 'error' }, + status: 'current', + filename: null, + context: null, + source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3', + extension: { + name: 'Example Theme II', + slug: 'example-theme-2', + version: '3.3.3', + type: 'theme', + }, + }, + { + id: 185868972, + signature: 'EICAR_AV_Test_Suspicious', + title: 'Malicious code found in file: jptt_eicar.php', + description: 'This threat has no auto-fixer available.', + firstDetected: '2024-10-07T20:40:15.000Z', + fixedIn: null, + fixedOn: null, + severity: 1, + fixable: false, + status: 'current', + filename: '/var/www/html/wp-content/uploads/jptt_eicar.php', + context: { + '6': 'echo << + alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert + onIgnoreThreats: () => + alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert + onUnignoreThreats: () => + // eslint-disable-next-line no-alert + alert( + 'Unignore threat action callback triggered! This is handled by the component consumer.' + ), +}; + +export const FreeResults = args => ; +FreeResults.args = { + data: [ + { + id: '1d0470df-4671-47ac-8d87-a165e8f7d502', + title: 'WooCommerce <= 3.2.3 - Authenticated PHP Object Injection', + description: + 'Versions 3.2.3 and earlier are affected by an issue where cached queries within shortcodes could lead to object injection. This is related to the recent WordPress 4.8.3 security release.This issue can only be exploited by users who can edit content and add shortcodes, but we still recommend all users running WooCommerce 3.x upgrade to 3.2 to mitigate this issue.', + firstDetected: null, + fixedIn: '3.2.4', + fixedOn: null, + severity: null, + fixable: null, + status: null, + filename: null, + context: null, + signature: null, + source: 'https://wpscan.com/vulnerability/1d0470df-4671-47ac-8d87-a165e8f7d502', + extension: { + name: 'WooCommerce', + slug: 'woocommerce', + version: '3.2.3', + type: 'plugin', + }, + }, + { + id: '7275a176-d579-471a-8492-df8edbdf27de', + signature: null, + subtitle: 'WooCommerce 3.4.5', + title: 'WooCommerce <= 3.4.5 - Authenticated Stored XSS', + description: + 'The WooCommerce WordPress plugin was affected by an Authenticated Stored XSS security vulnerability.', + firstDetected: null, + fixedIn: '3.4.6', + fixedOn: null, + severity: null, + fixable: null, + status: null, + filename: null, + context: null, + source: 'https://wpscan.com/vulnerability/7275a176-d579-471a-8492-df8edbdf27de', + extension: { + name: 'WooCommerce', + slug: 'woocommerce', + version: '3.4.5', + type: 'plugin', + }, + }, + { + id: '733d8a02-0d44-4b78-bbb2-37e447acd2f3', + signature: null, + title: 'WP Super Cache < 1.7.2 - Authenticated Remote Code Execution (RCE)', + description: + 'The plugin was affected by an authenticated (admin+) RCE in the settings page due to input validation failure and weak $cache_path check in the WP Super Cache Settings -> Cache Location option. Direct access to the wp-cache-config.php file is not prohibited, so this vulnerability can be exploited for a web shell injection.\r\n\r\nAnother possible attack vector: from XSS (via another plugin affected by XSS) to RCE.', + firstDetected: null, + fixedIn: '1.7.2', + fixedOn: null, + severity: null, + fixable: null, + status: null, + filename: null, + context: null, + source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3', + extension: { + name: 'WP Super Cache', + slug: 'wp-super-cache', + version: '1.6.3', + type: 'plugin', + }, + }, + ], +}; diff --git a/projects/js-packages/components/components/threats-data-views/styles.module.scss b/projects/js-packages/components/components/threats-data-views/styles.module.scss new file mode 100644 index 0000000000000..98789b2f794ec --- /dev/null +++ b/projects/js-packages/components/components/threats-data-views/styles.module.scss @@ -0,0 +1,36 @@ +@import '@wordpress/dataviews/build-style/style.css'; + +.threat__title { + color: var( --jp-gray-80 ); + font-weight: 510; + white-space: initial; +} + +.threat__description { + color: var( --jp-gray-80 ); + font-size: 12px; + white-space: initial; +} + +.threat__fixedOn, +.threat__firstDetected { + white-space: nowrap; +} + +.threat__fixedOn { + color: var( --jp-green-70 ); +} + +.threat__media { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #EDFFEE; + border-color: #EDFFEE; + + svg { + fill: black; + } +} diff --git a/projects/js-packages/components/components/threats-data-views/test/index.test.tsx b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx new file mode 100644 index 0000000000000..cd3e217683a1a --- /dev/null +++ b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx @@ -0,0 +1,63 @@ +import { type Threat } from '@automattic/jetpack-scan'; +import { render, screen } from '@testing-library/react'; +import ThreatsDataViews from '..'; + +const data = [ + // Scan API Data + { + id: 185869885, + signature: 'EICAR_AV_Test', + title: 'Malicious code found in file: index.php', + description: + "This is the standard EICAR antivirus test code, and not a real infection. If your site contains this code when you don't expect it to, contact Jetpack support for some help.", + firstDetected: '2024-10-07T20:45:06.000Z', + fixedIn: null, + fixedOn: '2024-10-07T20:45:06.000Z', + fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' }, + fixer: { status: 'in_progress', startedAt: '2024-10-07T20:45:06.000Z' }, + severity: 8, + status: 'current', + filename: '/var/www/html/wp-content/index.php', + context: { + '1': 'echo << { + it( 'renders threat data', () => { + render( ); + expect( screen.getByText( 'Malicious code found in file: index.php' ) ).toBeInTheDocument(); + expect( + screen.getByText( 'WooCommerce <= 3.2.3 - Authenticated PHP Object Injection' ) + ).toBeInTheDocument(); + } ); +} ); diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts index d0a6a683663bf..eb90df97ad5fe 100644 --- a/projects/js-packages/components/index.ts +++ b/projects/js-packages/components/index.ts @@ -44,7 +44,9 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard'; export * from './components/icons'; export { default as SplitButton } from './components/split-button'; export { default as ThemeProvider } from './components/theme-provider'; +export { default as ThreatFixerButton } from './components/threat-fixer-button'; export { default as ThreatSeverityBadge } from './components/threat-severity-badge'; +export { default as ThreatsDataViews } from './components/threats-data-views'; export { default as Text, H2, H3, Title } from './components/text'; export { default as ToggleControl } from './components/toggle-control'; export { default as numberFormat } from './components/number-format'; diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index 61bdaccb915f9..603592a2dbb21 100644 --- a/projects/js-packages/components/package.json +++ b/projects/js-packages/components/package.json @@ -16,11 +16,13 @@ "dependencies": { "@automattic/format-currency": "1.0.1", "@automattic/jetpack-boost-score-api": "workspace:*", + "@automattic/jetpack-scan": "workspace:*", "@babel/runtime": "^7", "@wordpress/browserslist-config": "6.9.0", "@wordpress/components": "28.9.0", "@wordpress/compose": "7.9.0", "@wordpress/data": "10.9.0", + "@wordpress/dataviews": "4.6.0", "@wordpress/date": "5.9.0", "@wordpress/element": "6.9.0", "@wordpress/i18n": "5.9.0", diff --git a/projects/js-packages/scan/changelog/add-threat-and-fixer-types b/projects/js-packages/scan/changelog/add-threat-and-fixer-types new file mode 100644 index 0000000000000..c339bfa18ace5 --- /dev/null +++ b/projects/js-packages/scan/changelog/add-threat-and-fixer-types @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Added threat and fixer types. diff --git a/projects/js-packages/scan/changelog/remove-deps b/projects/js-packages/scan/changelog/remove-deps new file mode 100644 index 0000000000000..223cefe9d9cb8 --- /dev/null +++ b/projects/js-packages/scan/changelog/remove-deps @@ -0,0 +1,4 @@ +Significance: patch +Type: removed + +Updated dependencies. diff --git a/projects/js-packages/scan/package.json b/projects/js-packages/scan/package.json index 5584dbbb4a07d..3dbaf42c96077 100644 --- a/projects/js-packages/scan/package.json +++ b/projects/js-packages/scan/package.json @@ -53,8 +53,6 @@ "dependencies": { "@automattic/jetpack-api": "workspace:*", "@automattic/jetpack-base-styles": "workspace:*", - "@automattic/jetpack-connection": "workspace:*", - "@automattic/jetpack-shared-extension-utils": "workspace:*", "@wordpress/api-fetch": "7.9.0", "@wordpress/element": "6.9.0", "@wordpress/i18n": "5.9.0", diff --git a/projects/js-packages/scan/src/constants/index.ts b/projects/js-packages/scan/src/constants/index.ts new file mode 100644 index 0000000000000..bccc025dbe2e9 --- /dev/null +++ b/projects/js-packages/scan/src/constants/index.ts @@ -0,0 +1,4 @@ +export const CONTACT_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support'; + +/** Once a fixer has been running for this specified amount of time (in ms), it should be considered "stale". */ +export const FIXER_IS_STALE_THRESHOLD = 1000 * 60 * 60 * 24; // 24 hours diff --git a/projects/js-packages/scan/src/index.ts b/projects/js-packages/scan/src/index.ts index e69de29bb2d1d..8009266228a9b 100644 --- a/projects/js-packages/scan/src/index.ts +++ b/projects/js-packages/scan/src/index.ts @@ -0,0 +1,3 @@ +export * from './types/index.js'; +export * from './constants/index.js'; +export * from './utils/index.js'; diff --git a/projects/js-packages/scan/src/types/fixers.ts b/projects/js-packages/scan/src/types/fixers.ts new file mode 100644 index 0000000000000..6ba9433122dbb --- /dev/null +++ b/projects/js-packages/scan/src/types/fixers.ts @@ -0,0 +1,17 @@ +export type FixerStatus = 'not_started' | 'in_progress' | 'fixed' | 'not_fixed'; + +/** + * Threat Fix Status + * + * Individual fixer status for a threat. + */ +export type ThreatFixStatusError = { + error: string; +}; + +export type ThreatFixStatusSuccess = { + status: FixerStatus; + last_updated: string; +}; + +export type ThreatFixStatus = ThreatFixStatusError | ThreatFixStatusSuccess; diff --git a/projects/js-packages/scan/src/types/index.ts b/projects/js-packages/scan/src/types/index.ts new file mode 100644 index 0000000000000..e831f787e4b42 --- /dev/null +++ b/projects/js-packages/scan/src/types/index.ts @@ -0,0 +1,2 @@ +export * from './fixers.js'; +export * from './threats.js'; diff --git a/projects/js-packages/scan/src/types/threats.ts b/projects/js-packages/scan/src/types/threats.ts new file mode 100644 index 0000000000000..2c75f88bb80fa --- /dev/null +++ b/projects/js-packages/scan/src/types/threats.ts @@ -0,0 +1,72 @@ +import { ThreatFixStatus } from './fixers.js'; + +export type ThreatStatus = 'fixed' | 'ignored' | 'current'; + +export type ThreatFixType = 'replace' | 'delete' | 'update' | string; + +export type Threat = { + /** The threat's unique ID. */ + id: string | number; + + /** The threat's signature. */ + signature: string; + + /** The threat's title. */ + title: string; + + /** The threat's description. */ + description: string; + + /** The threat's current status. */ + status: ThreatStatus; + + /** The threat's severity level (0-10). */ + severity: number; + + /** The date the threat was first detected on the site, in YYYY-MM-DDTHH:MM:SS.000Z format. */ + firstDetected: string; + + /** The version the threat is fixed in. */ + fixedIn?: string | null; + + /** The date the threat was fixed, in YYYY-MM-DDTHH:MM:SS.000Z format. */ + fixedOn?: string | null; + + /** The fixable details. */ + fixable: + | { + fixer: ThreatFixType; + target?: string | null; + extensionStatus?: string | null; + } + | false; + + /** The fixer status. */ + fixer: ThreatFixStatus; + + /** The threat's source. */ + source?: string; + + /** The threat's context. */ + context?: Record< string, unknown > | null; + + /** The name of the affected file. */ + filename: string | null; + + /** The rows affected by the database threat. */ + rows?: unknown; + + /** The table name of the database threat. */ + table?: string; + + /** The diff showing the threat's modified file contents. */ + diff?: string; + + /** The affected extension. */ + extension?: { + slug: string; + name: string; + version: string; + type: 'plugin' | 'theme' | 'core'; + }; +}; diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts new file mode 100644 index 0000000000000..2827c94fe51be --- /dev/null +++ b/projects/js-packages/scan/src/utils/index.ts @@ -0,0 +1,34 @@ +import { FIXER_IS_STALE_THRESHOLD } from '../constants/index.js'; +import { ThreatFixStatus } from '../types/fixers.js'; +import { Threat } from '../types/threats.js'; + +export const getThreatType = ( threat: Threat ) => { + if ( threat.signature === 'Vulnerable.WP.Core' ) { + return 'core'; + } + if ( threat.extension ) { + return threat.extension.type; + } + if ( threat.filename ) { + return 'file'; + } + if ( threat.table ) { + return 'database'; + } + + return null; +}; + +export const fixerTimestampIsStale = ( lastUpdatedTimestamp: string ) => { + const now = new Date(); + const lastUpdated = new Date( lastUpdatedTimestamp ); + return now.getTime() - lastUpdated.getTime() >= FIXER_IS_STALE_THRESHOLD; +}; + +export const fixerStatusIsStale = ( fixerStatus: ThreatFixStatus ) => { + return ( + 'status' in fixerStatus && + fixerStatus.status === 'in_progress' && + fixerTimestampIsStale( fixerStatus.last_updated ) + ); +}; From 367897e4e8be868a378a37cb447046b3bcebdacd Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 13:13:10 -0700 Subject: [PATCH 03/10] Update error message text Co-authored-by: dkmyta <43220201+dkmyta@users.noreply.github.com> --- .../components/components/threat-fixer-button/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/threat-fixer-button/index.tsx b/projects/js-packages/components/components/threat-fixer-button/index.tsx index 25c3e23b3bc09..7c1c92fcc718a 100644 --- a/projects/js-packages/components/components/threat-fixer-button/index.tsx +++ b/projects/js-packages/components/components/threat-fixer-button/index.tsx @@ -49,7 +49,7 @@ export default function ThreatFixerButton( { const errorMessage = useMemo( () => { if ( threat.fixer && fixerStatusIsStale( threat.fixer ) ) { - return __( 'Fixer is taking longer than expected.', 'jetpack' ); + return __( 'The fixer is taking longer than expected.', 'jetpack' ); } if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) { From 67fee37f7d8ea71c5fc854e8e01de39a5217595f Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 13:13:25 -0700 Subject: [PATCH 04/10] Update changelog Co-authored-by: dkmyta <43220201+dkmyta@users.noreply.github.com> --- .../components/changelog/add-threats-data-view-component | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/changelog/add-threats-data-view-component b/projects/js-packages/components/changelog/add-threats-data-view-component index ce943e85a6b6a..7ed6056640282 100644 --- a/projects/js-packages/components/changelog/add-threats-data-view-component +++ b/projects/js-packages/components/changelog/add-threats-data-view-component @@ -1,4 +1,4 @@ Significance: minor Type: added -Add ThreatsDataView component +Add ThreatsDataViews component From 0d5b24f4e2555e8f2324cf2ca9f1e5e7db587dc7 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 13:13:57 -0700 Subject: [PATCH 05/10] Change status filter operator to "isAny" Co-authored-by: dkmyta <43220201+dkmyta@users.noreply.github.com> --- .../components/threats-data-views/stories/index.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 4693c94fdd093..93c09c9df1103 100644 --- 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 @@ -164,8 +164,8 @@ Default.args = { filters: [ { field: 'status', - operator: 'is', - value: 'current', + operator: 'isAny', + value: [ 'current' ], }, ], onFixThreats: () => From 2c0935b2785d9307c8845087c2f9f5651aa06ca2 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 13:47:40 -0700 Subject: [PATCH 06/10] Update Threat type to use conditional properties --- .../stories/index.stories.tsx | 51 ------------------- .../js-packages/scan/src/types/threats.ts | 32 +++++------- projects/js-packages/scan/src/utils/index.ts | 3 -- 3 files changed, 13 insertions(+), 73 deletions(-) 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 index 93c09c9df1103..a132242b9e5f0 100644 --- 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 @@ -29,7 +29,6 @@ Default.args = { "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' }, @@ -41,7 +40,6 @@ Default.args = { '3': 'HTML;', marks: {}, }, - source: null, }, { id: 185869883, @@ -51,13 +49,11 @@ Default.args = { '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, @@ -67,7 +63,6 @@ Default.args = { "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', @@ -81,7 +76,6 @@ Default.args = { '11': 'HTML;', marks: {}, }, - source: null, }, { id: 184847701, @@ -91,7 +85,6 @@ Default.args = { '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() }, @@ -120,7 +113,6 @@ Default.args = { 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", }, @@ -131,7 +123,6 @@ Default.args = { 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, @@ -140,18 +131,11 @@ Default.args = { }, { 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: '2024-07-15T21:56:50.000Z', 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', @@ -203,13 +187,10 @@ FixerStatuses.args = { 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', @@ -225,13 +206,10 @@ FixerStatuses.args = { 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', @@ -247,13 +225,10 @@ FixerStatuses.args = { 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', @@ -269,7 +244,6 @@ FixerStatuses.args = { 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', @@ -283,7 +257,6 @@ FixerStatuses.args = { '11': 'HTML;', marks: {}, }, - source: null, }, ], onFixThreats: () => @@ -305,15 +278,7 @@ FreeResults.args = { 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', @@ -324,19 +289,11 @@ FreeResults.args = { }, { 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', @@ -347,18 +304,10 @@ FreeResults.args = { }, { 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', diff --git a/projects/js-packages/scan/src/types/threats.ts b/projects/js-packages/scan/src/types/threats.ts index 2c75f88bb80fa..016e2e1eaee51 100644 --- a/projects/js-packages/scan/src/types/threats.ts +++ b/projects/js-packages/scan/src/types/threats.ts @@ -8,32 +8,32 @@ export type Threat = { /** The threat's unique ID. */ id: string | number; - /** The threat's signature. */ - signature: string; - /** The threat's title. */ - title: string; + title?: string; /** The threat's description. */ - description: string; + description?: string; /** The threat's current status. */ - status: ThreatStatus; + status?: ThreatStatus; /** The threat's severity level (0-10). */ - severity: number; + severity?: number; + + /** The threat's signature. */ + signature?: string; /** The date the threat was first detected on the site, in YYYY-MM-DDTHH:MM:SS.000Z format. */ - firstDetected: string; + 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; + fixedOn?: string; /** The fixable details. */ - fixable: + fixable?: | { fixer: ThreatFixType; target?: string | null; @@ -42,22 +42,16 @@ export type Threat = { | false; /** The fixer status. */ - fixer: ThreatFixStatus; + fixer?: ThreatFixStatus; /** The threat's source. */ source?: string; /** The threat's context. */ - context?: Record< string, unknown > | null; + context?: Record< string, unknown >; /** 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; + filename?: string; /** The diff showing the threat's modified file contents. */ diff?: string; diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts index 2827c94fe51be..fae955b0507fb 100644 --- a/projects/js-packages/scan/src/utils/index.ts +++ b/projects/js-packages/scan/src/utils/index.ts @@ -12,9 +12,6 @@ export const getThreatType = ( threat: Threat ) => { if ( threat.filename ) { return 'file'; } - if ( threat.table ) { - return 'database'; - } return null; }; From 6af22c1f965248ec8da303066a488853493850a8 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 13:56:14 -0700 Subject: [PATCH 07/10] Ensure all mock threats include a status property --- .../components/threats-data-views/stories/index.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) 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 index a132242b9e5f0..00a493eea73de 100644 --- 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 @@ -136,6 +136,7 @@ Default.args = { 'The WooCommerce WordPress plugin was affected by an Authenticated Stored XSS security vulnerability.', firstDetected: '2024-07-15T21:56:50.000Z', fixedIn: '3.4.6', + status: 'current', source: 'https://wpscan.com/vulnerability/7275a176-d579-471a-8492-df8edbdf27de', extension: { name: 'WooCommerce', @@ -279,6 +280,7 @@ FreeResults.args = { 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.', fixedIn: '3.2.4', + status: 'current', source: 'https://wpscan.com/vulnerability/1d0470df-4671-47ac-8d87-a165e8f7d502', extension: { name: 'WooCommerce', @@ -294,6 +296,7 @@ FreeResults.args = { description: 'The WooCommerce WordPress plugin was affected by an Authenticated Stored XSS security vulnerability.', fixedIn: '3.4.6', + status: 'current', source: 'https://wpscan.com/vulnerability/7275a176-d579-471a-8492-df8edbdf27de', extension: { name: 'WooCommerce', @@ -308,6 +311,7 @@ FreeResults.args = { 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.', fixedIn: '1.7.2', + status: 'current', source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3', extension: { name: 'WP Super Cache', From 5c84d70dbd67dc3badd07538446982beaf19503d Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 14:13:21 -0700 Subject: [PATCH 08/10] Improve test typing --- .../threats-data-views/test/index.test.tsx | 24 +++++++------------ projects/js-packages/scan/src/types/fixers.ts | 2 +- 2 files changed, 10 insertions(+), 16 deletions(-) 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 index cd3e217683a1a..e6bcedd84ebdd 100644 --- 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 @@ -1,4 +1,3 @@ -import { type Threat } from '@automattic/jetpack-scan'; import { render, screen } from '@testing-library/react'; import ThreatsDataViews from '..'; @@ -14,9 +13,13 @@ const data = [ fixedIn: null, fixedOn: '2024-10-07T20:45:06.000Z', fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' }, - fixer: { status: 'in_progress', startedAt: '2024-10-07T20:45:06.000Z' }, + fixer: { + status: 'in_progress' as const, + startedAt: '2024-10-07T20:45:06.000Z', + lastUpdated: '2024-10-07T20:45:06.000Z', + }, severity: 8, - status: 'current', + status: 'current' as const, filename: '/var/www/html/wp-content/index.php', context: { '1': 'echo << { it( 'renders threat data', () => { diff --git a/projects/js-packages/scan/src/types/fixers.ts b/projects/js-packages/scan/src/types/fixers.ts index 6ba9433122dbb..6991e02fba167 100644 --- a/projects/js-packages/scan/src/types/fixers.ts +++ b/projects/js-packages/scan/src/types/fixers.ts @@ -11,7 +11,7 @@ export type ThreatFixStatusError = { export type ThreatFixStatusSuccess = { status: FixerStatus; - last_updated: string; + lastUpdated: string; }; export type ThreatFixStatus = ThreatFixStatusError | ThreatFixStatusSuccess; From 377e8739b2ceb1ac53f2fee2403c1b991547298f Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 14:25:09 -0700 Subject: [PATCH 09/10] Build scan package with esnext and bundler module resolution to fix JS tests --- projects/js-packages/scan/src/index.ts | 6 +++--- projects/js-packages/scan/src/types/index.ts | 4 ++-- projects/js-packages/scan/src/types/threats.ts | 2 +- projects/js-packages/scan/src/utils/index.ts | 6 ++---- projects/js-packages/scan/tsconfig.json | 3 ++- 5 files changed, 10 insertions(+), 11 deletions(-) diff --git a/projects/js-packages/scan/src/index.ts b/projects/js-packages/scan/src/index.ts index 8009266228a9b..316fb8ba3871d 100644 --- a/projects/js-packages/scan/src/index.ts +++ b/projects/js-packages/scan/src/index.ts @@ -1,3 +1,3 @@ -export * from './types/index.js'; -export * from './constants/index.js'; -export * from './utils/index.js'; +export * from './types'; +export * from './constants'; +export * from './utils'; diff --git a/projects/js-packages/scan/src/types/index.ts b/projects/js-packages/scan/src/types/index.ts index e831f787e4b42..7f9ff96cb85c5 100644 --- a/projects/js-packages/scan/src/types/index.ts +++ b/projects/js-packages/scan/src/types/index.ts @@ -1,2 +1,2 @@ -export * from './fixers.js'; -export * from './threats.js'; +export * from './fixers'; +export * from './threats'; diff --git a/projects/js-packages/scan/src/types/threats.ts b/projects/js-packages/scan/src/types/threats.ts index 016e2e1eaee51..dca016203c4b9 100644 --- a/projects/js-packages/scan/src/types/threats.ts +++ b/projects/js-packages/scan/src/types/threats.ts @@ -1,4 +1,4 @@ -import { ThreatFixStatus } from './fixers.js'; +import { ThreatFixStatus } from '..'; export type ThreatStatus = 'fixed' | 'ignored' | 'current'; diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts index fae955b0507fb..1c727460eff03 100644 --- a/projects/js-packages/scan/src/utils/index.ts +++ b/projects/js-packages/scan/src/utils/index.ts @@ -1,6 +1,4 @@ -import { FIXER_IS_STALE_THRESHOLD } from '../constants/index.js'; -import { ThreatFixStatus } from '../types/fixers.js'; -import { Threat } from '../types/threats.js'; +import { Threat, ThreatFixStatus, FIXER_IS_STALE_THRESHOLD } from '..'; export const getThreatType = ( threat: Threat ) => { if ( threat.signature === 'Vulnerable.WP.Core' ) { @@ -26,6 +24,6 @@ export const fixerStatusIsStale = ( fixerStatus: ThreatFixStatus ) => { return ( 'status' in fixerStatus && fixerStatus.status === 'in_progress' && - fixerTimestampIsStale( fixerStatus.last_updated ) + fixerTimestampIsStale( fixerStatus.lastUpdated ) ); }; diff --git a/projects/js-packages/scan/tsconfig.json b/projects/js-packages/scan/tsconfig.json index 763a299b661f0..2ad7ab8c19092 100644 --- a/projects/js-packages/scan/tsconfig.json +++ b/projects/js-packages/scan/tsconfig.json @@ -5,6 +5,7 @@ "typeRoots": [ "./node_modules/@types/", "src/types/*" ], "sourceMap": false, "outDir": "./build/", - "target": "esnext" + "module": "ESNext", + "moduleResolution": "bundler" } } From 79804d5dac2511e7a80af8bafb4e0e90897d5797 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 5 Nov 2024 14:53:19 -0700 Subject: [PATCH 10/10] Update scan package tsconfig --- projects/js-packages/scan/tsconfig.json | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/projects/js-packages/scan/tsconfig.json b/projects/js-packages/scan/tsconfig.json index 2ad7ab8c19092..e85094a0e1f5b 100644 --- a/projects/js-packages/scan/tsconfig.json +++ b/projects/js-packages/scan/tsconfig.json @@ -1,11 +1,4 @@ { - "extends": "jetpack-js-tools/tsconfig.tsc.json", - "include": [ "./src/**/*" ], - "compilerOptions": { - "typeRoots": [ "./node_modules/@types/", "src/types/*" ], - "sourceMap": false, - "outDir": "./build/", - "module": "ESNext", - "moduleResolution": "bundler" - } + "extends": "jetpack-js-tools/tsconfig.base.json", + "include": [ "./src/**/*" ] }