fix(sdk): Convert components in `InteractiveQuestion` to context-aware components (#44738)

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

@@ -32,7 +32,6 @@ export const InteractiveAdHocQuestion = ({
       location={location}
       params={params}
       componentPlugins={plugins}
-      onReset={onNavigateBack}
       onNavigateBack={onNavigateBack}
       withTitle={withTitle}
       withResetButton={true}

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

 import cx from "classnames";
+import type { ReactElement } from "react";
 import { t } from "ttag";
 
 import {
   SdkError,
   SdkLoader,
 } from "embedding-sdk/components/private/PublicComponentWrapper";
-import { QuestionTitle } from "embedding-sdk/components/private/QuestionTitle";
-import { ResetButton } from "embedding-sdk/components/private/ResetButton";
+import {
+  BackButton,
+  FilterBar,
+  QuestionResetButton,
+  Title,
+} from "embedding-sdk/components/public/InteractiveQuestion";
 import {
   useInteractiveQuestionContext,
   useInteractiveQuestionData,
 } from "embedding-sdk/components/public/InteractiveQuestion/context";
 import CS from "metabase/css/core/index.css";
-import { useDispatch } from "metabase/lib/redux";
-import {
-  navigateToNewCardInsideQB,
-  updateQuestion,
-} from "metabase/query_builder/actions";
-import QueryVisualization from "metabase/query_builder/components/QueryVisualization";
-import { ViewHeaderContainer } from "metabase/query_builder/components/view/ViewHeader/ViewTitleHeader.styled";
-import {
-  QuestionFiltersHeader,
-  DashboardBackButton,
-} from "metabase/query_builder/components/view/ViewHeader/components";
-import { Box, Group, Stack } from "metabase/ui";
+import { Box, Flex, Group, Stack } from "metabase/ui";
+
+import { QuestionVisualization } from "../public/InteractiveQuestion/components";
 
 interface InteractiveQuestionResultProps {
   height?: string | number;
@@ -31,28 +27,11 @@ interface InteractiveQuestionResultProps {
 
 export const InteractiveQuestionResult = ({
   height,
-}: InteractiveQuestionResultProps): React.ReactElement => {
-  const dispatch = useDispatch();
+}: InteractiveQuestionResultProps): ReactElement => {
+  const { isQuestionLoading } = useInteractiveQuestionContext();
 
-  const {
-    isQuestionLoading,
-    mode,
-    onReset,
-    onNavigateBack,
-    withResetButton,
-    withTitle,
-    customTitle,
-  } = useInteractiveQuestionContext();
-
-  const {
-    card,
-    defaultHeight,
-    isQueryRunning,
-    queryResults,
-    question,
-    result,
-    uiControls,
-  } = useInteractiveQuestionData();
+  const { defaultHeight, isQueryRunning, queryResults, question } =
+    useInteractiveQuestionData();
 
   if (isQuestionLoading || isQueryRunning) {
     return <SdkLoader />;
@@ -69,45 +48,15 @@ export const InteractiveQuestionResult = ({
       bg="var(--mb-color-bg-question)"
     >
       <Stack h="100%">
-        <ViewHeaderContainer data-testid="qb-header" isNavBarOpen={false}>
-          {onNavigateBack && (
-            <DashboardBackButton noLink onClick={onNavigateBack} />
-          )}
-
-          {withTitle && (customTitle || <QuestionTitle question={question} />)}
-
-          {withResetButton && onReset && <ResetButton onClick={onReset} />}
-        </ViewHeaderContainer>
-
-        {QuestionFiltersHeader.shouldRender({
-          question,
-          queryBuilderMode: uiControls.queryBuilderMode,
-          isObjectDetail: false,
-        }) && (
-          <QuestionFiltersHeader
-            expanded
-            question={question}
-            updateQuestion={(...args) => dispatch(updateQuestion(...args))}
-          />
-        )}
+        <Flex direction="row" gap="md" px="md" align="center">
+          <BackButton />
+          <Title />
+          <QuestionResetButton />
+        </Flex>
 
+        <FilterBar />
         <Group h="100%" pos="relative" align="flex-start">
-          <QueryVisualization
-            className={cx(CS.flexFull, CS.fullWidth, CS.fullHeight)}
-            question={question}
-            rawSeries={[{ card, data: result && result.data }]}
-            isRunning={isQueryRunning}
-            isObjectDetail={false}
-            isResultDirty={false}
-            isNativeEditorOpen={false}
-            result={result}
-            noHeader
-            mode={mode}
-            navigateToNewCardInsideQB={(props: any) => {
-              dispatch(navigateToNewCardInsideQB(props));
-            }}
-            onNavigateBack={onNavigateBack}
-          />
+          <QuestionVisualization />
         </Group>
       </Stack>
     </Box>

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

+import { useInteractiveQuestionContext } from "embedding-sdk/components/public/InteractiveQuestion/context";
+import { DashboardBackButton } from "metabase/query_builder/components/view/ViewHeader/components";
+
+export const BackButton = () => {
+  const { onNavigateBack } = useInteractiveQuestionContext();
+
+  return (
+    onNavigateBack && <DashboardBackButton noLink onClick={onNavigateBack} />
+  );
+};

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

+import { useInteractiveQuestionData } from "embedding-sdk/components/public/InteractiveQuestion/context";
+import { useDispatch } from "metabase/lib/redux";
+import { updateQuestion } from "metabase/query_builder/actions";
+import { QuestionFiltersHeader } from "metabase/query_builder/components/view/ViewHeader/components";
+
+export const FilterBar = () => {
+  const dispatch = useDispatch();
+
+  const { question, uiControls } = useInteractiveQuestionData();
+
+  const shouldRender =
+    question &&
+    QuestionFiltersHeader.shouldRender({
+      question,
+      queryBuilderMode: uiControls.queryBuilderMode,
+      isObjectDetail: false,
+    });
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <QuestionFiltersHeader
+      expanded
+      question={question}
+      updateQuestion={(...args) => dispatch(updateQuestion(...args))}
+    />
+  );
+};

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

+import { ResetButton } from "embedding-sdk/components/private/ResetButton";
+import {
+  useInteractiveQuestionContext,
+  useInteractiveQuestionData,
+} from "embedding-sdk/components/public/InteractiveQuestion/context";
+
+export const QuestionResetButton = () => {
+  const { onReset, withResetButton } = useInteractiveQuestionContext();
+  const { hasQuestionChanges } = useInteractiveQuestionData();
+
+  return (
+    withResetButton &&
+    hasQuestionChanges &&
+    onReset && <ResetButton onClick={onReset} />
+  );
+};

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

+import { QuestionTitle } from "embedding-sdk/components/private/QuestionTitle";
+import {
+  useInteractiveQuestionContext,
+  useInteractiveQuestionData,
+} from "embedding-sdk/components/public/InteractiveQuestion/context";
+
+export const Title = () => {
+  const { question } = useInteractiveQuestionData();
+  const { customTitle, withTitle } = useInteractiveQuestionContext();
+
+  return (
+    withTitle &&
+    (customTitle || (question && <QuestionTitle question={question} />))
+  );
+};

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

+import cx from "classnames";
+
+import {
+  useInteractiveQuestionContext,
+  useInteractiveQuestionData,
+} from "embedding-sdk/components/public/InteractiveQuestion/context";
+import CS from "metabase/css/core/index.css";
+import { useDispatch } from "metabase/lib/redux";
+import { navigateToNewCardInsideQB } from "metabase/query_builder/actions";
+import QueryVisualization from "metabase/query_builder/components/QueryVisualization";
+
+export const QuestionVisualization = () => {
+  const dispatch = useDispatch();
+
+  const { card, isQueryRunning, question, result } =
+    useInteractiveQuestionData();
+
+  const { mode, onNavigateBack } = useInteractiveQuestionContext();
+
+  return (
+    <QueryVisualization
+      className={cx(CS.flexFull, CS.fullWidth, CS.fullHeight)}
+      question={question}
+      rawSeries={[{ card, data: result && result.data }]}
+      isRunning={isQueryRunning}
+      isObjectDetail={false}
+      isResultDirty={false}
+      isNativeEditorOpen={false}
+      result={result}
+      noHeader
+      mode={mode}
+      navigateToNewCardInsideQB={(props: any) => {
+        dispatch(navigateToNewCardInsideQB(props));
+      }}
+      onNavigateBack={onNavigateBack}
+    />
+  );
+};

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

+export * from "./Visualization";
+export * from "./BackButton";
+export * from "./FilterBar";
+export * from "./ResetButton";
+export * from "./Title";

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

 export * from "./InteractiveQuestion";
+export * from "./components";