Resolves: MTV-4447 | address feedback

Signed-off-by: Jeff Puzzo <jpuzzo@redhat.com>

Author: jpuzz0

locales/en/plugin__forklift-console-plugin.json

@@ -540,6 +540,7 @@
   "Host": "Host",
   "Host cluster": "Host cluster",
   "Hosts": "Hosts",
+  "How do I check network mapping for a failed migration?": "How do I check network mapping for a failed migration?",
   "HPE Primera/3PAR": "HPE Primera/3PAR",
   "Hyper-V host": "Hyper-V host",
   "Hyper-V host is required": "Hyper-V host is required",
@@ -1362,7 +1363,9 @@
   "Whether this is a warm migration.": "Whether this is a warm migration.",
   "Whether to preserve the CPU model": "Whether to preserve the CPU model",
   "While MTV preserves MAC addresses, the original IP addresses might not be directly carried over if you're using OpenShift's Software-Defined Network (SDN), which might operate on a different VLAN. If preserving the original IP is critical, you might need to use specific network configurations or tools outside of the default OpenShift SDN.": "While MTV preserves MAC addresses, the original IP addresses might not be directly carried over if you're using OpenShift's Software-Defined Network (SDN), which might operate on a different VLAN. If preserving the original IP is critical, you might need to use specific network configurations or tools outside of the default OpenShift SDN.",
+  "Why aren't my VMs working after migration?": "Why aren't my VMs working after migration?",
   "Why don’t my VMs function correctly after a successful migration?": "Why don’t my VMs function correctly after a successful migration?",
+  "Why is my warm migration stuck?": "Why is my warm migration stuck?",
   "With a cold migration, we will move the shut down VM between hosts.": "With a cold migration, we will move the shut down VM between hosts.",
   "With a conversion migration, we will convert a virtual machine to a different architecture.": "With a conversion migration, we will convert a virtual machine to a different architecture.",
   "With a live migration, we will move an active virtual machine without downtime.": "With a live migration, we will move an active virtual machine without downtime.",

src/onlineHelp/learningExperienceContent/topics/troubleShootingTopic/components/AskAIIcon.tsx

