Adjustments to threat detail modal component

Automattic · Jan 24, 2025 · b8fed04 · b8fed04
1 parent a9f9a7e
commit b8fed04
Show file tree

Hide file tree

Showing 45 changed files with 1,718 additions and 1,326 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/components/components/badge/index.tsx b/projects/js-packages/components/components/badge/index.tsx
@@ -5,7 +5,7 @@ import styles from './style.module.scss';
 type BadgeProps = {
 	children?: React.ReactNode;
 	className?: string;
-	variant?: 'success' | 'warning' | 'danger';
+	variant?: 'info' | 'success' | 'warning' | 'danger';
 	[ key: string ]: unknown;
 };
 

diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -35,9 +35,9 @@ export default function ShieldIcon( {
 	contrast?: string;
 	fill?: 'default' | 'info' | 'success' | 'warning' | 'error' | string;
 	height?: number;
-	icon?: 'success' | 'error';
+	icon?: 'success' | 'error' | 'warning';
 	outline?: boolean;
-	variant: 'default' | 'info' | 'success' | 'warning' | 'error';
+	variant?: 'default' | 'info' | 'success' | 'warning' | 'error';
 } ): JSX.Element {
 	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
 	const iconFill = outline ? shieldFill : contrast;

diff --git a/projects/js-packages/components/components/threat-fixer-button/index.tsx b/projects/js-packages/components/components/threat-fixer-button/index.tsx
@@ -3,35 +3,41 @@ import {
 	getFixerState,
 	getFixerAction,
 	getFixerDescription,
+	ThreatsContext,
 } from '@automattic/jetpack-scan';
 import { Tooltip } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useContext, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@automattic/jetpack-components';
 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.
+ * @param {object}   props             - Component props.
+ * @param {object}   props.threat      - The threat.
+ * @param {Function} props.onClick     - The onClick function.
+ * @param {boolean}  props.showToolTip - Whether to show a tooltip on button hover.
+ * @param {string}   props.className   - The className.
  *
  * @return {JSX.Element} The component.
  */
 export default function ThreatFixerButton( {
 	threat,
 	className,
 	onClick,
+	showToolTip = true,
+	...buttonProps
 }: {
 	threat: Threat;
 	onClick: ( items: Threat[] ) => void;
 	className?: string;
-} ): JSX.Element {
-	const fixerState = useMemo( () => {
-		return getFixerState( threat.fixer );
-	}, [ threat.fixer ] );
+	showToolTip?: boolean;
+} & React.ComponentProps< typeof Button > ): JSX.Element {
+	const { fixersStatus } = useContext( ThreatsContext );
+
+	const fixer = fixersStatus.ok && fixersStatus.threats?.[ threat.id ];
+	const fixerState = getFixerState( fixer );
 
 	const tooltipText = useMemo( () => {
 		if ( ! threat.fixable ) {
@@ -79,7 +85,7 @@ export default function ThreatFixerButton( {
 
 	return (
 		<div>
-			<Tooltip className={ styles.tooltip } text={ tooltipText }>
+			<Tooltip className={ styles.tooltip } text={ showToolTip ? tooltipText : undefined }>
 				<Button
 					size="small"
 					weight="regular"
@@ -94,6 +100,7 @@ export default function ThreatFixerButton( {
 						fixerState.stale
 					}
 					style={ { minWidth: '72px' } }
+					{ ...buttonProps }
 				/>
 			</Tooltip>
 		</div>