fix(sdk): trigger save handler on question create when using SaveQuestionForm (#50137)

* trigger save handlers on question create

* add skeleton example stories for save forms

* update storybook stories

* add tests for saving questions

* docs update

* add createCard assertions

* rollback docs

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

@@ -154,4 +154,23 @@ describeSDK("scenarios > embedding-sdk > interactive-question", () => {
 
     getSdkRoot().contains("User ID is 12");
   });
+
+  it("can create questions via the SaveQuestionForm component", () => {
+    visitInteractiveQuestionStory({
+      storyId: "embeddingsdk-interactivequestion-savequestionform--default",
+    });
+
+    saveInteractiveQuestionAsNewQuestion({
+      entityName: "Orders",
+      questionName: "Sample Orders 4",
+    });
+
+    cy.wait("@createCard").then(({ response }) => {
+      expect(response?.statusCode).to.equal(200);
+      expect(response?.body.name).to.equal("Sample Orders 4");
+    });
+
+    getSdkRoot().contains("onBeforeSave is called");
+    getSdkRoot().contains("question saved as Sample Orders 4");
+  });
 });

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

+import { useDisclosure } from "@mantine/hooks";
+import { type ComponentProps, useState } from "react";
+
+import { InteractiveQuestion } from "embedding-sdk";
+import { CommonSdkStoryWrapper } from "embedding-sdk/test/CommonSdkStoryWrapper";
+import { Box, Button, Modal, Stack } from "metabase/ui";
+
+const QUESTION_ID = (window as any).QUESTION_ID || 12;
+
+type InteractiveQuestionComponentProps = ComponentProps<
+  typeof InteractiveQuestion
+>;
+
+export default {
+  title: "EmbeddingSDK/InteractiveQuestion/SaveQuestionForm",
+  component: InteractiveQuestion,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [CommonSdkStoryWrapper],
+};
+
+export const Default = {
+  render(args: InteractiveQuestionComponentProps) {
+    const [isSaveModalOpen, { toggle, close }] = useDisclosure(false);
+
+    const [isBeforeSaveCalled, setBeforeSaveCalled] = useState(false);
+    const [newQuestionTitle, setNewQuestionTitle] = useState("");
+
+    return (
+      <InteractiveQuestion
+        onBeforeSave={async () => setBeforeSaveCalled(true)}
+        onSave={(question, context) => {
+          if (context.isNewQuestion) {
+            setNewQuestionTitle(question?.displayName() ?? "");
+          }
+
+          close();
+        }}
+        {...args}
+      >
+        <Box p="lg">
+          <Button onClick={toggle}>Save</Button>
+        </Box>
+
+        {isSaveModalOpen && (
+          <Modal opened={isSaveModalOpen} onClose={close}>
+            <InteractiveQuestion.SaveQuestionForm onClose={close} />
+          </Modal>
+        )}
+
+        {!isSaveModalOpen && <InteractiveQuestion.QuestionVisualization />}
+
+        <Stack p="lg">
+          {isBeforeSaveCalled && <Box>onBeforeSave is called</Box>}
+          {newQuestionTitle && <Box>question saved as {newQuestionTitle}</Box>}
+        </Stack>
+      </InteractiveQuestion>
+    );
+  },
+
+  args: {
+    questionId: QUESTION_ID,
+    isSaveEnabled: true,
+  },
+};

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/context/InteractiveQuestionProvider.tsx

@@ -64,16 +64,24 @@ export const InteractiveQuestionProvider = ({
 
   const handleSave = async (question: Question) => {
     if (isSaveEnabled) {
-      await onBeforeSave?.(question);
+      const saveContext = { isNewQuestion: false };
+
+      await onBeforeSave?.(question, saveContext);
       await handleSaveQuestion(question);
-      onSave?.(question);
+      onSave?.(question, saveContext);
       await loadQuestion();
     }
   };
 
   const handleCreate = async (question: Question) => {
-    await handleCreateQuestion(question);
-    await loadQuestion();
+    if (isSaveEnabled) {
+      const saveContext = { isNewQuestion: true };
+
+      await onBeforeSave?.(question, saveContext);
+      await handleCreateQuestion(question);
+      onSave?.(question, saveContext);
+      await loadQuestion();
+    }
   };
 
   const {

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/context/types.ts

@@ -14,8 +14,14 @@ export type EntityTypeFilterKeys = "table" | "question" | "model" | "metric";
 type InteractiveQuestionConfig = {
   componentPlugins?: SdkPluginsConfig;
   onNavigateBack?: () => void;
-  onBeforeSave?: (question?: Question) => Promise<void>;
-  onSave?: (question?: Question) => void;
+  onBeforeSave?: (
+    question: Question | undefined,
+    context: { isNewQuestion: boolean },
+  ) => Promise<void>;
+  onSave?: (
+    question: Question | undefined,
+    context: { isNewQuestion: boolean },
+  ) => void;
   entityTypeFilter?: EntityTypeFilterKeys[];
 
   /** Is the save question button visible? */