@@ -4,61 +4,62 @@ type AskAIIconProps = SVGProps<SVGSVGElement>;
 
 const AskAIIcon: FC<AskAIIconProps> = (props) => (
   <svg
+    className="forklift--learning__ask-ai-icon"
     fill="none"
     height="32"
     viewBox="0 0 32 32"
     width="32"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <rect fill="#292929" height="31" rx="9.5" stroke="#E0E0E0" width="31" x="0.5" y="0.5" />
+    <rect height="31" rx="9.5" width="31" x="0.5" y="0.5" />
     <path
       d="M16.3382 13.3244C16.036 13.3244 15.7871 13.0756 15.7871 12.7733V6.55111C15.7871 6.24889 16.036 6 16.3382 6C16.6404 6 16.8893 6.24889 16.8893 6.55111V12.7733C16.8893 13.0756 16.6404 13.3244 16.3382 13.3244Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M12.7831 16.8796H6.56088C6.25865 16.8796 6.00977 16.6307 6.00977 16.3285C6.00977 16.0262 6.25865 15.7773 6.56088 15.7773H12.7831C13.0853 15.7773 13.3342 16.0262 13.3342 16.3285C13.3342 16.6307 13.0853 16.8796 12.7831 16.8796Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M16.3382 26.6565C16.036 26.6565 15.7871 26.4076 15.7871 26.1054V19.8831C15.7871 19.5809 16.036 19.332 16.3382 19.332C16.6404 19.332 16.8893 19.5809 16.8893 19.8831V26.1054C16.8893 26.4076 16.6404 26.6565 16.3382 26.6565Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M25.7418 16.5433C25.7685 16.4811 25.7774 16.4189 25.7774 16.3566C25.7774 16.3566 25.7774 16.3389 25.7774 16.33C25.7774 16.3211 25.7774 16.3122 25.7774 16.3033C25.7774 16.2411 25.7685 16.1789 25.7418 16.1166C25.724 16.0722 25.6974 16.0366 25.6707 16.0011C25.6529 15.9833 25.644 15.9566 25.6263 15.93L23.8485 14.1522C23.6351 13.9389 23.2796 13.9389 23.0663 14.1522C22.8529 14.3655 22.8529 14.7211 23.0663 14.9344L23.8929 15.7611H15.4574C15.1551 15.7611 14.9062 16.01 14.9062 16.3122C14.9062 16.6144 15.1551 16.8633 15.4574 16.8633H23.8929L23.0663 17.69C22.8529 17.9033 22.8529 18.2589 23.0663 18.4722C23.1729 18.5789 23.3151 18.6322 23.4574 18.6322C23.5996 18.6322 23.7418 18.5789 23.8485 18.4722L25.6263 16.6944C25.6263 16.6944 25.6529 16.65 25.6707 16.6233C25.6974 16.5877 25.724 16.5522 25.7418 16.5077V16.5433Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M13.6711 14.2125C13.5289 14.2125 13.3867 14.1591 13.28 14.0525L9.72445 10.4969C9.51112 10.2836 9.51112 9.92802 9.72445 9.71469C9.93779 9.50135 10.2933 9.50135 10.5067 9.71469L14.0622 13.2702C14.2756 13.4836 14.2756 13.8391 14.0622 14.0525C13.9556 14.1591 13.8133 14.2125 13.6711 14.2125Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M10.1156 23.1031C9.97334 23.1031 9.83112 23.0498 9.72445 22.9431C9.51112 22.7298 9.51112 22.3742 9.72445 22.1609L13.28 18.6053C13.4933 18.392 13.8489 18.392 14.0622 18.6053C14.2756 18.8186 14.2756 19.1742 14.0622 19.3875L10.5067 22.9431C10.4 23.0498 10.2578 23.1031 10.1156 23.1031Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M14.0447 11.547C13.7869 11.547 13.5558 11.3692 13.5025 11.1025L13.1291 9.32475C13.0669 9.02253 13.2536 8.72919 13.5558 8.66697C13.858 8.59586 14.1514 8.79141 14.2136 9.09364L14.5869 10.8714C14.6491 11.1736 14.4625 11.467 14.1602 11.5292C14.1247 11.5292 14.0802 11.5381 14.0447 11.5381V11.547Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M11.0038 14.5946C11.0038 14.5946 10.9238 14.5946 10.8883 14.5857L9.11048 14.2124C8.80826 14.1501 8.62159 13.8568 8.68382 13.5546C8.74604 13.2524 9.03937 13.0568 9.34159 13.1279L11.1194 13.5012C11.4216 13.5635 11.6083 13.8568 11.546 14.159C11.4927 14.4168 11.2616 14.6035 11.0038 14.6035V14.5946Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M13.6714 23.9912C13.6714 23.9912 13.5914 23.9912 13.5558 23.9823C13.2536 23.9201 13.0669 23.6268 13.1291 23.3245L13.5025 21.5468C13.5647 21.2445 13.858 21.049 14.1602 21.1201C14.4625 21.1823 14.6491 21.4757 14.5869 21.7779L14.2136 23.5557C14.1602 23.8134 13.9291 24.0001 13.6714 24.0001V23.9912Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M9.22604 19.5488C8.96826 19.5488 8.73715 19.371 8.68382 19.1043C8.62159 18.8021 8.80826 18.5088 9.11048 18.4466L10.8883 18.0732C11.1905 18.0021 11.4838 18.1977 11.546 18.4999C11.6083 18.8021 11.4216 19.0954 11.1194 19.1577L9.34159 19.531C9.34159 19.531 9.26159 19.5399 9.22604 19.5399V19.5488Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M6.56 13.3344C6.41778 13.3344 6.27556 13.2721 6.16889 13.1655C6.11556 13.1121 6.08 13.0588 6.04444 12.9877C6.01778 12.9166 6 12.8455 6 12.7744C6 12.6321 6.06222 12.4899 6.16889 12.3832C6.37333 12.1788 6.74667 12.1699 6.95111 12.3832C7.05778 12.4899 7.12 12.6321 7.12 12.7744C7.12 12.8455 7.10222 12.9166 7.07556 12.9877C7.04889 13.0588 7.00444 13.1121 6.95111 13.1655C6.84444 13.2721 6.70222 13.3344 6.56 13.3344Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       d="M6.56 20.4437C6.41778 20.4437 6.27556 20.3815 6.16889 20.2748C6.06222 20.1771 6 20.026 6 19.8837C6 19.7415 6.06222 19.5993 6.16889 19.4926C6.37333 19.2882 6.73778 19.2793 6.95111 19.4926C7.05778 19.5993 7.12 19.7415 7.12 19.8837C7.12 20.026 7.05778 20.1771 6.95111 20.2748C6.84444 20.3815 6.70222 20.4437 6.56 20.4437Z"
-      fill="white"
+      fill="currentColor"
     />
   </svg>
 );

