Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ThreatsDataViews: ThreatModal integration #40202

Open
wants to merge 130 commits into
base: add/protect/core
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 113 commits
Commits
Show all changes
130 commits
Select commit Hold shift + click to select a range
b919756
Add ThreatDetailsModal component and stories
dkmyta Nov 14, 2024
15587ca
changelog
dkmyta Nov 14, 2024
2bebb0d
Fix type error
dkmyta Nov 14, 2024
dddfdaf
Fix child component overflow-x styling
dkmyta Nov 14, 2024
172fbb0
Update scan package changelog
dkmyta Nov 14, 2024
d39a616
Add util for fixerState and separate subcomponents
dkmyta Nov 14, 2024
e1c5bf4
Add ThreatDetailsModal to ThreatsDataViews
dkmyta Nov 14, 2024
9f0892e
Add user connection gate
dkmyta Nov 15, 2024
d955bb1
Add credentials gate
dkmyta Nov 15, 2024
32a7559
Fix stories
dkmyta Nov 15, 2024
d1d546e
Fix stories
dkmyta Nov 15, 2024
9d86cb5
Merge branch 'add/components/threat-details-modal-credentials-gate' i…
dkmyta Nov 15, 2024
69b0756
Fix credentials type
dkmyta Nov 15, 2024
2f59aa8
Update content flow
dkmyta Nov 15, 2024
30ab005
Improve organization
dkmyta Nov 15, 2024
05ac09a
Separation and reorg
dkmyta Nov 15, 2024
1f25735
Improve
dkmyta Nov 15, 2024
8755dc7
Remove redundant code
dkmyta Nov 15, 2024
e7ff731
Adjust modal content
dkmyta Nov 15, 2024
c8bcd82
Merge branch 'update/components/threat-details-modal-flow' into add/c…
dkmyta Nov 15, 2024
0aef3cd
Fix implementation and stories
dkmyta Nov 15, 2024
00511f6
Update flag
dkmyta Nov 18, 2024
6083c25
Fix display logic
dkmyta Nov 18, 2024
8c09917
Add showThreatDetails action to threat title
dkmyta Nov 18, 2024
c21ba42
Move context provided a component level up
dkmyta Nov 18, 2024
e6ca520
Reorg and fix stories
dkmyta Nov 18, 2024
924768a
changelog
dkmyta Nov 18, 2024
abde93a
Remove unintended changes
dkmyta Nov 18, 2024
fddb7f9
Generalize component name
dkmyta Nov 18, 2024
d3aaff7
Updates after renaming
dkmyta Nov 18, 2024
3851638
Ensure close button exists for vulns modal
dkmyta Nov 18, 2024
ed6fd3c
Merge branch 'trunk' into add/components/threat-details-modal
dkmyta Nov 18, 2024
cc3c1a2
Rebase
dkmyta Nov 18, 2024
5f0f5f1
Rebase
dkmyta Nov 18, 2024
1dbbddf
Rebase
dkmyta Nov 18, 2024
9aecbbb
Rebase, fix conflicts
dkmyta Nov 19, 2024
0c7099e
changelog
dkmyta Nov 19, 2024
6708378
Updates/fixes
dkmyta Nov 19, 2024
a8eed1e
Rebase, fix conflicts
dkmyta Nov 19, 2024
8b11f5f
Add utility for retrieving detailed action
dkmyta Nov 19, 2024
4e50a26
changelog
dkmyta Nov 19, 2024
4709a1c
Add detailed action
dkmyta Nov 19, 2024
799aa0b
changelog
dkmyta Nov 19, 2024
6c19fcd
Add actionToConfirm flag for rendering conditional content based on a…
dkmyta Nov 19, 2024
a134a4e
Update approach to single view
dkmyta Nov 20, 2024
c084a5f
Move notices to ThreatActions
dkmyta Nov 20, 2024
5533413
Rebase
dkmyta Nov 20, 2024
03eb1ba
Add fixer notices
dkmyta Nov 20, 2024
b33d1d1
Add fixer notices
dkmyta Nov 21, 2024
3541623
Fix styling
dkmyta Nov 21, 2024
0032d03
Additional improvements
dkmyta Nov 21, 2024
d028679
Fix gap
dkmyta Nov 21, 2024
daf8c58
Rebase
dkmyta Nov 21, 2024
a6d4c3a
Fix conflicts
dkmyta Nov 21, 2024
b7d60ff
Fix styles
dkmyta Nov 21, 2024
a67f639
Add ignore confirmation details
dkmyta Nov 21, 2024
962a992
Add modal fixer confirmation context
dkmyta Nov 21, 2024
5860eca
Reorg
dkmyta Nov 21, 2024
84bf4fd
Remove actionToConfirm flag, to be readded in integration
dkmyta Nov 21, 2024
344696a
Early return on ThreatActions for fixed threats
dkmyta Nov 21, 2024
baeaacf
Rebase
dkmyta Nov 21, 2024
242ca8f
Make threat status check optional
dkmyta Nov 21, 2024
6807ee6
Merge branch 'update/components/threat-details-modal-flow' into add/c…
dkmyta Nov 21, 2024
c01432f
Fix stories
dkmyta Nov 21, 2024
9151f92
Merge branch 'trunk' into update/components/threat-details-modal-flow
dkmyta Nov 21, 2024
f02fa61
Merge branch 'update/components/threat-details-modal-flow' into add/c…
dkmyta Nov 21, 2024
9093f0a
Fix tests
dkmyta Nov 21, 2024
a02bff6
Remove jest
dkmyta Nov 21, 2024
220d28c
Use custom button for threat details toggle (#40298)
nateweller Nov 22, 2024
896f7e0
Use Button and override internal styles
dkmyta Nov 22, 2024
41e563f
Fix classes
dkmyta Nov 22, 2024
94ed99a
Move fixerState comp to ThreatFixConfirmation
dkmyta Nov 22, 2024
33268ee
Rely heavily on context provider
dkmyta Nov 22, 2024
a68be5e
Rebase, fix stories
dkmyta Nov 22, 2024
1e2333e
Fix styles
dkmyta Nov 25, 2024
6815e0e
Merge branch 'update/components/threat-details-modal-flow' into add/c…
dkmyta Nov 25, 2024
538694f
Add support link
dkmyta Nov 25, 2024
e390d43
Fix threat action buttons in mobile
dkmyta Nov 25, 2024
572cc10
Merge trunk, fix conflicts
dkmyta Nov 25, 2024
b085648
changelog
dkmyta Nov 25, 2024
4daadc6
Fix focus styling issues
dkmyta Nov 25, 2024
1716a45
Add slight padding to overflow issues
dkmyta Nov 25, 2024
aa0f8e5
Add global override, over awkward title offset
dkmyta Nov 25, 2024
fbd7091
Remove unneeded styles while global override is in place
dkmyta Nov 25, 2024
bbb39c6
Rebase, fix conflicts
dkmyta Dec 3, 2024
a51c906
Fix text domain
dkmyta Dec 3, 2024
3a17f97
Init project branch
nateweller Nov 14, 2024
f4820b9
Protect: Add Go to Cloud and Scan now button to Protect primary heade…
dkmyta Nov 14, 2024
a240e20
Protect: Update Scan and History headers (#40058)
dkmyta Nov 14, 2024
b9bfed3
Protect: de-emphasize cloud link by using link variant (#40211)
nateweller Nov 18, 2024
f02081f
Protect: add ShieldIcon component
nateweller Nov 30, 2024
6c73d5a
Protect: Add ShieldIcon Component (#40402)
nateweller Dec 5, 2024
1118627
Protect: Integrate ThreatsDataViews Component (#40076)
nateweller Dec 5, 2024
5715d45
Merge branch 'add/protect/core' into add/components/threats-data-view…
dkmyta Dec 5, 2024
28310a8
Hook up ThreatModal integration in Protect
dkmyta Dec 5, 2024
3fc4a41
Revert changes to scan types until the expected type changes on the b…
dkmyta Dec 5, 2024
77fc70d
Add dummy arg
dkmyta Dec 5, 2024
39675ef
Add credentials polling while modal is open
dkmyta Dec 5, 2024
c3fa03f
Improve organization
dkmyta Dec 5, 2024
d24d492
Fix tests
dkmyta Dec 5, 2024
5ce9a33
Remove dummy arg
dkmyta Dec 6, 2024
49db999
Fix build errors
dkmyta Dec 6, 2024
4dd60b7
Init project branch
nateweller Nov 14, 2024
ff92d88
Protect: Add Go to Cloud and Scan now button to Protect primary heade…
dkmyta Nov 14, 2024
39e4094
Protect: Update Scan and History headers (#40058)
dkmyta Nov 14, 2024
9fec011
Protect: de-emphasize cloud link by using link variant (#40211)
nateweller Nov 18, 2024
af172c9
Protect: add ShieldIcon component
nateweller Nov 30, 2024
00283bc
Protect: Add ShieldIcon Component (#40402)
nateweller Dec 5, 2024
f580ace
Protect: Integrate ThreatsDataViews Component (#40076)
nateweller Dec 5, 2024
c384d69
Components: Add ScanReport (#40419)
dkmyta Dec 5, 2024
68569f2
Fix type errors
nateweller Dec 6, 2024
91ee20a
Protect: Refactor AdminSectionHero (#40516)
nateweller Dec 9, 2024
617b7d0
Rebase, add isSupportedEnvironment flag for displaying codeable redirect
dkmyta Dec 9, 2024
38c8904
Fix description text wrap
dkmyta Dec 9, 2024
3c24030
Init project branch
nateweller Nov 14, 2024
be99f50
Protect: Add Go to Cloud and Scan now button to Protect primary heade…
dkmyta Nov 14, 2024
8dd5dde
Protect: Update Scan and History headers (#40058)
dkmyta Nov 14, 2024
90d6898
Protect: de-emphasize cloud link by using link variant (#40211)
nateweller Nov 18, 2024
dd21913
Protect: add ShieldIcon component
nateweller Nov 30, 2024
19c083e
Protect: Add ShieldIcon Component (#40402)
nateweller Dec 5, 2024
08cdcb2
Protect: Integrate ThreatsDataViews Component (#40076)
nateweller Dec 5, 2024
0a9047e
Components: Add ScanReport (#40419)
dkmyta Dec 5, 2024
aa9b8a3
Fix type errors
nateweller Dec 6, 2024
08d8de3
Protect: Refactor AdminSectionHero (#40516)
nateweller Dec 9, 2024
b33c95a
Protect: Update Scan History extension types (#40548)
dkmyta Dec 10, 2024
e13aa74
Protect: Add Home page (#40317)
dkmyta Dec 10, 2024
322819d
Protect: Integrate ScanReport (#40420)
dkmyta Dec 11, 2024
415573d
Rebase
dkmyta Dec 11, 2024
50a7aa4
Rebase
dkmyta Dec 19, 2024
8e6488a
Reapply overwritten integration updates
dkmyta Dec 19, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Integrates ThreatModal in ThreatsDataViews
4 changes: 4 additions & 0 deletions projects/js-packages/components/changelog/add-shield-icon
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Add ShieldIcon component
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Adds ScanReport component
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
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 TYPES = [
{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
{ value: 'files', label: __( 'Files', 'jetpack-components' ) },
];

export const ICONS = {
plugins: pluginIcon,
themes: themeIcon,
core: coreIcon,
files: fileIcon,
default: shieldIcon,
};

export const FIELD_ICON = 'icon';
export const FIELD_TYPE = 'type';
export const FIELD_NAME = 'name';
export const FIELD_STATUS = 'status';
export const FIELD_UPDATE = 'update';
export const FIELD_VERSION = 'version';
197 changes: 197 additions & 0 deletions projects/js-packages/components/components/scan-report/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import { type ScanReportExtension } from '@automattic/jetpack-scan';
import { Tooltip } from '@wordpress/components';
import {
type SupportedLayouts,
type View,
type Field,
DataViews,
filterSortAndPaginate,
} from '@wordpress/dataviews';
import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { useCallback, useMemo, useState } from 'react';
import ShieldIcon from '../shield-icon';
import {
FIELD_NAME,
FIELD_VERSION,
FIELD_ICON,
FIELD_STATUS,
FIELD_TYPE,
TYPES,
ICONS,
} from './constants';
import styles from './styles.module.scss';

/**
* DataViews component for displaying a scan report.
*
* @param {object} props - Component props.
* @param {Array} props.data - Scan report data.
* @param {Function} props.onChangeSelection - Callback function run when an item is selected.
*
* @return {JSX.Element} The ScanReport component.
*/
export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
const baseView = {
search: '',
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: [ FIELD_STATUS, FIELD_TYPE, FIELD_NAME, FIELD_VERSION ],
layout: {
primaryField: FIELD_STATUS,
},
},
list: {
...baseView,
fields: [ FIELD_STATUS, FIELD_VERSION ],
layout: {
primaryField: FIELD_NAME,
mediaField: 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,
} );

/**
* 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 iconHeight = 20;
const result: Field< ScanReportExtension >[] = [
{
id: FIELD_STATUS,
label: __( 'Status', 'jetpack-components' ),
render( { item }: { item: ScanReportExtension } ) {
let variant: 'info' | 'warning' | 'success' = 'info';
let text = __(
'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
'jetpack-components'
);

if ( item.checked ) {
if ( item.threats.length > 0 ) {
variant = 'warning';
text = __( 'Threat detected.', 'jetpack-components' );
} else {
variant = 'success';
text = __( 'No known threats found that affect this version.', 'jetpack-components' );
}
}

return (
<Tooltip className={ styles.tooltip } text={ text }>
<div className={ styles.icon }>
<ShieldIcon variant={ variant } height={ iconHeight } />
</div>
</Tooltip>
);
},
},
{
id: FIELD_TYPE,
label: __( 'Type', 'jetpack-components' ),
elements: TYPES,
},
{
id: FIELD_NAME,
label: __( 'Name', 'jetpack-components' ),
enableGlobalSearch: true,
getValue( { item }: { item: ScanReportExtension } ) {
return item.name ? item.name : '';
},
},
{
id: FIELD_VERSION,
label: __( 'Version', 'jetpack-components' ),
enableGlobalSearch: true,
getValue( { item }: { item: ScanReportExtension } ) {
return item.version ? item.version : '';
},
},
...( view.type === 'list'
? [
{
id: FIELD_ICON,
label: __( 'Icon', 'jetpack-components' ),
enableSorting: false,
enableHiding: false,
getValue( { item }: { item: ScanReportExtension } ) {
return ICONS[ item.type ] || '';
},
render( { item }: { item: ScanReportExtension } ) {
return (
<div className={ styles.threat__media }>
<Icon icon={ ICONS[ item.type ] } />
</div>
);
},
},
]
: [] ),
];

return result;
}, [ view ] );

/**
* 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: ScanReportExtension ) => item.id.toString(), [] );

return (
<DataViews
data={ processedData }
defaultLayouts={ defaultLayouts }
fields={ fields }
getItemId={ getItemId }
onChangeSelection={ onChangeSelection }
onChangeView={ onChangeView }
paginationInfo={ paginationInfo }
view={ view }
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import ScanReport from '..';

export default {
title: 'JS Packages/Components/Scan Report',
component: ScanReport,
parameters: {
backgrounds: {
default: 'light',
values: [ { name: 'light', value: 'white' } ],
},
},
decorators: [
Story => (
<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
<Story />
</div>
),
],
};

export const Default = args => <ScanReport { ...args } />;
Default.args = {
data: [
{
id: 1,
name: 'WordPress',
slug: null,
version: '6.7.1',
threats: [],
checked: true,
type: 'core',
},
{
id: 2,
name: 'Jetpack',
slug: 'jetpack/jetpack.php',
version: '14.1-a.7',
threats: [],
checked: false,
type: 'plugins',
},
{
id: 3,
name: 'Twenty Fifteen',
slug: 'twentyfifteen',
version: '1.1',
threats: [
{
id: 198352527,
signature: 'Vulnerable.WP.Extension',
description: 'Vulnerable WordPress extension',
severity: 3,
},
],
checked: true,
type: 'themes',
},
{
id: 4,
threats: [
{
id: 198352406,
signature: 'EICAR_AV_Test_Suspicious',
title: 'Malicious code found in file: jptt_eicar.php',
severity: 1,
},
],
checked: true,
type: 'files',
},
],
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@import '@wordpress/dataviews/build-style/style.css';

.threat__media {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #EDFFEE;
border-color: #EDFFEE;

svg {
fill: var( --jp-black );
}
}

.tooltip {
max-width: 240px;
border-radius: 4px;
text-align: left;
}
Loading
Loading