SONAR-23620 Add AI code assurance illustration

5 files changed, 208 insertions, 26 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
index 26e239944bb..e8fc2578262 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
@@ -44,10 +44,8 @@ import withAvailableFeatures, {
 import DisableableSelectOption from '../../components/common/DisableableSelectOption';
 import DocumentationLink from '../../components/common/DocumentationLink';
 import Suggestions from '../../components/embed-docs-modal/Suggestions';
-import AIAssuredIcon, {
-  AiIconColor,
-  AiIconVariant,
-} from '../../components/icon-mappers/AIAssuredIcon';
+import AIAssuredIcon, { AiIconColor } from '../../components/icon-mappers/AIAssuredIcon';
+import { AiIconVariant } from '../../components/illustrations/AiAssuredIllustration';
 import AiCodeAssuranceBanner from '../../components/ui/AiCodeAssuranceBanner';
 import { DocLink } from '../../helpers/doc-links';
 import { translate } from '../../helpers/l10n';
@@ -200,14 +198,7 @@ function ProjectQualityGateAppRenderer(props: Readonly<ProjectQualityGateAppRend
           {aiAssuranceStatus === AiCodeAssuranceStatus.AI_CODE_ASSURED && (
             <AiCodeAssuranceBanner
               className="sw-mb-10 sw-w-abs-800"
-              icon={
-                <AIAssuredIcon
-                  variant={AiIconVariant.Check}
-                  color={AiIconColor.Subdued}
-                  width={84}
-                  height={84}
-                />
-              }
+              iconVariant={AiIconVariant.Check}
               title={
                 <FormattedMessage id="project_quality_gate.ai_generated_code_protected.title" />
               }
@@ -235,14 +226,7 @@ function ProjectQualityGateAppRenderer(props: Readonly<ProjectQualityGateAppRend
           {aiAssuranceStatus === AiCodeAssuranceStatus.CONTAINS_AI_CODE && (
             <AiCodeAssuranceBanner
               className="sw-mb-10 sw-w-abs-800"
-              icon={
-                <AIAssuredIcon
-                  variant={AiIconVariant.Default}
-                  color={AiIconColor.Subdued}
-                  width={84}
-                  height={84}
-                />
-              }
+              iconVariant={AiIconVariant.Default}
               title={
                 <FormattedMessage id="project_quality_gate.ai_generated_code_not_protected.title" />
               }
diff --git a/server/sonar-web/src/main/js/components/illustrations/AiAssuredIllustration.tsx b/server/sonar-web/src/main/js/components/illustrations/AiAssuredIllustration.tsx
new file mode 100644
index 00000000000..a8a3ff03cf4
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/illustrations/AiAssuredIllustration.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 AiCodeAssuranceCheckIllustration from './AiCodeAssuranceCheckIllustration';
+import AiCodeAssuranceIllustration from './AiCodeAssuranceIllustration';
+
+interface Props {
+  className?: string;
+  height?: number;
+  variant?: AiIconVariant;
+  width?: number;
+}
+
+export enum AiIconVariant {
+  Default,
+  Check,
+}
+
+const VariantComp = {
+  [AiIconVariant.Check]: AiCodeAssuranceCheckIllustration,
+  [AiIconVariant.Default]: AiCodeAssuranceIllustration,
+};
+
+export default function AIAssuredIllustration({
+  variant = AiIconVariant.Default,
+  className,
+  width = 20,
+  height = 20,
+}: Readonly<Props>) {
+  const Comp = VariantComp[variant];
+  return <Comp className={className} height={height} width={width} />;
+}
diff --git a/server/sonar-web/src/main/js/components/illustrations/AiCodeAssuranceCheckIllustration.tsx b/server/sonar-web/src/main/js/components/illustrations/AiCodeAssuranceCheckIllustration.tsx
new file mode 100644
index 00000000000..2f41cf18b53
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/illustrations/AiCodeAssuranceCheckIllustration.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+interface Props {
+  className?: string;
+  height?: number;
+  width?: number;
+}
+
+export default function AiCodeAssuranceCheckIllustration({
+  className,
+  width = 168,
+  height = 168,
+}: Readonly<Props>) {
+  return (
+    <svg
+      className={className}
+      width={width}
+      height={height}
+      viewBox="0 0 168 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M81.6803 146.163C67.7412 142.236 56.0998 133.96 46.6909 121.017C36.8677 107.503 32 92.6055 32 76.1566V39.0003C32 38.1666 32.5171 37.4204 33.2978 37.1276L81.2982 19.1275C81.3571 19.1054 81.4168 19.0862 81.4771 19.0698L40 43.2648V76.1567C40 89.7648 45 107.765 53.5 119.265C61.9725 130.728 70.445 139.707 81.8885 146.202C81.8182 146.195 81.7485 146.182 81.6803 146.163Z"
+        fill="#BDC6FF"
+      />
+      <path
+        d="M81.6803 146.163C67.7412 142.236 56.0998 133.96 46.6909 121.016C36.8677 107.503 32 92.6053 32 76.1565V39.0002C32 38.1665 32.5171 37.4202 33.2978 37.1275L81.2982 19.1273C81.7509 18.9576 82.2499 18.9576 82.7027 19.1273L130.703 37.1275C131.484 37.4202 132.001 38.1665 132.001 39.0002V76.1565C132.001 87.4022 129.726 97.9228 125.147 107.772C127.283 107.819 129.362 108.102 131.357 108.595C135.786 98.4551 138.001 87.6423 138.001 76.1565V39.0002C138.001 35.6654 135.932 32.6804 132.81 31.5095L84.8094 13.5094C82.9983 12.8302 81.0025 12.8302 79.1914 13.5094L31.191 31.5095C28.0686 32.6804 26 35.6654 26 39.0002V76.1565C26 93.89 31.2792 110.019 41.8376 124.544C51.9705 138.484 64.709 147.615 80.0533 151.938C81.3261 152.296 82.6748 152.296 83.9475 151.938C88.8402 150.56 93.4679 148.692 97.8307 146.336C97.108 144.424 96.5851 142.413 96.2876 140.329C91.919 142.83 87.2643 144.77 82.3206 146.163C82.1118 146.221 81.8891 146.221 81.6803 146.163Z"
+        fill="#6A7590"
+      />
+      <path
+        d="M147 136.265C147 148.691 136.926 158.765 124.5 158.765C112.074 158.765 102 148.691 102 136.265C102 123.838 112.074 113.765 124.5 113.765C136.926 113.765 147 123.838 147 136.265Z"
+        fill="#7B87D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M138.122 130.886L123 146.008L113.879 136.886L118.122 132.644L123 137.522L133.879 126.644L138.122 130.886Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M68.9211 90.826C66.7316 92.1582 64.4181 93.311 62 94.2646C64.4181 95.2183 66.7316 96.3711 68.9211 97.7033C75.1049 101.466 80.2989 106.66 84.0614 112.844C85.3936 115.033 86.5463 117.347 87.5 119.765C88.4537 117.347 89.6064 115.033 90.9386 112.844C94.7011 106.66 99.8951 101.466 106.079 97.7033C108.268 96.3711 110.582 95.2183 113 94.2646C110.582 93.311 108.268 92.1582 106.079 90.826C99.8951 87.0635 94.7011 81.8695 90.9386 75.6858C89.6064 73.4963 88.4537 71.1827 87.5 68.7646C86.5463 71.1827 85.3936 73.4963 84.0614 75.6858C80.2989 81.8695 75.1049 87.0635 68.9211 90.826ZM74.6331 94.2646C79.6543 97.7516 84.013 102.11 87.5 107.132C90.987 102.11 95.3457 97.7516 100.367 94.2646C95.3457 90.7777 90.987 86.4189 87.5 81.3978C84.013 86.4189 79.6543 90.7777 74.6331 94.2646Z"
+        fill="#7B87D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M55.0129 64.1416C53.4524 65.1832 51.774 66.065 50 66.7646C51.774 67.4643 53.4524 68.3461 55.0129 69.3877C57.9279 71.3335 60.4312 73.8368 62.3769 76.7518C63.4185 78.3122 64.3003 79.9906 65 81.7646C65.6997 79.9906 66.5815 78.3122 67.6231 76.7518C69.5688 73.8368 72.0721 71.3335 74.9871 69.3877C76.5476 68.3461 78.226 67.4643 80 66.7646C78.226 66.065 76.5476 65.1832 74.9871 64.1416C72.0721 62.1958 69.5688 59.6925 67.6231 56.7775C66.5815 55.2171 65.6997 53.5387 65 51.7646C64.3003 53.5387 63.4185 55.2171 62.3769 56.7775C60.4312 59.6925 57.9279 62.1958 55.0129 64.1416ZM59.0811 66.7647C61.3113 68.462 63.3026 70.4534 65 72.6836C66.6974 70.4534 68.6887 68.462 70.9189 66.7646C68.6887 65.0673 66.6974 63.0759 65 60.8457C63.3026 63.0759 61.3113 65.0673 59.0811 66.7647Z"
+        fill="#7B87D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M83.1828 51.4705C82.2183 52.2052 81.1493 52.8114 80 53.2646C81.1493 53.7179 82.2183 54.3241 83.1828 55.0588C84.1331 55.7828 84.9819 56.6316 85.7058 57.5819C86.4406 58.5463 87.0467 59.6154 87.5 60.7646C87.9533 59.6154 88.5594 58.5463 89.2942 57.5819C90.0181 56.6316 90.8669 55.7828 91.8172 55.0588C92.7817 54.3241 93.8507 53.7179 95 53.2646C93.8507 52.8114 92.7817 52.2052 91.8172 51.4705C90.8669 50.7465 90.0181 49.8977 89.2942 48.9474C88.5594 47.9829 87.9533 46.9139 87.5 45.7646C87.0467 46.9139 86.4406 47.9829 85.7058 48.9474C84.9819 49.8977 84.1331 50.7465 83.1828 51.4705ZM85.7333 53.2646C86.3665 53.8075 86.9571 54.3982 87.5 55.0314C88.0429 54.3982 88.6335 53.8075 89.2667 53.2646C88.6335 52.7218 88.0429 52.1311 87.5 51.4979C86.9571 52.1311 86.3665 52.7218 85.7333 53.2646Z"
+        fill="#7B87D9"
+      />
+    </svg>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/illustrations/AiCodeAssuranceIllustration.tsx b/server/sonar-web/src/main/js/components/illustrations/AiCodeAssuranceIllustration.tsx
new file mode 100644
index 00000000000..a4afa7638c8
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/illustrations/AiCodeAssuranceIllustration.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+
+interface Props {
+  className?: string;
+  height?: number;
+  width?: number;
+}
+
+export default function AiCodeAssuranceIllustration({
+  className,
+  width = 168,
+  height = 168,
+}: Readonly<Props>) {
+  return (
+    <svg
+      className={className}
+      width={width}
+      height={height}
+      viewBox="0 0 168 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M83.6803 146.163C69.7412 142.236 58.0998 133.96 48.6909 121.017C38.8677 107.503 34 92.6055 34 76.1566V39.0003C34 38.1666 34.5171 37.4204 35.2978 37.1276L83.2982 19.1275C83.3571 19.1054 83.4168 19.0862 83.4771 19.0698L42 43.2648V76.1567C42 89.7648 47 107.765 55.5 119.265C63.9725 130.728 72.445 139.707 83.8885 146.202C83.8182 146.195 83.7485 146.182 83.6803 146.163Z"
+        fill="#BDC6FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.6909 121.016C58.0998 133.96 69.7412 142.236 83.6803 146.163C83.8891 146.221 84.1118 146.221 84.3206 146.163C98.2596 142.236 109.901 133.96 119.31 121.016C129.133 107.503 134.001 92.6053 134.001 76.1565V39.0002C134.001 38.1665 133.484 37.4202 132.703 37.1275L84.7027 19.1273C84.2499 18.9576 83.7509 18.9576 83.2982 19.1273L35.2978 37.1275C34.5171 37.4202 34 38.1665 34 39.0002V76.1565C34 92.6053 38.8677 107.503 48.6909 121.016ZM82.0533 151.938C83.3261 152.296 84.6748 152.296 85.9475 151.938C101.292 147.615 114.03 138.484 124.163 124.544C134.722 110.019 140.001 93.89 140.001 76.1565V39.0002C140.001 35.6654 137.932 32.6804 134.81 31.5095L86.8094 13.5094C84.9983 12.8302 83.0025 12.8302 81.1914 13.5094L33.191 31.5095C30.0686 32.6804 28 35.6654 28 39.0002V76.1565C28 93.89 33.2792 110.019 43.8376 124.544C53.9705 138.484 66.709 147.615 82.0533 151.938Z"
+        fill="#6A7590"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M70.9211 90.826C68.7316 92.1582 66.4181 93.311 64 94.2646C66.4181 95.2183 68.7316 96.3711 70.9211 97.7033C77.1049 101.466 82.2989 106.66 86.0614 112.844C87.3936 115.033 88.5463 117.347 89.5 119.765C90.4537 117.347 91.6064 115.033 92.9386 112.844C96.7011 106.66 101.895 101.466 108.079 97.7033C110.268 96.3711 112.582 95.2183 115 94.2646C112.582 93.311 110.268 92.1582 108.079 90.826C101.895 87.0635 96.7011 81.8695 92.9386 75.6858C91.6064 73.4963 90.4537 71.1827 89.5 68.7646C88.5463 71.1827 87.3936 73.4963 86.0614 75.6858C82.2989 81.8695 77.1049 87.0635 70.9211 90.826ZM76.6331 94.2646C81.6543 97.7516 86.013 102.11 89.5 107.132C92.987 102.11 97.3457 97.7516 102.367 94.2646C97.3457 90.7777 92.987 86.4189 89.5 81.3978C86.013 86.4189 81.6543 90.7777 76.6331 94.2646Z"
+        fill="#7B87D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M57.0129 64.1416C55.4524 65.1832 53.774 66.065 52 66.7646C53.774 67.4643 55.4524 68.3461 57.0129 69.3877C59.9279 71.3335 62.4312 73.8368 64.3769 76.7518C65.4185 78.3122 66.3003 79.9906 67 81.7646C67.6997 79.9906 68.5815 78.3122 69.6231 76.7518C71.5688 73.8368 74.0721 71.3335 76.9871 69.3877C78.5476 68.3461 80.226 67.4643 82 66.7646C80.226 66.065 78.5476 65.1832 76.9871 64.1416C74.0721 62.1958 71.5688 59.6925 69.6231 56.7775C68.5815 55.2171 67.6997 53.5387 67 51.7646C66.3003 53.5387 65.4185 55.2171 64.3769 56.7775C62.4312 59.6925 59.9279 62.1958 57.0129 64.1416ZM61.0811 66.7647C63.3113 68.462 65.3026 70.4534 67 72.6836C68.6974 70.4534 70.6887 68.462 72.9189 66.7646C70.6887 65.0673 68.6974 63.0759 67 60.8457C65.3026 63.0759 63.3113 65.0673 61.0811 66.7647Z"
+        fill="#7B87D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M85.1828 51.4705C84.2183 52.2052 83.1493 52.8114 82 53.2646C83.1493 53.7179 84.2183 54.3241 85.1828 55.0588C86.1331 55.7828 86.9819 56.6316 87.7058 57.5819C88.4406 58.5463 89.0467 59.6154 89.5 60.7646C89.9533 59.6154 90.5594 58.5463 91.2942 57.5819C92.0181 56.6316 92.8669 55.7828 93.8172 55.0588C94.7817 54.3241 95.8507 53.7179 97 53.2646C95.8507 52.8114 94.7817 52.2052 93.8172 51.4705C92.8669 50.7465 92.0181 49.8977 91.2942 48.9474C90.5594 47.9829 89.9533 46.9139 89.5 45.7646C89.0467 46.9139 88.4406 47.9829 87.7058 48.9474C86.9819 49.8977 86.1331 50.7465 85.1828 51.4705ZM87.7333 53.2646C88.3665 53.8075 88.9571 54.3982 89.5 55.0314C90.0429 54.3982 90.6335 53.8075 91.2667 53.2646C90.6335 52.7218 90.0429 52.1311 89.5 51.4979C88.9571 52.1311 88.3665 52.7218 87.7333 53.2646Z"
+        fill="#7B87D9"
+      />
+    </svg>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/ui/AiCodeAssuranceBanner.tsx b/server/sonar-web/src/main/js/components/ui/AiCodeAssuranceBanner.tsx
index 5b5b8d388df..45ecd690fc0 100644
--- a/server/sonar-web/src/main/js/components/ui/AiCodeAssuranceBanner.tsx
+++ b/server/sonar-web/src/main/js/components/ui/AiCodeAssuranceBanner.tsx
@@ -20,17 +20,18 @@
 
 import styled from '@emotion/styled';
 import { Heading } from '@sonarsource/echoes-react';
+import AIAssuredIllustration, { AiIconVariant } from '../illustrations/AiAssuredIllustration';
 
 interface AiCodeAssuranceBannerProps {
   className?: string;
   description: React.ReactNode;
-  icon: React.ReactNode;
+  iconVariant: AiIconVariant;
   title: React.ReactNode;
 }
 
-function AiCodeAssuranceBanner({
+export default function AiCodeAssuranceBanner({
   className,
-  icon,
+  iconVariant,
   title,
   description,
 }: Readonly<AiCodeAssuranceBannerProps>) {
@@ -38,7 +39,7 @@ function AiCodeAssuranceBanner({
     <StyledWrapper className={className}>
       <MessageContainer>
         <LeftContent>
-          {icon}
+          <AIAssuredIllustration variant={iconVariant} width={84} height={84} />
           <TextWrapper>
             <PromotedHeading as="h3">{title}</PromotedHeading>
             {description}
@@ -49,8 +50,6 @@ function AiCodeAssuranceBanner({
   );
 }
 
-export default AiCodeAssuranceBanner;
-
 const StyledWrapper = styled.div`
   background-color: var(--echoes-color-background-accent-weak-default);
   border: 1px solid var(--echoes-color-border-weak);