Fix SDK interactive question showing no question error incorrectly

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

@@ -65,9 +65,9 @@ export const _InteractiveQuestion = ({
  const hasQuestionChanges =
  card && (!card.id || card.id !== card.original_card_id);
 
- const [loading, setLoading] = useState(true);
+ const [isQuestionLoading, setIsQuestionLoading] = useState(true);
 
- const { isRunning } = uiControls;
+ const { isRunning: isQueryRunning } = uiControls;
 
  if (question) {
  // FIXME: remove "You can also get an alert when there are some results." feature for question
@@ -78,14 +78,14 @@ export const _InteractiveQuestion = ({
  dispatch: ReturnType<typeof useDispatch>,
  questionId: CardId,
  ) => {
- setLoading(true);
+ setIsQuestionLoading(true);
 
  const { location, params } = getQuestionParameters(questionId);
  try {
  await dispatch(initializeQBRaw(location, params));
  } catch (e) {
  console.error(`Failed to get question`, e);
- setLoading(false);
+ setIsQuestionLoading(false);
  }
  };
 
@@ -99,11 +99,11 @@ export const _InteractiveQuestion = ({
 
  useEffect(() => {
  if (queryResults) {
- setLoading(false);
+ setIsQuestionLoading(false);
  }
  }, [queryResults]);
 
- if (loading) {
+ if (isQuestionLoading || isQueryRunning) {
  return <Loader data-testid="loading-spinner" />;
  }
 
@@ -143,7 +143,7 @@ export const _InteractiveQuestion = ({
  className={cx(CS.flexFull, CS.fullWidth, CS.fullHeight)}
  question={question}
  rawSeries={[{ card, data: result && result.data }]}
- isRunning={isRunning}
+ isRunning={isQueryRunning}
  isObjectDetail={false}
  isResultDirty={false}
  isNativeEditorOpen={false}

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

@@ -1,3 +1,4 @@
+import type { AnyAction, ThunkDispatch } from "@reduxjs/toolkit";
 import { within } from "@testing-library/react";
 
 import {
@@ -15,6 +16,10 @@ import {
 } from "__support__/ui";
 import { createMockConfig } from "embedding-sdk/test/mocks/config";
 import { setupSdkState } from "embedding-sdk/test/server-mocks/sdk-init";
+import {
+ clearQueryResult,
+ runQuestionQuery,
+} from "metabase/query_builder/actions";
 import {
  createMockCard,
  createMockColumn,
@@ -24,6 +29,7 @@ import {
  createMockTable,
  createMockUser,
 } from "metabase-types/api/mocks";
+import type { State } from "metabase-types/store";
 
 import { InteractiveQuestion } from "./InteractiveQuestion";
 
@@ -67,13 +73,16 @@ const setup = ({
 
  setupCardQueryEndpoints(TEST_CARD, TEST_DATASET);
 
- renderWithProviders(<InteractiveQuestion questionId={TEST_CARD.id} />, {
- mode: "sdk",
- sdkConfig: createMockConfig({
- jwtProviderUri: "http://TEST_URI/sso/metabase",
- }),
- storeInitialState: state,
- });
+ return renderWithProviders(
+ <InteractiveQuestion questionId={TEST_CARD.id} />,
+ {
+ mode: "sdk",
+ sdkConfig: createMockConfig({
+ jwtProviderUri: "http://TEST_URI/sso/metabase",
+ }),
+ storeInitialState: state,
+ },
+ );
 };
 
 describe("InteractiveQuestion", () => {
@@ -98,6 +107,37 @@ describe("InteractiveQuestion", () => {
  ).toBeInTheDocument();
  });
 
+ it("should render loading state when drilling down", async () => {
+ const { store } = setup();
+
+ await waitForLoaderToBeRemoved();
+
+ expect(
+ within(screen.getByTestId("TableInteractive-root")).getByText(
+ TEST_COLUMN.display_name,
+ ),
+ ).toBeInTheDocument();
+ expect(
+ within(screen.getByRole("gridcell")).getByText("Test Row"),
+ ).toBeInTheDocument();
+
+ expect(screen.queryByTestId("loading-spinner")).not.toBeInTheDocument();
+ // Mimicking drilling down by rerunning the query again
+ const storeDispatch = store.dispatch as unknown as ThunkDispatch<
+ State,
+ void,
+ AnyAction
+ >;
+ storeDispatch(clearQueryResult());
+ storeDispatch(runQuestionQuery());
+
+ expect(screen.queryByText("Question not found")).not.toBeInTheDocument();
+ expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
+ expect(
+ within(await screen.findByRole("gridcell")).getByText("Test Row"),
+ ).toBeInTheDocument();
+ });
+
  it("should not render an error if a question isn't found before the question loaded", async () => {
  setup();