Skip to content

Commit

Permalink
Add ThreatsDataView
Browse files Browse the repository at this point in the history
changelog
  • Loading branch information
nateweller committed Oct 16, 2024
1 parent f62e160 commit 3adfb3c
Show file tree
Hide file tree
Showing 17 changed files with 993 additions and 1 deletion.
31 changes: 31 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

Add ThreatsDataView component
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { __ } from '@wordpress/i18n';

export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support';

export const THREAT_STATUSES = [
{ value: 'current', label: __( 'Active', 'jetpack' ) },
{ value: 'fixed', label: __( 'Fixed', 'jetpack' ) },
{ value: 'ignored', label: __( 'Ignored', 'jetpack' ) },
];

export const THREAT_TYPES = [
{ value: 'plugin', label: __( 'Plugin', 'jetpack' ) },
{ value: 'theme', label: __( 'Theme', 'jetpack' ) },
{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
{ value: 'file', label: __( 'File', 'jetpack' ) },
{ value: 'database', label: __( 'Database', 'jetpack' ) },
];
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { ExternalLink, Icon, Spinner } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { check, info } from '@wordpress/icons';
import { PAID_PLUGIN_SUPPORT_URL } from './constants';
import IconTooltip from './icon-tooltip';
import styles from './styles.module.scss';

/**
* Fixer Status component.
*
* @param {object} props - Component props.
* @param {boolean} props.isActiveFixInProgress - Whether an active fix is in progress.
* @param {boolean} props.isStaleFixInProgress - Whether a stale fix is in progress.
*
* @return {JSX.Element} The component.
*/
export default function FixerStatus( {
isActiveFixInProgress,
isStaleFixInProgress,
}: {
isActiveFixInProgress: boolean;
isStaleFixInProgress: boolean;
} ): JSX.Element {
if ( isStaleFixInProgress ) {
return (
<IconTooltip
icon={ info }
iconClassName={ styles[ 'icon-info' ] }
iconSize={ 24 }
text={ createInterpolateElement(
__(
'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
'jetpack'
),
{
supportLink: (
<ExternalLink
className={ styles[ 'support-link' ] }
href={ PAID_PLUGIN_SUPPORT_URL }
/>
),
}
) }
/>
);
}

if ( isActiveFixInProgress ) {
return <Spinner color="black" />;
}

return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Text } from '@automattic/jetpack-components';
import { Icon, Popover } from '@wordpress/components';
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;
Loading

0 comments on commit 3adfb3c

Please sign in to comment.