Merge pull request #550 from kubeshop/razvantopliceanu/refactor/group…

…-by-rule

refactor: group by rule

.changeset/metal-dancers-think.md

@@ -0,0 +1,5 @@
+---
+"@monokle/components": patch
+---
+
+Refactor group-by-rule label

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

@@ -10,11 +10,12 @@ import {DownOutlined as RawDownOutlined, RightOutlined as RawRightOutlined} from
 type IProps = {
   node: HeaderNode;
   groupByFilterValue: GroupByFilterOptionType;
+  isPreviewing: boolean;
   toggleCollapse: (node: HeaderNode) => void;
 };
 
 const HeaderRenderer: React.FC<IProps> = props => {
-  const {node, groupByFilterValue, toggleCollapse} = props;
+  const {node, groupByFilterValue, isPreviewing, toggleCollapse} = props;
 
   if (groupByFilterValue === 'group-by-rule') {
     const {ruleDescription, severity, toolComponentName} = getRuleInfo(node.label);
@@ -52,9 +53,13 @@ const HeaderRenderer: React.FC<IProps> = props => {
           <Tooltip title={node.resourceName} mouseEnterDelay={TOOLTIP_DELAY} placement="right">
             <ResourceName>{node.resourceName}</ResourceName>
           </Tooltip>
-          <Tooltip title={node.filePath} mouseEnterDelay={TOOLTIP_DELAY} placement="right">
-            <ResourceFilePath>{node.filePath}</ResourceFilePath>
-          </Tooltip>
+
+          {!isPreviewing && (
+            <Tooltip title={node.filePath} mouseEnterDelay={TOOLTIP_DELAY} placement="right">
+              <ResourceFilePath>{node.filePath}</ResourceFilePath>
+            </Tooltip>
+          )}
+
           <ResultsCount>{node.count}</ResultsCount>
         </Content>
       </Container>
@@ -128,14 +133,13 @@ const ResourceFilePath = styled.span`
   white-space: nowrap;
   overflow: hidden;
   height: max-content;
+  padding-top: 2px;
 `;
 
 const ResourceName = styled.span`
   color: ${Colors.whitePure};
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
   height: max-content;
+  min-width: max-content;
 `;
 
 const ResultsCount = styled.span`

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

@@ -1,12 +1,12 @@
 import {useEffect, useMemo, useState} from 'react';
 import styled from 'styled-components';
-import {Button, Tag, Tooltip} from 'antd';
+import {Tag, Tooltip} from 'antd';
 import {Colors} from '@/styles/Colors';
 import {ProblemNode, GroupByFilterOptionType, SuppressionBindings} from './types';
-import {getFileLocation, RuleMetadata, ValidationResult} from '@monokle/validation';
+import {getFileLocation, getResourceLocation, RuleMetadata, ValidationResult} from '@monokle/validation';
 import {isProblemSelected, renderSeverityIcon, uppercaseFirstLetter} from './utils';
 import {TOOLTIP_DELAY} from '@/constants';
-import {Icon, ProblemIcon, TextEllipsis} from '@/atoms';
+import {Icon, ProblemIcon} from '@/atoms';
 import {iconMap} from './constants';
 import {
   EyeInvisibleOutlined,
@@ -20,6 +20,7 @@ type IProps = {
   node: ProblemNode;
   rule: RuleMetadata;
   groupByFilterValue: GroupByFilterOptionType;
+  isPreviewing: boolean;
   selectedProblem?: ValidationResult;
   onClick: () => void;
   setSecurityFrameworkFilter: (value: string) => void;
@@ -30,7 +31,7 @@ type IProps = {
 };
 
 const ProblemRenderer: React.FC<IProps> = props => {
-  const {node, rule, selectedProblem, groupByFilterValue, onClick, setSecurityFrameworkFilter} = props;
+  const {node, rule, selectedProblem, groupByFilterValue, isPreviewing, onClick, setSecurityFrameworkFilter} = props;
   const {onConfigureRuleHandler, suppressionBindings, onAutofixHandler, onShareHandler} = props;
 
   const isSelected = useMemo(
@@ -70,13 +71,19 @@ const ProblemRenderer: React.FC<IProps> = props => {
         <>
           <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title="File line">
             <ProblemStartLine $isSelected={isSelected}>
-              {node.problem.locations[0].physicalLocation?.region?.startLine}
+              {node.problem.locations[1].physicalLocation?.region?.startLine}
             </ProblemStartLine>
           </Tooltip>
-          <TextEllipsis
-            style={{fontSize: '13px'}}
-            text={getFileLocation(node.problem).physicalLocation?.artifactLocation.uri ?? ''}
-          />
+
+          <ProblemText $isSuppressed={suppressed || absent} $secondary>
+            {getResourceLocation(node.problem).logicalLocations?.[0]?.name ?? ''}
+          </ProblemText>
+
+          {!isPreviewing && (
+            <ResourceFilePath>
+              {getFileLocation(node.problem).physicalLocation?.artifactLocation.uri ?? ''}
+            </ResourceFilePath>
+          )}
         </>
       ) : (
         <>
@@ -236,11 +243,22 @@ const ProblemStartLine = styled.div<{$isSelected: boolean}>`
   font-size: 13px;
 `;
 
-const ProblemText = styled.div<{$isSuppressed: boolean}>`
+const ProblemText = styled.div<{$isSuppressed: boolean; $secondary?: boolean}>`
   text-decoration: ${({$isSuppressed}) => ($isSuppressed ? 'line-through' : 'none')};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+  ${({$secondary}) => {
+    if (!$secondary) {
+      return `
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `;
+    } else {
+      return `
+        min-width: max-content;
+      `;
+    }
+  }}
 `;
 
 const Row = styled.div<{$isSelected: boolean; $secondary: boolean; $isSuppressed: boolean; $isUnderReview?: boolean}>`
@@ -290,3 +308,14 @@ export const SecurityFrameworkTag = styled(Tag)`
     color: ${Colors.grey9};
   }
 `;
+
+const ResourceFilePath = styled.span`
+  color: ${Colors.grey7};
+  margin-left: 8px;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: max-content;
+  padding-top: 2px;
+`;

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

@@ -57,6 +57,7 @@ const ValidationOverview: React.FC<ValidationOverviewType> = ({
   onProblemAutofix,
   onProblemShare,
   hotkeysDisabled = false,
+  isPreviewing = false,
 }) => {
   const [collapsedHeadersKey, setCollapsedHeadersKey] = useState<string[]>(baseData.baseCollapsedKeys);
   const [filtersValue, setFiltersValue] = useState<ValidationFiltersValueType>(filters || DEFAULT_FILTERS_VALUE);
@@ -456,6 +457,7 @@ const ValidationOverview: React.FC<ValidationOverviewType> = ({
                       <HeaderRenderer
                         node={node}
                         groupByFilterValue={groupByFilterValue}
+                        isPreviewing={isPreviewing}
                         toggleCollapse={node => {
                           if (collapsedHeadersKey.includes(node.label)) {
                             const collapsedKeys = collapsedHeadersKey.filter(item => item !== node.label);
@@ -471,6 +473,7 @@ const ValidationOverview: React.FC<ValidationOverviewType> = ({
                     ) : (
                       <ProblemRenderer
                         node={node}
+                        isPreviewing={isPreviewing}
                         rule={getRuleForResultV2(validationResponse.runs[0], node.problem)}
                         selectedProblem={selectedProblem}
                         groupByFilterValue={groupByFilterValue}

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

@@ -23,6 +23,7 @@ export type ValidationOverviewType = {
   selectedProblem?: ValidationResult;
   groupOnlyByResource?: boolean;
   skeletonStyle?: React.CSSProperties;
+  isPreviewing?: boolean;
   triggerValidationSettingsRedirectCallback?: () => void;
   onProblemSelect?: (payload: {problem: ValidationResult; selectedFrom: 'resource' | 'file' | 'hotkey'}) => void;
   onFiltersChange?: (filters: ValidationFiltersValueType) => void;