From 8556bedb3b38d285ba5ac3ce040c7b4938c7063c Mon Sep 17 00:00:00 2001 From: 7PH Date: Thu, 30 Nov 2023 15:10:43 +0100 Subject: [PATCH] SONAR-21142 Update issues and rules page severity icons with transparency & gray background when disabled --- .../icons/SoftwareImpactSeverityHighIcon.tsx | 13 +++++++---- .../icons/SoftwareImpactSeverityLowIcon.tsx | 16 +++++++------ .../SoftwareImpactSeverityMediumIcon.tsx | 23 +++++++++---------- .../design-system/src/theme/light.ts | 1 + .../js/apps/coding-rules/components/Facet.tsx | 5 ++-- .../coding-rules/components/SeverityFacet.tsx | 6 ++--- .../js/apps/issues/sidebar/SeverityFacet.tsx | 4 +++- .../issues/sidebar/SimpleListStyleFacet.tsx | 5 ++-- .../icons/SoftwareImpactSeverityIcon.tsx | 3 ++- 9 files changed, 44 insertions(+), 32 deletions(-) diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx index eb11d28750a..dd28b8cba0d 100644 --- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx @@ -21,15 +21,20 @@ import { useTheme } from '@emotion/react'; import { themeColor } from '../../helpers'; import { CustomIcon, IconProps } from './Icon'; -export function SoftwareImpactSeverityHighIcon(iconProps: IconProps) { +export function SoftwareImpactSeverityHighIcon({ + disabled, + ...iconProps +}: IconProps & { disabled?: boolean }) { const theme = useTheme(); + const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityHigh'; return ( - ); diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx index 3a9f0f050b7..ffabf53938f 100644 --- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx @@ -21,18 +21,20 @@ import { useTheme } from '@emotion/react'; import { themeColor } from '../../helpers'; import { CustomIcon, IconProps } from './Icon'; -export function SoftwareImpactSeverityLowIcon(iconProps: IconProps) { +export function SoftwareImpactSeverityLowIcon({ + disabled, + ...iconProps +}: IconProps & { disabled?: boolean }) { const theme = useTheme(); + const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityLow'; return ( - ); diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx index dca3142a9f0..7ce20837ffa 100644 --- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx @@ -21,23 +21,22 @@ import { useTheme } from '@emotion/react'; import { themeColor } from '../../helpers'; import { CustomIcon, IconProps } from './Icon'; -export function SoftwareImpactSeverityMediumIcon(iconProps: IconProps) { +export function SoftwareImpactSeverityMediumIcon({ + disabled, + ...iconProps +}: IconProps & { disabled?: boolean }) { const theme = useTheme(); + const color = disabled + ? 'iconSoftwareImpactSeverityDisabled' + : 'iconSoftwareImpactSeverityMedium'; return ( - ); diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 7d81a586d65..3d5196a1f73 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -365,6 +365,7 @@ export const lightTheme = { iconSoftwareImpactSeverityHigh: COLORS.red[500], iconSoftwareImpactSeverityMedium: COLORS.yellow[700], iconSoftwareImpactSeverityLow: COLORS.blue[700], + iconSoftwareImpactSeverityDisabled: COLORS.blueGrey[300], iconSeverityMajor: danger.light, iconSeverityMinor: COLORS.yellowGreen[400], iconSeverityInfo: COLORS.blue[400], diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx index 6948418aa20..d21eb25573c 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx @@ -45,7 +45,7 @@ interface Props extends BasicProps { options?: string[]; property: FacetKey; renderFooter?: () => React.ReactNode; - renderName?: (value: string) => React.ReactNode; + renderName?: (value: string, disabled: boolean) => React.ReactNode; renderTextName?: (value: string) => string; singleSelection?: boolean; } @@ -76,6 +76,7 @@ export default class Facet extends React.PureComponent { renderItem = (value: string) => { const active = this.props.values.includes(value); const stat = this.getStat(value); + const disabled = stat === 0 || typeof stat === 'undefined'; const { renderName = defaultRenderName, renderTextName = defaultRenderName } = this.props; return ( @@ -83,7 +84,7 @@ export default class Facet extends React.PureComponent { className="it__search-navigator-facet" active={active} key={value} - name={renderName(value)} + name={renderName(value, disabled)} onClick={this.handleItemClick} stat={stat && formatMeasure(stat, MetricType.ShortInteger)} value={value} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx index 46b44fd329e..634e8c060ea 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx @@ -28,9 +28,9 @@ import Facet, { BasicProps } from './Facet'; export default function SeverityFacet(props: BasicProps) { const renderName = React.useCallback( - (severity: string) => ( -
- + (severity: string, disabled: boolean) => ( +
+ {translate('severity', severity)}
), diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx index 6d5d2340dc3..6006ce6105c 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx @@ -40,7 +40,9 @@ export function SeverityFacet(props: Props) { itemNamePrefix="severity" listItems={IMPACT_SEVERITIES} selectedItems={severities} - renderIcon={(severity: string) => } + renderIcon={(severity: string, disabled: boolean) => ( + + )} help={ extends CommonProps { listItems: Array; itemNamePrefix: string; selectedItems: Array; - renderIcon?: (item: string) => React.ReactNode; + renderIcon?: (item: string, disabled: boolean) => React.ReactNode; } export function SimpleListStyleFacet(props: Props) { @@ -82,13 +82,14 @@ export function SimpleListStyleFacet(props: Props) { {listItems.map((item) => { const active = selectedItems.includes(item); const stat = stats[item]; + const disabled = stat === 0 || typeof stat === 'undefined'; return ( { if (multiple) { diff --git a/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx b/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx index 000e963df61..23331ddb759 100644 --- a/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx @@ -30,6 +30,7 @@ import { IconProps } from './Icon'; interface Props extends IconProps { severity: string | null | undefined; + disabled?: boolean; } const severityIcons: Dict<(props: IconProps) => React.ReactElement> = { @@ -38,7 +39,7 @@ const severityIcons: Dict<(props: IconProps) => React.ReactElement> = { [SoftwareImpactSeverity.Low]: SoftwareImpactSeverityLowIcon, }; -export default function SoftwareImpactSeverityIcon({ severity, ...iconProps }: Props) { +export default function SoftwareImpactSeverityIcon({ severity, ...iconProps }: Readonly) { if (typeof severity !== 'string' || !severityIcons[severity]) { return null; } -- 2.39.5