chore: add autofix to ProblemInfo

kubeshop · Sep 12, 2023 · 28575c3 · 28575c3
1 parent 72d3abf
commit 28575c3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git 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,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}

diff --git a/packages/components/src/molecules/ProblemInfo/types.ts b/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;
 };
diff --git a/packages/components/src/molecules/ValidationOverview/utils.tsx b/packages/components/src/molecules/ValidationOverview/utils.tsx
@@ -132,7 +132,7 @@ export const filterProblems = (
         }
 
         if (!filters.showAbsent) {
-          filteredValidationResults = filteredValidationResults.filter(p => p.baselineState === 'absent');
+          filteredValidationResults = filteredValidationResults.filter(p => p.baselineState !== 'absent');
         }
 
         if (filteredValidationResults.length > 0) {