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

Update ThreatsDataView to use js-packages IconTooltip #39856

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
6a8e44a
Add ThreatsDataView
nateweller Oct 11, 2024
2b5edb0
Add support for list view in threats data table
nateweller Oct 20, 2024
4b50580
Minor adjustments
nateweller Oct 21, 2024
90e6dc5
Add ThreatsDataView
nateweller Oct 11, 2024
3785e1a
Add support for list view in threats data table
nateweller Oct 20, 2024
50b5cc1
Minor adjustments
nateweller Oct 21, 2024
601c3dd
Fix popover content styling
dkmyta Oct 21, 2024
afa19c4
Merge trunk, fix conflicts
dkmyta Oct 21, 2024
32b6d61
Add ThreatsDataView
nateweller Oct 11, 2024
290086c
Use js-packages IconTooltip
dkmyta Oct 21, 2024
a689b1c
Rebase
dkmyta Oct 21, 2024
606b193
Update CSS
dkmyta Oct 21, 2024
475b1ce
Fix conflicts
dkmyta Oct 21, 2024
0b3d618
Update threat fixer position
dkmyta Oct 21, 2024
6e65c57
Fixes and improvements
dkmyta Oct 21, 2024
7da9b3e
Update ThreatDataView list view fixer status (#39854)
dkmyta Oct 22, 2024
998dcb7
Fix span use
dkmyta Oct 22, 2024
87761d6
Add hover effect
dkmyta Oct 22, 2024
7e6183e
Merge branch 'add/components/threats-data-view' into update/component…
dkmyta Oct 22, 2024
29bdae0
Move hover effect handlers into base component
dkmyta Oct 22, 2024
90f120e
Add story
dkmyta Oct 22, 2024
e0573e4
Fix story
dkmyta Oct 22, 2024
3fd1561
Update type
dkmyta Oct 22, 2024
8b2d0de
Fix build issues
dkmyta Oct 22, 2024
f3149b1
Remove custom IconTooltip
dkmyta Oct 22, 2024
24a6e43
Rebase
dkmyta Oct 23, 2024
7221cf9
Include stale fixer in main story
dkmyta Oct 23, 2024
27fc7bc
Update projects/js-packages/components/components/threats-data-view/s…
nateweller Oct 24, 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
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
wide = false,
inline = true,
shift = false,
hoverShow = false,
} ) => {
const POPOVER_HELPER_WIDTH = 124;
const [ isVisible, setIsVisible ] = useState( false );
const [ timeoutId, setTimeoutId ] = useState( null );

const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
const toggleTooltip = useCallback(
e => {
Expand All @@ -53,6 +56,26 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
[ isVisible, setIsVisible ]
);

const handleMouseEnter = useCallback( () => {
if ( hoverShow ) {
if ( timeoutId ) {
clearTimeout( timeoutId );
setTimeoutId( null );
}
setIsVisible( true );
}
}, [ hoverShow, timeoutId ] );

const handleMouseLeave = useCallback( () => {
if ( hoverShow ) {
const id = setTimeout( () => {
setIsVisible( false );
setTimeoutId( null );
}, 100 );
setTimeoutId( id );
}
}, [ hoverShow ] );

const args = {
// To be compatible with deprecating prop `position`.
position: placementsToPositions( placement ),
Expand All @@ -79,7 +102,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
const isForcedToShow = isAnchorWrapper && forceShow;

return (
<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
<div
className={ wrapperClassNames }
data-testid="icon-tooltip_wrapper"
onMouseEnter={ handleMouseEnter }
onMouseLeave={ handleMouseLeave }
>
{ ! isAnchorWrapper && (
<Button variant="link" onMouseDown={ toggleTooltip }>
<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ export default {
wide: {
control: { type: 'boolean' },
},
hoverShow: {
control: { type: 'boolean' },
},
},
};

Expand Down Expand Up @@ -106,3 +109,11 @@ Wide.args = {
wide: true,
placement: 'bottom-start',
};

export const HoverShow = Template.bind( {} );
HoverShow.args = {
title: 'This is title!',
children: <div>This is a tooltip!</div>,
placement: 'bottom-start',
hoverShow: true,
};
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,9 @@ export type IconTooltipProps = {
* Enables the Popover to shift in order to stay in view when meeting the viewport edges.
*/
shift?: boolean;

/**
* Enables the Popover to show on hover.
*/
hoverShow?: boolean;
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ 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 { check } from '@wordpress/icons';
import IconTooltip from '../icon-tooltip';
import Text from '../text';
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';
Expand All @@ -15,62 +16,19 @@ import { fixerStatusIsStale } from './utils';
*
* @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 {
export default function FixerStatusIcon( { fixer }: { fixer?: ThreatFixStatus } ): 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 }
/>
),
}
) }
/>
<InfoIconTooltip message={ __( 'The fixer is taking longer than expected.', 'jetpack' ) } />
);
}

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 }
/>
),
}
) }
/>
<InfoIconTooltip message={ __( 'An error occurred auto-fixing this threat.', 'jetpack' ) } />
);
}

Expand All @@ -89,7 +47,7 @@ export default function FixerStatusIcon( {
* FixerStatusText component.
* @param {object} props - Component props.
* @param {boolean} props.fixer - The fixer status.
* @return {string} The component.
* @return {JSX.Element} The component.
*/
function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
if ( fixer && fixerStatusIsStale( fixer ) ) {
Expand Down Expand Up @@ -124,7 +82,7 @@ function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element
export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
return (
<div className={ styles[ 'fixer-status' ] }>
<FixerStatusIcon fixer={ fixer } size={ 20 } />
<FixerStatusIcon fixer={ fixer } />
<FixerStatusText fixer={ fixer } />
</div>
);
Expand Down Expand Up @@ -154,3 +112,43 @@ export function DataViewFixerStatus( {

return <FixerStatusBadge fixer={ fixer } />;
}

/**
* InfoIconTooltip component.
* @param {object} props - Component props.
* @param {boolean} props.message - The popover message.
* @param {object} props.size - The size of the icon.
* @return {JSX.Elenment} The component.
*/
export function InfoIconTooltip( {
message,
size = 20,
}: {
message?: string;
size?: number;
} ): JSX.Element {
return (
<IconTooltip
placement={ 'top' }
className={ styles[ 'icon-tooltip__container' ] }
iconClassName={ styles[ 'icon-tooltip__icon' ] }
iconSize={ size }
hoverShow={ true }
>
<Text variant={ 'body-small' }>
{ message }{ ' ' }
{ createInterpolateElement(
__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
{
supportLink: (
<ExternalLink
className={ styles[ 'support-link' ] }
href={ PAID_PLUGIN_SUPPORT_URL }
/>
),
}
) }
</Text>
</IconTooltip>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@
fill: var( --jp-green-40 );
}

.icon-info {
fill: var( --jp-red );
}

.support-link {
color: inherit;

Expand Down Expand Up @@ -127,5 +123,19 @@

.threat__fixer {
min-width: 54px;
text-align: center;
display: flex;
justify-content: center;
}

.icon-tooltip {
width: fit-content;

&__container {
text-align: left;
height: 20px;
}

&__icon {
color: var( --jp-red );
}
}
Loading