Add sarif fix

.changeset/ninety-maps-float.md

@@ -0,0 +1,6 @@
+---
+"@monokle/components": minor
+"@monokle/validation": minor
+---
+
+Improved autofix

package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "prettier": "2.5.1",
     "pretty-quick": "3.1.3",
-    "turbo": "1.6.3"
+    "turbo": "1.10.13"
   },
   "dependencies": {
     "@changesets/cli": "2.25.2"

packages/components/package.json

@@ -84,6 +84,7 @@
     "use-debounced-effect": "2.0.1"
   },
   "dependencies": {
-    "react-fast-compare": "^3.2.1"
+    "react-fast-compare": "^3.2.1",
+    "react-hotkeys-hook": "4.4.1"
   }
 }

packages/components/src/molecules/ProblemInfo/ProblemInfo.tsx

@@ -48,12 +48,8 @@ const ProblemInfo: React.FC<ProblemInfoType> = props => {
   const showSuppressionCTA = typeof suppressionBindings?.onToggleSuppression == 'function';
 
   const handleProblemAutofix = useCallback(() => {
-    if (!hasFix) {
-      return () => {
-        return;
-      };
-    }
-    return () => onProblemAutofix?.(problem);
+    if (!hasFix) return;
+    onProblemAutofix?.(problem);
   }, [onProblemAutofix, problem, hasFix]);
 
   return (

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

@@ -27,7 +27,7 @@ const ProblemRenderer: React.FC<IProps> = props => {
   const {onConfigureRuleHandler, suppressionBindings, onAutofixHandler} = props;
 
   const isSelected = useMemo(
-    () => (selectedProblem ? isProblemSelected(selectedProblem, node.problem, groupByFilterValue) : false),
+    () => (selectedProblem ? isProblemSelected(selectedProblem, node.problem) : false),
     [selectedProblem, node.problem, groupByFilterValue]
   );
 

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

@@ -22,6 +22,7 @@ import {useScroll} from './useScroll';
 import {getValidationList, uppercaseFirstLetter} from './utils';
 import {TOOLTIP_DELAY} from '@/constants';
 import {Icon} from '@/atoms';
+import {useHotkeys} from 'react-hotkeys-hook';
 
 let baseData: BaseDataType = {
   baseCollapsedKeys: [],
@@ -30,15 +31,32 @@ let baseData: BaseDataType = {
   baseSecurityFrameworkFilter: 'all',
 };
 
-const ValidationOverview: React.FC<ValidationOverviewType> = props => {
-  const {status, validationResponse, activePlugins = [...CORE_PLUGINS]} = props;
-  const {containerClassName = '', containerStyle = {}, height, skeletonStyle = {}, defaultSelectError = false} = props;
-  const {customMessage, newProblemsIntroducedType, selectedProblem, groupOnlyByResource, filters} = props;
-  const {onFiltersChange, onProblemSelect, downloadSarifResponseCallback, triggerValidationSettingsRedirectCallback} =
-    props;
-  const {onSearchCallback, onSecurityFrameworkFilterChange, onGroupByFilterChange} = props;
-  const {suppressionBindings, onConfigureRule, onProblemAutofix} = props;
-
+const ValidationOverview: React.FC<ValidationOverviewType> = ({
+  status,
+  validationResponse,
+  activePlugins = [...CORE_PLUGINS],
+  containerClassName = '',
+  containerStyle = {},
+  height,
+  skeletonStyle = {},
+  defaultSelectError = false,
+  customMessage,
+  newProblemsIntroducedType,
+  selectedProblem,
+  groupOnlyByResource,
+  filters,
+  onFiltersChange,
+  onProblemSelect,
+  downloadSarifResponseCallback,
+  triggerValidationSettingsRedirectCallback,
+  onSearchCallback,
+  onSecurityFrameworkFilterChange,
+  onGroupByFilterChange,
+  suppressionBindings,
+  onConfigureRule,
+  onProblemAutofix,
+  hotkeysDisabled = false,
+}) => {
   const [collapsedHeadersKey, setCollapsedHeadersKey] = useState<string[]>(baseData.baseCollapsedKeys);
   const [filtersValue, setFiltersValue] = useState<ValidationFiltersValueType>(filters || DEFAULT_FILTERS_VALUE);
   const [searchValue, setSearchValue] = useState('');
@@ -82,6 +100,97 @@ const ValidationOverview: React.FC<ValidationOverviewType> = props => {
     () => getValidationList(filteredProblems, collapsedHeadersKey),
     [collapsedHeadersKey, filteredProblems]
   );
+
+  useHotkeys(
+    'j',
+    () => {
+      if (!selectedProblem) {
+        const next = validationList.at(1);
+        const secondNext = validationList.at(2);
+        const nextProblem =
+          next?.type === 'problem' ? next.problem : secondNext?.type === 'problem' ? secondNext.problem : undefined;
+        if (nextProblem) {
+          onProblemSelect?.({problem: nextProblem, selectedFrom: 'hotkey'});
+        }
+        return;
+      }
+
+      const currentIndex = validationList.findIndex(
+        p =>
+          p.type === 'problem' &&
+          p.problem.fingerprints?.['monokleHash/v1'] === selectedProblem?.fingerprints?.['monokleHash/v1']
+      );
+
+      if (currentIndex === 0) {
+        return;
+      }
+
+      const next = validationList.at(currentIndex + 1);
+      const secondNext = validationList.at(currentIndex + 2);
+      const nextProblem =
+        next?.type === 'problem' ? next.problem : secondNext?.type === 'problem' ? secondNext.problem : undefined;
+
+      if (nextProblem) {
+        onProblemSelect?.({problem: nextProblem, selectedFrom: 'hotkey'});
+      }
+    },
+    {enabled: !hotkeysDisabled},
+    [validationList, selectedProblem]
+  );
+
+  useHotkeys(
+    'k',
+    () => {
+      if (!selectedProblem) {
+        return;
+      }
+
+      const currentIndex = validationList.findIndex(
+        p =>
+          p.type === 'problem' &&
+          p.problem.fingerprints?.['monokleHash/v1'] === selectedProblem?.fingerprints?.['monokleHash/v1']
+      );
+
+      const previousIndex = currentIndex - 1;
+      if (previousIndex <= 0) return;
+      const previous = validationList.at(currentIndex - 1);
+      if (previous?.type === 'problem') {
+        return onProblemSelect?.({problem: previous.problem, selectedFrom: 'hotkey'});
+      }
+
+      const secondPreviousIndex = currentIndex - 2;
+      if (previousIndex <= 0) return;
+      const secondPrevious = validationList.at(secondPreviousIndex);
+      if (secondPrevious?.type === 'problem') {
+        return onProblemSelect?.({problem: secondPrevious.problem, selectedFrom: 'hotkey'});
+      }
+    },
+    {enabled: !hotkeysDisabled},
+    [validationList, selectedProblem]
+  );
+
+  useHotkeys(
+    'f',
+    () => {
+      if (!selectedProblem || selectedProblem?.baselineState === 'absent') {
+        return;
+      }
+      onProblemAutofix?.(selectedProblem);
+    },
+    {enabled: !hotkeysDisabled},
+    [selectedProblem, onProblemAutofix]
+  );
+
+  useHotkeys(
+    's',
+    () => {
+      if (!selectedProblem) return;
+      suppressionBindings?.onToggleSuppression?.(selectedProblem);
+    },
+    {enabled: !hotkeysDisabled},
+    [selectedProblem, suppressionBindings]
+  );
+
   const ref = useRef<HTMLUListElement>(null);
 
   const isCollapsed = useMemo(

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

@@ -14,6 +14,7 @@ export type ValidationOverviewType = {
   containerClassName?: string;
   containerStyle?: React.CSSProperties;
   customMessage?: string;
+  hotkeysDisabled?: boolean;
   defaultSelectError?: boolean;
   downloadSarifResponseCallback?: () => void;
   filters?: ValidationFiltersValueType;
@@ -23,7 +24,7 @@ export type ValidationOverviewType = {
   groupOnlyByResource?: boolean;
   skeletonStyle?: React.CSSProperties;
   triggerValidationSettingsRedirectCallback?: () => void;
-  onProblemSelect?: (payload: {problem: ValidationResult; selectedFrom: 'resource' | 'file'}) => void;
+  onProblemSelect?: (payload: {problem: ValidationResult; selectedFrom: 'resource' | 'file' | 'hotkey'}) => void;
   onFiltersChange?: (filters: ValidationFiltersValueType) => void;
   onSearchCallback?: (searchValue: string) => void;
   onSecurityFrameworkFilterChange?: (securityFramework: string, from: 'dropdown' | 'tag') => void;

packages/components/src/molecules/ValidationOverview/useScroll.ts

@@ -25,7 +25,7 @@ export function useScroll({
     }
 
     const index = listRef.current.findIndex(
-      item => item.type === 'problem' && isProblemSelected(selectedProblem, item.problem, groupByFilterValue)
+      item => item.type === 'problem' && isProblemSelected(selectedProblem, item.problem)
     );
 
     if (index === -1) return;

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

@@ -188,41 +188,8 @@ export const getRuleInfo = (key: string) => {
 
 export const getResourceName = (problem: ValidationResult) => getResourceLocation(problem).logicalLocations?.[0]?.name;
 
-export const isProblemSelected = (
-  selectedProblem: ValidationResult,
-  currentProblem: ValidationResult,
-  type: GroupByFilterOptionType
-) => {
-  const selectedFilePhysicalLocation = getFileLocation(selectedProblem).physicalLocation;
-  const currentFileLocationPhysicalLocation = getFileLocation(currentProblem).physicalLocation;
-
-  const selectedFileURI = selectedFilePhysicalLocation?.artifactLocation.uri;
-  const selectedFileStartLine = selectedFilePhysicalLocation?.region?.startLine;
-  const currentFileURI = currentFileLocationPhysicalLocation?.artifactLocation.uri;
-  const currentFileStartLine = currentFileLocationPhysicalLocation?.region?.startLine;
-
-  if (selectedProblem.ruleId !== currentProblem.ruleId) {
-    return false;
-  }
-
-  if (selectedProblem.message.text !== currentProblem.message.text) {
-    return false;
-  }
-
-  if (type === 'group-by-file' || type === 'group-by-rule') {
-    if (selectedFileURI === currentFileURI && selectedFileStartLine === currentFileStartLine) {
-      return true;
-    }
-  } else if (type === 'group-by-resource') {
-    if (
-      getResourceName(selectedProblem) === getResourceName(currentProblem) &&
-      selectedFileStartLine === currentFileStartLine
-    ) {
-      return true;
-    }
-  }
-
-  return false;
+export const isProblemSelected = (selectedProblem: ValidationResult, currentProblem: ValidationResult) => {
+  return selectedProblem.fingerprints?.['monokleHash/v1'] === currentProblem.fingerprints?.['monokleHash/v1'];
 };
 
 export const getValidationList = (problems: ProblemsType, collapsedHeadersKey: string[]) => {