-
Notifications
You must be signed in to change notification settings - Fork 798
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for list view in threats data table Minor adjustments Add badge component and integrate with threats data view Update stories and align auto-fix column Update ThreatDataView list view fixer status (#39854)
- Loading branch information
1 parent
c2b7dc0
commit 064f6aa
Showing
21 changed files
with
1,949 additions
and
25 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
4 changes: 4 additions & 0 deletions
4
projects/js-packages/components/changelog/add-threats-data-view-component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: added | ||
|
||
Add ThreatsDataView component |
39 changes: 39 additions & 0 deletions
39
projects/js-packages/components/components/badge/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import clsx from 'clsx'; | ||
import React from 'react'; | ||
import styles from './style.module.scss'; | ||
|
||
type BadgeProps = { | ||
children?: React.ReactNode; | ||
className?: string; | ||
variant?: 'success' | 'warning' | 'danger'; | ||
[ key: string ]: unknown; | ||
}; | ||
|
||
/** | ||
* Badge component | ||
* | ||
* @param {object} props - The component properties. | ||
* @param {string} props.variant - The badge variant (i.e. 'success', 'warning', 'danger'). | ||
* @param {JSX.Element} props.children - Badge text or content. | ||
* @param {string} props.className - Additional class name to pass to the Badge component. | ||
* | ||
* @return {React.ReactElement} The `Badge` component. | ||
*/ | ||
const Badge: React.FC< BadgeProps > = ( { children, className, variant = 'info', ...props } ) => { | ||
const classes = clsx( | ||
styles.badge, | ||
{ | ||
[ styles[ 'is-success' ] ]: variant === 'success', | ||
[ styles[ 'is-warning' ] ]: variant === 'warning', | ||
[ styles[ 'is-danger' ] ]: variant === 'danger', | ||
}, | ||
className | ||
); | ||
return ( | ||
<span className={ classes } { ...props }> | ||
{ children } | ||
</span> | ||
); | ||
}; | ||
|
||
export default Badge; |
22 changes: 22 additions & 0 deletions
22
projects/js-packages/components/components/badge/stories/index.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import Badge from '../index'; | ||
|
||
export default { | ||
title: 'JS Packages/Components/Badge', | ||
component: Badge, | ||
argTypes: { | ||
type: { | ||
control: { | ||
type: 'select', | ||
}, | ||
options: [ 'info', 'danger', 'warning', 'success' ], | ||
}, | ||
}, | ||
}; | ||
|
||
const Template = args => <Badge { ...args } />; | ||
|
||
export const _default = Template.bind( {} ); | ||
_default.args = { | ||
type: 'info', | ||
children: 'Hello World', | ||
}; |
25 changes: 25 additions & 0 deletions
25
projects/js-packages/components/components/badge/style.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} |
38 changes: 14 additions & 24 deletions
38
projects/js-packages/components/components/threat-severity-badge/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,24 @@ | ||
import { _x } from '@wordpress/i18n'; | ||
import styles from './styles.module.scss'; | ||
import Badge from '../badge'; | ||
|
||
const severityClassNames = severity => { | ||
const ThreatSeverityBadge = ( { severity } ) => { | ||
if ( severity >= 5 ) { | ||
return 'is-critical'; | ||
} else if ( severity >= 3 && severity < 5 ) { | ||
return 'is-high'; | ||
return ( | ||
<Badge variant="danger"> | ||
{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' ) } | ||
</Badge> | ||
); | ||
} | ||
return 'is-low'; | ||
}; | ||
|
||
const severityText = severity => { | ||
if ( severity >= 5 ) { | ||
return _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' ); | ||
} else if ( severity >= 3 && severity < 5 ) { | ||
return _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' ); | ||
if ( severity >= 3 && severity < 5 ) { | ||
return ( | ||
<Badge variant="warning"> | ||
{ _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' ) } | ||
</Badge> | ||
); | ||
} | ||
return _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ); | ||
}; | ||
|
||
const ThreatSeverityBadge = ( { severity } ) => { | ||
return ( | ||
<div | ||
className={ `${ styles[ 'threat-severity-badge' ] } ${ | ||
styles[ severityClassNames( severity ) ] | ||
}` } | ||
> | ||
{ severityText( severity ) } | ||
</div> | ||
); | ||
return <Badge>{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ) }</Badge>; | ||
}; | ||
|
||
export default ThreatSeverityBadge; |
18 changes: 18 additions & 0 deletions
18
projects/js-packages/components/components/threats-data-view/constants.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support'; | ||
|
||
export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] = | ||
[ | ||
{ value: 'current', label: __( 'Active', 'jetpack' ), variant: 'warning' }, | ||
{ value: 'fixed', label: __( 'Fixed', 'jetpack' ), variant: 'success' }, | ||
{ value: 'ignored', label: __( 'Ignored', 'jetpack' ) }, | ||
]; | ||
|
||
export const THREAT_TYPES = [ | ||
{ value: 'plugin', label: __( 'Plugin', 'jetpack' ) }, | ||
{ value: 'theme', label: __( 'Theme', 'jetpack' ) }, | ||
{ value: 'core', label: __( 'WordPress', 'jetpack' ) }, | ||
{ value: 'file', label: __( 'File', 'jetpack' ) }, | ||
{ value: 'database', label: __( 'Database', 'jetpack' ) }, | ||
]; |
156 changes: 156 additions & 0 deletions
156
projects/js-packages/components/components/threats-data-view/fixer-status.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,156 @@ | ||
import { ExternalLink, Spinner } from '@wordpress/components'; | ||
import { View } from '@wordpress/dataviews'; | ||
import { createInterpolateElement } from '@wordpress/element'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { Icon } from '@wordpress/icons'; | ||
import { check, info } from '@wordpress/icons'; | ||
import { PAID_PLUGIN_SUPPORT_URL } from './constants'; | ||
import IconTooltip from './icon-tooltip'; | ||
import styles from './styles.module.scss'; | ||
import { ThreatFixStatus } from './types'; | ||
import { fixerStatusIsStale } from './utils'; | ||
|
||
/** | ||
* Fixer Status component. | ||
* | ||
* @param {object} props - Component props. | ||
* @param {boolean} props.fixer - The fixer status. | ||
* @param {number} props.size - The size of the icon. | ||
* | ||
* @return {JSX.Element} The component. | ||
*/ | ||
export default function FixerStatusIcon( { | ||
fixer, | ||
size = 24, | ||
}: { | ||
fixer?: ThreatFixStatus; | ||
size?: number; | ||
} ): JSX.Element { | ||
if ( fixer && fixerStatusIsStale( fixer ) ) { | ||
return ( | ||
<IconTooltip | ||
icon={ info } | ||
iconClassName={ styles[ 'icon-info' ] } | ||
iconSize={ size } | ||
text={ createInterpolateElement( | ||
__( | ||
'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.', | ||
'jetpack' | ||
), | ||
{ | ||
supportLink: ( | ||
<ExternalLink | ||
className={ styles[ 'support-link' ] } | ||
href={ PAID_PLUGIN_SUPPORT_URL } | ||
/> | ||
), | ||
} | ||
) } | ||
/> | ||
); | ||
} | ||
|
||
if ( fixer && 'error' in fixer && fixer.error ) { | ||
return ( | ||
<IconTooltip | ||
icon={ info } | ||
iconClassName={ styles[ 'icon-info' ] } | ||
iconSize={ size } | ||
text={ createInterpolateElement( | ||
__( | ||
'An error occurred auto-fixing this threat. Please try again or <supportLink>contact support</supportLink>.', | ||
'jetpack' | ||
), | ||
{ | ||
supportLink: ( | ||
<ExternalLink | ||
className={ styles[ 'support-link' ] } | ||
href={ PAID_PLUGIN_SUPPORT_URL } | ||
/> | ||
), | ||
} | ||
) } | ||
/> | ||
); | ||
} | ||
|
||
if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) { | ||
return ( | ||
<div className={ styles[ 'icon-spinner' ] }> | ||
<Spinner color="black" /> | ||
</div> | ||
); | ||
} | ||
|
||
return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />; | ||
} | ||
|
||
/** | ||
* FixerStatusText component. | ||
* @param {object} props - Component props. | ||
* @param {boolean} props.fixer - The fixer status. | ||
* @return {string} The component. | ||
*/ | ||
function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element { | ||
if ( fixer && fixerStatusIsStale( fixer ) ) { | ||
return ( | ||
<span className={ styles[ 'info-spacer' ] }> | ||
{ __( 'Fixer is taking longer than expected', 'jetpack' ) } | ||
</span> | ||
); | ||
} | ||
|
||
if ( fixer && 'error' in fixer && fixer.error ) { | ||
return ( | ||
<span className={ styles[ 'info-spacer' ] }> | ||
{ __( 'An error occurred auto-fixing this threat', 'jetpack' ) } | ||
</span> | ||
); | ||
} | ||
|
||
if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) { | ||
return <span className={ styles[ 'spinner-spacer' ] }>{ __( 'Auto-fixing', 'jetpack' ) }</span>; | ||
} | ||
|
||
return <span className={ styles[ 'check-spacer' ] }>{ __( 'Auto-fixable', 'jetpack' ) }</span>; | ||
} | ||
|
||
/** | ||
* FixerStatusBadge component. | ||
* @param {object} props - Component props. | ||
* @param {boolean} props.fixer - The fixer status. | ||
* @return {string} The component. | ||
*/ | ||
export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element { | ||
return ( | ||
<div className={ styles[ 'fixer-status' ] }> | ||
<FixerStatusIcon fixer={ fixer } size={ 20 } /> | ||
<FixerStatusText fixer={ fixer } /> | ||
</div> | ||
); | ||
} | ||
|
||
/** | ||
* DataViewFixerStatus component. | ||
* @param {object} props - Component props. | ||
* @param {boolean} props.fixer - The fixer status. | ||
* @param {object} props.view - The view. | ||
* @return {string} The component. | ||
*/ | ||
export function DataViewFixerStatus( { | ||
fixer, | ||
view, | ||
}: { | ||
fixer?: ThreatFixStatus; | ||
view: View; | ||
} ): JSX.Element { | ||
if ( view.type === 'table' ) { | ||
return ( | ||
<div className={ styles.threat__fixer }> | ||
<FixerStatusIcon fixer={ fixer } /> | ||
</div> | ||
); | ||
} | ||
|
||
return <FixerStatusBadge fixer={ fixer } />; | ||
} |
52 changes: 52 additions & 0 deletions
52
projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { Text } from '@automattic/jetpack-components'; | ||
import { Popover } from '@wordpress/components'; | ||
import { Icon } from '@wordpress/icons'; | ||
import React, { useCallback, useState } from 'react'; | ||
import styles from './styles.module.scss'; | ||
|
||
const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => { | ||
const [ showPopover, setShowPopover ] = useState( false ); | ||
const [ timeoutId, setTimeoutId ] = useState( null ); | ||
|
||
const handleEnter = useCallback( () => { | ||
// Clear any existing timeout if user hovers back quickly | ||
if ( timeoutId ) { | ||
clearTimeout( timeoutId ); | ||
setTimeoutId( null ); | ||
} | ||
setShowPopover( true ); | ||
}, [ timeoutId ] ); | ||
|
||
const handleOut = useCallback( () => { | ||
// Set a timeout to delay the hiding of the popover | ||
const id = setTimeout( () => { | ||
setShowPopover( false ); | ||
setTimeoutId( null ); // Clear the timeout ID after the popover is hidden | ||
}, 100 ); | ||
|
||
setTimeoutId( id ); | ||
}, [] ); | ||
|
||
return ( | ||
<div | ||
className={ styles[ 'icon-popover' ] } | ||
onMouseLeave={ handleOut } | ||
onMouseEnter={ handleEnter } | ||
onClick={ handleEnter } | ||
onFocus={ handleEnter } | ||
onBlur={ handleOut } | ||
role="presentation" | ||
> | ||
<Icon className={ iconClassName } icon={ icon } size={ iconSize } /> | ||
{ showPopover && ( | ||
<Popover noArrow={ false } offset={ 5 } inline={ true } position={ popoverPosition }> | ||
<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }> | ||
{ text } | ||
</Text> | ||
</Popover> | ||
) } | ||
</div> | ||
); | ||
}; | ||
|
||
export default IconTooltip; |
Oops, something went wrong.