diff --git a/packages/components/src/molecules/ProblemInfo/ProblemInfo.tsx b/packages/components/src/molecules/ProblemInfo/ProblemInfo.tsx index 5ac21006c..e43584fd5 100644 --- a/packages/components/src/molecules/ProblemInfo/ProblemInfo.tsx +++ b/packages/components/src/molecules/ProblemInfo/ProblemInfo.tsx @@ -1,7 +1,7 @@ import {Colors} from '@/styles/Colors'; import {getFileLocation} from '@monokle/validation'; import {Button, Descriptions, Tooltip} from 'antd'; -import {useEffect, useMemo, useState} from 'react'; +import {useCallback, useEffect, useMemo, useState} from 'react'; import styled from 'styled-components'; import {ProblemInfoType} from './types'; import {renderToolComponentName} from './utils'; @@ -19,7 +19,7 @@ import {iconMap} from '../ValidationOverview/constants'; import {SecurityFrameworkTag} from '../ValidationOverview/ProblemRenderer'; const ProblemInfo: React.FC = props => { - const {containerClassName = '', containerStyle = {}, problem, rule, suppressionBindings} = props; + const {containerClassName = '', containerStyle = {}, problem, rule, suppressionBindings, onProblemAutofix} = props; const {onConfigureRule, onHelpURLClick, onLocationClick} = props; const errorLocation = useMemo(() => getFileLocation(problem), [problem]); @@ -27,6 +27,7 @@ const ProblemInfo: React.FC = props => { () => (problem.message.text.endsWith('.') ? problem.message.text.slice(0, -1) : problem.message.text), [problem.message.text] ); + const hasFix = problem.fixes && problem.fixes.length > 0; const isUnderReview = useMemo(() => { return Boolean( @@ -46,6 +47,15 @@ const ProblemInfo: React.FC = props => { const showSuppressionCTA = typeof suppressionBindings?.onToggleSuppression == 'function'; + const handleProblemAutofix = useCallback(() => { + if (!hasFix) { + return () => { + return; + }; + } + return () => onProblemAutofix?.(problem); + }, [onProblemAutofix, problem, hasFix]); + return ( @@ -77,6 +87,16 @@ const ProblemInfo: React.FC = props => { + {onProblemAutofix ? ( + +