SONAR-21142 Update issues and rules page severity icons with transparency & gray background when disabled

5 files changed, 14 insertions, 9 deletions

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<Props> {
   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<Props> {
         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) => (
-      <div className="sw-flex">
-        <SoftwareImpactSeverityIcon severity={severity} />
+    (severity: string, disabled: boolean) => (
+      <div className="sw-flex sw-items-center">
+        <SoftwareImpactSeverityIcon severity={severity} disabled={disabled} />
         <span className="sw-ml-1">{translate('severity', severity)}</span>
       </div>
     ),
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) => <SoftwareImpactSeverityIcon severity={severity} />}
+      renderIcon={(severity: string, disabled: boolean) => (
+        <SoftwareImpactSeverityIcon severity={severity} disabled={disabled} />
+      )}
       help={
         <DocumentationTooltip
           placement="right"
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx
index a5e90825876..404ed594986 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx
@@ -42,7 +42,7 @@ interface Props<T = string> extends CommonProps {
   listItems: Array<T>;
   itemNamePrefix: string;
   selectedItems: Array<T>;
-  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 (
             <FacetItem
               active={active}
               className="it__search-navigator-facet"
               key={item}
-              icon={renderIcon?.(item)}
+              icon={renderIcon?.(item, disabled)}
               name={translate(itemNamePrefix, item)}
               onClick={(itemValue, multiple) => {
                 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<Props>) {
   if (typeof severity !== 'string' || !severityIcons[severity]) {
     return null;
   }