From a5ac86e875f5010f93b1ad8d35ae6dbbe3f6e263 Mon Sep 17 00:00:00 2001 From: Topliceanu Razvan <47887589+topliceanurazvan@users.noreply.github.com> Date: Fri, 20 Oct 2023 12:36:11 +0300 Subject: [PATCH 1/2] refactor: show resource name / file path when grouping by rule --- .../ValidationOverview/HeaderRenderer.tsx | 18 +++--- .../ValidationOverview/ProblemRenderer.tsx | 55 ++++++++++++++----- .../ValidationOverview/ValidationOverview.tsx | 3 + .../src/molecules/ValidationOverview/types.ts | 1 + 4 files changed, 57 insertions(+), 20 deletions(-) diff --git a/packages/components/src/molecules/ValidationOverview/HeaderRenderer.tsx b/packages/components/src/molecules/ValidationOverview/HeaderRenderer.tsx index d8e6e58cf..53f1c421d 100644 --- a/packages/components/src/molecules/ValidationOverview/HeaderRenderer.tsx +++ b/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 = 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 = props => { {node.resourceName} - - {node.filePath} - + + {!isPreviewing && ( + + {node.filePath} + + )} + {node.count} @@ -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` diff --git a/packages/components/src/molecules/ValidationOverview/ProblemRenderer.tsx b/packages/components/src/molecules/ValidationOverview/ProblemRenderer.tsx index ffc31119c..6c21f2567 100644 --- a/packages/components/src/molecules/ValidationOverview/ProblemRenderer.tsx +++ b/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 = 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 = props => { <> - {node.problem.locations[0].physicalLocation?.region?.startLine} + {node.problem.locations[1].physicalLocation?.region?.startLine} - + + + {getResourceLocation(node.problem).logicalLocations?.[0]?.name ?? ''} + + + {!isPreviewing && ( + + {getFileLocation(node.problem).physicalLocation?.artifactLocation.uri ?? ''} + + )} ) : ( <> @@ -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; +`; diff --git a/packages/components/src/molecules/ValidationOverview/ValidationOverview.tsx b/packages/components/src/molecules/ValidationOverview/ValidationOverview.tsx index 494570e23..28ab9fbc0 100644 --- a/packages/components/src/molecules/ValidationOverview/ValidationOverview.tsx +++ b/packages/components/src/molecules/ValidationOverview/ValidationOverview.tsx @@ -57,6 +57,7 @@ const ValidationOverview: React.FC = ({ onProblemAutofix, onProblemShare, hotkeysDisabled = false, + isPreviewing = false, }) => { const [collapsedHeadersKey, setCollapsedHeadersKey] = useState(baseData.baseCollapsedKeys); const [filtersValue, setFiltersValue] = useState(filters || DEFAULT_FILTERS_VALUE); @@ -456,6 +457,7 @@ const ValidationOverview: React.FC = ({ { if (collapsedHeadersKey.includes(node.label)) { const collapsedKeys = collapsedHeadersKey.filter(item => item !== node.label); @@ -471,6 +473,7 @@ const ValidationOverview: React.FC = ({ ) : ( void; onProblemSelect?: (payload: {problem: ValidationResult; selectedFrom: 'resource' | 'file' | 'hotkey'}) => void; onFiltersChange?: (filters: ValidationFiltersValueType) => void; From a8f24c75778837daec71167ba7a08ea8a7e4f916 Mon Sep 17 00:00:00 2001 From: Topliceanu Razvan <47887589+topliceanurazvan@users.noreply.github.com> Date: Fri, 20 Oct 2023 12:36:39 +0300 Subject: [PATCH 2/2] chore: changeset --- .changeset/metal-dancers-think.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/metal-dancers-think.md diff --git a/.changeset/metal-dancers-think.md b/.changeset/metal-dancers-think.md new file mode 100644 index 000000000..4651398ec --- /dev/null +++ b/.changeset/metal-dancers-think.md @@ -0,0 +1,5 @@ +--- +"@monokle/components": patch +--- + +Refactor group-by-rule label