SONAR-23619 Change AI code assurance setting

8 files changed, 177 insertions, 49 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/AIAssuredIcon.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/AIAssuredIcon.tsx
deleted file mode 100644
index b4cf1d2a233..00000000000
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/AIAssuredIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 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 { ShieldIcon } from '~design-system';
-
-interface Props {
-  className?: string;
-  isDisabled?: boolean;
-}
-
-export default function AIAssuredIcon({ isDisabled = false, className }: Readonly<Props>) {
-  return (
-    <ShieldIcon
-      className={className}
-      fill={isDisabled ? `var(--echoes-color-icon-disabled)` : `var(--echoes-color-icon-accent)`}
-    />
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
index 98801f60680..3cc78cc51ee 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
@@ -39,6 +39,7 @@ import { useAvailableFeatures } from '../../../app/components/available-features
 import { useMetrics } from '../../../app/components/metrics/withMetricsContext';
 import DocumentationLink from '../../../components/common/DocumentationLink';
 import { ModalProps } from '../../../components/controls/ModalButton';
+import AIAssuredIcon from '../../../components/icon-mappers/AIAssuredIcon';
 import { DocLink } from '../../../helpers/doc-links';
 import { useDocUrl } from '../../../helpers/docs';
 import { getLocalizedMetricName, translate } from '../../../helpers/l10n';
@@ -53,7 +54,6 @@ import {
   STANDARD_CONDITIONS_MAP,
 } from '../utils';
 import AddConditionModal from './AddConditionModal';
-import AIAssuredIcon from './AIAssuredIcon';
 import CaycCompliantBanner from './CaycCompliantBanner';
 import CaycCondition from './CaycCondition';
 import CaYCConditionsSimplificationGuide from './CaYCConditionsSimplificationGuide';
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
index bbf9a0f700d..023db95473c 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
@@ -22,12 +22,12 @@ import { IconRefresh, Spinner, Tooltip } from '@sonarsource/echoes-react';
 import { useNavigate } from 'react-router-dom';
 import { Badge, BareButton, SubnavigationGroup, SubnavigationItem } from '~design-system';
 import { useAvailableFeatures } from '../../../app/components/available-features/withAvailableFeatures';
+import AIAssuredIcon, { AiIconColor } from '../../../components/icon-mappers/AIAssuredIcon';
 import { translate } from '../../../helpers/l10n';
 import { getQualityGateUrl } from '../../../helpers/urls';
 import { useStandardExperienceModeQuery } from '../../../queries/mode';
 import { Feature } from '../../../types/features';
 import { CaycStatus, QualityGate } from '../../../types/types';
-import AIAssuredIcon from './AIAssuredIcon';
 import BuiltInQualityGateBadge from './BuiltInQualityGateBadge';
 import QGRecommendedIcon from './QGRecommendedIcon';
 
@@ -111,7 +111,13 @@ export default function List({ qualityGates, currentQualityGate }: Readonly<Prop
                         className="sw-mr-1 sw-flex sw-items-start"
                         data-testid="quality-gates-ai-assurance-indicator"
                       >
-                        <AIAssuredIcon isDisabled={shouldShowQualityGateUpdateIcon} />
+                        <AIAssuredIcon
+                          color={
+                            shouldShowQualityGateUpdateIcon
+                              ? AiIconColor.Disable
+                              : AiIconColor.Accent
+                          }
+                        />
                       </span>
                     </Tooltip>
                   )}
diff --git a/server/sonar-web/src/main/js/components/icon-mappers/AIAssuredIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/AIAssuredIcon.tsx
new file mode 100644
index 00000000000..1776e197ac6
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icon-mappers/AIAssuredIcon.tsx
@@ -0,0 +1,61 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 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 { SheildCheckIcon } from '../ui/icon/SheildCheckIcon';
+import { SheildCrossIcon } from '../ui/icon/SheildCrossIcon';
+import { ShieldIcon } from '../ui/icon/ShieldIcon';
+
+export enum AiIconColor {
+  Disable = '--echoes-color-icon-disabled',
+  Default = '--echoes-color-icon-default',
+  Accent = '--echoes-color-icon-accent',
+  Subdued = '--echoes-color-icon-subdued',
+}
+
+export enum AiIconVariant {
+  Default,
+  Check,
+  Cross,
+}
+
+interface Props {
+  className?: string;
+  color?: AiIconColor;
+  height?: number;
+  variant?: AiIconVariant;
+  width?: number;
+}
+
+const VariantComp = {
+  [AiIconVariant.Check]: SheildCheckIcon,
+  [AiIconVariant.Default]: ShieldIcon,
+  [AiIconVariant.Cross]: SheildCrossIcon,
+};
+
+export default function AIAssuredIcon({
+  color = AiIconColor.Accent,
+  variant = AiIconVariant.Default,
+  className,
+  width = 20,
+  height = 20,
+}: Readonly<Props>) {
+  const Comp = VariantComp[variant];
+  return <Comp className={className} height={height} fill={`var(${color})`} width={width} />;
+}
diff --git a/server/sonar-web/src/main/js/components/ui/icon/SheildCheckIcon.tsx b/server/sonar-web/src/main/js/components/ui/icon/SheildCheckIcon.tsx
new file mode 100644
index 00000000000..1ce14fa0670
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/icon/SheildCheckIcon.tsx
@@ -0,0 +1,47 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 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 { CustomIcon, IconProps } from '~design-system';
+
+/*
+ * Temporary Icon. To remove when echoes gets the proper icon.
+ */
+export function SheildCheckIcon({ fill, ...iconProps }: Readonly<IconProps>) {
+  return (
+    <CustomIcon viewBox="0 0 36 36" width={20} height={20} {...iconProps}>
+      <g>
+        <path
+          d="M12.6427 29.0627C9.55385 28.2849 7.00385 26.5127 4.99274 23.746C2.98163 20.9793 1.97607 17.9071 1.97607 14.5293V6.396L12.6427 2.396L23.3094 6.396V15.1293C23.3094 15.3293 23.2983 15.5404 23.2761 15.7627H20.5761C20.5983 15.5404 20.615 15.3293 20.6261 15.1293C20.6372 14.9293 20.6427 14.7293 20.6427 14.5293V8.22933L12.6427 5.22933L4.64274 8.22933V14.5293C4.64274 17.2182 5.3983 19.6627 6.90941 21.8627C8.42052 24.0627 10.3316 25.5293 12.6427 26.2627V29.0627Z"
+          fill={fill}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.10304 14.4089C8.97046 14.5067 8.83547 14.6015 8.69818 14.6931C8.08185 15.1045 7.41893 15.4528 6.71826 15.7292C7.41893 16.0055 8.08185 16.3538 8.69817 16.7652C8.83547 16.8568 8.97046 16.9516 9.10303 17.0494C9.9496 17.674 10.6979 18.4223 11.3225 19.2689C11.4203 19.4015 11.5151 19.5364 11.6067 19.6737C12.0181 20.2901 12.3664 20.953 12.6427 21.6536C12.9191 20.953 13.2674 20.2901 13.6788 19.6737C13.7704 19.5364 13.8652 19.4015 13.963 19.2689C14.5876 18.4223 15.3359 17.674 16.1824 17.0494C16.315 16.9516 16.45 16.8568 16.5873 16.7652C17.2036 16.3538 17.8665 16.0055 18.5672 15.7292C17.8665 15.4528 17.2036 15.1045 16.5873 14.6931C16.45 14.6015 16.315 14.5067 16.1824 14.4089C15.3359 13.7843 14.5876 13.036 13.963 12.1895C13.8652 12.0569 13.7704 11.9219 13.6788 11.7846C13.2674 11.1683 12.9191 10.5054 12.6427 9.80469C12.3664 10.5054 12.0181 11.1683 11.6067 11.7846C11.5151 11.9219 11.4203 12.0569 11.3225 12.1895C10.6979 13.036 9.9496 13.7843 9.10304 14.4089ZM11.0178 15.7292C11.6072 16.2208 12.1512 16.7647 12.6427 17.3541C13.1343 16.7647 13.6782 16.2208 14.2677 15.7292C13.6782 15.2376 13.1343 14.6937 12.6427 14.1042C12.1512 14.6937 11.6072 15.2376 11.0178 15.7292Z"
+          fill={fill}
+        />
+        <path
+          d="M19.9266 29.0846L14.5933 23.7513L16.4599 21.8846L19.9266 25.3513L28.7266 16.5513L30.5933 18.4179L19.9266 29.0846Z"
+          fill={fill}
+        />
+      </g>
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/ui/icon/SheildCrossIcon.tsx b/server/sonar-web/src/main/js/components/ui/icon/SheildCrossIcon.tsx
new file mode 100644
index 00000000000..c33710de8f4
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/icon/SheildCrossIcon.tsx
@@ -0,0 +1,51 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 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 { CustomIcon, IconProps } from '~design-system';
+
+/*
+ * Temporary Icon. To remove when echoes gets the proper icon.
+ */
+export function SheildCrossIcon({ fill, ...iconProps }: Readonly<IconProps>) {
+  return (
+    <CustomIcon viewBox="0 0 36 36" width={20} height={20} {...iconProps}>
+      <g>
+        <path
+          d="M12.6427 29.0627C9.55385 28.2849 7.00385 26.5127 4.99274 23.746C2.98163 20.9793 1.97607 17.9071 1.97607 14.5293V6.396L12.6427 2.396L23.3094 6.396V15.1293C23.3094 15.3293 23.2983 15.5404 23.2761 15.7627H20.5761C20.5983 15.5404 20.615 15.3293 20.6261 15.1293C20.6372 14.9293 20.6427 14.7293 20.6427 14.5293V8.22933L12.6427 5.22933L4.64274 8.22933V14.5293C4.64274 17.2182 5.3983 19.6627 6.90941 21.8627C8.42052 24.0627 10.3316 25.5293 12.6427 26.2627V29.0627Z"
+          fill={fill}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.10304 14.4089C8.97046 14.5067 8.83547 14.6015 8.69818 14.6931C8.08185 15.1045 7.41893 15.4528 6.71826 15.7292C7.41893 16.0055 8.08185 16.3538 8.69817 16.7652C8.83547 16.8568 8.97046 16.9516 9.10303 17.0494C9.9496 17.674 10.6979 18.4223 11.3225 19.2689C11.4203 19.4015 11.5151 19.5364 11.6067 19.6737C12.0181 20.2901 12.3664 20.953 12.6427 21.6536C12.9191 20.953 13.2674 20.2901 13.6788 19.6737C13.7704 19.5364 13.8652 19.4015 13.963 19.2689C14.5876 18.4223 15.3359 17.674 16.1824 17.0494C16.315 16.9516 16.45 16.8568 16.5873 16.7652C17.2036 16.3538 17.8665 16.0055 18.5672 15.7292C17.8665 15.4528 17.2036 15.1045 16.5873 14.6931C16.45 14.6015 16.315 14.5067 16.1824 14.4089C15.3359 13.7843 14.5876 13.036 13.963 12.1895C13.8652 12.0569 13.7704 11.9219 13.6788 11.7846C13.2674 11.1683 12.9191 10.5054 12.6427 9.80469C12.3664 10.5054 12.0181 11.1683 11.6067 11.7846C11.5151 11.9219 11.4203 12.0569 11.3225 12.1895C10.6979 13.036 9.9496 13.7843 9.10304 14.4089ZM11.0178 15.7292C11.6072 16.2208 12.1512 16.7647 12.6427 17.3541C13.1343 16.7647 13.6782 16.2208 14.2677 15.7292C13.6782 15.2376 13.1343 14.6937 12.6427 14.1042C12.1512 14.6937 11.6072 15.2376 11.0178 15.7292Z"
+          fill={fill}
+        />
+        <path
+          d="M25.7129 19.1533L27.3316 20.7721L17.619 30.4848L16.0002 28.866L25.7129 19.1533Z"
+          fill={fill}
+        />
+        <path
+          d="M27.3315 28.8663L25.7127 30.485L16 20.7724L17.6188 19.1536L27.3315 28.8663Z"
+          fill={fill}
+        />
+      </g>
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/src/main/js/design-system/components/icons/ShieldIcon.tsx b/server/sonar-web/src/main/js/components/ui/icon/ShieldIcon.tsx
index 64727a87b61..1e574830efa 100644
--- a/server/sonar-web/src/main/js/design-system/components/icons/ShieldIcon.tsx
+++ b/server/sonar-web/src/main/js/components/ui/icon/ShieldIcon.tsx
@@ -18,25 +18,24 @@
  * 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 ShieldIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
-  const theme = useTheme();
+import { CustomIcon, IconProps } from '~design-system';
 
+/*
+ * Temporary Icon. To remove when echoes gets the proper icon.
+ */
+export function ShieldIcon({ fill, ...iconProps }: Readonly<IconProps>) {
   return (
-    <CustomIcon viewBox="0 0 20 20" width={20} height={20} {...iconProps}>
-      <g fill={themeColor(fill)({ theme })}>
+    <CustomIcon viewBox="0 0 20 20" {...iconProps}>
+      <g fill={fill}>
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M7.78736 9.00555C7.7045 9.06668 7.62013 9.12592 7.53432 9.1832C7.14912 9.44032 6.7348 9.658 6.29688 9.83071C6.7348 10.0034 7.14912 10.2211 7.53432 10.4782C7.62013 10.5355 7.7045 10.5947 7.78736 10.6559C8.31646 11.0462 8.78415 11.5139 9.17451 12.043C9.23564 12.1259 9.29488 12.2102 9.35216 12.2961C9.60928 12.6813 9.82696 13.0956 9.99967 13.5335C10.1724 13.0956 10.3901 12.6813 10.6472 12.2961C10.7045 12.2102 10.7637 12.1259 10.8248 12.043C11.2152 11.5139 11.6829 11.0462 12.212 10.6559C12.2949 10.5947 12.3792 10.5355 12.465 10.4782C12.8502 10.2211 13.2646 10.0034 13.7025 9.83071C13.2646 9.658 12.8502 9.44032 12.465 9.1832C12.3792 9.12592 12.2949 9.06668 12.212 9.00555C11.6829 8.61519 11.2152 8.14751 10.8248 7.6184C10.7637 7.53555 10.7045 7.45118 10.6472 7.36537C10.3901 6.98017 10.1724 6.56585 9.99967 6.12793C9.82696 6.56585 9.60928 6.98017 9.35216 7.36537C9.29488 7.45118 9.23564 7.53555 9.17451 7.61841C8.78415 8.14751 8.31646 8.61519 7.78736 9.00555ZM8.98407 9.83071C9.35249 10.1379 9.69243 10.4779 9.99968 10.8463C10.3069 10.4779 10.6469 10.1379 11.0153 9.83071C10.6469 9.52347 10.3069 9.18353 9.99967 8.81511C9.69243 9.18353 9.35249 9.52347 8.98407 9.83071Z"
-          fill={themeColor(fill)({ theme })}
+          fill={fill}
         />
         <path
           d="M9.99973 18.1777C8.06916 17.6916 6.47539 16.5839 5.21844 14.8548C3.96148 13.1256 3.33301 11.2055 3.33301 9.09434V4.01099L9.99973 1.51099L16.6664 4.01099V9.09434C16.6664 11.2055 16.038 13.1256 14.781 14.8548C13.5241 16.5839 11.9303 17.6916 9.99973 18.1777ZM9.99973 16.4277C11.4442 15.9694 12.6386 15.0527 13.5831 13.6777C14.5275 12.3027 14.9998 10.7749 14.9998 9.09434V5.15683L9.99973 3.28182L4.99969 5.15683V9.09434C4.99969 10.7749 5.47191 12.3027 6.41636 13.6777C7.36082 15.0527 8.55527 15.9694 9.99973 16.4277Z"
-          fill={themeColor(fill)({ theme })}
+          fill={fill}
         />
       </g>
     </CustomIcon>
diff --git a/server/sonar-web/src/main/js/design-system/components/icons/index.ts b/server/sonar-web/src/main/js/design-system/components/icons/index.ts
index 7ae75fb0318..45d0a0c4ff9 100644
--- a/server/sonar-web/src/main/js/design-system/components/icons/index.ts
+++ b/server/sonar-web/src/main/js/design-system/components/icons/index.ts
@@ -77,7 +77,6 @@ export { SeverityCriticalIcon } from './SeverityCriticalIcon';
 export { SeverityInfoIcon } from './SeverityInfoIcon';
 export { SeverityMajorIcon } from './SeverityMajorIcon';
 export { SeverityMinorIcon } from './SeverityMinorIcon';
-export { ShieldIcon } from './ShieldIcon';
 export { SnoozeCircleIcon } from './SnoozeCircleIcon';
 export { SoftwareImpactSeverityBlockerIcon } from './SoftwareImpactSeverityBlockerIcon';
 export { SoftwareImpactSeverityHighIcon } from './SoftwareImpactSeverityHighIcon';