diff --git a/e2e/test-component/scenarios/embedding-sdk/create-question.cy.spec.tsx b/e2e/test-component/scenarios/embedding-sdk/create-question.cy.spec.tsx index b31f5835af4440555fca9649eec63b43ad877806..9bc406faf2456ed5961536ef97aa1e226286f889 100644 --- a/e2e/test-component/scenarios/embedding-sdk/create-question.cy.spec.tsx +++ b/e2e/test-component/scenarios/embedding-sdk/create-question.cy.spec.tsx @@ -17,9 +17,17 @@ describeEE("scenarios > embedding-sdk > create-question", () => { mockAuthProviderAndJwtSignIn(); }); - it("can create questions via the CreateQuestion component", () => { + it("can create a question via the CreateQuestion component", () => { cy.intercept("POST", "/api/card").as("createCard"); + cy.intercept("POST", "/api/dataset", req => { + // throttling to 500 Kbps (slow 3G) makes the loading indicator + // shows up reliably when we click on visualize. + req.on("response", res => { + res.setThrottle(500); + }); + }); + mountSdkContent( <Flex p="xl"> <CreateQuestion /> @@ -40,12 +48,18 @@ describeEE("scenarios > embedding-sdk > create-question", () => { cy.findByRole("button", { name: "Visualize" }).click(); + // Should show a loading indicator (metabase#47564) + cy.findByTestId("loading-indicator").should("exist"); + // Should be able to go back to the editor view cy.findByRole("button", { name: "Show editor" }).click(); // Should be able to visualize the question again cy.findByRole("button", { name: "Visualize" }).click(); + // Should not show a loading indicator again as the question has not changed (metabase#47564) + cy.findByTestId("loading-indicator").should("not.exist"); + // Should be able to save to a new question right away cy.findByRole("button", { name: "Save" }).click(); }); diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Editor.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Editor.tsx index 515fec9cdeafb63846d309834096c90bd9f688bf..a283a0fedfd87a70a60ec022e88a037bd171e7fb 100644 --- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Editor.tsx +++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Editor.tsx @@ -53,8 +53,8 @@ export const Editor = ({ onApply = () => {} }: EditorProps) => { await updateQuestion(nextQuestion, { run: false }) } runQuestionQuery={async () => { - await runQuestion(); onApply(); + await runQuestion(); }} setQueryBuilderMode={() => {}} hasVisualizeButton={true} diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx index bb724125c693c9f644ee419aeca950dde95c571d..fe57cf9c9655fd5789c8f3c1b5dab65a2b27f50b 100644 --- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx +++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx @@ -30,15 +30,18 @@ export const QuestionVisualization = ({ updateQuestion, } = useInteractiveQuestionContext(); - if (isQuestionLoading) { + // When visualizing a question for the first time, there is no query result yet. + const isQueryResultLoading = question && !queryResults; + + if (isQuestionLoading || isQueryResultLoading) { return <SdkLoader />; } - if (!question || !queryResults) { + if (!question) { return <SdkError message={t`Question not found`} />; } - const [result] = queryResults; + const [result] = queryResults ?? []; const card = question.card(); return ( diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx index 14ad040250b1b41a23b8b53263a2dbdd2e8a033f..720073e935cbc922e5796c50787c6183773123a8 100644 --- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx +++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx @@ -78,11 +78,14 @@ export const InteractiveQuestionResult = ({ const [isSaveModalOpen, { open: openSaveModal, close: closeSaveModal }] = useDisclosure(false); - if (isQuestionLoading) { + // When visualizing a question for the first time, there is no query result yet. + const isQueryResultLoading = question && !queryResults; + + if (isQuestionLoading || isQueryResultLoading) { return <SdkLoader />; } - if (!question || !queryResults) { + if (!question) { return <SdkError message={t`Question not found`} />; }