Make notebook props explicit (#44529)

Co-authored-by: Nicolò Pretto <info@npretto.com>

frontend/src/metabase/query_builder/components/notebook/Notebook.tsx

 import { t } from "ttag";
-import _ from "underscore";
 
-import Questions from "metabase/entities/questions";
 import { useDispatch } from "metabase/lib/redux";
 import { setUIControls } from "metabase/query_builder/actions";
 import { Box, Button } from "metabase/ui";
 import * as Lib from "metabase-lib";
 import type Question from "metabase-lib/v1/Question";
-import {
-  getQuestionIdFromVirtualTableId,
-  isVirtualCardId,
-} from "metabase-lib/v1/metadata/utils/saved-questions";
-import type { State } from "metabase-types/store";
 
 import { NotebookSteps } from "./NotebookSteps";
 
-interface NotebookProps {
-  className?: string;
+export type NotebookProps = {
   question: Question;
   isDirty: boolean;
   isRunnable: boolean;
@@ -27,19 +19,20 @@ interface NotebookProps {
   runQuestionQuery: () => void;
   setQueryBuilderMode: (mode: string) => void;
   readOnly?: boolean;
-}
-
-const Notebook = ({ className, updateQuestion, ...props }: NotebookProps) => {
-  const {
-    question,
-    isDirty,
-    isRunnable,
-    isResultDirty,
-    hasVisualizeButton = true,
-    runQuestionQuery,
-    setQueryBuilderMode,
-  } = props;
+};
 
+const Notebook = ({
+  updateQuestion,
+  reportTimezone,
+  readOnly,
+  question,
+  isDirty,
+  isRunnable,
+  isResultDirty,
+  hasVisualizeButton = true,
+  runQuestionQuery,
+  setQueryBuilderMode,
+}: NotebookProps) => {
   const dispatch = useDispatch();
 
   async function cleanupQuestion() {
@@ -76,7 +69,12 @@ const Notebook = ({ className, updateQuestion, ...props }: NotebookProps) => {
 
   return (
     <Box pos="relative" p={{ base: "1rem", sm: "2rem" }}>
-      <NotebookSteps updateQuestion={handleUpdateQuestion} {...props} />
+      <NotebookSteps
+        updateQuestion={handleUpdateQuestion}
+        question={question}
+        reportTimezone={reportTimezone}
+        readOnly={readOnly}
+      />
       {hasVisualizeButton && isRunnable && (
         <Button variant="filled" style={{ minWidth: 220 }} onClick={visualize}>
           {t`Visualize`}
@@ -86,27 +84,5 @@ const Notebook = ({ className, updateQuestion, ...props }: NotebookProps) => {
   );
 };
 
-function getSourceQuestionId(question: Question) {
-  const query = question.query();
-  const { isNative } = Lib.queryDisplayInfo(query);
-
-  if (!isNative) {
-    const sourceTableId = Lib.sourceTableOrCardId(query);
-
-    if (isVirtualCardId(sourceTableId)) {
-      return getQuestionIdFromVirtualTableId(sourceTableId);
-    }
-  }
-
-  return undefined;
-}
-
 // eslint-disable-next-line import/no-default-export -- deprecated usage
-export default _.compose(
-  Questions.load({
-    id: (state: State, { question }: NotebookProps) =>
-      getSourceQuestionId(question),
-    entityAlias: "sourceQuestion",
-    loadingAndErrorWrapper: false,
-  }),
-)(Notebook);
+export default Notebook;

frontend/src/metabase/query_builder/components/view/View.jsx

@@ -373,6 +373,15 @@ class View extends Component {
       onConfirmToast,
       isShowingToaster,
       isHeaderVisible,
+      updateQuestion,
+      reportTimezone,
+      readOnly,
+      isDirty,
+      isRunnable,
+      isResultDirty,
+      hasVisualizeButton,
+      runQuestionQuery,
+      setQueryBuilderMode,
     } = this.props;
 
     // if we don't have a question at all or no databases then we are initializing, so keep it simple
@@ -417,7 +426,16 @@ class View extends Component {
             {!isNative && (
               <NotebookContainer
                 isOpen={isNotebookContainerOpen}
-                {...this.props}
+                updateQuestion={updateQuestion}
+                reportTimezone={reportTimezone}
+                readOnly={readOnly}
+                question={question}
+                isDirty={isDirty}
+                isRunnable={isRunnable}
+                isResultDirty={isResultDirty}
+                hasVisualizeButton={hasVisualizeButton}
+                runQuestionQuery={runQuestionQuery}
+                setQueryBuilderMode={setQueryBuilderMode}
               />
             )}
             <ViewSidebar side="left" isOpen={!!leftSidebar}>

frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx

@@ -9,7 +9,9 @@ import {
   setNotebookNativePreviewSidebarWidth,
   setUIControls,
 } from "metabase/query_builder/actions";
-import Notebook from "metabase/query_builder/components/notebook/Notebook";
+import Notebook, {
+  type NotebookProps,
+} from "metabase/query_builder/components/notebook/Notebook";
 import { NotebookNativePreview } from "metabase/query_builder/components/notebook/NotebookNativePreview";
 import { getUiControls } from "metabase/query_builder/selectors";
 import { Flex, Box, rem } from "metabase/ui";
@@ -18,13 +20,22 @@ import { Flex, Box, rem } from "metabase/ui";
 // because we need to trigger the 'onTransitionEnd' in the component
 const delayBeforeNotRenderingNotebook = 10;
 
-interface NotebookContainerProps {
+type NotebookContainerProps = {
   isOpen: boolean;
-}
+} & NotebookProps;
 
 export const NotebookContainer = ({
   isOpen,
-  ...props
+  updateQuestion,
+  reportTimezone,
+  readOnly,
+  question,
+  isDirty,
+  isRunnable,
+  isResultDirty,
+  hasVisualizeButton,
+  runQuestionQuery,
+  setQueryBuilderMode,
 }: NotebookContainerProps) => {
   const [shouldShowNotebook, setShouldShowNotebook] = useState(isOpen);
   const { width: windowWidth } = useWindowSize();
@@ -65,7 +76,9 @@ export const NotebookContainer = ({
 
   const Handle = forwardRef<
     HTMLDivElement,
-    Partial<ResizableBoxProps> & { onResize?: any } //Mantine and react-resizeable have different opinions on what onResize should be
+    Partial<ResizableBoxProps> & {
+      onResize?: any; //Mantine and react-resizeable have different opinions on what onResize should be
+    }
   >(function Handle(props, ref) {
     const handleWidth = 10;
     const borderWidth = 1;
@@ -109,7 +122,18 @@ export const NotebookContainer = ({
           miw={{ lg: minNotebookWidth }}
           style={{ flex: 1, overflowY: "auto" }}
         >
-          <Notebook {...props} />
+          <Notebook
+            question={question}
+            isDirty={isDirty}
+            isRunnable={isRunnable}
+            isResultDirty={isResultDirty}
+            reportTimezone={reportTimezone}
+            readOnly={readOnly}
+            updateQuestion={updateQuestion}
+            runQuestionQuery={runQuestionQuery}
+            setQueryBuilderMode={setQueryBuilderMode}
+            hasVisualizeButton={hasVisualizeButton}
+          />
         </Box>
       )}