feat: Add AI banner (#3986)

* feat: Add AI banner

* move FeatureCard to components and move BannerCarousel

* remove AI banner and adjust cluster overview

* move types to separate file

* add feedback link and onclicks on banner buttons

* move texts to translations

* move ai banner to ai directory

* add icon for the meet joule title

* add feedback links to all configs

* adjust texts in svgs and banner

* add test for AI banner

* add test for AI banner

* add test for AI banner

* localy it is passing

* adjust useFeature

* adjust Joule Icon in Disclaimer

* Update tests/integration/tests/companion/test-companion-ui.spec.js

Co-authored-by: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com>

* adjust margin to top

* Update public/i18n/en.yaml

Co-authored-by: Małgorzata Świeca <malgorzata.swieca@sap.com>

* adjust test

---------

Co-authored-by: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com>
Co-authored-by: Małgorzata Świeca <malgorzata.swieca@sap.com>

Author: 3 people

kyma/environments/dev/config.yaml

@@ -70,6 +70,8 @@ config:
       isEnabled: false
     KYMA_COMPANION:
       isEnabled: true
+      config:
+        feedbackLink: https://www.youtube.com/watch?v=dQw4w9WgXcQ
     TRACKING:
       isEnabled: false
     GARDENER_LOGIN:

kyma/environments/prod/config.yaml

@@ -73,6 +73,8 @@ config:
       isEnabled: false
     KYMA_COMPANION:
       isEnabled: false
+      config:
+        feedbackLink: ''
     GARDENER_LOGIN:
       isEnabled: false
       kubeconfig: null

kyma/environments/stage/config.yaml

@@ -71,6 +71,8 @@ config:
       isEnabled: false
     KYMA_COMPANION:
       isEnabled: false
+      config:
+        feedbackLink: https://sapinsights.eu.qualtrics.com/jfe/form/SV_dmWATTfes5SstG6
     GARDENER_LOGIN:
       isEnabled: false
       kubeconfig: null

public/defaultConfig.yaml

@@ -54,6 +54,8 @@ config:
       isEnabled: false
     KYMA_COMPANION:
       isEnabled: false
+      config:
+        feedbackLink: https://sapinsights.eu.qualtrics.com/jfe/preview/previewId/1fa80b40-56c3-4b20-9902-877df3da3493/SV_dmWATTfes5SstG6?Q_CHL=preview&Q_SurveyVersionID=current
     TRACKING:
       isEnabled: false
     GARDENER_LOGIN:

public/i18n/en.yaml

@@ -766,6 +766,12 @@ kubeconfig-id:
   error: "Couldn't load kubeconfig ID; configuration not changed (Error: ${{error}})"
   must-be-an-object: Kubeconfig must be a JSON or YAML object.
 kyma-companion:
+  banner: 
+    title: Meet Joule
+    description: Joule is your personal, contextual assistant, ready to help with all Kyma-related questions. Ask about Kyma features, Kubernetes best practices, step-by-step instructions, and more.
+    buttons:
+      try-joule: Try Out Joule
+      feedback: Give Feedback
   name: Joule
   opener:
     use-ai: AI Companion

src/components/Clusters/views/ClusterOverview/ClusterOverview.js

@@ -18,8 +18,9 @@ import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/Dyn
 import ClusterStats from './ClusterStats';
 import ClusterDetails from './ClusterDetails';
 import YamlUploadDialog from 'resources/Namespaces/YamlUpload/YamlUploadDialog';
-import BannerCarousel from 'components/Extensibility/components/FeaturedCard/BannerCarousel';
+import BannerCarousel from 'shared/components/FeatureCard/BannerCarousel';
 import { columnLayoutState } from 'state/columnLayoutAtom';
+import { AIBanner } from 'components/KymaCompanion/components/AIBanner/AIBanner';
 
 import './ClusterOverview.scss';
 import { configFeaturesNames } from 'state/types';
@@ -30,6 +31,10 @@ const Injections = React.lazy(() =>
 
 export function ClusterOverview() {
   const { t } = useTranslation();
+  const {
+    isEnabled: isKymaCompanionEnabled,
+    config: companionConfig,
+  } = useFeature(configFeaturesNames.KYMA_COMPANION);
   const clusterValidation = useFeature(configFeaturesNames.CLUSTER_VALIDATION);
   const clustersInfo = useClustersInfo();
   const currentCluster = clustersInfo?.currentCluster;
@@ -92,11 +97,16 @@ export function ClusterOverview() {
           <>
             <BannerCarousel
               children={
-                <Injections
-                  destination="ClusterOverview"
-                  slot="banner"
-                  root=""
-                />
+                <>
+                  {isKymaCompanionEnabled && (
+                    <AIBanner feedbackUrl={companionConfig?.feedbackLink} />
+                  )}
+                  <Injections
+                    destination="ClusterOverview"
+                    slot="banner"
+                    root=""
+                  />
+                </>
               }
             />
             <Injections