[NO-JIRA] Add override icon on rules list

4 files changed, 49 insertions, 5 deletions

diff --git a/server/sonar-web/design-system/src/components/icons/OverridenIcon.tsx b/server/sonar-web/design-system/src/components/icons/OverridenIcon.tsx
new file mode 100644
index 00000000000..45419b6b54d
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/OverridenIcon.tsx
@@ -0,0 +1,44 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function OverridenIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
+  const theme = useTheme();
+  const fillColor = themeColor(fill)({ theme });
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        clipRule="evenodd"
+        d="M2.5 2.5L2.5 5.5L5.5 5.5L5.5 2.5L2.5 2.5ZM1.5 1C1.22386 1 1 1.22386 1 1.5L0.999999 6.5C0.999999 6.77614 1.22386 7 1.5 7L6.5 7C6.77614 7 7 6.77614 7 6.5L7 1.5C7 1.22386 6.77614 1 6.5 1L1.5 1Z"
+        fill={fillColor}
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M3.25 11V7H4.78913V11C4.78913 11.1381 4.90398 11.25 5.04565 11.25H9.15V12.75H5.04565C4.05394 12.75 3.25 11.9665 3.25 11Z"
+        fill={fillColor}
+        fillRule="evenodd"
+      />
+      <circle cx="11.5" cy="11.5" fill={fillColor} r="3.5" />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/index.ts b/server/sonar-web/design-system/src/components/icons/index.ts
index 5bb8abda23c..8671cd76022 100644
--- a/server/sonar-web/design-system/src/components/icons/index.ts
+++ b/server/sonar-web/design-system/src/components/icons/index.ts
@@ -54,6 +54,7 @@ export { MenuSearchIcon } from './MenuSearchIcon';
 export { NoDataIcon } from './NoDataIcon';
 export { OpenCloseIndicator } from './OpenCloseIndicator';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
+export { OverridenIcon } from './OverridenIcon';
 export { OverviewQGNotComputedIcon } from './OverviewQGNotComputedIcon';
 export { OverviewQGPassedIcon } from './OverviewQGPassedIcon';
 export { PencilIcon } from './PencilIcon';
diff --git a/server/sonar-web/src/main/js/api/quality-profiles.ts b/server/sonar-web/src/main/js/api/quality-profiles.ts
index 9821c59aabd..b58a77561fe 100644
--- a/server/sonar-web/src/main/js/api/quality-profiles.ts
+++ b/server/sonar-web/src/main/js/api/quality-profiles.ts
@@ -195,7 +195,7 @@ export function getProfileChangelog(
 export interface RuleCompare {
   key: string;
   name: string;
-  cleanCodeAttributeCategory: CleanCodeAttributeCategory;
+  cleanCodeAttributeCategory?: CleanCodeAttributeCategory;
   impacts: Array<{
     softwareQuality: SoftwareQuality;
     severity: SoftwareImpactSeverity;
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index f00c8d36352..6915112c558 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -25,13 +25,13 @@ import {
   InheritanceIcon,
   Link,
   Note,
+  OverridenIcon,
   themeBorder,
 } from 'design-system';
 import * as React from 'react';
 import { Profile, deactivateRule } from '../../../api/quality-profiles';
 import ConfirmButton from '../../../components/controls/ConfirmButton';
 import Tooltip from '../../../components/controls/Tooltip';
-import SeverityIcon from '../../../components/icons/SeverityIcon';
 import { CleanCodeAttributePill } from '../../../components/shared/CleanCodeAttributePill';
 import SoftwareImpactPill from '../../../components/shared/SoftwareImpactPill';
 import TagsList from '../../../components/tags/TagsList';
@@ -99,7 +99,6 @@ export default class RuleListItem extends React.PureComponent<Props> {
 
     return (
       <div className="sw-mr-2 sw-shrink-0">
-        <SeverityIcon severity={activation.severity} />
         {selectedProfile && selectedProfile.parentName && (
           <>
             {activation.inherit === 'OVERRIDES' && (
@@ -110,7 +109,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
                   selectedProfile.parentName,
                 )}
               >
-                <InheritanceIcon className="sw-ml-1" fill="destructiveIconFocus" />
+                <OverridenIcon className="sw-ml-1" />
               </Tooltip>
             )}
             {activation.inherit === 'INHERITED' && (
@@ -121,7 +120,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
                   selectedProfile.parentName,
                 )}
               >
-                <InheritanceIcon className="sw-ml-1" fill="currentColor" />
+                <InheritanceIcon className="sw-ml-1" />
               </Tooltip>
             )}
           </>