fix(sdk): ability to save questions in interactive question (#48866)

* implement saving questions in interactive question

* close modal on create question

* add e2e test for saving questions

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

 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 import {
   createQuestion,
+  modal,
   popover,
   restore,
   setTokenFeatures,
@@ -98,4 +99,29 @@ describeSDK("scenarios > embedding-sdk > interactive-question", () => {
 
     cy.icon("warning").should("not.exist");
   });
+
+  it("can save a question", () => {
+    cy.intercept("POST", "/api/card").as("createCard");
+
+    cy.findAllByTestId("cell-data").last().click();
+
+    popover().findByText("See these Orders").click();
+
+    cy.findByRole("button", { name: "Save" }).click();
+
+    modal().within(() => {
+      cy.findByRole("radiogroup").findByText("Save as new question").click();
+
+      cy.findByPlaceholderText("What is the name of your question?")
+        .clear()
+        .type("Foo Bar Orders");
+
+      cy.findByRole("button", { name: "Save" }).click();
+    });
+
+    cy.wait("@createCard").then(({ response }) => {
+      expect(response?.statusCode).to.equal(200);
+      expect(response?.body.name).to.equal("Foo Bar Orders");
+    });
+  });
 });

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx

@@ -8,6 +8,7 @@ import {
   SdkError,
   SdkLoader,
 } from "embedding-sdk/components/private/PublicComponentWrapper";
+import { SaveQuestionModal } from "metabase/containers/SaveQuestionModal";
 import { Box, Button, Group, Icon } from "metabase/ui";
 
 import { InteractiveQuestion } from "../../public/InteractiveQuestion";
@@ -58,12 +59,22 @@ export const InteractiveQuestionResult = ({
   const [questionView, setQuestionView] =
     useState<QuestionView>("visualization");
 
-  const { question, queryResults, isQuestionLoading } =
-    useInteractiveQuestionContext();
+  const {
+    question,
+    queryResults,
+    isQuestionLoading,
+    isSaveEnabled,
+    originalQuestion,
+    onCreate,
+    onSave,
+  } = useInteractiveQuestionContext();
 
   const [isChartSelectorOpen, { toggle: toggleChartTypeSelector }] =
     useDisclosure(false);
 
+  const [isSaveModalOpen, { open: openSaveModal, close: closeSaveModal }] =
+    useDisclosure(false);
+
   if (isQuestionLoading) {
     return <SdkLoader />;
   }
@@ -104,6 +115,9 @@ export const InteractiveQuestionResult = ({
               )
             }
           />
+          {isSaveEnabled && !isSaveModalOpen && (
+            <InteractiveQuestion.SaveButton onClick={openSaveModal} />
+          )}
         </Group>
       </Group>
 
@@ -147,6 +161,19 @@ export const InteractiveQuestionResult = ({
           />
         </Box>
       </Box>
+
+      {/* Refer to the SaveQuestionProvider for context on why we have to do it like this */}
+      {isSaveModalOpen && question && (
+        <SaveQuestionModal
+          question={question}
+          originalQuestion={originalQuestion ?? null}
+          opened
+          closeOnSuccess
+          onClose={closeSaveModal}
+          onCreate={onCreate}
+          onSave={onSave}
+        />
+      )}
     </FlexibleSizeComponent>
   );
 };

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

@@ -29,5 +29,6 @@ export const Default = {
 
   args: {
     questionId: QUESTION_ID,
+    isSaveEnabled: true,
   },
 };

frontend/src/metabase/containers/SaveQuestionModal/SaveQuestionModal.tsx

@@ -20,7 +20,13 @@ export const SaveQuestionModal = ({
   <SaveQuestionProvider
     question={question}
     originalQuestion={originalQuestion}
-    onCreate={onCreate}
+    onCreate={async question => {
+      await onCreate(question);
+
+      if (closeOnSuccess) {
+        modalProps.onClose();
+      }
+    }}
     onSave={onSave}
     multiStep={multiStep}
     initialCollectionId={initialCollectionId}