feat: add autofix

.changeset/sweet-melons-trade.md

@@ -0,0 +1,6 @@
+---
+"@monokle/components": minor
+"@monokle/validation": minor
+---
+
+add autofixes

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,14 +19,15 @@ import {iconMap} from '../ValidationOverview/constants';
 import {SecurityFrameworkTag} from '../ValidationOverview/ProblemRenderer';
 
 const ProblemInfo: React.FC<ProblemInfoType> = 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]);
   const title = useMemo(
     () => (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<ProblemInfoType> = props => {
 
   const showSuppressionCTA = typeof suppressionBindings?.onToggleSuppression == 'function';
 
+  const handleProblemAutofix = useCallback(() => {
+    if (!hasFix) {
+      return () => {
+        return;
+      };
+    }
+    return () => onProblemAutofix?.(problem);
+  }, [onProblemAutofix, problem, hasFix]);
+
   return (
     <ProblemInfoContainer className={containerClassName} style={containerStyle}>
       <TitleContainer>
@@ -77,6 +87,16 @@ const ProblemInfo: React.FC<ProblemInfoType> = props => {
         </IconsContainer>
         <Spacer />
         <Actions>
+          {onProblemAutofix ? (
+            <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={hasFix ? 'Autofix' : 'No fix available'}>
+              <Button
+                type="link"
+                onClick={handleProblemAutofix}
+                icon={<Icon style={{color: hasFix ? Colors.blue7 : Colors.grey7}} name="magic-wand" />}
+              />
+            </Tooltip>
+          ) : null}
+
           {showSuppressionCTA ? (
             <Tooltip
               mouseEnterDelay={TOOLTIP_DELAY}

packages/components/src/molecules/ProblemInfo/types.ts

@@ -11,4 +11,5 @@ export type ProblemInfoType = {
   containerStyle?: React.CSSProperties;
   onLocationClick?: (location: Location) => void;
   suppressionBindings?: SuppressionBindings;
+  onProblemAutofix?: (problem: ValidationResult) => void;
 };

packages/components/src/molecules/ValidationOverview/ProblemRenderer.tsx

@@ -31,6 +31,9 @@ const ProblemRenderer: React.FC<IProps> = props => {
     [selectedProblem, node.problem, groupByFilterValue]
   );
 
+  const absent = node.problem.baselineState === 'absent';
+  const hasFix = node.problem.fixes && node.problem.fixes.length > 0;
+
   const isUnderReview = useMemo(() => {
     return Boolean(
       typeof suppressionBindings?.isUnderReview == 'function' && suppressionBindings.isUnderReview(node.problem)
@@ -51,7 +54,7 @@ const ProblemRenderer: React.FC<IProps> = props => {
   return (
     <Row
       $isSelected={isSelected}
-      $isSuppressed={suppressed}
+      $isSuppressed={suppressed || absent}
       $isUnderReview={isUnderReview}
       $secondary={groupByFilterValue === 'group-by-rule'}
       onClick={onClick}
@@ -97,9 +100,8 @@ const ProblemRenderer: React.FC<IProps> = props => {
           </Tooltip>
 
           <ProblemIcon level={node.problem.level ?? 'error'} style={{fontSize: '8px', marginRight: '-8px'}} />
-
-          <ProblemText $isSuppressed={suppressed}>{node.problem.message.text}</ProblemText>
-
+          <ProblemText $isSuppressed={suppressed || absent}>{node.problem.message.text}</ProblemText>
+          {suppressed ? '(suppressed)' : ''}
           {node.problem.taxa?.length ? (
             <TagsContainer>
               {node.problem.taxa.map(framework => (
@@ -119,11 +121,15 @@ const ProblemRenderer: React.FC<IProps> = props => {
       )}
 
       <ActionsContainer onClick={e => e.stopPropagation()}>
-        {onAutofixHandler && (
+        {onAutofixHandler && hasFix && !absent ? (
           <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title="Autofix">
-            <Icon name="magic-wand" onClick={() => onAutofixHandler(node.problem)} />
+            <Icon
+              style={{color: isSelected ? Colors.blackPure : Colors.blue7}}
+              name="magic-wand"
+              onClick={() => onAutofixHandler(node.problem)}
+            />
           </Tooltip>
-        )}
+        ) : null}
 
         {showSuppressionCTA ? (
           <Tooltip