fix(sdk): remove runtime error on aggregated question drill (#49064)

e2e/test/scenarios/embedding-sdk/interactive-question.cy.spec.ts

+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+import {
+  createQuestion,
+  popover,
+  restore,
+  setTokenFeatures,
+  visitFullAppEmbeddingUrl,
+} from "e2e/support/helpers";
+import {
+  EMBEDDING_SDK_STORY_HOST,
+  describeSDK,
+} from "e2e/support/helpers/e2e-embedding-sdk-helpers";
+import {
+  JWT_SHARED_SECRET,
+  setupJwt,
+} from "e2e/support/helpers/e2e-jwt-helpers";
+
+const { ORDERS, ORDERS_ID } = SAMPLE_DATABASE;
+
+describeSDK("scenarios > embedding-sdk > interactive-question", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+    setTokenFeatures("all");
+    setupJwt();
+    cy.request("PUT", "/api/setting", {
+      "enable-embedding-sdk": true,
+    });
+
+    createQuestion(
+      {
+        name: "47563",
+        query: {
+          "source-table": ORDERS_ID,
+          aggregation: [["max", ["field", ORDERS.QUANTITY, null]]],
+          breakout: [["field", ORDERS.PRODUCT_ID, null]],
+          limit: 2,
+        },
+      },
+      { wrapId: true },
+    );
+
+    cy.signOut();
+
+    cy.intercept("GET", "/api/card/*").as("getCard");
+    cy.intercept("GET", "/api/user/current").as("getUser");
+    cy.intercept("POST", "/api/card/*/query").as("cardQuery");
+
+    cy.get("@questionId").then(questionId => {
+      visitFullAppEmbeddingUrl({
+        url: EMBEDDING_SDK_STORY_HOST,
+        qs: {
+          id: "embeddingsdk-interactivequestion--default",
+          viewMode: "story",
+        },
+        onBeforeLoad: (window: any) => {
+          window.JWT_SHARED_SECRET = JWT_SHARED_SECRET;
+          window.METABASE_INSTANCE_URL = Cypress.config().baseUrl;
+          window.QUESTION_ID = questionId;
+        },
+      });
+    });
+
+    cy.wait("@getUser").then(({ response }) => {
+      expect(response?.statusCode).to.equal(200);
+    });
+
+    cy.wait("@getCard").then(({ response }) => {
+      expect(response?.statusCode).to.equal(200);
+    });
+  });
+
+  it("should show question content", () => {
+    cy.get("#metabase-sdk-root")
+      .should("be.visible")
+      .within(() => {
+        cy.findByText("Product ID").should("be.visible");
+        cy.findByText("Max of Quantity").should("be.visible");
+      });
+  });
+
+  it("should not fail on aggregated question drill", () => {
+    cy.wait("@cardQuery").then(({ response }) => {
+      expect(response?.statusCode).to.equal(202);
+    });
+
+    cy.findAllByTestId("cell-data").last().click();
+
+    cy.on("uncaught:exception", error => {
+      expect(
+        error.message.includes(
+          "Error converting :aggregation reference: no aggregation at index 0",
+        ),
+      ).to.be.false;
+    });
+
+    popover().findByText("See these Orders").click();
+
+    cy.icon("warning").should("not.exist");
+  });
+});

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.stories.tsx

+import type { StoryFn } from "@storybook/react";
+import type { ComponentProps } from "react";
+
+import { CommonSdkStoryWrapper } from "embedding-sdk/test/CommonSdkStoryWrapper";
+
+import { InteractiveQuestion } from "./InteractiveQuestion";
+
+const QUESTION_ID = (window as any).QUESTION_ID || 12;
+
+type InteractiveQuestionComponentProps = ComponentProps<
+  typeof InteractiveQuestion
+>;
+
+export default {
+  title: "EmbeddingSDK/InteractiveQuestion",
+  component: InteractiveQuestion,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [CommonSdkStoryWrapper],
+};
+
+const Template: StoryFn<InteractiveQuestionComponentProps> = args => {
+  return <InteractiveQuestion {...args} />;
+};
+
+export const Default = {
+  render: Template,
+
+  args: {
+    questionId: QUESTION_ID,
+  },
+};

enterprise/frontend/src/embedding-sdk/hooks/private/use-load-question.ts

@@ -131,6 +131,7 @@ export function useLoadQuestion({
           originalQuestion,
           cancelDeferred: deferred(),
           onQuestionChange: question => setQuestionState({ question }),
+          onClearQueryResults: () => setQuestionState({ queryResults: [null] }),
         }),
       );
 

enterprise/frontend/src/embedding-sdk/lib/interactive-question/run-question-on-navigate.ts

@@ -14,6 +14,7 @@ import type { Dispatch, GetState } from "metabase-types/store";
 interface RunQuestionOnNavigateParams extends NavigateToNewCardParams {
   originalQuestion?: Question;
   onQuestionChange: (question: Question) => void;
+  onClearQueryResults: () => void;
 }
 
 export const runQuestionOnNavigateSdk =
@@ -28,6 +29,7 @@ export const runQuestionOnNavigateSdk =
       originalQuestion,
       cancelDeferred,
       onQuestionChange,
+      onClearQueryResults,
     } = params;
 
     // Do not reload questions with breakouts when clicking on a legend item
@@ -40,6 +42,7 @@ export const runQuestionOnNavigateSdk =
       nextCard = await loadCard(nextCard.id, { dispatch, getState });
     } else {
       nextCard = getCardAfterVisualizationClick(nextCard, previousCard);
+      onClearQueryResults();
     }
 
     // Optimistic update the UI before we re-fetch the query metadata.