fix(sdk): Add location-specific provider for SDK (#46681)

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

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import type { SdkPluginsConfig } from "embedding-sdk";
 
-import { InteractiveQuestionProvider } from "../public/InteractiveQuestion/context";
+import { InteractiveQuestionProviderWithLocation } from "../public/InteractiveQuestion/context";
 
 import { InteractiveQuestionResult } from "./InteractiveQuestionResult";
 
@@ -28,14 +28,14 @@ export const InteractiveAdHocQuestion = ({
   );
 
   return (
-    <InteractiveQuestionProvider
+    <InteractiveQuestionProviderWithLocation
       location={location}
       params={params}
       componentPlugins={plugins}
       onNavigateBack={onNavigateBack}
     >
       <InteractiveQuestionResult height={height} withTitle={withTitle} />
-    </InteractiveQuestionProvider>
+    </InteractiveQuestionProviderWithLocation>
   );
 };
 

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

@@ -18,7 +18,7 @@ import {
   NotebookButton,
   QuestionVisualization,
 } from "./components";
-import { InteractiveQuestionProvider } from "./context";
+import { InteractiveQuestionProviderWithLocation } from "./context";
 
 type InteractiveQuestionProps = PropsWithChildren<{
   questionId: CardId;
@@ -44,7 +44,7 @@ export const _InteractiveQuestion = ({
   );
 
   return (
-    <InteractiveQuestionProvider
+    <InteractiveQuestionProviderWithLocation
       location={location}
       params={params}
       componentPlugins={plugins}
@@ -57,7 +57,7 @@ export const _InteractiveQuestion = ({
           withTitle={withTitle}
         />
       )}
-    </InteractiveQuestionProvider>
+    </InteractiveQuestionProviderWithLocation>
   );
 };
 

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

@@ -45,8 +45,9 @@ type InteractiveQuestionProviderProps = PropsWithChildren<
 >;
 
 export const InteractiveQuestionProvider = ({
-  location,
-  params,
+  cardId,
+  options,
+  deserializedCard,
   componentPlugins,
   onReset,
   onNavigateBack,
@@ -62,7 +63,11 @@ export const InteractiveQuestionProvider = ({
     loadQuestion,
     onQuestionChange,
     onNavigateToNewCard,
-  } = useLoadQuestion({ location, params });
+  } = useLoadQuestion({
+    cardId,
+    options,
+    deserializedCard,
+  });
 
   const globalPlugins = useSdkSelector(getPlugins);
   const plugins = componentPlugins || globalPlugins;

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

+import type { LocationDescriptorObject } from "history";
+import type { PropsWithChildren } from "react";
+
+import type { SdkPluginsConfig } from "embedding-sdk";
+import * as Urls from "metabase/lib/urls";
+import type { QueryParams } from "metabase/query_builder/actions";
+import { deserializeCard, parseHash } from "metabase/query_builder/actions";
+
+import { InteractiveQuestionProvider } from "./InteractiveQuestionProvider";
+
+type InteractiveQuestionProviderProps = PropsWithChildren<{
+  location: LocationDescriptorObject;
+  params: QueryParams;
+  componentPlugins?: SdkPluginsConfig;
+  onReset?: () => void;
+  onNavigateBack?: () => void;
+}>;
+
+export const InteractiveQuestionProviderWithLocation = ({
+  location,
+  params,
+  ...props
+}: InteractiveQuestionProviderProps) => {
+  const cardId = Urls.extractEntityId(params.slug);
+  const { options, serializedCard } = parseHash(location.hash);
+  const deserializedCard = serializedCard && deserializeCard(serializedCard);
+
+  return (
+    <InteractiveQuestionProvider
+      cardId={cardId}
+      options={options}
+      deserializedCard={deserializedCard}
+      {...props}
+    />
+  );
+};

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/context/index.ts

+export * from "./InteractiveQuestionProvider";
+export * from "./InteractiveQuestionProviderWithLocation";

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

@@ -28,8 +28,9 @@ export interface LoadQuestionHookResult {
 }
 
 export function useLoadQuestion({
-  location,
-  params,
+  cardId,
+  options,
+  deserializedCard,
 }: LoadSdkQuestionParams): LoadQuestionHookResult {
   const dispatch = useDispatch();
 
@@ -56,8 +57,9 @@ export function useLoadQuestion({
   const [loadQuestionState, loadQuestion] = useAsyncFn(async () => {
     const result = await dispatch(
       runQuestionOnLoadSdk({
-        location,
-        params,
+        options,
+        deserializedCard,
+        cardId,
         cancelDeferred: deferred(),
       }),
     );
@@ -65,7 +67,7 @@ export function useLoadQuestion({
     setQuestionResult(result);
 
     return result;
-  }, [dispatch, location, params]);
+  }, [dispatch, options, deserializedCard, cardId]);
 
   const { originalQuestion } = loadQuestionState.value ?? {};
 

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

@@ -2,12 +2,7 @@ import type {
   LoadSdkQuestionParams,
   SdkQuestionResult,
 } from "embedding-sdk/types/question";
-import * as Urls from "metabase/lib/urls";
-import {
-  deserializeCard,
-  parseHash,
-  resolveCards,
-} from "metabase/query_builder/actions";
+import { resolveCards } from "metabase/query_builder/actions";
 import { loadMetadataForCard } from "metabase/questions/actions";
 import { getMetadata } from "metabase/selectors/metadata";
 import Question from "metabase-lib/v1/Question";
@@ -16,20 +11,22 @@ import type { Dispatch, GetState } from "metabase-types/store";
 import { runQuestionQuerySdk } from "./run-question-query";
 
 export const runQuestionOnLoadSdk =
-  ({ location, params, cancelDeferred }: LoadSdkQuestionParams) =>
+  ({
+    options,
+    deserializedCard,
+    cardId,
+    cancelDeferred,
+  }: LoadSdkQuestionParams) =>
   async (
     dispatch: Dispatch,
     getState: GetState,
   ): Promise<SdkQuestionResult & { originalQuestion?: Question }> => {
-    const cardId = Urls.extractEntityId(params.slug);
-    const { options, serializedCard } = parseHash(location.hash);
-
     const { card, originalCard } = await resolveCards({
       cardId,
       options,
       dispatch,
       getState,
-      deserializedCard: serializedCard && deserializeCard(serializedCard),
+      deserializedCard,
     });
 
     await dispatch(loadMetadataForCard(card));

enterprise/frontend/src/embedding-sdk/types/question.ts

-import type { LocationDescriptorObject } from "history";
-
 import type { Deferred } from "metabase/lib/promise";
 import type { QueryParams } from "metabase/query_builder/actions";
 import type { ObjectId } from "metabase/visualizations/components/ObjectDetail/types";
 import type Question from "metabase-lib/v1/Question";
-import type { Card } from "metabase-types/api";
+import type { Card, CardId } from "metabase-types/api";
 
 export interface SdkQuestionResult {
   question?: Question;
@@ -12,8 +10,9 @@ export interface SdkQuestionResult {
 }
 
 export interface LoadSdkQuestionParams {
-  location: LocationDescriptorObject;
-  params: QueryParams;
+  options: QueryParams;
+  deserializedCard?: Card;
+  cardId?: CardId;
   cancelDeferred?: Deferred;
 }