Fix tutorial card logic

extensions/vscode/e2e/selectors/GUI.selectors.ts

@@ -79,6 +79,31 @@ export class GUISelectors {
     );
   }
 
+  public static getOnboardingTabButton(view: WebView, title: string) {
+    return SelectorUtils.getElementByDataTestId(
+      view,
+      `onboarding-tab-${title}`,
+    );
+  }
+
+  public static getBestChatApiKeyInput(view: WebView) {
+    return SelectorUtils.getElementByDataTestId(
+      view,
+      "best-chat-api-key-input",
+    );
+  }
+
+  public static getBestAutocompleteApiKeyInput(view: WebView) {
+    return SelectorUtils.getElementByDataTestId(
+      view,
+      "best-autocomplete-api-key-input",
+    );
+  }
+
+  public static getTutorialCard(view: WebView) {
+    return SelectorUtils.getElementByDataTestId(view, "tutorial-card");
+  }
+
   public static getThreadMessageByText(view: WebView, text: string) {
     return view.findWebElement(
       By.xpath(`//*[@class="thread-message"]//*[contains(text(), "${text}")]`),

extensions/vscode/e2e/tests/GUI.test.ts

@@ -1,5 +1,6 @@
 import { expect } from "chai";
 import {
+  By,
   EditorView,
   Key,
   VSBrowser,
@@ -53,6 +54,45 @@ describe("GUI Test", () => {
         "Quickly get up and running using our API keys.",
       );
     }).timeout(DEFAULT_TIMEOUT.XL);
+
+    it("should display tutorial card after accepting onboarding quick start", async () => {
+      // Get paragraph with text Best
+      const bestTab = await GUISelectors.getOnboardingTabButton(view, "Best");
+      await bestTab.click();
+
+      const anthropicInput = await TestUtils.waitForSuccess(
+        async () => await GUISelectors.getBestChatApiKeyInput(view),
+      );
+      anthropicInput.sendKeys("invalid_api_key");
+
+      const mistralInput =
+        await GUISelectors.getBestAutocompleteApiKeyInput(view);
+      mistralInput.sendKeys("invalid_api_key");
+
+      // Get button with text "Connect" and click it
+      const connectButton = await view.findWebElement(
+        By.xpath("//button[text()='Connect']"),
+      );
+      await connectButton.click();
+
+      await TestUtils.waitForSuccess(
+        async () => await GUISelectors.getTutorialCard(view),
+      );
+
+      // TODO validate that claude has been added to list
+
+      // Skip testing Quick Start because github auth opens external app and breaks test
+      // const quickStartButton = await view.findWebElement(
+      //   By.xpath("//*[contains(text(), 'Get started using our API keys')]")
+      // );
+      // await quickStartButton.click();
+      // await view.switchBack();
+      // const allowButton = await TestUtils.waitForSuccess(
+      //   async () => await driver.findElement(By.xpath(`//a[contains(text(), "Allow")]`))
+      // );
+      // await allowButton.click();
+      // ({ view, driver } = await GUIActions.switchToReactIframe());
+    }).timeout(DEFAULT_TIMEOUT.XL);
   });
 
   describe("Chat", () => {

gui/src/components/OnboardingCard/components/BestExperienceConfigForm.tsx

@@ -99,6 +99,7 @@ function BestExperienceConfigForm({
               placeholder="Enter your Anthropic API Key"
               value={chatApiKey}
               onChange={(e) => setChatApiKey(e.target.value)}
+              data-testid="best-chat-api-key-input"
             />
             <InputSubtext>
               <a
@@ -133,6 +134,7 @@ function BestExperienceConfigForm({
               placeholder="Enter your Mistral API Key"
               value={autocompleteApiKey}
               onChange={(e) => setAutocompleteApiKey(e.target.value)}
+              data-testid="best-autocomplete-api-key-input"
             />
             <InputSubtext>
               <a

gui/src/components/OnboardingCard/components/OnboardingCardTabs.tsx

@@ -84,6 +84,7 @@ export function OnboardingCardTabs({
                 key={tabType}
                 isActive={activeTab === tabType}
                 onClick={() => onTabClick(tabType as TabTitle)}
+                data-testid={`onboarding-tab-${tabType}`}
               >
                 <p className="m-0 hidden font-medium md:block">
                   {titles.default}

gui/src/components/mainInput/TutorialCard.tsx

@@ -44,7 +44,7 @@ export function TutorialCard({ onClose }: TutorialCardProps) {
   const ideMessenger = useContext(IdeMessengerContext);
 
   return (
-    <TutorialCardDiv>
+    <TutorialCardDiv data-testid={`tutorial-card`}>
       <CloseButton onClick={onClose}>
         <XMarkIcon className="h-5 w-5" />
       </CloseButton>
@@ -57,10 +57,7 @@ export function TutorialCard({ onClose }: TutorialCardProps) {
               <span
                 className="cursor-pointer underline"
                 onClick={() =>
-                  ideMessenger.post(
-                    "vscode/openMoveRightMarkdown",
-                    undefined,
-                  )
+                  ideMessenger.post("vscode/openMoveRightMarkdown", undefined)
                 }
               >
                 Move Chat panel to the right

gui/src/pages/gui/Chat.tsx

@@ -550,7 +550,7 @@ export function Chat() {
                 </div>
               )}
 
-              {showTutorialCard !== false && !onboardingCard.open && (
+              {showTutorialCard !== false && !onboardingCard.show && (
                 <div className="flex w-full justify-center">
                   <TutorialCard onClose={closeTutorialCard} />
                 </div>