src/onlineHelp/learningExperienceContent/topics/troubleShootingTopic/components/AskAISection.tsx

@@ -12,16 +12,11 @@ import {
   ListItem,
   Title,
 } from '@patternfly/react-core';
-import { useLightspeed } from '@utils/hooks/useLightspeed';
+import { useLightspeed } from '@utils/hooks/useLightspeed/useLightspeed';
 import { useForkliftTranslation } from '@utils/i18n';
 
 import AskAIIcon from './AskAIIcon';
-
-const PRE_CANNED_QUESTIONS = [
-  'How do I check network mapping for a failed migration?',
-  'Why is my warm migration stuck?',
-  "Why aren't my VMs working after migration?",
-] as const;
+import { aiPromptQuestions } from './constants';
 
 const AskAISection: FC = () => {
   const { t } = useForkliftTranslation();
@@ -42,27 +37,22 @@ const AskAISection: FC = () => {
         >
           <AskAIIcon />
           <Title headingLevel="h4">{t('Ask AI assistant')}</Title>
-          <ExpandableSectionToggle
-            isExpanded={isExpanded}
-            onToggle={(expanded) => {
-              setIsExpanded(expanded);
-            }}
-          >
+          <ExpandableSectionToggle isExpanded={isExpanded} onToggle={setIsExpanded}>
             {t('Common troubleshooting questions')}
           </ExpandableSectionToggle>
         </Flex>
 
         <ExpandableSection isDetached isExpanded={isExpanded}>
-          <List style={{ '--pf-v6-c-list--Gap': 0 } as React.CSSProperties}>
-            {PRE_CANNED_QUESTIONS.map((question) => (
+          <List>
+            {aiPromptQuestions.map((question) => (
               <ListItem key={question}>
                 <Button
                   onClick={() => {
-                    openLightspeed(t(question));
+                    openLightspeed(question);
                   }}
                   variant={ButtonVariant.link}
                 >
-                  {t(question)}
+                  {question}
                 </Button>
               </ListItem>
             ))}

src/onlineHelp/learningExperienceContent/topics/troubleShootingTopic/components/__tests__/AskAISection.test.tsx

@@ -1,12 +1,13 @@
+import { beforeEach, describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { useLightspeed } from '@utils/hooks/useLightspeed';
+import { useLightspeed } from '@utils/hooks/useLightspeed/useLightspeed';
 
 import AskAISection from '../AskAISection';
 
 const mockOpenLightspeed = jest.fn();
 
-jest.mock('@utils/hooks/useLightspeed', () => ({
+jest.mock('@utils/hooks/useLightspeed/useLightspeed', () => ({
   useLightspeed: jest.fn(),
 }));
 

src/onlineHelp/learningExperienceContent/topics/troubleShootingTopic/components/constants.ts

@@ -0,0 +1,7 @@
+import { t } from 'src/utils/i18n';
+
+export const aiPromptQuestions: string[] = [
+  t('How do I check network mapping for a failed migration?'),
+  t('Why is my warm migration stuck?'),
+  t("Why aren't my VMs working after migration?"),
+];

src/onlineHelp/learningExperienceStructure/LearningExperiencePanel/LearningExperiencePanel.scss

@@ -24,6 +24,19 @@
   &__ask-ai-card {
     min-width: 350px;
     width: fit-content;
+
+    .pf-v6-c-list {
+      --pf-v6-c-list--Gap: 0;
+    }
+  }
+
+  &__ask-ai-icon {
+    color: var(--pf-t--global--text--color--on-primary--default);
+
+    rect {
+      fill: var(--pf-t--global--background--color--primary--default);
+      stroke: var(--pf-t--global--border--color--default);
+    }
   }
 
   &__help-section {